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.

Copy the default theme

• [WP_ROOT]/wp-content/themes/twentytwelve/ > [WP_ROOT]/wp-content/themes/[CLIENT_SITE_NAME]/
• WP Dashboard > Appearance > Themes > Activate the new theme
• Put those theme files in version control.
• Delete the other theme files so they won't cause prompts when new versions are available.

Theme properties

The theme's properties (name, version, author, description) as displayed in the Themes dashboard are defined in [THEME_PATH]/style.css.

• For a custom theme update:
• Theme Name
• Theme URI
• Author
• Author URI
• Description
• Version
• Text Domain

Miscellaneous

• After the new theme's design is finalized, take a screenshot and upload it to [THEME_PATH]/screenshot.png

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' );