managing themes and server environments with extensible configuration arrays

Managing themes and server environments

with extensible configuration arrays

Chris Olbekson@chris_olbekson @X_Team

Managing EnvironmentsMaking your code aware

wp-config.php

The Environment Config Class

class WPized_Env_Config {

1. Get defined environment from active-env and assign to $active_env

2. Load default.env

The Environment Config Class

class WPized_Env_Config {

1. Get defined environment from active-env and assign to $active_env

2. Load default.env

3. Load defined environment (each environment checks for an override)

a. local.env.php

b. vagrant.env.php

c. staging.env.php

d. production.env.php

The Environment Config Class

class WPized_Env_Config {

1. Get defined environment from active-env and assign to $active_env

2. Load default.env

3. Load defined environment (each environment checks for an override)

a. local.env.php

b. vagrant.env.php

c. staging.env.php

d. production.env.php

4. Recursively merge the loaded environment configuration array with the default

The Environment Config Class

static function merge_arrays( array $array ) {return call_user_func_array(

array( 'WPized_Theme_Config','recursive_array_merge_assoc'),func_get_args());

}

continue loading WordPress.

/** Sets up WordPress vars and included files */require_once(ABSPATH, 'wp-settings.php');

Component LibrariesKeeping a common codebase

Components generic enough to be used in any WordPress project.

● Redirection● oEmbeds● Post/Taxonomy Ordering

Components used specifically in WordPress projects for specific client.

● Ad Utility● Event Post Type● Social Panel Widget

Components are housed in multiple libraries

WPized Base

Client Name

Common

ComponentsLet's make 'em configurable!

1. Default configs can be defined in the component's setup() method.

2. Since theme configs can override these defaults we can use the same

component code for any project!

3. "Mixin" themes are now possible (like child theme groups) which can be

very useful on large multisite installs.

4. Child themes are the final authority.

The merge order of configs

#4Child Theme

config.php

#3Mixin Theme

config.php

#2Parent Theme

config.php

#1Component(defaults)foo.php

Load a component in functions.php

Path shortcut to the library we'll be using for this example.

define( 'WPIZED_BASE_LIB', WP_CONTENT_DIR . '/includes/wpized_base' );

function foo_load_config {

require_once( WPIZED_BASE_LIB . '/theme_config.php' );

// Custom logo

if ( WPized_Theme_Config::defined( 'custom_logo' ) ) {

require_once( WPIZED_BASE_LIB . '/custom-logo.php' );

WPized_Custom_Logo::setup( WPized_Theme_Config::get( 'custom_logo' ) );

}

}

add_action( 'after_setup_theme', 'foo_load_config' );

Load a component in functions.php

The component will load when the theme is initialized.

define( 'WPIZED_BASE_LIB', WP_CONTENT_DIR . '/includes/wpized_base' );

function foo_load_config {

require_once( WPIZED_BASE_LIB . '/theme_config.php' );

// Custom logo

if ( WPized_Theme_Config::defined( 'custom_logo' ) ) {

require_once( WPIZED_BASE_LIB . '/custom-logo.php' );

WPized_Custom_Logo::setup( WPized_Theme_Config::get( 'custom_logo' ) );

}

}

add_action( 'after_setup_theme', 'foo_load_config' );

Load a component in functions.php

Allows us to use some methods for fetching and merging configs.

define( 'WPIZED_BASE_LIB', WP_CONTENT_DIR . '/includes/wpized_base' );

function foo_load_config {

require_once( WPIZED_BASE_LIB . '/theme_config.php' );

// Custom logo

if ( WPized_Theme_Config::defined( 'custom_logo' ) ) {

require_once( WPIZED_BASE_LIB . '/custom-logo.php' );

WPized_Custom_Logo::setup( WPized_Theme_Config::get( 'custom_logo' ) );

}

}

add_action( 'after_setup_theme', 'foo_load_config' );

Load a component in functions.php

If there's no config key provided for the component, it never runs.

define( 'WPIZED_BASE_LIB', WP_CONTENT_DIR . '/includes/wpized_base' );

function foo_load_config {

require_once( WPIZED_BASE_LIB . '/theme_config.php' );

// Custom logo

if ( WPized_Theme_Config::defined( 'custom_logo' ) ) {

require_once( WPIZED_BASE_LIB . '/custom-logo.php' );

WPized_Custom_Logo::setup( WPized_Theme_Config::get( 'custom_logo' ) );

}

}

add_action( 'after_setup_theme', 'foo_load_config' );

Theme's config.php

We have a key! So this component will be loaded.

return array(

'brightcove_oembed' => array(

'players' => array( ... ),

),

'custom_logo' => array(

'default' => get_stylesheet_directory_uri() . '/images/common/logo.png',

'width' => 300,

'height' => 100,

),

'ads' => array(

'site' => 'example.com/foo',

),

);

The simple concept

We can setup the component differently on a site-by-site basis!

Theme Configs

setup( )in component's

class

Parent > Mixin > Child

Default config values

Load a component in functions.php

The config gets passed to component's setup() method.

define( 'WPIZED_BASE_LIB', WP_CONTENT_DIR . '/includes/wpized_base' );

function foo_load_config {

require_once( WPIZED_BASE_LIB . '/theme_config.php' );

// Custom logo

if ( WPized_Theme_Config::defined( 'custom_logo' ) ) {

require_once( WPIZED_BASE_LIB . '/custom-logo.php' );

WPized_Custom_Logo::setup( WPized_Theme_Config::get( 'custom_logo' ) );

}

}

add_action( 'after_setup_theme', 'foo_load_config' );

class WPized_Custom_Logo {

public static $options = array();

public static function setup( $overrides = array() ) {

self::$options = WPized_Theme_Config::recursive_array_merge_assoc(

array(

'default' => null,

'width' => 250,

'height' => 100,

),

$overrides

);

}

}

echo esc_html( WPized_Custom_Logo::$options['width'] ); // 300

Custom logo component

class WPized_Custom_Logo {

public static $options = array();

public static function setup( $really_default_defaults = array()) {

self::$options = WPized_Theme_Config::recursive_array_merge_assoc(

array(

'default' => null,

'width' => 250,

'height' => 100,

),

$really_default_defaults

);

}

}

echo esc_html( WPized_Custom_Logo::$options['width'] ); // 300

Custom logo component

class WPized_Custom_Logo {

public static $options = array();

public static function setup( $really_default_defaults = array() ) {

self::$options = WPized_Theme_Config::recursive_array_merge_assoc(

array(

'default' => null,

'width' => 250,

'height' => 100,

),

$really_default_defaults

);

}

}

echo esc_html( WPized_Custom_Logo::$options['width'] ); // 300

Custom logo component

class WPized_Custom_Logo {

public static $options = array();

public static function setup( $really_default_defaults = array() ) {

self::$options = WPized_Theme_Config::recursive_array_merge_assoc(

array(

'default' => null,

'width' => 250,

'height' => 100,

),

$really_default_defaults

);

}

}

echo esc_html( WPized_Custom_Logo::$options['width'] ); // 300

Custom logo component

class WPized_Custom_Logo {

public static $options = array();

public static function setup( $really_default_defaults = array() ) {

self::$options = WPized_Theme_Config::recursive_array_merge_assoc(

array(

'default' => null,

'width' => 250,

'height' => 100,

),

$really_default_defaults

);

}

}

echo esc_html( WPized_Custom_Logo::$options['width'] ); // 300

Custom logo component

class WPized_Custom_Logo {

public static $options = array();

public static function setup( $really_default_defaults = array() ) {

self::$options = WPized_Theme_Config::recursive_array_merge_assoc(

array(

'default' => null,

'width' => 250,

'height' => 100,

),

$really_default_defaults

);

}

}

echo esc_html( WPized_Custom_Logo::$options['width'] ); // 300

Custom logo component

Thank you!