How to Build a Popup Help Center for Your WordPress Site

WordPress Site Popup Help - How to Build a Popup Help Center for Your WordPress Site

Have you been wishing for a way to give users of your WordPress site easy access to all the help and support they need to fully appreciate everything your site has to offer? Well, you can start smiling now, ‘cuz your wish just came true. This tutorial will show you how you can truly enhance their experience with a cool popup help center. Once we finish this project, your users will be able to…

  • pop open your help center by clicking a link or button that you can make as prominent or as discrete as you like
  • select the appropriate help subject from a scrollable, and dynamically updating table of contents
  • view expanded lists of all related sub-topics any time they click on a subject they’re interested in

As admin of your WordPress site, you will be able to add and edit all your help content via the WordPress page editor. That means that you can…

  • include images, videos and links to other sites in any help content
  • include things like a contact form or live chat support
  • use any shortcodes you like or need
  • add content via content buckets
  • manipulate the help content just like you normally do on any page of your WordPress site

Once we’re done, your popup help and support center will look much like the example below.

WordPress Site Popup Help - Screenshot of example popup window

The popup help screen will be divided into 2 scrollable frames: help content on the right; and a dynamically updating table of contents on the left. Your users will be able to scroll either frame independently as seen below. The table of contents will keep itself organized and updated according to the page order you set in the back-end of your WordPress site. Clicking any item heading in the table of contents on the left of the popup will bring up that content in the right-hand pane.

WordPress Site Popup Help - Screenshot of example double-pane popup window

What we’ll need to get this done

As I like to make stuff as easy as possible for novice WordPress users, this tutorial is divided into 5 parts so you can get stuff done at your leisure.

  1. We’ll create a custom page template for our help content
  2. We’ll register a new sidebar to use in our custom template
  3. We’ll use a cool plugin called Hierarchical Pages Widget for the dynamically updating table of contents
  4. We’ll add a bit of javascript magic to create the popup
  5. We’ll write some custom styles to create the layout we want

Before proceeding with any theme customizations, I highly recommend the use of a child-theme. If you’re already using one, great! If not, please create a child-theme of the theme you are using now. If you’re not sure how to create one, see http://codex.wordpress.org/Child_Themes and What are Parent and Child Themes?

1) First up: a custom page template

The first thing we need for this is a custom page template with no distractions for your users. We want our help content to be displayed in our popup with no banners (that means no header or footer), and navigation designed specifically for it. In our template, we’ll be including calls for the header and footer, because you likely have some essential code in there. But we’ll be hiding them from view later on when we get to the CSS part of this tutorial.

Open a new document in your favorite text editor (mine is by far Notepad++). Copy the code below and paste it to your document. Save your document as template-site-guide.php and upload it to the root of your child-theme folder.

<?php
/*
Template Name: Site Guide
*/
?>

<?php get_header(); ?>

<section id="content" role="main">

	<?php the_post(); ?>

	<article id="<?php the_ID(); ?>" <?php post_class(); ?>>
		<header class="post-header">
			<h1 class="post-<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', TEMPLATE_DOMAIN ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
		</header>
		<div class="post-body">
			<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', TEMPLATE_DOMAIN ) ); ?>
		</div>

	</article>
  
</section>

<div id="help-sidebar">
	<?php dynamic_sidebar( 'help' ); ?>
</div>

<?php get_footer(); ?>

As you can see, this template is a very basic loop that only calls the post title and post content. We don’t need any more than that for our popup help center. To test that the template is working properly, create a new page for your WordPress site. In the “Page Attributes” section of your page editor, select your new template from the “Template” drop-down menu. When you publish or preview your new page, you should see only the post title and content in the post area, with nothing else (no meta-data, author, date, etc.). The template looks OK? On to the next step then…

2) Register a new custom sidebar

You surely noticed the call to the custom sidebar in the template. In this step, we’ll register a new sidebar to be used only in our help popup. Open your child-theme’s functions.php file, and paste the following code just after the opening <?php tag.

// Register our custom sidebar for the help popup
register_sidebar(
	array(
		'name'          => __( 'Help', TEMPLATE_DOMAIN ),
		'id'            => 'help',
		'description'   => 'Help',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">', 	  
		'after_widget' => '</aside>',
       		'before_title' => '<h3 class="widgettitle">',
       		'after_title' => '</h3>'
		)
);

That’s it… were you expecting more? Now, when you go to “Appearance” > “Widgets” in the back-end of your WordPress site, you’ll see a new sidebar called “Help”. That’s where we’re going to drop one of the widgets from the plugin we’ll be using for the table of contents.

3) Our table of contents

To create a table of contents the way we want, we’ll be using a really cool little plugin: Hierarchical Pages Widget. You can either download the plugin and FTP it to your site, or use the automatic install in the Plugins section of your site’s back-end.

