Setup

Bootstrapping

Wireframe Theme uses the wireframe.php file as a bootstrapper where most of the setup happens. The wireframe.php file is split up into easy-to-read and well-documented sections:

• § 01. Namespaces
• § 02. Access
• § 03. Constants
• § 04. Functions
• § 05. Objects
• § 06. Container
• § 07. Configs
• § 08. Services
• § 09. Wireframe
• § 10. Housekeeping
• § 11. Hooks

💡 TIP
Wireframe's wireframe.php file can get large. We recommend using code folding in your IDE or Text Editor, then only work on the blocks you need at any given time. In case you're wondering, we use Sublime Text 3 with Seti_UI.

§ 01. Namespaces

Declare your PHP namespaces and any sub-namespace dependencies in all of your class files. In your wireframe.php file, you should also declare any sub-namespace dependencies you need. If you create or extend a class, don't forget to add your namespace dependencies and maybe recompile your autoloader for changes to take effect.

Example of the Wireframe Theme namespace:

namespace MixaTheme\Wireframe\Theme;

💡 TIP
PHP Namespaces requires PHP version 5.3.0 or above. Wireframe Theme is only compatible with PHP 5.6 or above. PHP 7.x is recommended.

💡 TIP
If you need to use another namespace, don't forget to add an alias use MixaTheme\Wireframe\Theme\<sub-namespace>\<Object> declaration within your files.

Top

§ 02. Access

No direct access to this file. Although this is a small line of code, this can get complex, depending on how you wish to perform your access checks. So we decided this deserves it's own section. Also, all files should be pre-screened in one way or another for security purposes.

Example to deny loading a file directly:

defined( 'ABSPATH' ) or die();

§ 03. Constants

In order to re-use URL's, paths, strings, etc. throughout your files, you need to set constants. The constants for Wireframe Theme are declared in your config-constants.php config file, so you need to grab it.

require_once get_template_directory() . '/wireframe_dev/wireframe/config/config-constants.php';

Example of the config-constants.php file:

define( 'WIREFRAME_THEME_PRODUCT', 'Wireframe Theme' );
define( 'WIREFRAME_THEME_TEXTDOMAIN', 'wireframe-theme' );
define( 'WIREFRAME_THEME_VERSION', '1.0.0' );

Top

§ 04. Functions

Some of your template files and objects may use helper functions. You need to grab them so they're available throughout your theme.

Example of the Functions section:

locate_template( WIREFRAME_THEME_API . 'functions/functions-helpers.php', true, true );
locate_template( WIREFRAME_THEME_API . 'functions/functions-template-tags.php', true, true );
locate_template( WIREFRAME_THEME_API . 'functions/functions-admin.php', true, true );
locate_template( WIREFRAME_THEME_API . 'functions/functions-custom-header.php', true, true );
locate_template( WIREFRAME_THEME_API . 'functions/functions-jetpack.php', true, true );
locate_template( WIREFRAME_THEME_API . 'functions/functions-extras.php', true, true );

💡 TIP
You can use require() or require_once() on final parent files. If you wish to allow child theme overloading, you can use the locate_template() function.

Top

§ 05. Objects

