This article provides a simple WordPress shortcode that can be used to launch a popup window via a link. In reality, popups are kind of pointless. If you're after a truly effective means of creating links and modal popups in WordPress you should wait for another article we have scheduled that shows how to link internally and externally with SEO-optimised ease... and the plugin further links to images that are automatically scaled and optimised for fast delivery. Our linking plugin (once named shortt after our short URL service shor.tt ) includes optional URL truncation, and other features such as modal integration and optional favicon generation for links that aren't local pages.
Documentation relating to the
window.open function can be found on Mozilla's website . A basic popup link outside of WordPress is created as shown below.
Note the comma separated list of window options (without spaces) as the third function argument. Available attributes are as follows.
Number in pixels. Use this to define the width of the new window.
Number in pixels. Use this to define the height of the new window.
Number in pixels. Sets the position of the window in pixels from the left of the screen in Netscape 4+.
Number in pixels. Sets the position of the window in pixels from the top of the screen in Netscape 4+.
top and left
Number in pixels. The X Y coordinates of the upper left corner of the browser.
yes or no (1 or 0). Use this to control whether or not you want the user to be able to resize the window.
yes or no (1 or 0). This lets you decide whether or not to have scrollbars on the window.
yes or no (1 or 0). Whether or not the new window should have the browser navigation bar at the top (The back, forward, stop buttons, etc.).
yes or no (1 or 0). Whether or not you wish to show the location box with the current url (The place to type http://address).
yes or no (1 or 0). Whether or not the window should show the extra buttons. (what's cool, personal buttons, etc.).
yes or no (1 or 0). Whether or not to show the window status bar at the bottom of the window.
yes or no (1 or 0). Whether or not to show the menus at the top of the window (File, Edit, etc.).
yes or no (1 or 0). Whether or not to copy the old browser window's history list to the new window.
From Mozilla's website, the various components of a browser window are as follows:
Window.Open WordPress Shortcode
We can create a popup window in WordPress with a result as demonstrated by [window url="https://www.beliefmedia.com.au/"]this link[/window]. Shortcode used was
[window url="https://www.beliefmedia.com.au/"]link text[/window]. By default we'll add your website name as the popup title. To alter the title (which should all be unique) - and this time using a numeric Post ID for internal linking - we'll use
[window url="15952" title="BeliefMedia Popup Window"]link text[/window] with a result [window url="15952" title="BeliefMedia Popup Window"]as follows[/window].
Copy and paste the WordPress function into your theme's
functions.php file or, if you sensibly have one installed, your custom functions plugin.
The shortcode attributes are defined above. To link the primary page and launch a popup, use the additional attribute of
Centering The Popup
Sourced from an anonymous Github post, the following function will center a popup. We didn't incorporate it into the WordPress shortcode simply because our code was undeserving of additional effort.
As we've said a few times, we've only provided this code as a reference for some other articles - it's not best practice to use popups if there's a modal alternative.