In this article we will learn to insert a content after each post automatically without plugins in wordpress.
One of the greatest things in WordPress, is that we have a lot of tools and plugins to make for us almost anything we could imagine without having to code.
But plugins has some disavadvantages:
-
- WordPress is constantly updated, as well as the plugins. This could lead to errors because, sometimes, plugins are abandoned and no more updated and that could cause the plugin doesn´t work properly with lastest wordpress versions, as well as security risks.
- The updated plugin could have issues that it hadn´t before the update, at least until they are fixed by the plugin developers… if they are.
- It could have incompatibilities with other installed plugins
To avoid all of these problems, you can always code the funtionality by yourself. Sometimes you will need advanced coding skills but other times almost any person with basic wordpress and php knowledge could do it.
We will append some text to the end of each of your articles, on the main page where all posts are listed, as well as on every post single page.
The first thing is to access through FTP to your theme files (in case you have deployed it, otherwise just go to your local installation). Usually they are on wp_content/themes folder. Of course you will need your FTP access info which can be given to you by your hosting company, so ask them for it.
Inside the theme folder, you can find two files:
- style.css
- functions.php
By the way,you can see I used a child theme, something I strongly recommend if you customise your theme. Learn more about it here
So, just open your functions.php file .
We will use something called filters to add a function which will add the desired block of code, in this case, to the bottom of each post. But you could add it after each post.
We will add the following code:
function auto_insert_after_post($content){
if (is_single() || is_home()) {
$contentTop="<div class='post-footer-div'>";
$content .= $contentTop. '<p><b>If you liked the post or you have seen any error
on the info provided on this article, please feel free to contact me
on <a href="https://www.linkedin.com/in/francisco-javier-prieto-gut/">linked in</a>
or <a href="mailto:admin@avanzartewebs.com">by email</a>.
I will be glad to talk to you.</b></p>'.$contentBottom;
$contentBottom="</div>";
}
return $content;
}
add_filter( 'the_content', 'auto_insert_after_post' );
What this code does is creating a function called auto_insert_after_post .
Inside the function we have a condition based on is_single() and is_home() functions returning values.
- is_single() will be used to show the content we will create, if we have a single post (so, on each single post page)
- is_home() will be used to determine if the current page is the blog´s main (home) page. In that case, content will be shown
Of course you could use only one of the functions if you want, for example, the code block is only showed on the single post page or the main page.
Inside the IF statement we have 3 variables (you could do it with only the $content variable, but I decided to created 3 variables to add some HTML code, like borders, on what is more for an easier way to understand and manipulate).
The $contentTop and $contentBottom variables are appended to the $content variable, along with a string which will be the text shown and also some HTML code to include some links and formatting. The $content variable will be returned, so the add_filter() function -which will call this auto_insert_after_post() function we created-, can use it.
Now all we have to do is using the already mentioned add_filter() function, with two parameters
- the_content is the hook name (as filter is a type of wordpress hook), you also can read more about the_content hook here
- auto_insert_after_post is the function name we defined before, which will be called by add_filter()
Now you can see how at the end of each one of my posts, the code is created. You also could notice that on the $content variable, one div element has a class called ‘post-footer-div’, which I used to add some styles to the code created with this filter. If you want to create a class and create or change its styles you must do it on the above mentioned style.css file , on wp_content/themes/your-theme-folder.
In my case I used this css code:
.post-footer-div{
border-top:2px solid black;
padding-top:20px;
border-bottom:2px solid black;
}
The padding will create some space between borders and letters
Hope this article is useful to you. In any case, see the result at the bottom of this article 🙂
Maybe you can find more useful info here
