| Quick Answer: You can build a basic WordPress device-preview plugin by pulling screenshots of a URL at different width and height combinations through a screenshot API, then displaying them side by side in your admin panel. Add a drag-and-drop step with jQuery UI’s Droppable so users can arrange the desktop, tablet, and mobile views into one combined image. This is the same approach behind tools like Screenfly and Responsinator, just packaged as your own plugin. |
Responsive theme development, involves investing a lot of time and effort in creating a fluid theme, that can be seamlessly viewed on any resolution and device. There are several tools available, such as Screenfly or Responsinator, that help you view the appearance of a site (in-turn the theme) across different devices. This can be really helpful when testing a theme. Also, if you sell themes on your site, you can even offer such a tool, to allow potential buyers to test a theme.
This article will give you an overview, using which, you can create your own custom plugin on WordPress, to provide the same functionality as Screenfly or Responsinator.
Also Read: How to Make Images and Text Responsive in Your WordPress Site — the CSS and viewport basics behind any responsive layout, worth knowing before you build a tool that tests it.
Fetching Images for Websites on Various Devices
You need to start by finding a way to get the screenshot of a website, as it would appear on a device. The Mashape Web Screenshot API can be used to fetch the view of a website, for a given height and width dimension. The GET request is used to take a screenshot of a page, specified in the ‘url’ parameter, and the resolution is specified using the ‘h’ (height) and ‘w’ (width) parametes. For example:
Thus Mashape provides us what we need, a way to get images of a website for several device resolutions. A point to be noted, is that you have to sign up with Mashape, to avail their services.
-
The image is not merely a screenshot, or cropped image with the specified dimensions, but an actual responsive image of a site, for a particular device or resolution.
-
Using cURL, we have to make a GET request, for the website whose screenshots we want to capture, along with a device width and height.
-
In the response, we will receive a link for the needed image. Using this link, we can upload the image on our site, for the associated device.
You might also like: The Beginner’s Guide to Creating a WordPress Plugin — if the plugin folder structure, hooks, and headers here are new to you, start with this guide first.
Consolidated Screenshot of Different Views
A really cool feature to offer, is an option for users to create a consolidated view of the website across different devices, which they can then save as a single image. For example, if you show a preview of the website, on a laptop, a tablet, and a mobile device, you can provide user the option, to drag and drop images into a container, and to download the arrangement as a single image.
Something like this, could be done using an image editing tool like, Photoshop. But using something like jQuery Droppable UI, we can provide a user the option to do this dynamically.
Ensuring consistent layouts across devices is a key requirement of responsive WordPress design, especially when plugins affect front-end output.
The Responsive Checker Plugin, would be really helpful as a tool on any theme marketplace, to dynamically test the responsiveness of a theme, and also to create a consolidated image of a site, for advertisement purposes.
The Screen-Size Scramble: Score Your WorkflowBuilding a custom device-preview plugin isn’t the right call for everyone. Answer these honestly and add up your points. 1. How often do you personally resize your browser window (or switch devices) to check a layout? • Rarely, I trust the theme (0 points) • A few times a month (1 point) • Multiple times a week (2 points) • Basically every day (3 points) 2. Do you sell or showcase WordPress themes to clients or customers? • No (0 points) • Occasionally, for a client project (1 point) • Yes, regularly, on a marketplace or portfolio (3 points) 3. Do you already lean on free tools like Responsinator, Screenfly, or Chrome DevTools? • Never used them (0 points) • Yes, and they cover what I need (1 point) • Yes, but I keep hitting limits, missing devices, or slow workflows (3 points) 4. Would an in-dashboard preview save your team real time versus jumping to an outside site? • Not really, one extra tab isn’t a big deal (0 points) • Somewhat (1 point) • Definitely, that back-and-forth adds up over a week (2 points) 5. Do you have PHP/JS skills on hand, or budget to bring someone in, to build and maintain this? • No (0 points) • Some, I could get by (1 point) • Yes (2 points) Add up your score: • 0–4 points → Don’t build anything. Use Responsinator, Screenfly, or your browser’s device mode. A custom plugin would just be extra maintenance for a problem you check a few times a month. • 5–9 points → Embed, don’t build. Wrap an existing screenshot API or a free plugin like Responsive Testing (freesoul-responsive-check) into your workflow before writing custom code. You get most of the benefit for a fraction of the effort. • 10–13 points → Build it. Your usage pattern (client demos, marketplace sales, or daily testing) justifies a dedicated plugin. Follow the structure above, or bring in a WordPress plugin development team if you’d rather not maintain the API integration yourself. |
Frequently Asked Questions
What’s the easiest free way to check if my WordPress site is responsive?
Open your browser’s dev tools (Ctrl+Shift+M in Firefox, Ctrl+Shift+I then the device toolbar in Chrome) and switch to responsive/device mode. For a quicker external check without installing anything, Responsinator and Screenfly both do the job in a browser tab, no signup required.
Do I need to build a custom plugin, or can I just use a browser extension?
For personal checks while you build a theme, browser dev tools or a free online tool are enough. A custom plugin only earns its keep if you’re running a theme marketplace, showing clients live device previews inside wp-admin, or testing responsiveness often enough that jumping to an outside site becomes real friction.
What happened to Mashape, the API mentioned for fetching screenshots?
Mashape rebranded to RapidAPI back in 2017 after being acquired, so if you’re building this today you’d sign up through RapidAPI’s marketplace instead and look for a current screenshot API listed there. The GET-request pattern described in this article (passing a URL, height, and width) still holds, just under a new provider name.
Are there ready-made WordPress plugins that already do this?
Yes. The WordPress.org repository has free options like Responsive Testing (freesoul-responsive-check), which adds a responsiveness check to your admin bar or Customizer. If your need is occasional, installing one of these is usually faster than building your own.
How often should I re-test a theme for responsiveness?
Treat it as ongoing, not a one-time box to check before launch. Re-test after any theme update, page builder change, or new plugin that touches front-end output, since any of those can quietly break a layout on smaller screens.
