How to Add a Shortcode in WordPress

Ever wanted to add some specialized content to your websites post or page and at the same time you don’t want to have heavy footprint of any third party plugin? Well WordPress has support for that too! Heard of shortcodes? You can consider shortcodes as inbuilt plugin that has been provided to you by WordPress itself. You don’t have to do any fancy configurations to leverage the functionality, you need to just put some basic pre-defined text in your page or post and your are done.

We will cover some basics of this terminology in this article. We will take you through process of developing and using shortcode in wordpress.

What is a WordPress Shortcode?

As said earlier, shortcodes are nothing but small piece of code that will help you to add some specialized content to your page or post. It helps you to cut down on repetitive strings of HTML, and you can use it anywhere in your site. e.g. you can use shortcode to insert some unique buttons in your post, you can add some data columns to your page for better presentation etc.

We will shortly see how its defined and how the code is interpreted.

How do I Create A Shortcode?

Shortcode creation is as easy as eating a cake (free).  Here we will create a shortcode that will insert one link button in our post or page. We will add some css to our main styles css and that will be used when shortcode is rendered. Our shortcode will render following html

If user has to add this code manually all the time, he has to remember the class name to add for button. Its not feasible if page or post has many such scenarios. So instead of adding above html we will create a short code that will be easy on usage. To add shortcode we will simply add below code to our themes functions.php

Above code is adding one shortocde “button” to our wordpress system and binding it to function “my_button”. This function will take parameters from your shortcode and print them out the way we want.

How do I Use my Shortcode in WordPress?

Now we have added shortcode to our theme, its time we use it. Usage is easier than adding it. To use above defined shortcode and insert a button in your post add below text in your page or post-

You can see that we are sending link value as an attribute to above shortcode. This url will be extracted in the function we have defined above and assigned in actual html that is going to render. You will see button like below

Dont forget to add some css to your styles.css that will give your button above look. You can copy css from here-

Thats it!! you are done, you have your own shortcode that can do any magic for you.