How to Add Custom Content After or Before a Post in WordPress

Adding custom content before or after posts in WordPress is a simple yet powerful way to enhance your website’s functionality and user experience. From displaying advertisements to supplementary information or any desired elements, this feature allows you to fully customize your posts’ layout. Whether your goal is to attract more readers, increase ad revenue, or simply refine the design, this guide will walk you through the easy steps to achieve it.

Understanding WordPress Hooks and Filters

Before we dive in, it’s crucial to understand the concept of Hooks in WordPress. Hooks are a way for one piece of code to interact with or modify another at specific points. They form the foundation for how plugins and themes interact with WordPress Core, and they’re also widely used within Core itself.

To insert or customize content, we’ll be using the the_content filter hook, which is responsible for displaying the post’s content. Here’s how it works:

function the_content($more_link_text = null, $strip_teaser = false){
   $content = get_the_content($more_link_text, $strip_teaser);
   /**
    * Filters the post content.
    *
    * @param string $content Content of the current post.
    * @since 0.71
    *
    */
   $content = apply_filters('the_content', $content);
   $content = str_replace(']]>', ']]>', $content);
   echo $content;
}

As you can see, the the_content function echoes the $content variable, which represents the post’s content on your website.

How to Insert Custom Content Before Posts

To add custom content before a post or page, simply concatenate it before the $content variable and return the $fullContent variable:

add_filter('the_content', 'add_content_before');
function add_content_before($content) {
      $beforeContent = "This is the content that will be displayed before the post";
      $fullContent = $beforeContent . $content ;
      return $fullContent;
}

By concatenating the string before the $content variable, it will be displayed at the beginning.

Adding Content After Posts

Similarly, to customize the content after a post or page, concatenate it after the $content variable:

add_filter('the_content', 'add_content_after');
function add_content_after($content) {
     $afterContent = "This is the content that will be displayed after the post";
     $fullContent = $content . $afterContent;
     return $fullContent;
}

Add / Insert content both before and after posts

You can also display content both before and after the post by combining the two methods:

add_filter('the_content', ' add_content_before_and_after);
function add_content_before_and_after($content) {
      $beforeContent = "This is the content that will be displayed before the post";
      $afterContent = "This is the content that will be displayed after the post";
      $fullContent = $beforeContent . $content . $afterContent;
      return $fullContent;
}

As you can see from the code snippets above, concatenating strings before or after the $content variable allows you to control where the custom content appears.

By following this guide, you’ve learned how to easily enhance your WordPress posts with custom content placement. Whether for ads, additional info, or design elements, this technique lets you control your site’s user experience. So start experimenting to attract more readers, boost revenue, or refine your aesthetics. If you have any questions, feel free to leave a comment below.