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
Javascript Wordpress

Javascript manually coded Google Maps

google-maps

 

Many times, WordPress plugins give a lot of problems; so, if you have time and skills, i think is better to implement the funcionality with your own code.

The plugin I was using for the google maps on a client´s site

https://intepsicologiabilbao.es/contacto-inte-psicologos/

So I decided to code it, then I could learn a bit and also improve it.

Now each time you click the icon, the info appears/ disappears, and you can make a call to the client pressing the link, with the help of the href=tel attribute.

I have uploaded code to Github, just take in mind you must set your own API KEY with a billing account in order to use it properly on production. You have more info on the project`s README.md

https://github.com/Franweb79/google-maps-test

Categories
Silly Wise Tips Wordpress

Silly Wise Tips: how to stop text from being a link when writing on wordpress

silly-man

 

Sometimes I found that, when I am writing a post, and I add a link, it is hard to stop the link on the next characters  like happened to me on this example.

The shortest thing, opn my ignorance, I found to do it is going to the text tab on the editor page

text-tab

There you can easily skip the </a> tag (which marks the end of a link, and start writing there:

link-tag-termination

Easy ans silly? YEAH, BUT I FEEL SO PROUD 🙂

Image from: Ryan McGuire on Pixabay