How I Built my “What Next?” Box

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:

What Next box

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”

  1. Jesse Veluz says:

    Wonderful Dave!

    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.

    Thank you so much Dave!

    1. Of course you can. That’s why I posted all of the code. I don’t mind, but it’s always better to be original where possible. But in the end, it’s just two words…

  2. Jon Bishop says:

    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.

    If you get a chance I would love if you reviewed my plugin:

    1. Well, I already have a backlog of plugins to review, but if life ever eases up on me, I might have a look at it. Cheers and thanks for the link.

  3. Jeff says:

    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?

    1. 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.

  4. Ricky Shah says:

    It definitely looks neat. Have you tried playing with colors to measure the conversion rate?
    The box definitely looks neat.

    1. No, I used the colors already built-in to my theme, so that it looks fluid. I wouldn’t want for it to look out of place, so I’ve not done any testing with colors.

  5. Fredrik says:

    Hello Dave,

    thank you for a great post about a layout that I think is just perfect for what I wanted for my blog. The thing is that I tried to implement it on my blog and got the result that you can see on this post:

    Something is wierd with all the images in the post and the text just went all crazy. Do you have any idea what I might have done wrong?

    Best regards

    1. Hi Frederik,

      Everything looks fairly normal to me, and the What Next box looks good. Perhaps you’ve fixed it since you wrote this comment?

Leave a Reply