Previewing Themes with Adaptive Designs in the Customizer

Authored by

In WordPress 4.5 the customizer introduced device preview buttons for resizing the window to see what the theme looks like in desktop, tablet, and mobile (see #31195):
Customizer Device Preview Buttons

This feature is specifically intended for themes that implement responsive web design (RWD) that applies the device-specific layouts via CSS media queries. Most themes should take this RWD approach, but there are situations where varying the response by requesting device is required. For example, an entire sidebar may need to be omitted from mobile responses. Such themes that implement a non-responsive design are taking an adaptive design approach where content negotiation is used to serve different content for different user agents. This also applies when a theme uses the hybrid technique known as β€œRESS” (responsive web design with server-side components).

Today a new WordPress plugin has been released which allows adaptive themes to also make use of device previewing in the customizer, the succinctly-named Customizer Responsive Server-Side Components Device Preview.

This plugin extends the responsive device preview functionality already in the customizer. As noted above, in core when you change the previewed device it merely changes the dimensions of the preview, allowing you to simulate how the theme will appear on tablet or mobile screens. This plugin extends the window resizing to also inject a customize_previewed_device query parameter into the current URL being previewed. By injecting this query parameter into the previewed URL when the previewed device changes, the preview window will also refresh with that new query parameter being present.

The customize_previewed_device query parameter will be either desktop, tablet, or mobile (or something custom that may have been supplied by the customize_previewable_devices filter). With that query parameter present, the plugin will override the $_SERVER['HTTP_USER_AGENT'] to be a user agent representative of the supplied device type so that calls to wp_is_mobile(), jetpack_is_mobile(), and Jetpack_User_Agent_Info::is_tablet() will all return the expected values based on the current previewed device.

While this plugin may not be relevant to the great majority of WordPress sites which should implement fully responsive designs, this plugin also serves as a demonstration for how to extend the customizer to inject additional state query parameters into the URL being previewed. You can browse the source on GitHub.

Leave a Reply

Your email address will not be published. Required fields are marked *