Eliminate Redundant Markup Processes with WordPress Shortcodes

Have you ever found yourself writing a blog post or content piece in WordPress and repeating several coding processes for either layout, a special interface or perhaps an ad in the midst of your content?

I have, most commonly with call-to-action boxes as seen below:

And the HTML to implement something like this looks like this:

<div class="callout">

Need Help?

Call: 1.888.WEB.NUM1 or:

Email: <a href="mailto:[email protected]">[email protected]</a>

</div>

Imagine typing this in about 20-30 pages per site. While it doesn’t take extremely long it is more just an inconvenience than anything else.

Enter the WordPress Shortcode

I’m sure some of you have heard about or seen WordPress shortcodes before, for those who haven’t here is a brief breakdown.

Shortcodes are a way of using short tag structures to display complex or redundant information with minimal lines of code.

Here is an example of a shortcode: [MYSHORTCODE]

All things aside this is basically interpreted by WordPress as a handle for a specific function when the function runs it displays the output for the given function.

For example, for the above mentioned callout box we would be able to call it by something like this:

[CALLOUT]

If you were like me your brain is screaming “HOW DO I DO THIS. RIGHT. NOW!” and luckily I will be showing you how it is done.

Making a WordPress Shortcode for a Callout Box

First, we should get our files in order. Download this .zip file for all the code and images you will need.

Step 1: Inserting the callout CSS into your theme CSS

Go to your theme directory and find the theme you are currently using. For those of you who might not know what theme you are currently using do the following:

1. Visit your homepage
2. Right click and select “View Source”
3. Press CTRL + F and search for the following: <link rel="stylesheet"

That line contains the link to your themes stylesheet it should look something like this:

Your path to your active theme folder will be: /wp-content/themes/your-theme-folder

Open your style.css file and paste the CSS from header styles in the HTML page provided in the .zip package. You will also need to upload the images from the .zip folder into your themes images folder.

Step 2: Making the Shortcode Function

Open the functions.php file from the .zip file provided. To make a basic shortcode you start by creating a function in your themes functions.php file like so:

function my_callout_shortcode_function() {

return '

<div class="callout">

Need Help?

Call: 1.888.WEB.NUM1 or:

Email: <a href="mailto:[email protected]">[email protected]</a>

</div>

';

}

add_shortcode( 'CALLOUT', 'my_callout_shortcode_function' );

This very basic function that just returns a the entire callout HTML needed to display the callout to the screen.

To hook this function to the WordPress shortcode API we call the following function directly after the above function:

add_shortcode( 'CALLOUT', 'my_callout_shortcode_function' );

The first parameter passed into the above function is what you want to use as the element name for the shortcode being created for example since we used CALLOUT above we would reference the shortcode as such:

[CALLOUT]

You shortcode should now be working! This is a very basic example of how shortcodes can help eliminate how much time you spend on redundant HTML markup!

So Whats the Big Deal? I can do this with a standard PHP function…

While you can get the exact same results as above by using a standard PHP function there are several benefits to using shortcodes over PHP functions.

Shortcodes are more user friendly for non-technical users & writers

If you were to use the above function in PHP you would need to reference it like so:
<?php my_callout_shortcode_function(); ?>

Whereas, the shortcode leaves much less room for user error: [CALLOUT]

There is very little that you need to explain to a writer/blogger about how to use a shortcode. However, for the PHP reference you must explain how to begin a PHP script block and end it as well as other common syntax errors, which in turn could cause the site to malfunction.

Shortcodes are built to provide advanced repetitious functionality

While this tutorial was very basic shortcodes can be used to create dynamic content tabbed interfaces, Google Adsense Ads, commonly used forms and so much more. They were built to bridge the gap between a frontend developer and the general user. So use them!

Checkout some of our other tutorials:

1 Stupidly Simple Way to Make Users VERY Happy
How to: Add Posts to Pages in WordPress
Integrate WordPress & SalesForce CRM with Gravity Form