This post is the sixth of an ongoing series entitled “50 Days to a Better WordPress Blog”. During this time, Mitch will be providing small snippits of code, plugins, and things you can do to make your blog more attractive, attain new readers, and keep old ones coming back time and time again. You can see the entire series here.
Also, thanks to everyone who sent well wishes on the death of my grandmother – my family is doing much better, but it was a rough few days lst week. I took a few days off to get back in the swing, but there’s no better time than the present to jump back into better blogging. So, once again… thank you.
When it comes to blogging, one of the biggest reasons people stop is the lack of time it takes to effectively update a blog. I’m always on the lookout for tips that I can give to people to help them blog quicker without sacrificing content. One thing I continually see is people who are more experienced with HTML using the HTML editor to do repetitive tasks. For example, they want to split content into two columns, so they add the code into the HTML editor, like so:
<div class=”col1″>blah blah blah</div>
<div class=”col2″>blah blah blah</div>
<div style=”clear:both”></div>
Two columns of content – the styles already styled in the appropriate stylesheet. Problem is, it mucks up things and makes it hard to use the visual editor.
So, for today’s trick, I’m going to show you one of the most underused and underappreciated functions in WordPress – the shortcode.
What is a shortcode?
A shortcode is an element that allows a substitution of one bit of text for a code. You may have seen it with some other plugins or content, but it looks something like this:
[shortcode]
Whatever function that code is set to replace will run in its place – if that shortcode were there to insert an audio player, you’d see it when you viewed the content.
The fun part is that these shortcodes are super easy to implement:
function column1_shortcode( $atts, $content = null ) {
return '<div class="col1">' . $content . '</div>';
}
add_shortcode( 'column1', 'column1_shortcode' );
function column2_shortcode( $atts, $content = null ) {
return '<div class="col2">' . $content . '</div>
<div style="clear:both"></div>';
}
add_shortcode( 'column2', 'column2_shortcode' );
These two shortcodes (when added to the functions.php file) will allow you to insert two columns into your content. Of course, you can change them to do whatever else you want, or to drop in any other code you need to, but now to get columns all you’d have to do is this:
[col1]Content[/col1]
[col2]Content[/col2]
Of course, you’d have to style the columns, but here’s some example styles to get you started:
.col1{
width: 49%;
margin-right: 1%;
float: left;
}
.col2{
width: 49%;
margin-left: 1%;
float: right;
}
