Editing Creating Custom WordPress Themes (section)

== 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:
<syntaxhighlight lang="css" highlight="2">
/* tablet */
@media screen and (min-width: 768px) { 
	/* override necessary desktop definitions here */
	/* iPad2 screen resolution is 1024x768 pixels */
}
</syntaxhighlight>
* Following that, create a definition for desktop browsers:
<syntaxhighlight lang="css" highlight="2">
/* tablet */
@media screen and (min-width: 800px) { 
	/* the width here is somewhat arbitrary; whatever width is a appropriate to accommodate the "widest" possible layout */
}
</syntaxhighlight>