Activate the plugin on your site, then go to “Appearance” > “Widgets” and drag the “Hierarchical Pages” widget to your new “Help” sidebar. To set up the widget for our help navigation, simply tick the first 2 check-boxes (Show siblings & Show top-level pages), then enter the ID of the page you created earlier. That will be your top-level help page. All other pages you create for your help popup must be set as children of that page for this to work properly. Save the widget settings.

Now go ahead and view the page you created earlier once again. You should see the page title has been added as a link, probably below the content. Don’t worry about that right now; we’ll fix up the layout in the last step.

Let’s do a quick recap before we continue

  • we’ve created our custom template to display our help content
  • we’ve created our top-level help page (to be edited later)
  • we’ve created a sidebar to use only with the help content
  • and we’ve activated and configured the plugin that builds our table of contents.

Got all that? Now let’s get to the really fun parts: the JavaScript that will create the actual popup, and then it’s on to adding custom styles to our style-sheet to get everything formatted and looking awesome!

Now to work some JavaScript magic

Rather than copying some code from this article and then futzing with it to fit your site, I’ve found a really cool alternative for this purpose. One of my favorite sites for code snippets is DynamicDrive.com. They actually have a code generator to build your own custom popup. How cool is that? Click the link below to create your own code, then come back here.

  • In the field where you’re prompted to enter the “URL of window”, enter the URL of your top-level help page.
  • You’ll also want to set “Scroll bar” to “Yes”.

Generate popup JavaScript

The 1st part of the code you just generated must be pasted to either the header.php file or the footer.php of your child-theme (it’ll work just fine in either one). If you paste it to header.php, be sure it’s just before the closing </head> tag. If you add it to footer.php, be sure you add it before the closing </html> tag.

Save the file you added the JavaScript to, then upload it to your site. The next step is to add the 2nd part of the generated code where you want your “Help” button or link to appear on your site. That is entirely up to you, but for now, simply add it to a text widget in your sidebar, or anywhere on a test page. If you want a button, and want it to look exactly like all the other buttons on your site, simply change <a href to <a class=”button” href in the 2nd bit of code.

Now, wherever you put that link or button, click it and watch your popup appear. If you want to modify the dimensions, or any other setting, simply generate a new pair of code snippets and replace them. Cool huh?

Finally! Let’s make it look snappy!

Below is the basic CSS you’ll need to get a popup help center for your WordPress site just like the examples in the images above. The max-height value in the 1st part should be equal to the height you set for your popup window in the JavaScript you created earlier. The position:fixed and overflow-y:scroll in the 1st part are the all-important bits that create the scrollable left-hand pane (our custom sidebar) that will contain the table of contents.

.page-template-template-site-guide-php #help-sidebar {
  max-width:36%;
  float:left;
  overflow-y:scroll;
  position:fixed;
  max-height:350px;
  margin-right:2%;
  font-size:11px;
 }
.page-template-template-site-guide-php #help-sidebar ul {
  margin-left:0;
}
 .page-template-template-site-guide-php #help-sidebar ul ul {
  margin-left:1em;
 }
 .page-template-template-site-guide-php #help-sidebar ul ul li {
  list-style:disc inside none;
}
 .page-template-template-site-guide-php #help-sidebar ul ul li.current_page_item {
  font-weight:bold;
 }
.page-template-template-site-guide-php #content {
  width:60%;
  float:right;
  margin:2%;
}

Now, depending on the theme you are using, portions of the following code may need to be modified. This bit of CSS applies specifically to my child-theme of SimpleMarket from WPMUdev. The 1st part (branding, top-nav, bottom-footer) hides the site header and footer in the help popup, and the other 3 parts style the main page wrappers. If you are not using SimpleMarket, you will need to adjust or delete stuff to reflect the actual container IDs of your theme. If you need help with this part, please leave a comment below with a link to your site, and I’ll do what I can to help you figure stuff out.

.page-template-template-site-guide-php #branding, .page-template-template-site-guide-php #top-nav, .page-template-template-site-guide-php #bottom-footer {
  display:none;
}
.page-template-template-site-guide-php #site-outer {
  box-shadow:none;
  moz-box-shadow:none;
  -webkit-box-shadow:none;
  margin:0;
}
.page-template-template-site-guide-php #site-wrapper #main {
  border:none;
  padding:0;
}
.page-template-template-site-guide-php #site-wrapper #main-inner {
  padding:0;
  margin:0;
}

Once you’ve added the styles you need to your style-sheet (and have uploaded it to your site, of course), click your “Help” button again and watch the magic unfold.

Final step: create your help pages!

Now that you have a cool container, you get to let your creativity really fly as you build all the help pages you ever wanted on your WordPress site. Be inventive and include example images or screenshots to help your users understand each point in your help content. Experiment with short-codes from other plugins to include a contact form, or even a chat feature. For example, you could try WPMUdev’s own WordPress Chat; you can add it directly to any page without shortcodes.

As always, I hope you enjoyed this tutorial and find use for it! Once again, if you need help with any part of it, leave a comment below and I’ll do what I can to walk you through the tight spots. You may also enjoy some of my other tuts: