Add Text Before And After Content In WordPress Using Hooks (Complete Guide)

This post will help you learn how to add or modify text before or after all WordPress content like posts or pages.

The best part?

You don’t need to be a WordPress or PHP expert.

(In other words, I will provide you with step by step instructions on how to add or modify text in WordPress posts and pages)

Let’s dig right into it!

wordpress add text before and after content

Contents

Part 1
Understanding WordPress Hooks: Actions And Filters

In this part I will tell you about WordPress actions and filters.

Why?

Because these are mechanism essential to how WordPress works.

We will make use of these mechanisms to add text before or after the content of posts or pages.

If you already know what a WordPress hook is, you can skip to Part 2 of this guide.

If you know about how to write a WordPress plugin and simply want the plugin code for adding text before or after all WordPress posts, then skip to Part 3.

wordpress add text before and after content

Content Management System Usage
(2017-2018)

WordPressJoomlaDrupalSquarespaceMagentoWixBloggerPrestaShopOthers

Chart Made With:
Infographic Charts HTML Tags Library

WordPress: 59.9%
Joomla: 5.8%
Drupal: 3.8%
Squarespace: 2.4%
Magento: 2%
Wix: 1.7%
Blogger: 1.5%
PrestaShop: 1.5%
Others: 21.4%

%
Of All Websites Use WordPress
You probably already know this:

WordPress is one of the most used CMS covering almost 60% of all websites using a CMS.
wordpress usage survey
w3techs
Web Technology Surveys

WordPress content is made up of posts and pages. Every time a page or post is displayed, WordPress passes that content through a series of filters. Every time a user performs an action, WordPress also passes that through a filter.

These two mechanisms are called WordPress hooks, and there are 2 types of hooks:

  • WordPress filters
  • WordPress actions

Why is this important?

We can use those hooks to alter how WordPress works. In our case, we can use filters to add text before, after or even inside posts and pages.

All WordPress hooks have an identifier. Check the WordPress documentation for the full list of WordPress filters and actions.

Since we will be using filters to modify the text of a post or page, we will only focus on them.

WordPress Content Filter the_content

When WordPress displays the content of a post or page it will always run the filter named the_content. We can inform WordPress that we want to implement our own behavior for that filter.

From WordPress’s documentation:

The the_content filter is used to filter the content of the post after it is retrieved from the database and before it is printed to the screen.

A plugin (or theme) can register as a content filter with the code:

<?php add_filter( 'the_content', 'filter_function_name' ) ?>

Where ‘filter_function_name’ is the function WordPress should call when the content is being retrieved. Note that the filter function must return the content after it is finished processing, or site visitors will see a blank page and other plugins also filtering the content may generate errors.

filter_function_name should be unique function name. It cannot match any other function name already declared.

This is important to understand:

Filters are meant to work as a pipeline. One filter implementation output is the next one’s input.

wordpress filters are like pipes

So, in a filter, we receive an input, do our processing on that input, and pass the modified input as an output for other filters.

This goes on and on until the final output is displayed on the screen.

In the next sections we will see practical examples of filter implementations for adding and modifying text before and after post and pages content.

Part 2
Two Methods To Add A WordPress Custom Filter:
Using The Theme Or Using A Plugin

Now that we know how to create our own “the_content” filter, where do we place it?

That’s an easy one:

You can implement custom filters in two ways:

  • Modifying the site’s theme
  • Creating a custom WordPress plugin

If you are impatient and already know how to create a WordPress plugin, you can skip to Part 3, where we start with use case plugin implementations that will add content before and after a WordPress post.

wordpress add text before and after content

As we’ve seen, in order to have WordPress run our filter, we need to register our filter. But where do we do that? We need to put that code where WordPress will pick it up and execute it.

Method 1

Placing Our Custom WordPress Filter In The Theme

The quickest would be to place the filter in the theme’s function.php file. Go to your WordPress admin console and open up Appearance > Editor and select your theme from the drop down on the right. Then choose the Theme function file called function.php.

In this file, add the code for the filter at the end:

function my_content_filter($content){
 //this is where we will implement our filter
 return $content;
}
add_filter( 'the_content', 'my_content_filter' );

A word of caution:

You can mess up your site if you are not careful with this file. That’s why, I recommend the safer method:

Method 2

Creating A Plugin To Add the_content Filter

To create a WordPress plugin you need to have access to the server where WordPress is installed. Usually, you will have either a online admin tool like cPanel, or you will use a FTP client tool like FilleZilla or WinSCP.

In my old post How to use jQuery plugin with WordPress plugin tutorial I’m going quite in depth into how to create a complex WordPress plugin.

But, not this time.

I’m only going to tell you this:

Go into the WordPress folder, under wp-content/plugins/ create a new foder add-content-plugin.

In that folder, create a file functions.php and put this content in it:

