[sourcecode language="PHP"]
function gallery_columns($content){
$columns = 2;
$pattern = array(
‘/([gallery(.*?)columns="([0-9])"(.*?)])/ie’,
‘/([gallery])/ie’,
‘/([gallery(.*?)])/ie’
);
$replace = ‘stripslashes(strstr("1", "columns="$columns"") ? "1" : "[gallery 2 4 columns="$columns"]")’;

return preg_replace($pattern, $replace, $content);
}

add_filter(‘the_content’, ‘gallery_columns’);
[/sourcecode]

Make sure you change $columns = 2; to however many columns you like. Also the above code has to be wrapped in &#lt;?php and ?> or it will not work.

Very nice and elegant. This way if you change themes, you don’t have to manually edit every Post or Page to adjust how the Gallery column thumbnails display. Thanks Zeo.

Directions

You will need a functions.php file in the theme template folder. If it already exists, open it. Otherwise, open you’re favorite HTML editor (I use Emerald Editor for the PC and TextWrangler for the Mac) and save the blank file as functions.php inside the WordPress theme template folder.

Open up the functions.php file and paste the code below anywhere inside the file. Be sure that you don’t accidentally place this function inside another function or you’ll get a blank screen when trying to load your website. If you’re new to the functions.php file, it may take some trial and error to get this right.

[sourcecode language="PHP"]
// Page Paragraph column short code (http://basicmaths.subtraction.com/demo/)
// Right
function basic_rightcolumn($atts, $content = null) {
return ‘<div class="<span class=">rightcolumn">’ . $content . ‘</div>’;
}
add_shortcode("rightcolumn", "basic_rightcolumn");

// Top
function basic_topcolumn($atts, $content = null) {
return ‘<div class="<span class=">topcolumn">’ . $content . ‘</div>’;
}
add_shortcode("topcolumn", "basic_topcolumn");

// Left
function basic_leftcolumn($atts, $content = null) {
return ‘<div class="<span class=">leftcolumn">’ . $content . ‘</div>’;
}
add_shortcode("leftcolumn", "basic_leftcolumn");
[/sourcecode]

So what does all of this code do exactly? Let’s look at each part of code individually and the how to use it when writing Posts or Pages.

The first part of code:

[sourcecode language="PHP"]
// Right
function basic_rightcolumn($atts, $content = null) {
return ‘<div class="<span class=">rightcolumn">’ . $content . ‘</div>’;
}
add_shortcode("rightcolumn", "basic_rightcolumn");
[/sourcecode]

sets up a new WordPress Shortcode, [rightcolumn][/rightcolumn], that you can use in your Posts and Pages. So when you write a Post or Page and you enclose some text in the Shortcode, that will cause WordPress to wrap your text in HTML markup. For example, if I was to write:

[rightcolumn]This should appear in the right column.[/rightcolumn]

and then Publish the Post, looking at the source code of the published page, I should see:

<div class="rightcolumn"><p>This should appear in the right column.</p></div>

The second part of code:

[sourcecode language="PHP"]
// Top
function basic_topcolumn($atts, $content = null) {
return ‘<div class="<span class=">topcolumn">’ . $content . ‘</div>’;
}
add_shortcode("topcolumn", "basic_topcolumn");
[/sourcecode]

sets up another new WordPress Shortcode,[topcolumn][/topcolumn], that maybe necessary depending on how your theme is laid out. The biggest advantage I see with the [topcolumn] is that you can use it right after the [leftcolumn] and [rightcolumn] to fix any CSS float issues.

The final part of code:

[sourcecode language="PHP"]
// Left
function basic_leftcolumn($atts, $content = null) {
return ‘<div class="<span class=">leftcolumn">’ . $content . ‘</div>’;
}
add_shortcode("leftcolumn", "basic_leftcolumn");
[/sourcecode]

adds <div class="leftcolumn"><p></p></div> to whatever is enclosed in the [leftcolumn][/leftcolumn] Shortcode.

Now you need to style those divs appropriately in order for the two columns to appear. This is what I use in my style sheet, but you mileage may vary:

[sourcecode language="CSS"]
.entry .leftcolumn, .entry .rightcolumn {width: 50%; }
.entry .leftcolumn {float: left;  }
.entry .rightcolumn {float: right; }
.entry .leftcolumn p {padding-right: 0.5em; }
.entry .rightcolumn p {padding-left: 0.5em; }
.entry .topcolumn {clear: both; }
[/sourcecode]

Now to use this, you start a new Post or you can edit an existing Post, and decide where you want the 2-columns to appear and write:

[leftcolumn]This is the stuff that I'll be putting in my left column.[/leftcolumn]
[rightcolumn]This is the stuff that will go into the right column. Isn't it pretty?[/rightcolumn]
[topcolumn]This will span the entire width and be a normal one-column paragraph.[/topcolumn]

