Create Shortcodes for our WordPress theme

Since we started with this project, we always wanted it to have our own label, and that is why the second template we use in DesdeLinux, it was created by us 100%.

Then other versions followed, and although we can buy or hire certain web services to create our designs like those of StudioDWeb.com, or buy templates already created in ThemeForest.net, we have always wanted to have our own, adapted to our needs and go through WebDevelopment.com can be of help 😀

Anyway, I'm passionate about Web Design and Development, and I'm already working on the new topic for DesdeLinux and I will show you some Screenshots of how it looks.

The idea is not to get out of what we are already adapted to, so many elements remain the same or in a similar way. I start with the home page

And this is what the articles would look like:

As you can see, it is fitting our measure and we have included new shortcodes for the elaboration of the articles.

That is why it occurred to me to share with you how to create one of them (the information one) in case you want to include them in your topics of WordPress. I mean, something like this:

I am not an expert in programming with this CMS, so I will not try to explain why and how it works this way, I will only show you how to do it, period.

For this we make use of «the Swiss army knife» of WordPress, I mean the file function.php that we normally find in almost all topics.

Example of Function.php with ShortCodes DesdeLinux

What we will do in this file is add the structure of our ShortCode and of course, the label that shows it. So let's get to it.

Inside the Function.php

Inside our function.php file what we will put will be the HTML structure of the ShortCode, but it is not simply to put the HTML tags just like that. We would have something like this:

// Info function infobox ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ content; $ return. = ' '; return $ return; } // The ShortCode add_shortcode ('info', 'infobox');

From here we clarify a couple of things. First, when we use two bars we comment out the line, therefore // info it's just a comment.

The name of the function, in this case info box It can be changed to whatever we want, but it must match the name we use in the last line.

Example:

$ return. = $ content;

The variable $ content which is where the content that we put in the ShortCode goes by default it will return a null value if we do not put anything.

Now the name of the ShortCode is what we set with:

add_shortcode( 'info', 'infobox' );

Where you can change info for what we want. Now, to make it look like the example we must put:

[ info ]Este será el ShortCode de ejemplo[ /info ]

Although of course, without the spaces, which I put because obviously the ShortCode would be activated.

ShortCode style

If you look at the line above, without the PHP code and variables, the ShortCode in pure HTML would be something like this:

<div class="alert-info"></div>

So we only have to apply the CSS style.

.alert.alert-info {background: # d9edf7 url (info.png) no-repeat 7px 50%; border-radius: 4px; border: 1px solid # bce8f1; color: # 3a87ad; font-size: 14px; margin: 15px 15px; padding: 15px 15px 15px 50px text-align: left}

And that's it .. I repeat, I am not a programmer or anything like that, and the explanation I have given is how I understand that the ShortCode works 😛