Article | Date posted : 30 December, 2013 | Updated on : 1 January, 2014

An easy way to create WordPress Shortcodes

Sponsored Links

You don’t need any tech savvy skills to build your own shortcodes. All you need is a basic  knowledge of HTML and PHP. But even if you don’t understand PHP I will explain how to create shorcodes in a couple of easy steps.

Thomas Scholz mentioned something I overlooked, writing shortcodes inside your theme functions.php file will lock down your shortcodes to that theme. The solution to that would be to ether copy the functions to the new theme before activating it. Or to write a shortcode plugin, I will investigate how to write an easy to use plugin where you can store all your plugins.

Step One : Open up functions.php

You can edit all theme files within WordPress, when logged in to your admin panel, go to Appearance > Editor

Along the right hand side you will see a column of files with Templates as the title, under the heading Templates click on functions.php highlighted below in the image

wordpress shortcodes functions php

wordpress shortcodes functions php

Step Two : Adding the code to functions.php

In this example we will create a [ hr ] shortcode which will add a break-line inside the posts. At the bottom of your functions.php file simple add the following code.

This code will now attach to each [ hr ] shortcode the divider function

Breaking it down!
Each shortcode will be placed inside a new function. I recommend adding a prefix to each function to avoid overwriting any theme or WordPress functions. For example sw_divider instead of divider. Inside the function sw_divider you can add your own html code, php, js or whatever you like.

We than need to register all shortcodes, you can add as many shortcodes as you like, and simple add them inside our new container function. This function is created to simplify the process of adding a range of shortcodes

Now that all functions are registered inside the container function, we need to trigger it, we do this by adding an action.

You can now start using the [ hr ] code anywhere you like such as pages, posts, etc…

Sponsored Links


Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me