What Next box

How I Built my “What Next?” Box

| 10 Comments

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!

Categories: Code & Snippets | Permalink

What next?

Hire me

If you couldn't quite manage this yourself, find it too intimidating, or just don't have the time to do it, you can always hire Dave to do it. Please get in touch so that we can discuss your needs.

Leave a comment

If you have a question, update, or comment about the tutorial, please leave a comment. I try and respond to every comment, though it may take a few days, so please check back soon.

Let a WordPress Expert help you

Do you want to try this, but feel like you need a helping hand, in case something goes wrong? My service, The WP Butler, gives you access to WordPress expertise whenever you need it. Better yet, I'll keep your site backed up, updated and secure, so that you don't have to worry about it. It's all part of the service. Use coupon DIWW and save 15% on all plans.

Visit The WP Butler

Author:

Dave has been tinkering with WordPress for many years, and he now shares his WordPress knowledge here on Do It WIth WordPress to help others realise its impressive power. He can also be hired to help with your WordPress needs. Dave, who is British, is married to his best friend, Marti, with whom he has a beautiful daughter, Ellie. When he's not dabbling with WordPress, he's probably eating Triscuits or hummus, watching an indie film or British TV show, spending time with friends or family, or exploring the world.

10 Comments

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

  2. 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: http://wordpress.org/extend/plugins/socialize/

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

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

  5. 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: http://fredrikholmboe.se/studentfotograf-stockholm-linn-blackebergs-gymnasium

    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
    Fredrik

Leave a Reply