JHTechServices
Genesis

Creating a Theme with Genesis and WordPress

· 4 min read

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_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
}
← Back to Blog