Categories
PHP Wordpress

Insert a content after each post in WordPress

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

image to show the file we must edit, which is functions.php, to illustrate insert a content after each post in wordpress

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

Categories
Wordpress

How to be able to add “target” HTML attribute on WordPress profile edit page

One of the first things i liked when starting this new blog based on wordpress, is that, when I was writing my bio, I could use HTML tags on the textarea! (in case you didn´t know it)

profile-section-tags

But joy turned into “sorrow” when I noticed I couldn´t use the HTML target=”_blank” attribute. It will be simply removed if you try to add it.

target=”_blank” makes possible that when you click on the link, page is opened on a new tab.

I investigated a bit and I found a solution here,

https://wordpress.org/support/topic/links-on-biographical-info-not-opened-in-new-tab/

bcworkz tells us it has been made that way for a good reason and it is a poor practice:

According to many UI experts, causing links to open in new windows is not advised. It confuses some users, and users who like links opened in new windows will do so for themselves anyway. It’s poor practice to presume you know what users want to do. WP devs intentionally disallowed the target attribute for this very reason. You may wish to rethink this strategy.

Despite that, I find much more comfortable that the link is opened on a new tab, and the same user kindly gives us the code to do it.

 // Allow target attr in anchor tags

    function bcw_allow_target( $attr, $context ) {

        if ('pre_user_description'== $context ) $attr['a']['target'] = true;

        //"rel" attr allowed by default in this context

        return $attr;

    }

    add_filter('wp_kses_allowed_html', 'bcw_allow_target', 10, 2 );

You must add it on the functions.php file of your wordpress theme. BUT I STRONGLY ENCOURAGE YOU TO CREATE A CHILD THEME FIRST.

Why and how to do that will be a post soon. For the moment take a look here.

What he does is adding a filter. Actions and filters are called in WordPress HOOKS, and are very important on this platform.

As said on this spanish blog, what filter do more or less is to modify the info output before it is recorded on the database or shown on the screen.

For example, one typical filter is called the_content (see available filter list here).

the_content for example can be used to concatenate a text to a given content which will be passed as parameter

<?php

/*first you declare what filter must do on a function
function add_text_to_content($content) {
    $content .= " | written by Pablo López";

    return $content;
}

/*then you use add_filter() in order to be able to use the filter
add_filter( 'the_content', 'add_text_to_content' );

So, with the filter given by bcworkz we are able to append the target HTML attribute to our html code when we are editing our profile page (check it if you want)