You now need to load any class files for your theme. Use require_once() to load your dependencies 1-by-1. This is the default option because some Developers don't use Composer. You can also load classes via Composer's composer.json file. If you prefer autoloading and add new class files, you must re-compile composer.json`. Autoloading is the preferred option for loading your objects.

Example loading class files manually:

require_once WIREFRAME_THEME_OBJECTS . 'core/core-module-abstract.php';
require_once WIREFRAME_THEME_OBJECTS . 'core/core-container-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'core/core-container.php';
require_once WIREFRAME_THEME_OBJECTS . 'core/core-enqueue-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'core/core-enqueue.php';
require_once WIREFRAME_THEME_OBJECTS . 'core/core-language-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'core/core-language.php';
require_once WIREFRAME_THEME_OBJECTS . 'core/core-theme-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'core/core-theme.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/admin/module-admin-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/admin/module-admin.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/customizer/module-customizer-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/customizer/module-customizer.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/editor/module-editor-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/editor/module-editor.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/features/module-features-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/features/module-features.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/navigation/module-navigation-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/navigation/module-navigation.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/notices/module-notices-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/notices/module-notices.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/ui/module-ui-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/ui/module-ui.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/widgets/module-widgets-interface.php';
require_once WIREFRAME_THEME_OBJECTS . 'module/widgets/module-widgets.php';

Example loading class files with Autoloading:

require_once WIREFRAME_THEME_DEV . 'vendor/autoload.php';

💡 TIP
How to re-compile your composer.json file for autoloading: composer dump-autoload -o

Top

§ 06. Container

Wireframe Theme needs to wire objects to the Core_Container $_storage array. You must first declare a variable for your Core_Container object. Then, you can add services later using closure syntax.

Example declaration for your services container:

$wireframe_theme_container = new Core_Container();

Top

§ 07. Configs

Your services objects need data, so you should grab them. You store your data in callable functions which return arrays of data. These functions are individual config files you then pass into your service objects as a parameter.

Example:

locate_template( trailingslashit( 'wireframe_cfg' ) . 'cfg-language.php', true, true );
locate_template( trailingslashit( 'wireframe_cfg' ) . 'cfg-notices.php', true, true );
locate_template( trailingslashit( 'wireframe_cfg' ) . 'cfg-ui.php', true, true );
locate_template( trailingslashit( 'wireframe_cfg' ) . 'cfg-navigation.php', true, true );
locate_template( trailingslashit( 'wireframe_cfg' ) . 'cfg-widgets.php', true, true );
locate_template( trailingslashit( 'wireframe_cfg' ) . 'cfg-features.php', true, true );
locate_template( trailingslashit( 'wireframe_cfg' ) . 'cfg-customizer.php', true, true );
locate_template( trailingslashit( 'wireframe_cfg' ) . 'cfg-editor.php', true, true );
locate_template( trailingslashit( 'wireframe_cfg' ) . 'cfg-admin.php', true, true );

Top

§ 08. Services

Wireframe Theme "services" are closures you register to be added to the (object) Core_Container $_storage array. The Core_Container holds all your services so you can have access to them later. Your Core_Theme object uses these services to instantiate your dependency objects, with config data passed in (as a parameter).

Example of a service with config data passed in:

$wireframe_theme_container->language = function () {
    return new Core_Language( wireframe_theme_cfg_language() );
};

What does this code do?

1. Registers a language service with the Core_Container.
2. Instantiates the Core_Language object.
3. Pass-in config data from wireframe_theme_cfg_language() function.

💡 TIP
Since PHP 5.3 you can use anonymous functions. Wireframe Theme is not compatible with PHP 5.2. PHP 7.x is recommended.

💡 TIP
Since PHP 5.4 you can use array brackets [ ] but Wireframe Theme uses array() downstream to better identify arrays or for search & replace situations.

Top

§ 09. Wireframe

You can now "wire" all your dependencies together (hence, the name, Wireframe) by instantiating your dependencies into the Core_Theme() object. Voila! Happy Dance?

Example of multiple services passed into the Core_Theme object:

$wireframe_theme = new Core_Theme(
    $wireframe_theme_container->language,
    $wireframe_theme_container->notices,
    $wireframe_theme_container->ui,
    $wireframe_theme_container->navigation,
    $wireframe_theme_container->widgets,
    $wireframe_theme_container->features,
    $wireframe_theme_container->customizer,
    $wireframe_theme_container->editor,
    $wireframe_theme_container->admin
);

What does this code do?

1. Instantiates the Core_Theme object.
2. Pass-in services objects as dependencies.

💡 TIP
You might habitually add a comma at the end of array arguments, but do not add a trailing comma on the last parameter of an object.

Top

§ 10. Housekeeping

Check if Wireframe Theme is properly initialized. You can perform any clean-up tasks here, or simply output a warning if $wireframe_theme fails. Your template files now have access to objects beyond this point.

Example error notice hook if initialization fails:

add_action( 'admin_notices', array( $wireframe_theme_container->notices, 'error_init' ), 10, 0 );

Top

§ 11. Hooks

After your objects are initialized, you can target any public object method you need using hooks. You generally do not need to run hooks via the __construct() magic method in your objects, since you can always manually fire hooks like so...

Example of the Wireframe Hooks section with array callable syntax:

add_action( 'after_switch_theme', array( $wireframe_theme_container->notices, 'warn_activated' ), 10, 0 );

Top

💡 TIP
After you get the hang of Wireframe, you'll probably want to condense things. Your custom theme may or may not need all the docblock comments we provided. You may also wish to put all of your includes into a single file, etc. We feel Wireframe Theme can be more condensed to save on file size and file count, but we wanted to start you off with a structure we feel helps you the most!

Top

This Wiki will continue to be updated. Keep checking back!