Per Søderlind

I code for fun

  1. general
  2. WP Live Preview Links

WP Live Preview Links

WP Live Preview Links allows you to see a live scaled preview of the site you are linking to in a pop-up dialog style window prior to clicking on it.

WP Live Preview Links does not use an external service to create these “thumbnails”.

In the admin panel you can select which links that will trigger the preview (class="wp-live-preview", internal, external or all links). You can also adjust the preview window size and position.


Hover above the the links below

Latest version


You can download and install WP Live Preview Links using the built in WordPress plugin installer. If you download WP Live Preview Links manually, make sure it is uploaded to “/wp-content/plugins/wp-live-preview-links/”.

Activate WP Live Preview Links in the “Plugins” admin panel using the “Activate” link.

Frequently Asked Questions

It doesn’t work ?!

  1. WP Live Preview Links needs a modern browsers that support CSS3 3D Transform properties (Chrome, Firefox, Safari, IE10+)
  2. Certain sites may have set their X-FRAME-OPTIONS header policy to SAMEORGIN or DENY. This is specifically to prevent other sites from iframing their site. If that is the case, this plugin will not work.

Activate the plugin and in plugin settings select Live Preview Links = class=”wp-live-preview”

This is how I’ve done it on this site running TwentyTwelve.

In the (child) theme folder, in functions.php, add the following

add_action( 'wp_enqueue_scripts', 'ps_live_preview_search_result', 11 );

function ps_live_preview_search_result () {
	wp_enqueue_script( 'ps_live_preview_search_result_script', get_stylesheet_directory_uri() . '/ps_live_preview_search_result.js', array('wp-live-preview-links'), false, true );


Copy ps_live_preview_search_result.js to the (child) theme folder:

(function($) {
	$('.search-results .entry-title a').each(function(index){


Demo: Search my site and hover over the links


  • 1.0.6 Added the option to use a jQuery Selector to tell Live Preview Links which links to use.
  • 1.0.5 Upgraded Admin Page Framework to version 3.0.5. Updated languages/wp-live-preview-links.po
  • 1.0.4 Added mising file
  • 1.0.3 Upgraded Admin Page Framework to version 3
  • 1.0.2 Minor fixes
  • 1.0.1 Fixed a small bug
  • 1.0 Initial release



WordPress Twitter Widget Pro with mentions


Spring Cleaning


  1. Hei Per :)

    Thanks for a nice plugin. I do however have trouble getting links within the Twitter widget to preview. Any suggestions?

    Secondly, I would like the preview above the link, not to the left or right. What do I have to do to make that happen?

    URL to my site (plugin not activated):

    Best regards,

  2. BAYgin

    How to use this plugin for blogroll widget with “wp-live-preview” class?

    • Per Søderlind

      You can modify the arguments to wp_list_bookmarks, used by the blogroll widget, through the `widget_links_args` filter and add `wp-live-preview` to the class attribute.

      Add this to your (child) theme functions.php (not tested, but should work):
      add_filter( ‘widget_links_args’, ‘add_wp_live_preview_class’ );

      function add_wp_live_preview_class( $args ) {
      $args[‘class’] = $args[‘class’] . ‘ ‘ . ‘wp-live-preview’; // add wp-live-preview to the class attribute
      return $args;

    • Per Søderlind

      Please see the latest version which allows you to use a jQuery Selector (.class, #ID etc)

  3. I only want this to work on certain links on my site. How do I configure this.

    Thank you

    I currently have the plug in disabled. I like the plugin

    • Per Søderlind

      Add `class=wp-live-preview` to the links and, in settings, select Live Preview Links = class=wp-live-preview.

  4. Franc

    first time many thanks for the nice plugin !! Unfortunately, I have a problem. Have two different links to each other are :
    E -mail address
    page URL
    Now if I accidentally get on the e -mail address with the Mouse will automatically open my e- mail program . How can you prevent this ?? -> As I said only if the e- mail address.
    Unfortunately, there are indeed both external links , which I do not understand why this is also true for e-mail addresses ???

    thanks a lot

  5. Franc

    Ok , I discovered the error. had the e -mail address linked to href… , then this plugin is clear responded.


Leave a Reply

Powered by WordPress & Theme by Anders Norén