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

<div class="what-next">
	<h2>What next?</h2>
	<div class="hire">
		<h3>Hire me</h3>
		<p>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 <a href="http://www.doitwithwp.com/about/" title="Dave - author of Do It With WordPress">Dave</a> to do it. Please <a href="http://www.theukedge.com/contact/" title="Contact The UK Edge">get in touch</a> so that we can discuss your needs.</p>
	</div>
	<div class="comment">
		<h3>Leave a comment</h3>
		<p>If you have a question, update, or comment about the tutorial, please <a href="#respond" title="Leave a comment">leave a comment</a>. I try and respond to every comment, though it may take a few days, so please check back soon.</p>
	</div>
	<div class="social-button-container">
	<h3>Like it? Share it!</h3>
		<div class="social-button" id="twitter">
			<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="daclements">Tweet</a>
		</div>
		<div class="social-button" id="facebook">
			<div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="80" data-send="false" data-layout="button_count" data-show-faces="false" data-font="arial"></div>
		</div>
		<div class="social-button" id="googleplus">
			<g:plusone size="medium" annotation="bubble" width="70"></g:plusone>
		</div>
		<div class="social-button" id="stumbleupon">
			<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
		</div>
	</div>
</div>

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.

// LOAD SOCIAL BUTTONS AND BSA AD JS IN FOOTER //

function diww_social_button_js () {
	if (is_single()) { ?>
		<div id="fb-root"></div>
		<script>(function(d, s, id) {
			var js, fjs = d.getElementsByTagName(s)[0];
			if (d.getElementById(id)) {return;}
			js = d.createElement(s); js.id = id;
			js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=196954920390058";
			fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>

		<script type="text/javascript">
		 (function() {
		    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		    po.src = 'https://apis.google.com/js/plusone.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		  })();
		</script>

		<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
	<?php } ?>
<?php }

add_action('wp_footer', 'diww_social_button_js', 1);

For style.css

#content .what-next {
	border: 1px solid #20A0F5;
	padding: 5px 20px;
	margin: 20px 0 0 0;
}

#content .what-next h2 {
	margin: 10px 0;
	color: #444;
	text-align: center;
	border-bottom: 1px solid #DDD;
	font: bold 1.7em/1.8 'Oswald', arial, sans-serif;
	padding-bottom: 10px;
}

#content .what-next .hire h3,
#content .what-next .comment h3,
#content .what-next .social-button-container h3 {
	margin: 10px 0;
	color: #444;
	text-align: center;
}

#content .what-next .hire {
	float: right;
	width: 49%;
	margin-top: 10px;
	margin-bottom: 20px;
}

#content .what-next .comment {
	float: left;
	width: 50%;
	border-right: 1px solid #DDD;
	margin-top: 10px;
	margin-bottom: 20px;
}

#content .what-next .comment p,
#content .what-next .hire p {
	padding: 10px;
}

.social-button-container {
	overflow: hidden;
	clear:both;
	border-top: 1px solid #DDD;
	padding-top: 10px;
	max-width: 344px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
            
.social-button {
	float: left;
	margin-right: 10px;
	height: 20px;
	padding: 5px 0;
}

.social-button#twitter {
	margin-top: -3px;
	width: 90px;
}

.social-button#facebook {
	margin-top: -5px;
	width: 80px;
}

.social-button#googleplus {
	width: 70px;
}

.social-button#stumbleupon {
	margin-top: 1px;
	width: 74px;
	margin-right: 0;
}

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!