Skip to content

Theme Setup

alex_prokopenko edited this page Jan 17, 2018 · 10 revisions

Theme setup starts with the creation of an instance of {Vendor}\Theme\Theme class defined inside app/Theme.php file (instance is created inside theme functions.php file).

Your class should extend from \JustCoded\WP\Framework\Theme class!

functions.php

<?php
    // ... other code

    // create theme instance
    $theme    = \Boilerplate\Theme\Theme::instance();

app/Theme.php

<?php
namespace Boilerplate\Theme;

/**
 * Theme main entry point
 *
 * Theme setup functions, assets, post types, taxonomy declarations
 */
class Theme extends \JustCoded\WP\Framework\Theme {
	// ...
}

\JustCoded\WP\Framework\Theme base class has a lot of properties and methods, which already have some registered hooks and extending WordPress functionality.

You will need to create a register_assets() method inside your Theme class. This method registers styles and scripts to be included in wp_head() or wp_footer(). After that, you can re-write some base properties or methods to re-configure your theme or add new features as needed.

Below you can find a full list of properties and methods available in \JustCoded\WP\Framework\Theme.

Class Properties

Property Type Default Description
$version float 1.0 Theme version number
$auto_title boolean true Let WordPress manage the document title. Enables add_theme_support('title-tag');.
$post_thumbnails boolean true Enable support for Post Thumbnails on posts and pages.
$upload_mime_types array Add allowed mime types for upload. Add svg by default.
$available_image_sizes array Available image sizes in Media upload dialog to insert correctly resized image. Add standard sizes by default.
$jpeg_quality int 100 JPEG images compression quality value.
$post_formats array Enable support for Post Formats.
$show_admin_bar boolean true Enable/disable admin bar
$html5 array Switch default core markup for search form, comment form, and comments to output valid HTML5.

Methods

Method / Called in Description
__construct Init theme hooks, call feature registration methods. Clean up some unnecessary WordPress stuff.
init_views_templates
construct
Init new Template Hierarchy based on "views" folder and load Views engine.
init
construct
Called right after constructor. You can define/call additional actions here in child class
activate
(a)after_switch_theme
Theme activation hook
deactivate
(a)switch_theme
Theme deactivation hook.
theme_setup
(a)after_setup_theme
Main theme setup callback in WordPress. Register different features based on Property values.
register_assets
(a)wp_enqueue_scripts
You can register your assets here. Have to be defined in child class.
register_assets_css Register array of css files one-by-one (helper method).
register_assets_scripts Register array of javascript files one-by-one (helper method).
register_sidebar
(a)widgets_init
Sidebars have to be defined here.
register_widgets
(a)widgets_init
Widgets have to be defined here.
register_post_types
construct
Post Types should be registered here
register_taxonomies
construct
Taxonomies should be registered here
support_plugins
construct
Init class instances for custom features provided by 3d-party plugins.
filter_jpeg_quality
(f)jpeg_quality
Filter JPEG image quality compression to prevent image quality loss.
add_upload_mimes
(f)upload_mimes
Apply $upload_mime_types property.
image_size_names_choose
(f)image_size_names_choose
Apply $available_image_sizes property.
remove_base_stylesheet
(a)wp_enqueue_script
Remove default stylesheet from attached theme scripts
remove_assets_query_string
(f)script_loader_src
(f)style_loader_src
Remove query string from static resources (Google recommendations)

(a) is an action hook;
(f) is a filter hook

Theme definition example

<?php
namespace Boilerplate\Theme;

use ... // import full class names to use as short form 

/**
 * Theme main entry point
 *
 * Theme setup functions, assets, post types, taxonomies declarations
 */
class Theme extends \JustCoded\WP\Framework\Theme {
	/**
	 * Enable support for Post Formats.
	 *
	 * Set FALSE to disable post formats
	 *
	 * See https://developer.wordpress.org/themes/functionality/post-formats/
	 *
	 * @var array $post_formats
	 */
	public $post_formats = array(
		'image',
		'video',
	);

	/**
	 * Additional classes initialize
	 */
	public function init() {
		// my custom hooks can be added here
	}

	/**
	 * Main theme setup function.
	 * Called on after_theme_setup action hook
	 */
	public function theme_setup() {
		parent::theme_setup();

		// This theme uses wp_nav_menu() in one location.
		register_nav_menus( array(
			'primary' => esc_html__( 'Primary Menu', 'boilerplate' ),
		) );
	}

	/**
	 * Register theme sidebars
	 *
	 * Called on 'widgets_init'
	 */
	public function register_sidebars() {
		register_sidebar( array(
			'name'          => esc_html__( 'Sidebar', 'boilerplate' ),
			'id'            => 'sidebar-1',
			'description'   => '',
			'before_widget' => '<aside id="%1$s" class="widget %2$s">',
			'after_widget'  => '</aside>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		) );
	}

	/**
	 * Register styles and scripts
	 *
	 * Called on 'wp_enqueue_scripts'
	 */
	public function register_assets() {
		// Stylesheets.
		$this->register_assets_css( array(
			'styles.css',
		) );

		// Scripts.
		$this->register_assets_scripts( array(
			'jquery.main.js',
		), array( 'jquery' ) );

		if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
			wp_enqueue_script( 'comment-reply' );
		}
	}

	/**
	 * Register post types
	 */
	public function register_post_types() {
		Employee::instance();
	}

	/**
	 * Register post types
	 */
	public function register_taxonomies() {
		Department::instance();
	}

	/**
	 * Register custo widgets
	 */
	public function register_widgets() {
		if ( SiteOrigin_Panels::widgets_bundle_active() ) {
			register_widget( '\Boilerplate\Theme\Widgets\Hero_Slider_Widget' );
		}
	}

	/**
	 * Loads hooks for 3d-party plugins.
	 */
	public function support_plugins() {
		Just_Responsive_Images::instance();

		if ( Autoptimize::check_requirements() ) {
			Autoptimize::instance();
		}
		if ( Contact_Form7::check_requirements() ) {
			Contact_Form7::instance();
		}
	}
}

As you can see, a lot of methods register other components from /app folder – post types, taxonomies, widgets, support of 3rd-party plugins (these components extend 3d-party plugins a bit).

Now you understand how Theme Setup and Component registration works so we can move forward to the next big feature of our theme – Views!


Next: Views: Template Hierarchy