Creating Custom WordPress Themes

Overview

Collection of information about customizing WordPress themes to suit individual sites.

Workflow

• Create a working template of the site framework.
  • Create a single file containing the site headers, body, and footer based on the client's design.
  • The document headers and page framework from this template file will ultimately be copied into the WordPress theme header and footer documents.
• Make a copy of the latest default WordPress theme.
  • /[WP_ROOT]/wp-content/themes/twentytwelve/ > /[WP_ROOT]/wp-content/themes/[SITE_THEME_SLUG]/

Accommodating tablets and mobile devices

WordPress v3.5.x comes with a default theme named "Twenty Twelve". The layout for desktop vs. mobile is defined within that theme's stylesheet.

The strategy is to first define the layout for the narrowest viewport (i.e. mobile devices), then create definitions for subsequently wider viewports (tablets, then desktop) which will override the default layout if the current device matches these wider viewport properties.

• At the bottom of the theme's stylesheet ([THEME_PATH]/style.css) add the necessary definitions to override the original "Twenty Twelve" layout. This includes styles that apply across all devices, and the definitions that apply only to mobile devices.
• Following that, set any definitions that should start to apply once looking at the site on tablets:

/* tablet */
@media screen and (min-width: 768px) { 
	/* override necessary desktop definitions here */
	/* iPad2 screen resolution is 1024x768 pixels */
}

• Following that, create a definition for desktop browsers:

/* tablet */
@media screen and (min-width: 800px) { 
	/* the width here is somewhat arbitrary; whatever width is a appropriate to accommodate the "widest" possible layout */
}

Miscellaneous

Modifying the version number after the default stylesheet

• [THEME_PATH]/functions.php > function twentytwelve_scripts_styles()

wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri());
/* becomes */
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri(), null, '20130209' );