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
- 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
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.
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.- We’ll create a custom page template for our help content
- We’ll register a new sidebar to use in our custom template
- We’ll use a cool plugin called Hierarchical Pages Widget for the dynamically updating table of contents
- We’ll add a bit of javascript magic to create the popup
- We’ll write some custom styles to create the layout we want
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.
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”.
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!
No comments:
Post a Comment