How to personalize your WordPress blog to the fullest with «shortcodes»

There are posts that really enjoy butt typing.

This is one of those because it deals with a very, very useful topic:

Learn one of the most powerful techniques that exist to customize WordPress, a technique that will allow you to do literally what you want with it and, therefore, squeeze its possibilities to the fullest: WordPress shortcodes.

Perhaps the most important reason among all to use WordPress.org is precisely that it can be extended and modified to extremes that you cannot imagine if you are not already an expert in it, something that we will also see more in depth, in our intensive WordPress workshop. January org. The shortcodes are precisely one of the best tools to do so.

The counterpart is that you can only take full advantage of shortcodes if your platform is WordPress.org (which implies its own hosting). In WordPress.com, much like how it happens with themes, you only have a very limited fixed set of shortcodes that you cannot customize and in Blogger there is no shortcode concept.

In fact, the potential of what we are going to see is one of the main reasons why I recommend that, if you want to exploit the potential of your blog, stop playing bagpipes and go to the WordPress.org platform to access to these and many more possibilities.

If you do, you will see that you will start playing another league. It’s that simple.

What are “shortcodes”?

WordPress shortcodes are a kind of very simple special codes that are marked with brackets, that is, something like:

[Código] o [código param1=”valor1″, param2=”valor2″]

These codes can be added as a simple text in the WordPress editor. Be careful with the quotes if you paste from Word, they can give problems since the quotes should not be typographic, they should be normal double quotes or single quotes.

Shortcodes work in much the same way as “macros” you might know, for example, from Office applications. That is, they execute certain functions, implemented in the PHP language that will generate content.

For example, the previous soft box in which the syntax of a shortcode is shown is made with a shortcode that applies that format to that bit of text…

Another completely different example is the table of contents that you can see at the top of this page. With a shortcode, the table is created only once. Inserting it already laid out as an HTML table with its respective links in each of the titles and subtitles of this post is reduced to typing the text of the shortcode in the place of the post that we want to appear.

The shortcode used to generate this table of contents shown below is the following (in this case it belongs to the Table of Content Plus plugin):

[Toc]

In this case, using a shortcode is much better than editing the table by hand in each post, right?

In fact, in Citizen 2.0 there are shortcodes even in the soup, all the repetitive things that use custom HTML code we implement with shortcodes. Other examples are the AdSense ads or the subscription widget to our mailing list that you can see embedded in this same post and in the sidebar of the blog.

For fixed places , for example, the footer of a post, we use another technique, which is very similar to the implementation of shortcodes and that consists of using WordPress hooks , we will talk about this technique in a post dedicated specifically to it.

Simply note that in our case, the main difference is that we use shortcodes when we want to control where exactly a certain type of content should be generated and hooks when it comes to fixed places, such as the footer of each post in which we invite the reader to subscribe through the different channels available. In fact, when hooks are used, when acting in fixed places, the hook is implemented and voila, it is not necessary to expressly insert a code as it happens with shortcodes.

Imagine the things you can do with shortcodes and hooks and the productivity (and no mistakes) you gain from it.

In fact, there are many current themes that include shortcodes, such as all of Elegant Themes or WooThemes, many times they are considered “Premium” features that justify the theme being paid, which is a sign of the importance they give it Manufacturers to this great invention that first appeared in WordPress version 2.5.

5 Practical examples of shortcodes

To give you a slightly more concrete idea of ​​what we are talking about, there is nothing better than some examples.

So I have prepared a few examples of practical shortcodes that you can download in the download section of the blog. Details on how to use them are documented a little further down in this post and with each download.

1. Insert any file on your blog

This is as simple as it is useful: it reads the content of a file passed as a parameter and inserts it in the place of the shortcode, so that you can integrate the HTML or JavaScript code you want in the place of the shortcode.

This generates, for example, the subscription widget to our mailing list that you can see embedded in the text of most of our posts and depending on the structure of the post, allows us to play with inserting it in one site or another, according to be more convenient.

Download this shortcode

2. Insert AdSense in your blog

This example is actually an application of the first, but I have included it also because it is an example that will be very useful to you, not only because of how easy it is to have it now to insert the ads in your posts, but also because of the comfort that It gives to put it where you want and the absence of errors when inserting the AdSense code.

Download this shortcode

3. Insert a content index for your posts

This is another real example of a shortcode that we used in our blog (we saw it before) and that it is also a more specific application of the shortcode that inserts files. Apart from the example that I already put above, you can see it in action, in any post of our thematic series.

Download this shortcode

4. Insert Twitter and Facebook buttons anywhere on a post or page

This shortcode is actually two, one for each button. You may be wondering what is the point of a shortcode for this type of buttons when there are already an infinity of social button plugins.

