Title: PhilDesigns Responsive Preview Author: phildesigns Published: August 17, 2026 Last modified: August 17, 2026 --- Search plugins ![](https://ps.w.org/phildesigns-responsive-preview/assets/banner-772x250.png?rev =3651233) ![](https://ps.w.org/phildesigns-responsive-preview/assets/icon-256x256.png?rev= 3651233) # PhilDesigns Responsive Preview By [phildesigns](https://profiles.wordpress.org/pdidee/) [Download](https://downloads.wordpress.org/plugin/phildesigns-responsive-preview.3.1.1.zip) * [Details](https://wordpress.org/plugins/phildesigns-responsive-preview/#description) * [Reviews](https://wordpress.org/plugins/phildesigns-responsive-preview/#reviews) * [Installation](https://wordpress.org/plugins/phildesigns-responsive-preview/#installation) * [Development](https://wordpress.org/plugins/phildesigns-responsive-preview/#developers) [Support](https://wordpress.org/support/plugin/phildesigns-responsive-preview/) ## Description Responsive Preview adds a link to the WordPress admin toolbar that opens your site inside a full-screen preview interface. Switch between device viewport sizes and use the Responsive Walk feature to animate a smooth sweep from 1440px down to 320px. #### Features * **Device Viewports** — desktop, laptops, iPad, iPhones, Pixel, and more; toggle portrait/landscape on rotatable devices * **Custom Devices** — define your own device presets with a name, width, and height; manage them from the settings page * **Responsive Walk** — play/pause animation that sweeps the iframe from 1440px to 320px over 10 seconds, with a scrubbable progress bar * **Settings page** — enable or disable any viewport from the device dropdown #### Usage 1. After activation, click **Responsive Preview** in the admin toolbar (top bar). 2. A new window opens with your site in the preview frame. 3. Use the **SELECT VIEWPORT** dropdown to switch device sizes. 4. Click the orange play button at the bottom to start a Responsive Walk. ## Screenshots [⌊The preview interface showing the admin toolbar link, device selector, and an iPhone-sized viewport.⌉⌊The preview interface showing the admin toolbar link, device selector, and an iPhone-sized viewport.⌉[ The preview interface showing the admin toolbar link, device selector, and an iPhone- sized viewport. [⌊The Responsive Walk bar at the bottom showing the play button and progress scrubber.⌉⌊ The Responsive Walk bar at the bottom showing the play button and progress scrubber .⌉[ The Responsive Walk bar at the bottom showing the play button and progress scrubber. [⌊The settings page with viewport toggles and the custom devices table.⌉⌊The settings page with viewport toggles and the custom devices table.⌉[ The settings page with viewport toggles and the custom devices table. [[ ## Installation 1. Upload the `responsive-preview` folder to `/wp-content/plugins/` 2. Activate the plugin through the **Plugins** menu in WordPress 3. Click **Responsive Preview** in the admin toolbar to open the preview ## FAQ ### Can I add my own device sizes? Yes. Go to **Settings Responsive Preview**, scroll to the Custom Devices section, and add as many devices as you like. ### Why can’t I remove the Desktop viewport? The Desktop option (100% width) is always enabled so there is always at least one viewport available. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “PhilDesigns Responsive Preview” is open source software. The following people have contributed to this plugin. Contributors * [ phildesigns ](https://profiles.wordpress.org/pdidee/) [Translate “PhilDesigns Responsive Preview” into your language.](https://translate.wordpress.org/projects/wp-plugins/phildesigns-responsive-preview) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/phildesigns-responsive-preview/), check out the [SVN repository](https://plugins.svn.wordpress.org/phildesigns-responsive-preview/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/phildesigns-responsive-preview/) by [RSS](https://plugins.trac.wordpress.org/log/phildesigns-responsive-preview/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 3.1.1 * Renamed all remaining `rp_` function, option, and settings-API identifiers to the `philrepr_` prefix (the shorter prefix was flagged as too short by the plugin review) #### 3.1.0 * Added Responsive Walk — animated iframe width sweep from 1440px to 320px with scrubbable progress bar #### 3.0.0 * Switched preview bar to flexbox layout * Moved orientation toggle out of select box * Added Settings link on Plugins page * Added support for enabling/disabling viewports and custom device management * Updated colours, fonts, and styles #### 2.0.0 * Added viewport dropdown with popular device sizes * Added FontAwesome icons #### 1.0.0 * Initial release ## Meta * Version **3.1.1** * Last updated **20 hours ago** * Active installations **Fewer than 10** * WordPress version ** 6.7 or higher ** * Tested up to **7.0.4** * PHP version ** 7.4 or higher ** * Tags * [mobile](https://wordpress.org/plugins/tags/mobile/)[preview](https://wordpress.org/plugins/tags/preview/) [responsive](https://wordpress.org/plugins/tags/responsive/)[testing](https://wordpress.org/plugins/tags/testing/) [viewport](https://wordpress.org/plugins/tags/viewport/) * [Advanced View](https://wordpress.org/plugins/phildesigns-responsive-preview/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/phildesigns-responsive-preview/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/phildesigns-responsive-preview/reviews/) ## Contributors * [ phildesigns ](https://profiles.wordpress.org/pdidee/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/phildesigns-responsive-preview/)