Add a block of text to the bottom of every post

Add text to the bottom of every WordPress post

Some text (or HTML content) at the bottom if every post is something you might find yourself needing in certain scenarios. It can be a copyright message or even a bit of text thanking the visitor for reading your post.

While this is easy to do while you’re first writing your post or if you just have a few published posts, it gets more complicated if your site has hundreds of posts and you’d like to add to all of them. The manual route is definitely not an option here, so let’s explore how we can handle this task programatically.

The code we need to display a bit of text at the end of every post

function sg_text_to_post_end( $content ) {

  //Edit this
  $bottom_text = '<div class="custom-text">Just some text in a di</div>';
  //Do not edit below
  if ( is_single() && is_main_query() ) {
    $content .= $bottom_text;
  }
  return $content;
}
add_filter( 'the_content', 'sg_text_to_post_end' );

In the code I posted above, you can edit this part with the content you want to display. Just remember to keep the ticks and the semicolon.

[php]'<div class=”custom-text”>Just some text in a div</div>’;[/php]

How do you actually display the text?

So now we have our code and we need to do something with it in order to display our text at the bottom of every WordPress single post.

There are two ways you can do that:

  1. Use a child theme and add the code in your child’s functions.php file;
  2. Use a plugin that lets you add PHP. I personally like the Code Snippets plugin and it’s probably the best approach if you don’t have a child theme and don’t plan to use one anytime soon.

If you’re taking the Code Snippets route, here’s what you need to do:

  1. Go to your admin area and from the left hand side, locate the menu entry labelled Snippets;
  2. Click on Add New;
  3. Add a title for your snippet and in the large text box copy and paste the code, then modify it to suit your needs if you haven’t done so already.
  4. Scroll down a bit and notice a section called Settings. Make sure that you checkĀ Only run on site front-end;
  5. Click on Save change and activate when you’re ready.

And that’s about it. You can now visit your single posts and notice how your text is displayed at the bottom.

What about some styling?

It’s quite possible that you will want to make your new custom text stand out from the rest of your post. Noticed how we added a custom-text class to the div we’re displaying at the end of the posts? We’re going to use that class to add a bit of styling.

Go to Customize > Additional CSS and add this:

.custom-text {
  background-color:#f7f7f7;
  text-align: center;
}

You can modify the CSS however you need so that the text you automatically display at the bottom of your blog’s every post looks nice.

Subscribe for helpful tips and release info.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.