When I first started creating Wordpress themes and sites, I really didn’t muck around too much with the functions.php file too much other than to define dynamic sidebars.  However, my recent contract to redesign a local non-profit organization’s website has changed that.

This organization has a lot of content requiring many pages and subpages.  I found that I kept entering similar code into pages and posts, mainly dealing with design elements.  This led me to explore the use of shortcodes to speed up the process and also simplify entry for whomever will be maintaining the site.

The offical Wordpress area to learn more on the syntax of shortcodes is: Shortcode API « WordPress Codex

Here are a couple that I used to streamline my programming.  First of all open up your functions.php file for your theme.  If you are using someone else’s theme, the best place to put a new function/shortcode definition is at the end of the file before the ?> ending.  Also, when you save the file, make sure you don’t have a line return, or spaces after the ?>

I have two spacer divs I use to create whitespace within an article or page.  Instead of always typing out the entire code, why not create a shortcode?  The classes are defined in my styles.css file.

Example 1:

108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

// Large spacer shortcode //
function lgspace_shortcode() {
   	return '
<div class="lgspace"></div>
 
';
	}
add_shortcode('lgspace', 'lgspace_shortcode');
 
// Small spacer shortcode //
function smspace_shortcode() {
   	return '
<div class="lgspace"></div>
 
';
	}
add_shortcode('smspace', 'smspace_shortcode');

This way I just type [smspace] or [lgspace] to add spacing. The second thing I needed was to add a unique title image to each page along with a clearing div

for the float.  That’s a lot of code to keep repeating.  So this was solved by a shortcode.

Example 2:

120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

// Head image shortcode //
function heading_shortcode($atts, $content = null) {
    extract( shortcode_atts( array(
    'name' => '',
    'ext' => 'gif',
    'path' => '/pathtoyour/images/',
    'url' => ''
    ), $atts ) );
    $file=ABSPATH."$path$name.$ext";
    if (file_exists($file)) {
        $size=getimagesize($file);
        if ($size!==false) $size=$size[3];
        $output = "<img src='".get_option('siteurl')."$path$name.$ext' $size class='floatright' />
       <br class='clear' />
<div class='smspace'></div>
 
";
        if ($url) $output = "<a href='$url' title='$name'>".$output.'</a>';
        return $output;
    }
    else {
        trigger_error("'$path$name.$ext' image not found", E_USER_WARNING);
        return '';
    }
}
add_shortcode('head','heading_shortcode');

Since each title image was a gif file and I stuck to a specific naming convention, inserting these images was a matter of typing [head name=nameofimage]. I didn’t even need to put the extention.

Now isn’t that much easier? Try experimenting with creating some shortcodes to make your programming/blogging much easier. Hope this was helpful!

Web Design

Leave a Reply