This is a very quick, and easy tutorial covering the process of implementing and using shortcodes on your wordpress theme. It should take no longer than 5 minutes, and even a beginner can do it, even if it means cutting and pasting the code from this tutorial. Lets get started on the shortcodes.
Add shortcodes to a post or page!
Create a new page / post in wordpress or open a current one, and add in something similar to what you see below.
[highlight] This is a highlighted element [/highlight]
Shortcodes are always implemented using a custom name, such as highlight, or floatleft for example, which you can specify yourself. They should always be surrounded by the square braces, as seen in the above example.
Add function to return appropriate HTML code.
Open up the functions.php file from the ‘Appearance > Editor‘section of the wordpress admin panel. Add in the following code:
function highlight($atts, $content = null) {
return '<div id="highlight">'.$content.'</div>';
} This is pretty simple stuff, when the function is called simply return a DIV element with an ID of “highlight” – or whatever you named your shortcode. Inside this DIV place the content, which in our example will be “This is a highlighted element“.
Now, add the wordpress ‘add_shortcode()’ function to your ‘functions.php’. Place it directly below the ‘highlight()’ function to keep things straight forward.
Below is the code you should be adding in.
add_shortcode("highlight", "highlight"); Again, simple stuff. The first value you are passing into the function is the shortcode name. The second is the function that should be called.
Style the DIV, using the #highlight selector.
Open up the style.css file from the ‘Appearance > Editor‘section of the WordPress admin panel. Add in the following code:
#highlight {
background:#f0f0f0;
padding:10px;
border:1px solid #e2e2e2;
color:#9d9d9d;
} Ok – you should now have a DIV with the above styles. It should look something like the below image:
That's it.