Thesis Tutorial: Custom “After the Post” Box

Something I have at the end of my all my posts is a box letting people know that I am a WordPress expert, Thesis certified designer, and that I can work with you! This shows up on each and every post. I have this setup in Thesis’ custom_functions.php. I thought I would share how I did this and explain some other options that you might consider if you want to use it.

First, what do you want to say?

Do you want to promote something? Do you want to remind people of something? First thing is to figure out the answer to “what you want to say.” In my case it is to promote my services. Here is a screen capture of what I have at the bottom of every post:

To get this to show up on all my posts I need to add the right php and html to my custom_functions.php file inside of ../themes/thesis/custom/

Here is the code I have in my custom_functions.php file to make this happen:

function post_article_call() {
if (is_single( )) { ?>

<div class="post_ad">
	<h3>Do you need help with Wordpress, or the Thesis theme?</h3>
	<a href="http://www.doublemule.com/thesis-theme-designer-berchman-design-wp-theme/"><img src="http://www.berchman.com/wp-content/uploads/2009/08/double-mule-badge.png" alt="Image of DoubleMule certification. I'm a Thesis Certified Designer." /></a><p>If you are a web designer or web developer needing help, or a <em>'do-it-yourselfer'</em> looking for a professional Internet presence I can help.</p> <p>If you need help with a specific WordPress or Thesis theme issue or a complete website, I offer consultation, complete web design, and web development services.</p> <p><a href="http://www.berchman.com/hire-a-specialist-that-would-be-me/">Get in touch and we can talk about your needs and start the process</a>.</p>
</div>
<?php }}
add_action('thesis_hook_after_post', 'post_article_call');

You will notice that in the php I am testing to see if the content in question is a post using ‘is_single‘. If it is a ’single post’ we then insert the “after the post” box.

How about a specific category of posts?

Let’s say I wanted to change how my “After the Post” box shows up. Instead of every post what if I wanted it to show up on only the posts that are in the “Thesis” category of my blog? We need to change the conditional at the beginning of the php. Here is the code I would use to do this:

function post_article_call() {
if is_category('thesis')) { ?>
...

I am using the slug name for the category above. I could also use the category number as well, in this case ‘99.’ You can find the category number by hovering over the category link your WordPress admin area and looking at the status bar at the bottom of your web browser.

What if I want more than one category ?

You could have code checking for more than one category and insert the “After the Post” box. Here is the code to check for either the “Thesis” category or the “WordPress” category:

function post_article_call() {
if (is_category('thesis') || is_category('wordpress')) { ?>
...

From this you can see how you could really create some interesting combinations.

What if I want more than one “after the post” box?

So to take this one step further, you could have multiple “After the Post“ boxes depending on categories. You could create one for each and every category if you liked. Just repeat the code above in the first example and test for the right category.

It’s in there now but what about the “look?”

Once the code is in place the next piece is to style it using some CSS. You will want to consider the look of your message so there is contrast between your message and the content of your posts. You want people to notice your message. Here is the CSS I have added to my custom.css file inside of ../themes/thesis/custom/

/* This formats the outside box */
.custom div.post_ad {
background-color: #deb859;
margin: 0;
padding: 6px;
border: 1px solid #787878;
}

/* This formats the headline */
.custom div.format_text.entry-content div.post_ad h3 {
margin-top: 0;
font-weight: bold;
font-size: 1.1em;
line-height: 1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
padding-bottom: 5px;
margin-bottom: 6px;
}

/* This formats the text */
.custom div.format_text.entry-content div.post_ad p {
margin: 0 0 9px;
}

/* This formats the image */
.custom div.post_ad img {
float: right;
margin-bottom: 8px;
margin-left: 8px;
}

/* This code is not in my CSS but I decided to add it in.
This formats the color of a hyperlink */
.custom div.post_ad a {
color: #446677;
}

So now you see how you can add this type of content to your own website/blog.

As always, hope this helps and let me know if you have any questions.

And here is my box below.

Tagged as: custom functions

Do you need help with Wordpress, or the Thesis theme?

If you are a web designer or web developer needing help, or a 'do-it-yourselfer' looking for a professional Internet presence I can help.

If you need help with a specific WordPress or Thesis theme issue or a complete website, I offer consultation, complete web design, and web development services.

Get in touch and we can talk about your needs and start the process.