/*
* Plugin Name: CodingDude Add Content Before/After Plugin
* Description: Plugin for adding content before/after a post in WordPress
* Version: 1.0
* Author: @codingdudecom
* Author URI: https://www.coding-dude.com
*/ function my_content_filter($content){ //this is where we will implement our filter return $content; } add_filter( 'the_content', 'my_content_filter' );

And now, let’s get to the main topic of this post: adding content before and after a WordPress post.

We will go through several specific use cases and the filter implementation for them.

Ready?

Part 3
WordPress Plugin Use Case #1:
Add Text Before Or After Post

In this part we will implement a WordPress plugin that will add some text before or after the post content.

We will simply implement our function for the the_content filter.

We will use two PHP variables $before and $after where we will place the text to go before and after all the posts.

Let’s begin!

wordpress add text before and after content

Without further ado, here’s the code for our plugin that will add content before or after all our WordPress posts:

function my_content_filter($content){
  $before = '<p>This content will go before WordPress posts</p>';
  $after = '<p>This content will go after WordPress posts</p>'; 
  //modify the incoming content 
  $content = $before . $content . $after;
return $content; } add_filter( 'the_content', 'my_content_filter' );

As I’ve said, I will not go into technical details. The dot operator simply concatenates text. The only thing to know here is that the text or HTML in the $before/$after variables will go before/after all WordPress posts.

Our code has one small problem: 

The content of all posts, but also ALL pages will be modified by this piece of code.

Maybe that’s something you want, but what if you only want the text additions made only in the posts?

Another less obvious thing, as pointed out in the article Playing Nice With the_content, the_content filter is called under other circumstances that might not be what you want like widgets or plugins run in the background.

So, how do we add content only in the posts?

We will use the is_single() and is_main_query() WordPress functions to make sure we are adding text in the right place:

function my_content_filter($content){
  //only add text before WordPress posts
  if(is_single() && is_main_query()){
    $before = '<p>This content will go before WordPress posts</p>';
$after = '<p>This content will go after WordPress posts</p>';

//modify the incoming content
$content = $before . $content . $after;
}
return $content;
}

add_filter( 'the_content', 'my_content_filter' );

What kind of text can I add in the $before and $after variables?

We can use regular text, HTML or even WordPress shortcodes. So this is really a useful tool we have here.

Here are just a few ideas about what you can use this plugin for:

Part 4
WordPress Plugin Use Case #2:
Add Text after (or before) content
based on publish date

In this part we will take a look at another use case. Adding text before and after content of certain posts.

In particular, we will only add to posts after a certain publish date.

I actually found some questions online related to this, so it’s a real life use case scenario.

Even more,

This will show you a simple technique for how to apply our plugin selectively.

wordpress add text before and after content

Let’s say for example that we have a SEO blog. We’ve written a lot of articles about how Google indexing work.

But, Google announced it’s 7th Penguin algorithm update On September 23, 2016. That means that a lot of posts on our blog might not be accurate.

We can solve that by adding content at the end of every post published before September 23, 2016 stating that the information might not be accurate as of that date, and maybe even link to a new post with up-to-date information.

This is how to do it:

function my_content_filter($content){
  //only add text before WordPress posts
  if(is_single() && is_main_query() && get_the_date('Y-m-d') < "2016-02-28"){
    $before = '<p>This content will go before WordPress posts</p>';
    $after = '<p>This post might contain outdated information due to Penguin's update of Sep 23rd, 2016. Check out this post for up-to-date information.</p>'; 
    //modify the incoming content 
    $content = $before . $content . $after;
  } 
  return $content; 
} 

add_filter( 'the_content', 'my_content_filter' );

We are using the WordPress built-in function get_the_date() to ensure that our filter is only applied to the posts we want.

Part 5
WordPress Plugin Use Case #3:
How To Replace Old External Links With New Ones In All WordPress Posts Automatically

So far we’ve used our plugin to add text before or after a post’s content.

But, if we get access to the post content, can we not also change it?

Of course we can!

There are a lot of use cases in which we can use this plugin exactly for changing the text of a post.

wordpress add text before and after content

I’m into affiliate marketing.

That is, I’m referring people to certain commercial digital products I create review, and if users buy that product I get a percentage. There are a lot of affiliate programs out there, the most well known is Amazon.

The tracking of transactions is made via parameters in the URL that I refer. That’s how the seller knows that the buyer came from me.

Recently, I’ve been hit by the following news:

The affiliate program I am part of has decided to switch to a new way of tracking purchases. They’ve totally changed the affiliate referral URLs.

The problem?

Over the last few years I’ve been writing and writing articles which included referral URLs in the old style. But, those will be pretty much useless once their new tracking system gets into place.

The old URL looks like this: https://codecanyon.net/item/infographic-charts-and-graphics-html-tags-library/6351274?ref=psddude

While the new URL looks like this: https://1.envato.market/c/361744/275988/4415?subId1=codingdude&subId2=2907&u=https://codecanyon.net/item/infographic-charts-and-graphics-html-tags-library/6351274

The solution?

My content plugin. I will show you how to use it to replace old affiliate links with new links in all WordPress posts automatically:

function my_content_filter($content){
  //only add text before WordPress posts
  if(is_single() && is_main_query()){
    //reply all occurances of the old URL with the new URL 
    $content = str_replace('https://codecanyon.net/item/infographic-charts-and-graphics-html-tags-library/6351274?ref=psddude', 'https://1.envato.market/c/361744/275988/4415?subId1=codingdude&subId2=2907&u=https://codecanyon.net/item/infographic-charts-and-graphics-html-tags-library/6351274',$content);
  } 
  return $content; 
} 

add_filter( 'the_content', 'my_content_filter' );

A simple search and replace of text using the PHP function str_replace() and we are done.

NOTE: You can use exactly the same techniques for a number of other things like for example replacing YouTube watch link to an embed link. Simply switch this in the code:

$content = str_replace('https://www.youtube.com/watch?v=', 'https://www.youtube.com/embed/',$content);

Conclusion

I hope this post was helpful and you found at least one new thing.

Now, it’s your turn:

Are you planning to give this a try and use a plugin for adding text before or after a post content?

How about replacing the content in a post with this plugin?

Or maybe you have an excellent piece of content that you think I should add.

Either way, let me know by leaving a comment below right now and don’t forget to subscribe to our newsletter for programming related updates.

web design axioms we want you

Scroll to top