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:

post-image-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://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.

Reblog this post [with Zemanta]

Do you need help with your website?

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

Do you need a WordPress consultant? Someone with experience?

I specialize in making WordPress work for people.

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

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

  • Willam

    Nicely done bro. Great tutorial.

  • Very nice tutorial. I have tried the same sometime ago in my blog – with two boxes after the post.

    You can check that out – http://thoughtsunlimited.net/blog

  • Pingback: Twitted by berchman()

  • thanks for this great post. I have it on my site and it looks amazing.

  • jaylane

    This is EXACTLY what I've been looking for. I used OpenHook to insert a “Subscribe to my blog” link after each post but it was also showing up on all my pages. Thanks for the great information!

  • ilovearches

    Thanks for this tutorial, I am excited to start using on my site as I get a bit more content.

  • Chris,
    Glad I could help.

  • Really really interesting, thanks a million.

  • Pingback: 71 Best Tutorials for Thesis Wordpress Theme Users()

  • Very Well written. I needed this from sometime. Will get back to you if i need any assistance 😉 cheers

  • Very Well written. I needed this from sometime. Will get back to you if i need any assistance 😉 cheers

  • Awesome, so helpful!

    I've been looking for the code to achieve this for awhile, and now that I'm using Thesis 1.6 it's ready to rock!

  • Great.
    Glad it helps Joe.

  • Pingback: Thesis Theme for WordPress Tutorial: Custom After the Post Box | Social Media Commando()

  • Cecily Walker

    Hi there,

    I've followed these steps to the letter, yet I can't seem to get this hook to show up using your is_category code. It works fine if I use is_single. I've double checked to make sure if I'm entering the right category slug, and I am. Do you know why this might be happening? Thanks.

  • test

    test

  • Thanks for taking the time to write this up. Could you help me understand a problem with the thesis hook after_post?

    I've got the after_post configured and I'd like it to display on the homepage listing of posts as well… but how can I prevent this from displaying on all pages?

    I've created a custom social media bar but I only want it on posts and not restricted to single posts.

    Thanks in advance

  • Hi Keith,
    You need to create a function that filters for only the home page:

    function home_pagecustom() {
    if (is_home() || is_front_page()) {
    ?>

    [your stuff]

    <?php }

  • Hi Cecily,
    Have you tried using ID instead of slug? Sometimes that does the trick.
    Let me know if you have any questions.
    Hope this helps.

  • Thanks for the reply. I discovered conditional statements don't work well w/
    Openhook. Migrated everything to the native customfunctions file and works
    fine. Thanks for taking the time to help me out. Much appreciated sir.

  • Hi,

    Thanks for explaining this topic in a way that a non-developer can understand.

  • Hi,
    I'm really excited about being able to filter posts by slug/category. However, like Cecily, I can't make your code work using that method. I've tried both 'slug' and 'full category name' in the code. 🙁

    Do you have any ideas on how I could fix this?

    Thanks for your help!

  • Lola

    I have a bit of a dumb question… I'm using Thesis 1.6 and I removed all borders but now want to replace one vertical border separating the main post area from the side columns. Could you please tell me how?

    Thanks!

  • Lola

    I have a bit of a dumb question… I'm using Thesis 1.6 and I removed all borders but now want to replace one vertical border separating the main post area from the side columns. Could you please tell me how?

    Thanks!

  • Thank you so much for providing this information. I have spent almost all night looking for an answer to have this added to my blog and nothing seemed to work. This is the only code I have found to work.

    Thanks Again!

  • When in the admin area, go to Posts/Categories/ You should then see a list of your categories. Hover your mouse over the category you want and look at the status bar at the bottom of your browser. There is a something that looks like “cat_ID=3” That #3 is your category ID. You can try to filter on that variable. Hope this helps.

  • You can use a background image on the wrapping div (div#content) and make it tile vertically.

    div#content { background: url(path_to_your_image) repeat-y; }

    • Shariffse

      your code adds the line to the left but the sidebar is on right i want a diving line btw sidebar and content.

      • That is provided by default by Thesis.
        You need to check you css file to make sure you are not hiding it.

      • That is provided by default by Thesis.
        You need to check you css file to make sure you are not hiding it.

  • Kimberly you are very welcome. I'm glad the code helped you out.

  • Jean

    Thanks for this great post. I have it on my site but the CSS code I have addes to my custom.css does not work, You can check that out http://www.acidrefluxzoom.com
    Do you know why this might be happening? Thanks

  • Raymond

    I've done this great tutorial, but when I try to change it so the box only shows under a certain category, it does not work.

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

    Do I add this code as is, including the 3 dots? I've tried all kinds of ways, using the slug as well as the ID #, it is not working for me.

  • Mary Hutson

    Didn't work for me, either.

  • Raymond

    Is there anyone here using this code for the boxto ONLY show up on a certain category? If so, would you mind showing your custom_functions code you used? Mary and I would REALLY appreciate it. Thank you.

  • Desperate to get this sorted, so I repeat….
    Is there anyone here using this code for the box to ONLY show up on a certain category? If so, would you mind showing your custom_functions code you used? Mary and I would REALLY appreciate it. Thank you.

  • Hi Raymond, In the first example you posted you have this:

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

    You have unmatched parenthesis: ('thesis'))

    Try this:

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

    [ your code goes here but without the brackets ]

    <?php }}
    add_action('thesis_hook_after_post', 'post_article_call');

    Hope this helps.

  • I appreciate you getting back to me Berch. I have tried this, and for some reason, it will not work on my site for a single category. The box just fails to show up at all, it only shows up with I have it set to (is_single … which means it will show up on every single post, which I did not want, but will have to live with. You have any idea what could be causing it not to show up as it should, only on a certain category? Maybe something else in my custom_functions file preventing it from working properly? Thanks again Berch!

  • Pingback: ???? » ?????????()

  • Great post. Thanks man! Just great tutorial. I'm going to use that on my site. Thanks again

  • jaysonwhelpley

    Do you know of any way to make a specific category always post an excerpt post on the main page, but show the full post on the single-post page.

  • Pingback: Top 25 Thesis Tutorials for Newbies()

  • Fid

    It worked for me to change “is_category” to “in_category” , using WP 2.9.2 and a custom theme with most of the code from this tutorial.

    Hope this helps

  • Raymond

    FID!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    I can not believe this. It finally works… changing 1 letter from “s” to a “n”. is-in!!

    I was going crazy trying to get this to work, and I had actually given up and just accepted the fact that my “after content box” would show up on every single post…. not anymore.

    Berch, if you read this, PLEASE make adjustments to this in your tutorial, I'd hate to see someone else racking their brain trying to get this to work properly.

    Thanks again Berch for this GREAT and very helpful tutorial.. and a big thanks to FID, for saving the day! 🙂

  • Raymond

    🙁

    I was so excited. But then after working on some of the “pages” on my site I noticed my “after content box” was there at the very bottom. Not sure why this happened. It was showing up randomly on certain pages, not all. But as for as the “post”, it seemed to work as it should. I had to change it back to where it now shows up on ALL my posts again… oh well. It just wasn't meant to be for me I guess. 🙁 Thanks again guys.

  • Brandon

    you rock thanks a bunch!

  • Brandon

    you rock thanks a bunch!

  • For some reason did not see your comment. Did you resolve the issues?

  • sir can u show me how to place this widget before “Share and Enjoy” button? please..

  • Hello i just paste the exact code in my blog, but its background color is white. I tried to add different hex codes to change the color of BG. Still not working.

  • Strange question, but can you CHANGE the category 'id' number? I found code that will let me change the order of my cats on my nav bar by ID instead of alpha, but I don't t like the ID order…

  • Manuel Molina

    very useful! Thank you very much! How can I make the ater-the-post box be seen also on the home? that is, when the post is shown on the home, and not only on the post link?
    Would really appreciate your feedback?

  • Pingback: 15 Thesis Theme Customization Resources – Thesis WordPress Tips and Tricks — Place For Bloggers()

  • Pingback: How to add a banner or something into Thesis Open Hook, but only visible in a post?()

  • I love it and very nice of you to publicly share this…beacuse…if you “get” this, you get “it” with Thesis and should be able to do just about anything.

  • Neil

    Hi, I would REALLY, REALLY appreciate it if you could explain how to do the above, but using the Open Hook plugin. I am very, very new to this – would you be able to show me what you would enter into the after_post hook in Open Hook (so that it appears at the bottom of each post, but not page)? I would be SOOOOoooo grateful!!!!

  • Hi

    Nice tutorial will you please help me, I want to add rss feed form and Icon at that place so please guide me

    Regards

  • Pingback: 20 Awesome Thesis Theme Tutorials from 18 Different Thesis Sites()

  • Mike Degreef

    Hi Berchman, i enjoyed an used already used  succesfull some articles of you. But i do something wrong here.
    I want to display your code after each post but it show nothing.
    I added the code in custom_functions like you said. No result.
    Here is my page, http://www.ostendtennis.be

    Thx and keep up the good work.

    Mike

    • Hi Mike,
      Happy New Year!
      I looked at your site but its hard to see where the error is without seeing the source code. Can you post what you have in your custom_functions.php file?
      Thanks,
      Bert

  • awesome, exactly like what i need, thanx.

  • dima

    how do i make it align with the right side of the comment box like you have it?

    • dima

      lol. nevermind! figured it out! thank you for the tutorial. this is literally exactly what i was looking for! im definitely going to read more on your site

  • Pingback: Best places to learn theis theme()

  • Really a useful thing.. i always used plugins for this part. But using plugins increases my site load time. By using such codes it becomes easy and more customizable. thank you

  • Pingback: Best Available Tutorials for Thesis theme customization - Techiestuffs - Stuffs for Geeks()

  • Pingback: The Huge Thesis Compilation| Skins , Resources , Tutorials()

  • Your solution was the cleanest i’ve ever seen. no confusion. thanks! let me know if you want me to RT or reblog you. — @journik:disqus 

  • Lina

     Great post! Can I ask how to position the box so it appears straight after the post and above my linkwithin? Thank you.

  • Pingback: Top 25 Tutorials for Thesis Newbies()