Open in New Window or Popup – WordPress Shortcode

Open in New Window or Popup – WordPress Shortcode
5 (100%) 3 votes

Looking for a way to make links open in new window (not new tab) and increase your readers’ active time? You’ve come to the right place. I spent a whole day to figure out the perfect solution for wordpress sites. I’m a big fan of code-it-myself, so you don’t need to add any new plugin. Just a few lines of code.

Why making a link open in new window?

Normally, external links will lead your readers to other sites, and there is a chance that they won’t come back. To prevent this, we often use target attribute in the anchor to make sure that our site still there on the web browser’s tab.

The code:

<a target="_blank" href="http://YourURL">Click here to open in a new tab</a>

Will show up like this: Click here to open in a new tab

However, the better way is to make the link open in new window floating over your site. Facebook sharing button is a perfect example. After sharing your post, readers will come back to your post right away.

open in new window is the best choice!

Imagine that you can do this to any link you want. So when they close that page, your post will be right in front of their eyes.

You can click here to see this idea in action.

How to make link open in new window like that?

There are several ways to achieve this. The basic idea is to put a small javascript code in the anchor. I used to edit each of my link in the wordpress text editor like this:

<a onclick="window.open('https://YourURL','_blank','location=yes,height=570,width=520,scrollbars=yes,status=yes');">Click here to open in a new window.</a>

The annoying thing is that wordpress will automatically strip that javascript part when you switching between visual and text in the editor. Moreover, the code is very long, right?

The shortcode to open in new window

Imagine that you don’t need to install any plugin and just write a simple shortcode in your wordpress post content, the problem is solved! That’s great, right?

[ open url="http://YourURL"] YourText [/open ]

Here is the magic code, just add it to functions.php file in your theme folder.

/* open in new window by fususu.com/en/ */
function open_in_new_window($atts, $content = null) {
   extract(shortcode_atts(array(
      'url' => "https://fususu.com/en/open-in-new-window/", /* the default url */
      'title' => "Click here", /* the default title */
    'class' => "susulink", /* the default class */
    'rel' => "nofollow", /* the default rel */
    'w' => "520", /* default width of the new window */
    'h' => "570", /* defaut height of the new windown */
    'scroll' => "yes", /* do you want scroll bar in new window */
   ), $atts));
return '<a rel="'.$rel.'" class="'. $class. '" onmouseover="this.style.cursor=\'pointer\'" onclick="window.open(\''.$url.'\', \'_blank\', \'location=yes,height='.$h.',width='.$w.',scrollbars='.$scroll.',status=yes\');" title="'. $title . '" />' . $content . '</a>';
}
add_shortcode('open', 'open_in_new_window');

The most simple way to use it’s to write in your wordpress post content like I did. Note: Don’t add any space between the square brackets [] and the tag “open”. I did this to avoid wordpress filtering so you can see it.

[ open url="YourURL"] Your Text [/open ]

You can also wrap any content (includes images) in the tag [ open] [/open ]. See the example below.

The code:

[ open url="YourURL"] <img src="YourLinkToAnImage" /> [/open ]

The result:


You can customize the attributes of the link. As you can see in the code, I make the default link rel=”nofollow”, if you want to make the link “dofollow”. Just add rel=”dofollow” in the shortcode.

[ open url="YourURL" rel="dofollow"] Your Text [/open ]

There are a few options available, you can adjust the width, the height, or enable/disable the scrollbars in the new window. You can also add any new option you like to the code, it’s very simple, right?

 

Open in New Window or Popup – WordPress Shortcode
5 (100%) 3 votes

Leave a Reply

Your email address will not be published. Required fields are marked *