It saves time learning to create shortcodes in 2 steps

I am of reforms with the Web to adapt it which I look for, so I am creating a thing this way and another one over there. I yesterday made a task that had slope and that it preferred to avoid to do with plugins of third parties: the system of subscription to the blog. When do something likes to roll I and to take it to me to another level, so I decided to create shortcode to add widget of subscription where she wanted. I thought that it could be interesting to make a tutorial, and here we are.

How shortcode in WordPress is created

In these cases the best thing than we can do is to throw a look to the Codex to guide to us, is rather well explained generally although I will try to do it easier.

In the first place it is necessary to know clearly what is shortcode. It is not more than a form to call to a function with the purpose of to avoid to have to insert code in half of a post or page. Certainly you have used them more in one go, will sound by [contact-form to you], [gallery] and others.

The time saving is considerable, reason why if it is something that we repeated (for example a button with different styles) will come to us well facing writing new entrances. Also it has his disadvantage since it creates a dependency and, in the case of changing of warms up to you, you will have to drag the code that you have generated previously to the new group (to put some to him beats¦).

Entering matter

We are going to create shortcode very simple that will show a certain text to us. We create the function (already you know, in functions.php of your Subject Son) and add shortcode! Something thus:

function mi_texto () \ {
   return œThus is my text of example! ;} add_shortcode (˜example™, ˜mi_texto™);

That easy, yes! Now we can create an entrance in our blog and use [example] where we want. The result? It will print Thus œis my text of example where you want. Already, already I know that he is very simple and something useless, now we go with something more complicated, than I know that you like 😉

add_shortcode is the function that is in charge to give name shortcode. We passed two parameters to him: $tag, that will be the label that we use to call to him (example); $func, the function to which will call.

How to create shortcode with parameters in WordPress

We put, for example, that the text that we have added to the function we want to be able to personalize it, adding to him to color and the name of the author. I do not coil myself, we go with the code:

function nombre_autor ($atts) \ {$p = shortcode_atts (Array (
  ˜name™ => ˜Invited™,
  ˜˜blue™ color™ =>
  ), $atts);
$texto = ˜This article has been created by <span style= " color: ™. $p [˜color™]. ˜œ>™. $p [˜name™]. ˜</span>. ™;
return $texto;} add_shortcode (˜author™, ˜nombre_autor™);

We already have ours shortcode preparation to put it where we want. What will show? It depends on the parameters that we happen to him. If we passed [to him author nombre= Carlos color= network] will print the text adding œCarlos in red color.

And what happens if we do not give any value him and we only put [author]? It will take the values by defect that we have defined at the home of the Array: Guest for blue name and for color. This way, itself we want to change the name will be enough with putting [author nombre= Carlos].

It is a very simple example but that will serve so that you understand how they work and you dare to practice.

Things to consider

There is a series of points that you must consider at the time of creating shortcode.

  • Like the filters, shortcodes must use return, you do not use I throw nor any other similar form or perhaps it is inserted to you in the home of the entrance! (or that is to say where)
  • If flames to shortcode adding nonexistent parameters will ignore them
  • Ten taken care of with the name of shortcode, some plugins can use one equal and¦ buf!

In order to finish, I let something to you so that you practice

And if what you want it is to create shortcode in which you can put content between stockings? We say¦ [info] My text of example [/info]. You will be able to give format to texts as when I have defined the function add_shortcode more above.

You intention to practice it by your account! If finally you want to verify how one becomes I leave a miniguide you with the solved exercise, a practical case that I have done for my blog. You only must subscribe you to the blog to be able to unload it.

If you he has been useful or you have any doubt leaves a commentary and I help you to solve it, any feedback is thanked for!


  • Miguel he says:

    to see. I have seen this post, I have entered your Web looking for information on short codes,
    Jajajajajja. not of which you speak. first I appear. I do not have asoluta computer science idea until the point that until does few months nor wise what theme is a servant or pluggin
    I had an idea contracts a disenyador, I leave wire drawing, and empeze to read and to make my Web,
    the problem came with woocommerce, that when raising the products does not make distinction of categories, and it mixes them all, I put n contact with eleganth themes. and these they answer to me with a link of and that installs short codes,
    this seems to HTML. necessary to know itself all the is short codes? Apparently it gives possibilities you of modifying the Web., .pero not etoy surely of how learning this, Is cocnretos courses to profundicar in this? it arrives prcisamente at your Web looking for courses. when not knowing programming, one becomes difficult. even so I have been made an idea with your post that they are and so that they serve

    • Wewokc he says:

      Hello Miguel!

      It is normal that the people of elegantthemes redirijan to you towards WooCommerce, since is not a subject that corresponds to solve them them.

      As far as this article, I do not believe that it is what you need, since here I explain how to create shortcodes. They are not more than œshort cuts to make the easiest things. Certain it is that some subjects include what we could call œmodules that are inserted by means of shortcodes, although they are added generally with systems of drag&drop (so that you understand to me, of graphical and intuitive form without needing writing code).

      In order to know shortcodes that it has available your group you will have to consult the documentation, in which normally it is explained. Or perhaps in the version demo of the same you can see a listing and its function.

      I believe that what you will need to work in your Web is a tutorial or mini course of WooCommerce. You I cannot recommend any in particular but certainly looking for in google you will find a pile.

      I already see that you have the Web by halves, for the next time assures you to contract a good professional 🙂

      A greeting and thanks to happen to you to comment!

    • com it says:

      your Web is¦ note that you are not designer

      • inbuu_calfaro it says:

        Thank you very much by your constructive commentary and from the anonymity 😉

        I invite to see the section to you of projects where you will find more than 50 in which I have worked two years in the last.

        A greeting!

  • babyphp_Mart­ it says:

    I am initiating me in the entrails of wordpress, now I am with my first plugin (for me). Your article has gone me of pearls to put a customized form in several sites of the Web without paying!

    I congratulate to you! Super explained good and mainly summarized!

  • marta it says:

    If I want to pass a taxonomy to shorcode with parameters as it would be?

  • Dani it says:

    I subscribe and where she is the miniguide?

  • Marcelo he says:

    Excellent! not because it is so difficult to find sites that put examples to the old custom as yours! I talk about to code and code without coiling itself as much that it is the only form to learn! Sera because all want here to sell his to you plugin

    Only a commentary. shortcode works to me if I correct small to him
    yours it is:

    [author nombre= Carlos color= network]

    and he does not change the colors unless to network he changes to him doubles them quotation marks by quotation marks simple

    [author nombre= Carlos color='red']

    Thanks served to me as much salary undergone with code to be able to start!

It lets a commentary

To subscribe to me!

No, thanks.