The marketplace for Premium Themes — & — Templates

2,206,217 People using Mojo
353,548 Downloaded items
2115 Marketplace items
2 Green Monsters

The Mojo Blog

Blog | How to create WordPress shortcodes

How to create WordPress shortcodes

Posted By Brady Nord

15 Comments

After speaking with a good friend and awesome affiliate of MOJO Themes it was mentioned to me that many users would really appreciate some snippets of code that they could use in their theme designs or in other words “shortcodes”.  I instantly became excited with the idea and decided to offer my knowledge and know-how to those that may not understand how shortcodes work yet (or are just lazy ha). Here is how to create WordPress shortcodes.

What are shortcodes?

Simply put, shortcodes enable buyers to wrap common text in pre-defined brackets.

Back End

[php][alert]This will display an Alert Box to users.[/alert][/php]

Front End

What can you do with shortcodes?

Honestly, you can do just about anything you can think of with them. It seems that almost everyday I see a theme that is equipped with unique and more creative shortcodes. The real strategy behind shortcodes is to tailor them to your site design. Yes, it is cool and fun to have tons of shortcodes with a theme, but if the shortcode is lacking in aesthetics once applied then it’s worthless. Put some real thought as to how your users could use the added functionality.

The Code:

I am not even going to attempt to act like this code is or was invented by me. Everything you will see here comes from the many talented developers I have worked with over the years. I will say though that I have assembled what you see here and made the code work how I like it and what makes sense to me.

Shortcodes use PHP to define how they work. For many of you new comers, trust me when I say I know the feeling you get when you hear those “PHP” words. I can honestly say this is one of the easiest PHP concepts I have learned in my PHP education.

The code for the Alert Box previously mentioned looks like this:

[php]function alertbox($atts, $content=null, $code="") {

$return = ‘<div class="alert">’;

$return .= $content;

$return .= ‘</div>’;

return $return;

}

add_shortcode(‘alert’ , ‘alertbox’ );[/php]

Let’s break this down for those who don’t understand whats going on here:

  1. You begin by creating the function alertbox and setting a default for the content as null or that there is no default text being inserted.
  2. The first $return is the start of a Div Class called “alert”.
  3. The second $return is searching for any text you insert between the brackets.
  4. The third $return is closing the Div Class “alert”.
  5. Now the last line saying “add_shortcode(” is broken down as follows: ‘alert’ is defining what the text is that you will be required to place between the brackets when you want the use the shortcode. ‘alertbox’ is simply stating the name of the function as stated in the first line.

CSS:

Now that you have written the code (PHP) you will need to style how you want that shortcode to look. I have placed the CSS for the previous Alert box below:

[css].alert {
width: 570px;
background: #FFFFCC;
border: 1px solid #FFCC66;
color: #996600;
text-align: center;
padding: 7px;
line-height: 20px;
font-size: 14px;
margin: 0 auto;
}[/css]

How to implement this in your (WordPress) theme

  1. Place all the PHP in your functions.php file.
  2. Place all the CSS in your style.css ( Or whatever is your stylesheet) file.
  3. Then when you want to place the shortcode simply use [alert]…[/alert]

That’s it!

Let me give you some good suggestions for useful shortcodes in your items.

Boxes:





Sticky Note:

Columns:

Drop Caps:


Download:

Feel free to download my list of shortcodes ready right out of the box. I have included the following:

  • 5 Different Boxes
  • 2 Dropcap Styles
  • 2 Sticky Notes
  • 3 Column Variations

Download Here: http://cl.ly/19202o3s2C1B3b2v0N2e

Feel free to give some feedback and let me know what other shortcodes you would like me to assemble.  And feel free to include these shortcodes in your themes and templates that you upload on MOJO Themes.

15 Responses

You must be logged in to post a comment.