Well I mainly see four reasons:

  1. That with plugins you do not usually have the freedom to put the button where you want. Sometimes the location of the button can have a very high impact on its effectiveness, so it is very interesting to be able to manipulate this aspect.
  2. Plugins usually don’t offer you many button customization With this shortcode you have them all since it uses the original implementation that the manufacturers themselves offer to their users. If you want to change these buttons, you can go to the Twitter resource area and to the corresponding Facebook page.
  3. Since manufacturers’ implementations are used, before significant updates or changes you do not run the risk of being out of date. You change the implementation of the shortcode and voila, all your posts, pages and widgets are updated immediately.
  4. And that by reusing the pattern of this shortcode you can create a new one for any social network (or other type of website that uses similar buttons) that interests you, etc. It turns out that now you want to have a Pinterest button, well no problem: you go to the Pinterest page for these purposes you generate the code for the button you want, copy the code for the Twitter (or Facebook) button and replace the part that it touches with the Pinterest code. Below you can see some brushstrokes of how to do it and in future posts we will go deeper into this.

Download the shortcode

5. Create an automatic list of your most popular posts

This shortcode is an example of a slightly more advanced and really useful shortcode that will help you to improve the bounce rate of your blog and therefore to retain readers and increase visits (especially quality visits, which really show interest in your content).

Download the shortcode

How to add a shortcode to WordPress

In today’s post we are going to limit ourselves to the shortcodes made that I have presented to you above. In another post, we will see more in depth how you can design / program a shortcode yourself.

I want to make you aware that by using shortcodes, to a certain extent, we are touching the “guts” of WordPress, in fact, we are already getting a little into the field of programming professionals in PHP and HTML. Therefore, when handling shortcodes, you have to do it carefully and paying close attention to what is done, since if you make mistakes it is easy for you to cause problems in the correct operation of WordPress.

Anyway, calm down, because if this happens it is easy to fix it as we will see below.

For this reason I also recommend very strongly that you use an advanced editor like Notepad ++ or similar , able to highlight PHP code, syntax highlighting colors helps tremendously when you want to edit by hand to one of these shortcodes to customize it to your tastes.

And by the way: this topic (how to solve incidents in your WordPress.org blog) we will cover further in our intensive workshop on how to create a professional blog from scratch with WordPress.org.

1. Get the code that implements the shortcode

Shortcodes are made up of the code that implements it (a PHP function) and a call to another function (add_short_code) that registers the shortcode in WordPress (activates it).

You do not need to know what these function and function call concepts are exactly, they are concepts of programming languages, I have simply introduced these terms so that they do not sound Chinese to you if you find them when downloading a shortcode of someplace.

The pint that has a shortcode is as follows (which is the simplest shortcode pattern that exists):

// Sintaxis de este shortcode: [hola]

function holaMundo() {

return ‘¡Hola mundo!’;

}

// Registra el shortcode: asocia el nombre del shortcode ‘hola’

// a la ejecución de la función ‘holaMundo’

add_shortcode(‘hola’, ‘holaMundo’);

