How I Built my “What Next?” Box

When I redesigned this site in May 2012, I wanted to adjust the design at the end of each post, to immediately prompt people to take further action (a call-to-action).

That further action could be sharing the article if they liked it, commenting on the article if they liked it, or needed more information, or even giving people the option to hire me, if the task being described was too great for them to undertake themselves.

With that in mind, I set about designing a “What next?” box, which gives my readers exactly those options.

The design elements

The top of the box needed to have a title which would grab the reader’s attention and pull them in. I settled on the title “What Next?” and set it as an h2 tag. I then drew a line underneath that, with a border line on the element, to match the other colours already in use in the theme.

Below that, I split the box in two, with a dividing line of the same color, by setting a border-right on the left hand box, which was entitled “Leave a comment”, as an h3 tag. The box to the right is entitled “Hire me”. Each box has a couple of short sentences describing the actions and leading them to take action.

I finished by creating one last box below those two that is the full width of the containing div, entitled “Like it? Share it!” to allow people to share the article through various social sharing sites. I originally had five sites, but dropped Digg due to its drop in popularity, so I now have buttons for sharing with Twitter, Facebook, Google+ and StumbleUpon.

Each sharing button had to be adjusted to account for the different margins given by each social network, and several javascripts had to be loaded in the footer, to enable the functionality and enable the counters. I finished by adding a border-top, to separate it from the two boxes above it, and that completed the box.

The final result

In case you haven’t seen it in action on my site, it looks like this:

It looks neat and tidy, like the rest of my theme and uses all of the pre-built styles of my theme, to make it look like it fits in, instead of looking like an afterthought.

The code

And now, here’s the code that I used to build it, so that you can take it and make it your own:

For single.php

For functions.php

Bear in mind that you will need to get the code for your own Twitter and Facebook buttons etc., rather than just copying the below (since they are for my own buttons), but it should give you an idea of how to use them.

For style.css

And that’s all there is to it. Once you’ve put all that in place and modified it to match up with your own social network accounts, you should have a nice What Next? box at the bottom of each post.

You may need to tweak the CSS to make it work for your specific theme. If you have specific issues, try leaving a comment here and hopefully either myself, or someone else will try and help. Good luck!

10 thoughts on “How I Built my “What Next?” Box”

The first time I visited your site a week ago, this was the very first thing that I like to have in my own site. You’ve given mo great idea!

I will try to implement this and credit you. Though I am not sure if it’s OK with you to use the same word “What Next?” It can’t be any better than that. :) You’ve got a perfect call to action I reckon.

I’m glad others see the value in this. This was the premise behind the Socialize plugin. It adds a call to action below your posts where you can add social sharing buttons and some HTML. I think most bloggers just focus on content creation, which is great, but they don’t call their readers to action when they’re engaged.

Very creative Dave. And thanks since you also posted the code. I’m going to try these to one of my blogs. I’m not much of a coder but I can follow. By the way, if I have a social sharing plugin already installed can I use the short code of the plugin instead of editing the functions.php?

Sure, if you have a plugin that outputs information (i.e. sharing buttons) that you want to include in your What Next box, just put that in the relevant part of the code in single.php. If it’s a shortcode and you’re putting it in a theme file, just be sure to use do_shortcode.

Wish your site was as fast as this?

Do It With WordPress is proudly hosted by WP Engine, the very best WordPress hosting that money can buy.

Aside from being blazing fast, it's very secure, has a staging area to test changes before making them live, automated daily backups, malware scanning, stellar support from WordPress experts... It's just everything that you would want from your host, and more.