A Detailed Guide about Adding and Utilizing WordPress Shortcodes

A Detailed Guide about Adding and Utilizing WordPress Shortcodes

Any WordPress website owner would prefer a way to trigger any action without having to write a long-winded code for it. Even for the seasoned programmers, coding can sometimes be a tricky endeavor. This is where the WordPress Shortcodes have a significant role to play.

Traditionally, the developers need to dig deep into the complex PHP, HTML and CSS codes in order to add functionalities to specific posts or page using theme files or wordpress editor. The repetition of such codes led to increasing number of errors and complexity levels, eventually hindering the project workflow.

WordPress shortcodes have thus been the decisive answer to such issues. Using shortcodes, even a non-techie can inculcate dynamic content with the help of macros.

What are WordPress Shortcodes

WordPress shortcodes are basically short snippets of codes in a post or page, which could be replaced with some other content. In other words, it can be said that they instruct WordPress to look for the macro placed inside a square box and get it replaced with an appropriate action, produced by the PHP function. Shortcodes could be anything ranging from a simple text sentence to an output of a massive PHP function. It all depends on what you want WordPress to do.

Shortcodes provide admin or wordpress developer an easy way to use functionality without changing much of the code in WordPress. For example, the newsletter plugin is installed and admin can generate the shortcode for capture-email-box and place it anywhere. Placement can be done on any page or posts via wp-editor or theme files, without having to worry about the code

How Do Shortcodes Look Like?

Shortcodes are basically descriptive texts enclosed within square brackets. These texts could be replaced with the desirable function that you wish to render whenever the page is being loaded on a web browser.

It’s quite easy to play around shortcodes. Let’s say, if you want to add a photo gallery, the following could use the shortcode like this:

For some more advanced settings, we could set certain specifications to the gallery like this:

Now with first shortcode, it will simply display image gallery wherein for the second shortcode, it will render gallery with ID 123 with medium image size.

How to Create Shortcodes

A shortcode API works in an extremely simple way, and with the following example, I am going to explain how you can create button shortcodes very easily to be used as many times as you want.

A) Create a callback function, which will be then called by WordPress when it finds a shortcode. This is how the function could be created.

function my_custom_shortcode($atts){
$atts = shortcode_atts(
array(

‘text’ => ‘My Custom button’,
‘color’ => ‘#ffffff’,
‘bg’ => ‘#cccccc’
), $atts, ‘my_button’);
return ‘‘;
}

Here, $atts is used as a parameter for our custom function.>

Also, inside our custom function we have used “shortcode_atts” which is the default wordpress function that is used for defining different attribute in our shortcode.

B) Now, generate the required shortcode and tie it up with a function as follows:

add_shortcode( ‘my_button’, ‘my_custom_shortcode’ );

Now, add_shortcode function requires two parameters:

1) Name of the shortcode which in this case is ‘my_button’.

2) Name of the function, which will be called upon to execute when the short code will be used. Here the name of function is ‘my_custom_shortcode’

Whenever you use [my_button], WordPress will start looking for the function ‘my_custom_button’.

C) Now you need to include both the above mentioned functions with function.php, that being said, the following chunk of code from both functions will be placed within function.php of your theme file:

function my_custom_shortcode($atts){
$atts = shortcode_atts(
array(

‘text’ => ‘My Custom button’,
‘color’ => ‘#ffffff’,
‘bg’ => ‘#cccccc’
), $atts, ‘my_button’);
return ‘‘;
}

add_shortcode( ‘my_button’, ‘my_custom_shortcode’ );

D) Now, whenever the short code will be used, it will be replaced with the output of the function that you have created in the first step. You can use these shortcodes as follows:

1) Within Theme files: When you are using the shortcodes within the themefiles it should be used with php tags to make sure that WordPress understands why it is placed there, check below:

Without attributes:

With attributes:

2) Within WP-Editor: It’s the most simplest way of using the shortcodes in which you do not need to worry about any php or html code, only short code with or without attributes. Check screen-shot below:

 

 

You can see two different short codes – first with attributes and second without attributes, and once they are saved and the said page or post is open in the browser, it will render result as shown in following screen-shot:

wordpress-editor

wordpress-dashboard

 

Wrapping Up

Since WordPress 2.5, it has evolved manifolds and given lots of control to developer to save their time and energy, so why not utilize it in the best possible way. As a WordPress developer, I suggest every WordPress developer to review the requirements beforehand, make a list of elements that are likely to appear frequently and generate a set of shortcodes for those elements. That’s all for the day – enjoy speedy and swift development.

Share this post