With the Shortcodes, you can put them next to each other or do a hard-return, it doesn’t matter. In actuality, the WordPress Visual Editor will probably move it all to one line. You can also put [rightcolumn] before the [leftcolumn] as the right column will always be right so long as you have the CSS correct.

The only thing you can’t do is something like this:

[leftcolumn]This is the stuff that I'll be putting in my left column.[/leftcolumn]
[topcolumn]This will span the entire width and be a normal one-column paragraph.[/topcolumn]
[rightcolumn]This is the stuff that will go into the right column. Isn't it pretty?[/rightcolumn]

as you’ll have some weird styling errors.

Example

Conclusion

There are a number of ways you can accomplish two-column post layouts. There a number of jQuery techniques including this WordPress plugin that accomplishes the task but I’m a big fan of less. The less plugins you have to use, the faster your website will load. Also you want to make it as easy as possible for non-techie writers to be able to implement easily. One of the hardest part is to have the non-techie writer try to use the HTML Editor, see a garble of code, mess around and everything is screwed up. Extreme case, but it happens. With the use of WordPress Shortcodes, they can easily implement the feature from the Visual Editor and focus on writing.

Thank you to the Basic Maths WordPress Theme for the very useful code.

UPDATE (2010-05-17): Here’s a trick by WPRecipes.com on how to automatically output content into two columns using the functions.php for those who are looking for a method that doesn’t require users to remember code.

His technique worked out quite nicely and will allow me to post other iFrame content while still using the Visual Editor and not worry about the iFrame code getting stripped out. So I’m reposting his technique here for future reference.

You need to have a functions.php file in your theme for this to work. If it doesn’t exist, just create one and drop this line of code into it, making sure it is wrapped by <?php and ?> (thanks to Smick for reminding me):

[sourcecode language="php"]
function field_func($atts) {
global $post;
$name = $atts['name'];
if (empty($name)) return;

return get_post_meta($post->ID, $name, true);
}

add_shortcode(‘field’, ‘field_func’);
[/sourcecode]

Upload that file into the theme folder that you are using or want to enable iFrames for.

Now any anytime you want to embed a Google Map iFrame, all you have to do in your Post Editor is decide where you want the iFrame to appear and put:

View Larger Map

Then scroll down to the Custom Fields box and under Name write iframe and under Value paste in the exact code. Here’s an example:

Make sure you click Add Custom Field to save the entry or it won’t show up in your post when you publish or update the changes. Now you can easily edit the existing post using the Visual Editor and not have to worry about losing any of your iFrame code.

Also note that unlike a plugin where you can switch themes and the code will continue to work, once you switch to a new theme, the iFrame code will no longer appear in any of your posts so make sure to include this line of code in your new theme. You could also save yourself the headache and make this function into a WordPress plugin.

This took a bit for me to figure out, had me banging my head for a little awhile. I’m on Media Temple (dv) Dedicated Virtual hosting and have two installations of WordPress Multi-User (MU) each pointing to a different IP address. One day, I was trying to upload a file via FireZilla FTP to my /wp-contents/blogs.dir/[blog.id]/ folder and it said permission denied. I thought that was odd, but stupidly did a CHOWN on the entire httpdocs folder (this is Media Temple’s public_html folder) to set it to the account user. Problem solved. Unfortunately then the WordPress Media uploader stopped function and I was getting the message: “The uploaded file could not be moved to the upload folder.”

So did a Google search and found a few informative forum threads discussing the problem and possible solutions:

• CHMOD the wp-content folder to 777, which is a HUGE security risk. I don’t recommend you do this, but it works for some people.
• CHMOD the wp-content folder to 755, doesn’t really work
• CHOWN the blogs.dir folder to nobody, BINGO!

So the answer turns out to be that the blogs.dir folder’s ownership has to be set to nobody or essentially the server. If the ownership is set to the user account, you are able to upload content to the blogs.dir folder, but WordPress Media Uploader can no longer. So to solve the problem, I SSH into the server and browsed to the wp-content folder and:

chown apache blogs.dir -R

Afterwards, the WordPress Media Uploader was able to upload files once again. It’s funny because WPMU version 2.8.1 and prior never had an issue like this, so not sure what was changed.

2009-01-25 UPDATE: So I ran into the permissions issue again. Oddly, it cropped up after I added another account on my MediaTemple (dv). I followed my steps above and it no longer seemed to work for me. After spending a couple of frustrating hours on Google for a solution, I decided to take some people’s advice and turn-off Safe_Mode (read more). Obviously there are some inherent security issues with doing so, but since I don’t grant anyone else access to my web server, it shouldn’t be a huge problem. I also had to do:

chown apache:apache blogs.dir -R

since that was the account my web-server uses to write. Things are now working as they should.

2011-01-14 UPDATE: See the directions on this website as well: http://hereshowi.com/wordpress/fix-wordpress-permissions-on-mediatemple-dv-server.