How To Show Live Preview of Links in WordPress?

elegant themes affiliate

If you want to show live preview of links in WordPress blog posts, then this little plugin can really be your best mate. This plug-in utilises jQuery powered pop-up window to load the screenshot of the linked website.

This plug-in is extremely easy to install and setup and you get the whole dedicated control panel to customise the settings. In this post I will show you how to use it and the different options.

How To Show Live Preview of Links in WordPress?

Your very first task is to 1st install this plug-in either through your WordPress administration panel or by uploading it manually to your server.

Once you successfully install and activate it, you will find a new option in your admin bar. Now click on the live preview button which is present in your admin bar and you will be directed to it’s settings page. Over here you will be provided with bunch of options through which you can control the display options and the alignment of the box.

Now let me explain you all the features in detail one by one. The very first is live preview links option. Through this setting you will be able to control the live preview of links in wordpress. Over here you get a drop-down menu from which you can select either of the three options. You can either select only internal links, only external link or all types of link.

Now comes  options for live preview dialogue box. Over here you can set different width and height for the preview box. Once you complete this you will have two that the custom width and height for the viewport.

Over here the viewport size simply means the size of jQuery box in which the corresponding URL will be loaded.

Now we come to the option to set the scale. The scale is actually a CSS property by which you can define the scaling of the site which will be loaded in the preview box. By default it’s set to the null value which means that the viewport will be automatically calculated. I will suggest you to leave this option as it is because after testing many different values I found that null value is best one.

In order to give you more control over the display box WP Live preview plugin provides you with option to align the box. You can either left, right or auto.

If you select the auto option then this plug-in will automatically choose the best alignment for the preview.

Once you complete all the settings you have to simply click on save the changes. If you are using any content delivery network service or any cache plug-in then I will suggest you to purge all your cache.

Manually Show Live Preview of Links in WordPress

With this plugin you get an option to manually show the preview of all types of links using the custom class="wp-live-preview". You have to just add this class along with any hyperlink and that’s all. For example if I wan to open Wikipedia, then I will use


There is one important point to note about this plugin which might affect your visitors readability experience. WP live preview generates the preview dynamically, which means the preview of links are generated every time your visitor place their cursor on them.

Leave a Comment