I am not going to go into what this code does exactly, we will see that in a future post that explains how to create shortcodes like this yourself, even when you are not a technician with knowledge of PHP and HTML programming. But anyway, looking at the comments (they start with ‘//’), you can already intuit a little how it works.

What interests you for now is that when you download a shortcode (there are many that can be downloaded for free) the shortcode will consist of this type of code (unless they are already integrated into a theme or plugin and therefore you do not see the code directly).

2. Prepare your WordPress to be able to add shortcodes to it

In principle, you must insert the code of the shortcode in the file functions.php of your active theme that is in the directory ‘wp-content / themes / [name of your theme]’.

There are basically three options to do it:

  1. With a plugin like Code Snippets
  2. “Bareback”, that is, manually editing the file php
  3. Implement your own plugin that contains the shortcode (s)

Today we are going to focus on the first option since Code Snippets has a great advantage if you are not a technician: it does it all automatically. You forget to directly edit the functions.php file, you simply add the functions from the plugin and that’s it.

In fact, this plugin is not intended specifically for shortcodes, but to facilitate the “bareback” editing of functions.php. Therefore, it is useful for anything that you want to do in functions.php, not only related to shortcodes.

With the plugin you also solve an important problem that arises when you work “bareback”: that the updates of the themes crush this file so that, if you do not take stockings (later we will see them), you lose your modifications. The plugin avoids all this at its root.

However, in this, not all the forest is oregano, if you use the plugin it is one more dependency: you are exposed to possible errors in the plugin or that at any given moment its developer abandons it and thus stops working in new versions of WordPress, which can be a problem when you already have a wide base of shortcodes.

Luckily, you can manage this problem very well with the “Export to PHP” option, which converts the “snippets” of shortcodes into a single PHP file, which in turn can be used directly by manually editing functions.php and thus restore without problems your shortcodes.

Therefore, use the function “Export to PHP” on screen “Manage Snippets” to always keep a copy of security updated your snippet in PHP. Also make a backup in Code Snippets own format (“Export” option on the same site), then we see why.

In future posts we will see in depth how to work either manually with functions.php or even implementing your own plugin, which is also very interesting  if you are not afraid to learn to get your hands “in the dough” a bit.

3. Add the shortcode to WordPress

Now that everything is ready, it is as simple as adding the shortcode code with the Code Snippets plugin. This is done in the Snippets / Add New option and you will get the screen that you can see in the screenshot above.

At this point I insist that you read the shortcode documentation beforehand so as not to screw up in this step.

4. Insert the shortcode in a post, page or widget

There are basically three ways you can find yourself and the shortcode documentation has to indicate which of them are supported.

Let’s see them with an example that would be a ‘tweetButton’ shortcode:

  1. No parameters: [[tweetButton]
  2. With parameter: [tweetButton text = ”I recommend this reading:”]
  3. With content: [tweetButton] I recommend this reading: [/ tweetButton]]

 

If everything went well (WordPress does not show errors), you can already test your new shortcode in your posts, your pages or widgets and enjoy it.

What to do if I have problems?

Regardless of whether you’re having trouble or not, before using Code Snippets, I highly recommend that you take an easy look at the product FAQ.

If you make a mistake in the code of a shortcode (which you have added as a “snippet”) normally the snippet will simply stop working without further ado and instead you will see that the shortcode appears as text where the result should really be. That this shortcode should generate. In such a case, it is simply going through and editing the snippet code until you correct the errors and see that everything works.

However, you may have more serious problems.

WordPress can get to display error messages in the posts or even, in extreme cases, the screen can be completely blank or full of errors.

As I mentioned before, the topic of how to act in the event of incidents in WordPress.org (with shortcodes, hooks, plugins, etc.) we will see more in depth in the intensive workshop of WordPress.org, but below I am already anticipating some things to the specific case of shortcodes.

If adding a new shortcode or editing an existing one causes problems, follow the next steps (also look at the screenshot on the right side where you can see the plugin’s user interface):

  1. You disable the shortcode in Code Snippets.
  2. If the problem still persists or if you even have problems accessing the WordPress administration panel (this is already very extreme), you delete the code snippets plugin from the plugins directory (wp-content / plugins / code -snippets).
  3. Once deleted, WordPress will be operational again (although your shortcodes will not be operational at this time).
  4. You install the plugin again, restore the normal copy that I told you to do before adding a new shortcode to the plugin (the one that comes in * .xml format) and check that everything has returned to normal.
  5. You go through the code of the new shortcode to see where the error might be and correct it (usually it will be some kid in the edition or when copying & pasting). You can also pass the function name of the shortcode to be repeated and cause the problems.
  6. Start again with the corrected shortcode.

In any case, if you do not feel comfortable with these actions you can always ask the help of professionals in the field to do this work for a reasonable price, something we will also guide you in the intensive WordPress.org workshop.

And from here, to definitely enjoy your new WordPress features!

Arsalan Masoodhttps://arsalanmasood.com/
Internet Entrepreneur, Blogs Writer, Marketer, Social Media & SEO Expert. Passionate about WordPress Blogging, Digital Marketing and SEO. Founder & CEO of Virally Media Private Limited & BloggerGeeks

How to migrate WordPress to another server or hosting fast and easy

Migrating a WordPress website from one server to another can be very easy or complicated, depending on what tool you use. In this post I'm going to introduce...

How to create a good Landing Page with WordPress and Divi

We do the unthinkable to get visits by improving the positioning of our blog at all costs and we publicize our articles, projects, courses, day and night, etc. But...

How to install WordPress step by step in 5 minutes

In this tutorial I am going to teach you how to install WordPress in a way that will serve you for any situation: a hosting server, a...

What is a WordPress plugin and what is it for?

If I had to lean towards any particular factor that makes WordPress.org a blogging platform superior to others, this would undoubtedly be WordPress plugins. Thanks to the plugins...

Why in WordPress free themes can be very expensive

One of my first projects as a freelance was to make the website of a Tech Blog. At that time I was at the University and we...

What is WordPress, what is it for and how does it work?

Did you know that WordPress is the absolute leader worldwide for creating websites? Right now, according to W3Techs surveys, 31.7% of the world's websites are made with WordPress, the next...