Last week, we briefly touched on using shortcodes directly in your WP theme. In this week’s WordPress Wednesday, we’re going to cover how to build your own simple shortcodes and add them to your WordPress theme, and why you may want to add them to your site.
Use shortcodes for special formatting
Shortcodes can be an easy way to insert specific HTML around a snippet of content; this can be handy for bits of content like pullquotes or tips that require special formatting to style in a specific way, but that can be tricky for most authors to add without knowing basic HTML.
To create a simple pullquote shortcode, like the example to the right, first you need to know what HTML you would like to output, and what your users will need to edit in the quote themselves. In the example below, I’ve just wrapped the shortcode in a <div> and allowed the user to add the pullquote’s content, and, optionally, the source of the quote and what side of the content the pullquote will be aligned to.
For the above example, the following code is added to the theme’s functions.php file — before making any edits to your theme, first back up your files:
|
1 2 3 4 5 6 7 8 9 10 11 |
function pullquote_shortcode($atts) {
extract(shortcode_atts(array(
'content' => '',
'author' => '',
'align' => 'right',
), $atts));
if(!empty($author)) $author = '<div class="quote-author"> -'.$author.'</div>';
return '<div class="pullquote align'.$align.'">'.$content.$author.'</div>';
}
add_shortcode('pullquote','pullquote_shortcode'); |
If the ‘author’ attribute is present, the value is then wrapped in a div with the class ‘quote-author’, allowing even more specific styling to the name.
Then, in the editor, you can add a pullquote, specifying the quote’s content, author and alignment if desired. The below shortcode will output the pullquote code that you see at the top of this section:
|
1 |
[pullquote author="Laurel Fulford" content="Shortcodes can be an easy way to insert specific HTML around a snippet of content."] |
Last but not least, add a bit of style to your CSS for the .pullquote class to change the font, colours, size, background, etc., and you’re good to go!
Using shortcodes to prevent HTML from being stripped
There is some code that WordPress will strip out of the editor when you toggle from HTML to Visual mode; this includes HTML tags like iframe. You can use shortcodes to create a work-around, and also make adding iframes less daunting to less-techy authors.
To create an iframe shortcode, the following php would be added to your theme’s functions.php file. In it, there are a number of attributes an author may want to control in the iframe; most have a default value already set, so all they absolutely need to define is the url to be displayed:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function iframe_shortcode($atts, $content=null) {
extract(shortcode_atts(array(
'url' => '',
'scrolling' => 'no',
'width' => '100%',
'height' => '500',
'frameborder' => '0',
'marginheight' => '0',
), $atts));
return '<iframe src="'.$url.'" title="" scrolling="'.$scrolling.'" width="'.$width.'" height="'.$height.'" frameborder="'.$frameborder.'" marginheight="'.$marginheight.'">'.$content.'</iframe>';
}
add_shortcode('iframe','iframe_shortcode'); |
To use the iframe shortcode in the editor, you would just need to add the following to your post:
|
1 |
[iframe url="http://www.stemlegal.com" width="540" height="300" scrolling="yes"] |
The output for the above tag would look like this:
These are just two of many helpful uses for shortcodes — can you think any others you would add to your WordPress website? Share them in the comments below!
