Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Show Live Preview of Links in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Have you ever seen sites that show a live preview of links when you bring your mouse over them? That’s by using a jQuery popup which displays a screenshot of a linked page when users bring their mouse over the link. In this article we will show you how to show live preview of links in WordPress.

Live preview link example

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the WP Live Preview Links plugin. Upon activation, a new menu item labeled Live Preview Links will appear in your WordPress admin bar. Clicking on it will take you to the plugin’s settings page.

Live preview links settings

Using this plugin, you can have live previews for external, internal, all, or selective links. Depending on what you are trying to achieve, many sites use live previews for external sites. Some eCommerce sites use live previews to show a peek into product pages. Keep in mind that too many live previews can be very distracting and annoying for your users.

Choosing class="wp-live-preview" will allow you to manually display live previews for links as you add them. Simply add the class to your links like this:

<a href="http://www.example.com" class="wp-live-preview">Example Link</a>

Among other settings, you can choose the size of live preview popup window, position, and the site viewport of the link previewed. The default settings would work for most sites. Simply click on the save changes button to store your settings.

You can now visit your website to see the live preview for links in action.

We hope this article helped you learn how to show live preview of links in WordPress. You may also want to take a look at our guide on how to fix broken links in WordPress with broken link checker.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

9 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Colin says

    Thanks for the article, that plugin has ceased operation and is no longer downloadable, if you had a new suggestion that works I’d greatly appreciate it. The RT Media paid version isn’t up to scratch and there’s not a lot to be found via Google.

  3. Marcus Quiroga says

    Hi,

    Is there an update of this function nowadays? I’m trying it on external links at. Does someone could help me with that?

    thank you

    • Per Søderlind says

      Hi, I’m the plugin author.

      You can get this to work on specific links by adding class=”wp-live-preview” to the link, and in the settings page set ‘Live Preview Links’ to ‘class=”wp-live-preview’. See the demo links on my site.

Leave a Reply to Marcus Quiroga Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.