How to Create Responsive Device Mockups with WordPress

Creating responsive device mockups for products or portfolios can be a pain. Ordinarily, you might first search for a Photoshop template for the specific devices that you need for your mockups. Then you’d most likely take screenshots, cut them up and place them within the Photoshop file.

Fortunately, if your site is running on WordPress, there’s a new free tool that makes it super easy to create device mockups directly within the post or page editor. The Device Mockups plugin uses shortcodes to display screenshots, videos, or any content within a responsive device.

For example, you can surround a screenshot with a device by placing it within the appropriate shortcode:

[device type="macbook"]<img src="http://example.com/wp-content/uploads/2014/06/tavern-screenshot-mbp.png" alt="tavern-screenshot-mbp"/>
[/device]

That shortcode would output the screenshot as if it were being displayed on a retina Macbook Pro:

tavern-mbp-mockup

The plugin even supports a “stacked” parameter in the shortcode so that you can add multiple devices to the end result. You can mix and match devices as needed to create custom mockups.

multiple-devices

All of the available shortcodes can be found on the plugin’s details page. You can also access them via a button in the visual editor:

visual-editor

The Device Mockups plugin has support for the following devices, and recommended image sizes are included to help you prepare your screenshots:

  • iPhone 5 – 640×1136
  • iPad – 2048×1536
  • iMac – 1920×1200
  • Macbook Pro (Retina) – 1440×900
  • Galaxy S3 – 720×1280
  • Nexus 7 – 1920×1200
  • Surface – 1920 x 1080
  • Lumia 920 – 768 x 1280

If you’re looking to create some responsive mockups for your WordPress site or product, then this tool should save you a good amount of time. This is especially true if you’re not well-versed in image editing programs like Photoshop where device mockups might present a true challenge.

If you like the Device Mockups plugin, make sure to thank its developer, Justin Peacock, who has already committed several updates since its release. You can download the plugin for free from WordPress.org. Any issues can be submitted on GitHub.

15 Comments


  1. Nice article Sarah. I can now create stunning previews for my themes.

    Report


    1. Thank you for saving me hours of time Justin!

      If you’re on a Mac, consider using the excellent (and free) Paparazzi by Nate Weaver (http://derailer.org/paparazzi/) to generate the shots. The app grabs the image direct from the URL and respects media queries so everything looks right.

      You can even save required image dimensions for the various devices as presets to make the process even smoother.

      These tools have vastly improved my workflow for producing portfolio images.

      Report


      1. Thanks Paul, I use paparazzi for the desktop views but with mobile screenshots it doesn’t grab the viewport so I tend to use the screenshot on my phone or iPad. You can also use Adobe Inspect.

        Report


    2. Justin, I suggest to change the plugin name because the current one doesn’t reflect the plugin functionality very well.

      Report


  2. Thanks Sarah. Can confirm its an excellent plugin, the quality of the device frames is fantastic.

    I’m currently using this in conjunction with Browser Shots to pull in live website screen-shots rather than manually creating them and the two work very well together. This does fall down however when using the device sizes. Browser Shots just inserts a smaller version of the full sized site. Have discovered its actually very difficult to find an automated screen shot system for WP with responsive screen-shots. Has anyone else had any luck with this?

    Report


    1. Did you try CTRL+SHIFT+M on Firefox? Firefox’ Responsive Design View makes it very easy to make custom screen shots.

      Report


      1. Thanks for the tip, it’s very useful!

        Report


  3. Just to clarify: the images being actually displayed aren’t responsive, right? I mean, a small screen will receive the full-sized mock-up just scaled down?

    Awesome plugin, though!

    Report


  4. This is awesome tool. It’s very helpful for me to introduce new themes or websites on my blog! Thanks for making it.

    Report

Comments are closed.