Simple Popup Plugin

by | Apr 23, 2014 | Wordpress | 2 comments

There are a variety of reasons you might want to display content on your WordPress website in a popup window rather than on a separate page.  A plugin titled “Simple Popup Plugin” promises to let you open any link in a pop up window.  This post demonstrates how it works.

Once the plugin is installed you simply insert a shortcode that looks like this (add a [ in front and a ] at the end):

popup url=”http://globalcreations.com/blog/welcome/”]Click to See our Welcome page in a popup![/popup

You can also modify the size of the popup window by adding something like this after the URL, but inside the bracket: width=”400″ height=”600″. A default size for the window is set in Settings > Simple Popup Plugin. The link can go to anywhere on the web or to any page or post on your WordPress site. The above code looks like this in practice:Click to See our Welcome page in a popup!

That’s kind of messy because it puts all the the HTML associated with the URL into to popup window including menus, sidebars, headers , footers and so on. In most cases we don’t want all of that information, perhaps just a graphic or some text. One way to simplify things is to create a graphic with the content we want to display.

That works ok and would be fine with a fancy graphic, put doesn’t make much sense with text. Further, if your client wanted to update it, they would need to know how to use some kind of graphic software to create or edit the graphic to their liking. Besides, I don’t like the title bar with the fine name and size in it. A better way is to create a special page on your site that can then go into the popup window.

A page template that displays nothing except the content of the page is needed.  It is easy to make by copying one of your theme templates from wp-content/themes/yourtheme to wp-content/themes/yourtheme-child and renaming it “Content Only.”  Then edit it to change the template name and delete all of the calls except “get_template_part( ‘content’, get_post_format() );”. When you create the page to be displayed in your popup window, simply select the “Content Only” page format.

This works perfectly except that the URL of the page that is in the popup is used instead of a proper title. That’s the default when all of the header options are removed from our new theme. To fix that, I created a special header file in yourtheme-child called header-popup.php. This header file contains only the code necessary to provide the minimal header information including the same title information as used in the main header.php file. I then had to put the call for the header information back into the Content Only template. That is simply: get_header( ‘popup’ ); WordPress recognizes this as a call for the header-popup.php file.

That was everything I needed for the project at hand. Further modifications to the header-popup.php file would be needed if you wanted to include CSS so that you could properly place graphics and other elements on the popup. You could also have popups that look different by setting up different templates and header files.