JH Tech Services

A knowledgebase

Creating a Theme with Genesis and WordPress

by

Going over some professional Genesis child themes to get an idea of what others do in their theme creation. In this entry I’m listing generic items of what I found.

Creating default settings and storing them in database

They define a constant like

define('MRY_SETTINGS_FIELD', 'mry-settings');

Then they create a function (let’s say it’s named mry_default_options) that defines an associative array (ex. $options) with all the default values. In the return they’ll use apply_filters so that one could programmatically change the defaults. Since this is already a child theme, I’m not sure the apply_filters is really necessary, but it’s a cool idea.

function mry_default_options(){
  $options = array(
    mry_logo_height => 60,
    mry_logo_width => 100
    );
return apply_filters( 'mry_default_theme_options', $options );
}

Using the admin_init hook they then add this to the database.

add_action('admin_init', 'mrysettings_register_settings');
function mrysettings_register_settings(){
   add_option(MRY_SETTINGS_FIELD, mry_default_options());
}

Now to access an option in a php file


 $lHeight = genesis_get_option('mry_logo_height', MRY_SETTINGS_FIELD);

Separate code in different files

Looks like for large themes, to manage the code the coders organize the code in different files. They are loaded using require_once() in the functions.php file. For example, they will have an includes folder off the root of the theme. Each widget might go in a separate file. The code above regarding the theme settings would go in the theme_settings.php file.

require_once (  get_stylesheet_directory(  ) . '/include/theme_settings.php'   );

Add theme support using add_theme_support()

Examples of this

Adding different color styles a user can select

add_theme_support(‘genesis-style-selector’, array( ‘blue-class’ => ‘Blue’, ‘red-class’ => ‘Red’)). This will add Blue and Red to the dropdown under Genesis Theme settings. The blue-class and red-class will be added to the page markup so you can code your style.css page with these color schemes. See this link for a good explanation.

Adding HTML5 support

add_theme_support(‘html5’) -> you definitely want to do this.

Add viewport meta tag for for mobile viewing

add_theme_support(‘genesis-responsive-viewport’);

Adding Custom header and custom background

Adding support for post formats

Allows you on the edit post page to select what type of post it is. These are a list of possible values you can provide. These are defined by WordPress and cannot be changed. There are hopes of using post-formats as a way for third-party to use a post more effectively. Some possible values are gallery, link, and quote. See the codex for more.

add_theme_support('post-formats', array('gallery', 'link', 'quote'));
// now the user can select these three different post-formats

In a custom loop you can use the post-formats to call different templates. For example, let’s say the post format is ‘quote’, in a custom loop we can then call get_template_part('format', 'quote'); and it will call the format-quote.php file and run that template.
ex.


// In a custom loop
$post_format = get_post_format();
get_template_part('format', $post_format);

Add support for multicolumn footer widgets

add_theme_support('genesis-footer-widgets', 3);
//now user will have three footer widgets under Dashboard|Appearance|Widgets

Enqueue Fonts and JavaScript scripts

Take out any Genesis layouts they don’t use

Using

genesis_unregister_layout('content-sidebar');

as an example.

Take out any sidebars they don’t plan to use

Using

unregister_sidebar('header-right');

as an example.

Take out secondary navigation menu if not used

Using

add_theme_support( 'genesis-menus', array( 'primary' => __( 'Primary Navigation Menu', 'theme_name_goes_here' ) ) );

Register any widget areas (sidebars)

genesis_register_sidebar( array(
	'id'          => 'my_sidebar',
	'name'        => __( 'My Sidebar', 'theme_name_goes_here' ),
	'description' => __( 'This is My Sidebar widget area.', 'theme_name_goes_here' ),
) );
//Now you can see it in the Dashboard|Appearance|Widgets

//This will place our sidebar (widget area) on the page.  One can use a hook to place anywhere on the page
//One can use conditionals like is_singular or depending on pages layout
genesis_widget_area('my_sidebar', array(
     'before' => '
',
     'after'  => '
' ));

Load any new widgets

Widgets are defined as a PHP class that extends the WP_Widget class. Once the widget is defined, you will need to register your widget by hooking into the widgets_init hook.


add_action('widgets_init', 'mry_register_widgets');
function mry_register_widgets(){
  register_widget('mry_my_widget');
}
//define the widget
class mry_my_widget extends WP_Widget{
//define your widget here - basically four functions to define
}
  • Genesis
  • Knowledgebase