Using Short Codes to Easily Format WordPress Page Content

Posted by Aaron Keenan on May, 7th 2010

Custom short codes can be extremely useful towards setting up a conveniently manageable WordPress theme design. Since WordPress 2.5, there has been in-built support for creating custom short codes using the add_shortcode() function.

A Basic add_shortcode() Example

In the example below I have used the short code [go] (square brackets are always included as part of a WordPress shortcode) to enter a linked button that could, for example, be used as a link on multiple pages throughout the site.

[realgo]

The advantages in this case are in:

• speed
• ease-of-use
• consistency

You can be assured that the button & link will be consistent whenever the short code is used and the process will be altogether more efficient (provided you remember the short code!).

To set up this short code the following lines were added to functions.php in the theme folder:

function add_go_button() {
return ‘<a href=”http://www.junowebdesign.com/contact”><img src=”http://www.junowebdesign.com/wp-content/themes/juno/images/go-button.png” alt=”go” /></a>’;
}
add_shortcode(‘go’, ‘add_go_button’);

The parameters used by add_shortcode() are firstly the short code (here ‘go’ corresponding to ‘[go]‘ when entering post/page content) and secondly the function that you want to be called when the short code is processed.

Using add_shortcode() To Format Content Easily

The next example shows how short codes can be wrapped around content, in this case to format a section of text. The content in the admin section is input as:

[box]This content is wrapped in a fancy box.[/box]

This content is then processed to appear as:

[realbox]This content is wrapped in a fancy box.[/realbox]

A key advantage here is that the theme can be set up to allow an editor who is unfamiliar with XHTML & CSS enhanced options for formatting their content – and this is all possible while remaining in ‘Visual’ (rather than ‘HTML’) mode in the admin.

The code added to functions.php to enable this short code is:

function fancy_box( $atts, $content = null ) {
return ‘<div class=”fancy”>’ . $content . ‘</div>’;
}
add_shortcode(‘box’, ‘fancy_box’);

This post only begins to look at the options available using the WordPress Shortcode API. This functionality can be extended with attributes and nested short codes.

Related Posts

• WordPress – The Leading Open Source Content Management Application

  WordPress consistently triumphs in popularity polls and is in use on over 200 million websites. What most impresses me about WordPress is it’s flexibility: it’s excellent for the most straighforward site or blog but can also be extended to include ecommerce, forums, social media functionality and much more. In addition, this flexibility is aided by [...]

• WordPress Web Design and Fresh Content

  If you have a business but have not yet dipped your toes in the blogging pool, it is definitely something worth considering. Incorporating a blog into your web design can be very beneficial to your business because you will consistently be providing fresh content for prospective customers to find in web searches. Blogging allows your [...]

• add_theme_support() – a Function to Change the Future of WordPress Theme Development

  One relatively new function that could be making a big difference to the future of WordPress theme development is add_theme_support(). The function was introduced late last year with the release of WordPress 2.9. The major current use for add_theme_support() is for conveniently setting thumbnail images for posts and pages. When WordPress 3.0 is released (scheduled [...]

Find out more about Juno style Wordpress web design
Find out more about Juno style Magento web design
Find out more about Juno Blinds
Remote control and electric blinds by Controliss

Return to web design news.