Time-Saving WordPress Short Codes

The flexibility and design options offered by WordPress have made it a popular choice for web design and blog creation. With a simple template and some basic coding knowledge, it is possible to create professional, powerful designs that tie in with a wide variety of plug-ins. One of most overlooked features of WordPress is the creation and usage of shortcodes. From easy button generation to contact forms and related posts, utilizing shortcodes allows you eliminate the need to type in repetitive code sections or allows you make small changes to existing code for special scenarios with ease.

Utilizing Shortcodes

You must declare and initialize all WordPress shortcodes within your theme’s functions.php file. Care should be taken not to edit the global functions.php file in the wp-includes folder as this folder may be overwritten during WordPress installation updates and other procedures. Depending on the shortcode used, you may also need to include CSS styles in the appropriate theme as well.

Shortcode #1: Colored Text Box

This shortcode is great for catching the reader’s eye. It can be used anywhere that you want to create contrast within a design, such as post headers or footers. It allows you to pass CSS styles as variables for quick and easy use throughout your design.
Place in functions.php:

function cbox_sc( $atts, $content = null ) {
extract( shortcode_atts( array(
'color' => 'yellow',
'size' => 'medium',
), $atts ) );
return '
<div class="infobox ' . $size . ' ' . $color . '">' . $content . '</div>';
}
add_shortcode('box', 'cbox_sc');

Place in CSS Stylesheet:

.infobox {
padding: 2px 4px;
border: 1px solid #ccc;
}

.gray {
background: #f0f0f0;
color: #333;
}

.blue {
background: #a0c5ef;
color: #333;
}

.yellow {
background: #ffd149;
color: #666;
}

After inserting the code, using it on a page or post is as simple as enclosing your text in set of [box] tags. By using the color parameter within the tags, you can choose from pre-configured CSS styles as well. For each style, simply add it to the functions.php within the cbox_sc function. Adding size coding can allow you to set other features as well.

Shortcode #2: Dropcaps

This is a quick and simple ay to create drop caps for adding aesthetic appeal a block of text. It requires use of both the functions.php and CSS files.
Place in functions.php file:

function drop($atts, $content = null) {
return '
<div class="drop">'.$content.'</div>
;';
}
add_shortcode('drop', 'drop');

Place in CSS Stylesheet:

.drop {
display:block;
float:left;
font-size:60px;
line-height:40px;
margin:0 5px 0 0;
}

All that is left is to enclose the starting letter of your paragraph in [drop] tags. The result is a polished effect with no need to repeat code on every page. This is a great example of using shortcodes in template files for reduced coding and faster completion.

Shortcode #3: Embedding Google Docs Files in a Page or Post

This shortcode allows you to embed a wide variety of files using just a few keystrokes. This allows you to share images or diagrams easily without the need for the reader to have software installed to view the file.
Place in functions.php file:

function docs_embed($attr, $content) {
return '<a href="http://docs.google.com/viewer?url=' . $attr['link'] . '">'.$content.'</a>';
}

add_shortcode('gdocs', 'docs_embed');

Using this shortcode is slightly more complex. It requires the link to the file to be passed for proper display. While it does require a bit of coding to use, it is drastically less than if you were to embed the item into each page manually.

This is accomplished by placing the link into the shortcode tags as follows:

[gdocs link="<link>"]ANCHOR TEXT[/gdocs]

These are just a few examples of time saving shortcodes available within WordPress. Further shortcodes and shortcode plugins can be found within the WordPress Dashboard and the WordPress Codex for further information and options.


About the Author: Steven Taylor technology and business solutions for nearly a decade. When he’s not writing, you can find him reviewing business internet service for companies like Time Warner Cable.


Comments

  1. Great post, I would personally recommend creating a plugin rather than coding them into the theme; especially if you are developing commercial themes.

  2. Great code snippets. However, I think that your post is pretty vague and does not offer any real solution on how to implement. Maybe you should include an example on how to use this in your theme. But I don’t know what you target audience is either.

  3. Richard505050 says:

    Why aren’t you giving examples of the shortcodes to be inserted into the pages. It appears from your descriptions that there are options in the shortcodes. Giving examples of the syntax of the shortcodes would clarify quite a bit.

  4. You’ve made a very nice and comprehensive collection of
    WordPress Themes. I appreciate it.

Add Your Comment