Tutorials WordPress

How to Use Device Preview in the WordPress Customizer [VIDEO]


Written by

Dave Warfel

Reading Time

3 minutes

If you buy something from one of our links, we may earn a commission.

The original ticket to preview site responsiveness in the Customizer was opened over a year ago. After quite a bit of discussion, the device preview feature has landed in WordPress 4.5. If you’ve ever used WordPress.com’s admin interface—in particular, the Customizer—you’ll notice a striking resemblance to device preview in the self-hosted version of WordPress.

WordPress Device Preview Focuses on Simplicity

Previewing a responsive WordPress site is nothing new. Most browsers (notably, Chrome & Firefox) have had responsive previewing tools in place for quite some time. It’s a common feature included in most browser’s developer tools. With these examples already out there in the wild, WordPress had a decision to make. Should it mimic the UI of existing tools, or come up with something new?

After many screenshots were shared, icons drawn, and animated workflows presented, WordPress opted to once again stay true to its philosophy of decisions, not options. The WordPress Customizer is used just as much by everyday, non-technical users as it is by developers—arguably, even more so. Elaborate device dropdown menus & customizable screen sizes were dismissed in favor of a simple solution.

Only three options are available by default, and they’re intentionally ambiguous.

Here are a few more things to keep in mind with device preview:

  • The 3 options provide a rough estimate of what your site will look like on various devices (it’s not exact)
  • Device preview in the Customizer only works on larger screens. It will not work when editing a site on your mobile device.

How to Use Device Preview in WordPress 4.5

Step-by-step instructions for previewing your site’s responsiveness using the device preview feature in the WordPress Customizer:

  1. Navigate to Appearance > Customize
  2. Locate the device icons in the bottom-left corner of your screen
  3. Click the icons to toggle between different views

WordPress Device Preview in 4.5

Device Preview Sizes

  • The desktop version will always fill up 100% of your screen
  • The tablet version is set to 720px x 1080px
  • The mobile version is set to 320px x 480px

These are fairly standard sizes for your average tablet & smartphone. WordPress decided to stay generic with the viewport sizes, which I think is smart. The UI gets too crowded, and the average user would get overwhelmed if too many options were presented.

You can also use the “Collapse” link to get a full screen view (without the left side panel). This is helpful if your responsive WordPress theme uses a full-page layout.

RELATED: How to Add Links in WordPress 4.5

WordPress Device Preview Video

Device Preview for Developers

A few things to note for WordPress developers:

  • You can disable device preview using the following filter: add_filter( 'customize_previewable_devices', '__return_empty_array' );
  • You can also add additional device preview buttons

What do you think of the new device preview feature in WordPress 4.5? Did the core team get it right? Is it too simple? Not enough device options? Would love to hear your thoughts in the comments.

Dave Warfel

LinkedIn  •  X (Twitter)
Dave has been working with WordPress since 2011. He's built 100s of client sites and almost a dozen of his own. He's tested almost every plugin you can think of, hosted with at least 10 different companies, and gone down every SEO rabbit hole you can imagine. When's he's not tinkering with new software, you'll find him in the mountains of Colorado, trail running, summiting peaks, and rippin' downhills on his mountain bike. 🏔️🏃🚴🤸

4 responses to “How to Use Device Preview in the WordPress Customizer [VIDEO]”

  1. Mark Avatar

    Please don’t give screen sizes in inches, use pixels because that is what CSS uses for @media queries for mobile styling.

    Here are the device preview sizes in the WordPress Customizer,

    Tablet: 720px by 800px
    Mobile Phone: 320px by 480px

    Those are also the breakpoints for using CSS @media queries

    1. Dave Warfel Avatar

      Thanks Mark. I just updated the sizes in the article. I’m really not sure why I used inches in the first place 🤦‍♂️.

  2. Tony Deane Avatar
    Tony Deane

    Hi Dave, do you know how to preview unpublished articles in mobile? I am creating a report and have some image with stats on them that look fine on desktop but when resized to mobile will likely be too small – so would like to preview in mobile while unpublished. So when I am on edit post, click appearance then customise it brings me to the live site where I can review in mobile, thanks

    1. Dave Warfel Avatar

      Hi Tony,

      You’ve got a few options:

      1. You can set the post to “Private.” This setting is in your Publish settings near the top-right corner of the screen. Private means that only you, the author, can see it. It won’t be available to the public. — Then you can view the URL on your mobile phone (must be logged in). It will also be available via the Customizer.

      2. Use your browser. You can keep the post as a Draft, Preview it on desktop, and then use the Developer Tools in your browser. Chrome & Firefox have the best developer tools, so just Google “[browser] developer tools” to find instructions on how to access them. They each have an option for you to preview the page as if it were a mobile device.

      If you get stuck, shoot me an email and I can help point you in the right direction. [email protected]

Leave a Comment