Add A Useful Post Footer With The Open Hook Plugin For Thesis

People go to a lot of effort to get people to visit to their site.  Once you get them there, why not encourage them to come back?

Since my blog is kind of new, I’m doing all I can to encourage people to come back and read all this fantastic, brilliant and inspirational content day after day. :)

Assuming you’re actually creating content regularly, one way you could get more readers to your blog is to give them a way to keep up-to-date on your latest content. By giving them options to follow your updates, you are lowering the barrier and making it easy for people. This is key.

The problem with a lot of the default RSS feed, contact form and social bookmark links is that they live at the top-right corner of your blog theme. Once you read down to the bottom of a post, they are long gone, but this seems like the perfect location where you should be asking your reader to follow you, the assumption being that if they got the end of an article, they might very well be interested in future articles.

post footer details

My post footer box.

They just need to know where to find it and you will show them.

One great method you can use is a single post footer, which provides your readers several ways to subscribe to your content — RSS, email, Twitter, etc. This will be displayed at the bottom of every individual post page on your site.

Let me show you one easy way to add a post footer to your blog.

Easy With Thesis and OpenHook plugin

First off, I use Thesis as my theme. It’s great: easy to customize and simple to use. However,  no matter what theme you use, you can still follow this tutorial. The steps might be a little different or more involved. Need help?

In addition to the Thesis theme, you can simplify things greatly by using the Thesis OpenHook plugin (get it here). This allows you to access Thesis system of custom hooks without needing to mess with custom theme files. (Note: I may expand this tutorial to use the native Thesis custom files if anyone asks for it. If that would be useful, leave a comment.)

Write the HTML

I chose to keep things simple, by using a simple box containing an RSS icon and some actionable text. Using an icon will show instantly what you’re trying to achieve. (Need an RSS icon? Try this site.)

You can obviously dress it up and make it as fancy as you want. Be creative and differentiate yourself. Don’t just cut and paste my example.

This is the html and text I used for my own site:

<div id="subscribe-box">
	<div id="rss-icon">
		<a href="http://feeds.feedburner.com/" target="_blank" /><img src="/icon-rss.png" /></a>
	</div>
	<div id="subscribe-text">
		I regularly add new articles about . If this article was helpful why not subscribe to my <a href="http://feeds.feedburner.com/" target="_blank" />RSS feed</a> and get the latest updates immediately. You can also subscribe through <a href="http://feedburner.google.com/fb/a/mailverify?uri=&loc=en_US" target="_blank" />email</a> or follow me on <a href="http://twitter.com/" target="_blank" />Twitter</a>.
	</div>
	<div class="clear"></div>
</div>

Format With CSS

I chose to retain some standards and decouple the presentation (formatting) from the data by adding CSS rules to the custom.css file within Thesis. (If you are not using Thesis, this would likely go in your themes style.css.)

Select the following menu (the CSS file will be displayed by default):
Thesis Options->Custom File Editor
Paste in the CSS and update the formatting to your liking:

/* Subcribe box
\#subscribe-box { padding:5px; background:\#F4F9FD; border:2px solid \#BFF0FF; width:90%; margin: 0 auto 20px auto;}
\#subscribe-box #rss-icon {float:left; width:10%; padding-top:5px; padding-left:5px; margin-right: 10px;}
\#subscribe-box #subscribe-text {float:right; width:87%; font-family:arial, verdana, sans-serif; font-size:1.2em;}
.clear { clear: both; }

Add It To OpenHook

Now we will take what you created in the HTML section and add it to the footer on each post.  (I am assuming it’s already installed on your blog.)

From the Administrator console, you access the plugin options by going here:

Appearance -> Thesis OpenHook

Scroll down or choose the hook from the floating menu. The Hook you want to use is called, oddly enough, After Post (For reference, the Thesis hook name is thesis_hook_after_post in the floating menu).

Paste in the following code:

<?php 
if (is_single()) { //only use it when displaying a single post on it's own
?>
<div id="subscribe-box">
<div id="rss-icon"><a href="http://feeds.feedburner.com/YOURFEEDID" target="_blank" /><img src="http://www.jimfmunro.com/images/icon-rss.png" /></a></div>
<div id="subscribe-text">I regularly add new articles about resources, tutorials and WordPress for web designers and developers. If this article was helpful why not subscribe to my <a href="http://feeds.feedburner.com/YOURFEEDID" target="_blank" />RSS feed</a> and get the latest updates immediately. You can also subscribe through <a href="http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDID&loc=en_US" target="_blank" />email</a> or follow me on <a href="http://twitter.com/jimfmunro" target="_blank" />Twitter</a>.
	</div>
	<div class="clear"></div>
</div>
<?php
}
?>

Be sure to select the checkbox (located below the code input field) named Execute PHP on this hook so it will actually run the code instead of displyaing it as text.

View It

Go to any single post on your blog, and there it is — a way for your readers to sign up and follow your brilliant words.

If this tutorial was useful, please consider leaving comment feedback.

Get The Next Article Sent to Your Inbox

Don’t miss the fun! Join the other awesome folks who subscribe to improve their website and content. No lame spam will be sent!

* indicates required

Comments on this entry are closed.

  • Alison Moore Smith March 18, 9:59 am

    Great tutorial. I’m a WordPress/Thesis user/developer as well. I have a similar functionality using the GreetBox plugin, but coding it is certainly the most customizable.

  • jaap May 12, 3:04 am

    Thanks. Does this also work for pages? I will give it a try anyways.

    • Jim May 14, 11:53 am

      It should work fine. The code would just go to a different hook area, but the idea is the same. Let me know how it goes.

  • Ana Goncalves May 18, 4:51 am

    Sounds excellent. I have been looking for a tutorial on how to do this for a while. I will experiment with this. Thank you.
    I wonder whether you know how to add custom text to the bottom of the reply box? As I have been seeing a lot of ‘thank you for commenting, i appreciate it’ messages just above where to leave a comment, and I’m curious to add it to my own blog, but how no idea how to go about it and I’ve searched for it and no luck.

  • Shannon Wagner April 6, 7:11 am

    Nicely written-up – thanks for the tip. And I appreciate you including the tip about only displaying on single-page posts. I think I would have forgotten about that.

    By the way, your captcha is hard.

    • Jim April 6, 12:42 pm

      Thanks for the note. I’m glad it helped. I’ll check out the captcha.

  • kim @ mommyknows September 5, 10:18 pm

    Thank you for this tutorial! It worked perfectly :)

  • Shane the Tradesman October 6, 4:27 pm

    Thanks Jim! Unlike most Wordpress tutorials I was actually able to understand this one, and better yet, managed to get it working on my personal blog pretty easily. Cheers for the info.

  • Mark Horoszowski October 27, 12:34 pm

    How would you add this using Thesis OpenHook?

    Thanks so much – great post!

  • Susan Branch Smith November 6, 2:29 pm

    Jim, great tutorial. Really enjoyed it. Yours was the best answer I’ve run across, as I learn Thesis. However, I can’t seem to style my footer text to look like yours (I may change it, but wanted to make sure it took the way you designed it.) Any ideas? THANK YOU
    Susan

    PS I’ve put it at the end of each blog http://thebuzzfactoree.com/blog/

    • Dawn Storey February 7, 9:15 pm

      Susan, I could have written those exact words! I’ve followed Jim’s tutorial, and applied it to several of my blogs, and while the post footer does show up on all of them, none of the styles seem to have been applied.

      Jim, if you have any suggestions to offer I’d greatly appreciate it!

Next post:

Previous post: