Installation Guide of the Responsive Mockup Generator

Live demo: https://demos.mediageni.com/mockup-generator/

Overview #

Responsive Mockup Generator presents any public website in desktop, laptop, tablet and mobile device frames. It adds an interactive generator to a page of your choice, lets you save client projects with an unlisted share link, and publishes those projects as a filterable portfolio gallery. This guide covers the complete setup.

Prerequisites #

• WordPress 6.4 or newer and PHP 7.4 or newer.
• Administrator access to the WordPress dashboard.
• The wp-responsive.zip file from your buyer download. Do not upload the complete buyer package when WordPress asks for the plugin ZIP.
• A public HTTP or HTTPS website that permits iframe embedding.

Steps #

1. Install the plugin #

1. Sign in to WordPress as an administrator.
2. Open Plugins > Add New Plugin > Upload Plugin.
3. Select wp-responsive.zip, choose Install Now and activate the plugin.

2. Create the two pages #

1. Create a page, for example Responsive Mockup Generator, and add a Shortcode block containing [wp_responsive]. Publish it.
2. Create a second page, for example Client Portfolio, with a Shortcode block containing [wp_responsive_clients]. Publish it.

3. Configure the settings #

Open Responsive Mockup > Settings, select both pages you just published, set a complete public default website URL, and save. Test both pages while logged out.

The remaining settings are optional. Colors follow your theme or your own accent, surface, card and text colors. Content width follows the theme or uses a 960 or 1288 pixel maximum. For the portfolio you choose one of four gallery designs, one of five project detail designs, the number of columns, card spacing, corners, shadow and hover animation, and whether category filters and website domains are visible. Automatic thumbnails are off by default.

Using the generator #

The shortcode accepts optional attributes:

[wp_responsive]
[wp_responsive url="https://example.com"]
[wp_responsive url="https://example.com" preset="mobile-pair"]

Presets are showcase, desktop-pair, mobile-pair, desktop-only, laptop-only, tablet-only and mobile-only.

On the page itself, enter a complete public URL, choose Preview, and toggle the devices you want to show. Devices can be dragged with a mouse or by touch, or moved with the arrow keys after focusing one. Share opens the browser share sheet or copies a link that preserves the URL, preset, visible devices and their positions.

Client projects and the portfolio #

Open Responsive Mockup > Clients Portfolio and choose Add client preview. Fill in the public site title, the website URL, a default layout, a description and excerpt, portfolio categories and tags, and a featured image. The Client name field is for your own administration and never appears in the frontend or in a share link.

Published projects appear in the gallery and get their own page at /portfolio/project-name/, inside your own theme with its header, footer and typography. Without a dedicated SEO plugin the excerpt becomes the meta description; Yoast, Rank Math, AIOSEO, SEOPress, The SEO Framework, Slim SEO and SmartCrawl keep full control when active.

Optional thumbnails run through WordPress.com mShots. Enable the setting, publish or update the project, then choose Generate thumbnail. The finished PNG is stored in your own Media Library and set as the featured image, so the portfolio no longer depends on WordPress.com to display it.

Troubleshooting #

A website can load normally in a browser and still refuse to appear inside an iframe. That is controlled by the remote website through an X-Frame-Options header or a Content Security Policy, and no plugin can override it.

• Use Check iframe compatibility in a client project before building a presentation around a URL.
• Use the final HTTPS URL including the correct path. For YouTube use an official youtube.com/embed/... URL.
• Test while logged out in a private window and check the browser console for frame or Content Security Policy errors.
• When a site cannot be embedded, upload or generate a featured image instead.

If a published project is missing from the gallery, confirm that the portfolio page contains the correct shortcode and that no category filter is active.

Notes #

• Translation. English is the source language and Dutch is included. Translate languages/wp-responsive.pot with Poedit, Loco Translate or another gettext tool, and store custom translations outside the plugin folder so updates do not overwrite them.
• Privacy. An iframe preview sends the visitor’s browser to the website entered in the generator, which may receive their IP address and browser headers. Thumbnail generation additionally sends an unlisted canvas URL to WordPress.com, but only after an administrator enables it and starts a capture.
• Share links are unlisted, not password protected. Do not use them for confidential websites.
• Updates. Back up first, keep the wp-responsive folder name and do not edit plugin files directly. The older [iresponsive] and [responsive_mockup] shortcodes remain supported.
• Uninstall. Deactivation deletes nothing. Settings and client records are preserved unless you explicitly enable the deletion option before uninstalling.
• Support. Include the plugin, WordPress and PHP version, your theme, browser, the shortcode used and the exact public URL that fails. Never send passwords, keys or personal data.