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.
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
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!
At one time or another, we need to put a photo gallery on our WordPress website. There are numerous plugins that can accomplish this and I’ve tried a lot of them. However, very recently, I revisited one that I’ve tried before but never used because when I tried it years ago, we didn’t get along very well. I reacquainted myself with the NextGEN Gallery Plugin because of a new plugin that coordinates very well with it and now I’m a huge NextGEN Gallery proponent.
To date, I’ve not seen a single lightbox that can resize images depending upon the device you are using to view them. It allows all or selected images to respond to the device and orientation that your visitor uses to view your website. This was a huge benefit for one of my clients and I know it will be in more demand going forward.
In today’s highly social internet environment, most websites depend upon sharing of images and video to bring additional traffic to their websites. In the spirit of, “you can never make it too easy for a customer to do business with you” FooBox makes it extremely easy for people to share your images with their friends and followers on the most popular platforms. The images appear on each photo and the visitor simply clicks the image to share it on that social network. What could be easier?
By simply clicking a checkbox, you can add FooBox to all galleries on your website.
Check a box and FooBox will pull the image caption information you’ve entered and display it very nicely in your slideshow.
Because so many people use WordPress SEO by Yoast and All In One SEO Pack, support for these two plugins is built right in.
If for some reason an image goes missing, you can choose a custom message or image to show in it’s place. Much better than that silly empty placeholder that we so often see.
