Set Default Number of Columns for WordPress Gallery

WordPress version 2.5 introduced a very useful feature for many bloggers: a built-in gallery system. All your photos uploaded to a specific Post or Page and using the Gallery Shortcode, [gallery], will display a set of thumbnails anywhere in your Post or Page. When used with most WordPress themes, the default 3-column thumbnail display works very well. But for some WordPress themes, such as this one, the default 3-column thumbnail display has too much space between each thumbnail. WordPress-Gallery-4-columnsFortunately, you can make the Gallery display 4-or-more-columns by adding columns=4 inside the Gallery Shortcode like [gallery columns=4]. That can be a pain because you have to remember to do each time you add a Gallery to a Post or Page and all your prior Posts or Pages will continue to be 3-columns. So how do you reset the default number of Gallery thumbnails? Fortunately a Google search led me to this post by Zeo who has a solution in which you enter the code below in your functions.php file:

[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.

WordPress How To Break Content Into Two Columns

So you want to design a WordPress theme or modify an existing theme to have your Post content to display as two columns much like printed newspapers and magazines? Well here’s an ingenious idea I learned from the Khoi Vinh’s and Allan Cole’s Basic Maths WordPress theme on how to do that. The beauty of this technique is that no JavaScript is required and everything is processed through WordPress and PHP so nothing can get blocked by security settings on a visitor’s browsers. This method also solves the problem with blogs that have non-technical writers who aren’t accustomed to using the HTML tab in the Post Editor or aren’t familiar with HTML markup and it allows writers to just write. So how do we do this:

basic-maths-wordpress-theme-2-column-sample

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.

wordpress-two-column-post-visual-editor-sample

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

[left-column]It wouldn’t be any good without a sample to show right? So if you copied the code and put it in the functions.php file correctly, then in the WordPress Post Editor, you should be able to use the new Shortcodes to create a two-column post article. Also don’t forget that you need to style the divs in-order for this to work properly.[/left-column] [right-column]If you notice that you still only have one-column, but no errors, check your source code for the chunk of code to see if it the Shortcode is being properly called. If it is, that means you’re missing the style information in the style sheet.[/right-column] [top-column]Here’s a wide column that returns to “normal” and spans the entire width. You don’t necessarily need to use the [topcolumn] Shortcode, but if you notice that your having design float issues, then you need to use the
[topcolumn] Shortcode on the paragraph immediately following the two columns. Make sure you have clear: both; entered into your style sheet under.topcolumn.

I would recommend doing this as good practice anyways; especially if one column is longer than the other column.[/top-column]

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.

iFrames in WordPress Post Editor Using Shortcodes and Custom Fields

I was looking for a way to embed a Google Map into one of my Reviews, but the FCKEditor, otherwise known as the Visual (or pretty) Editor, would remove any iFrame code. Posting it via the HTML tab works so long as you don’t click to the Visual tab, as it will strip the iFrame code. This can get pretty frustrating. I didn’t want to have to install another plugin to do iFrames either. Fortunately through a quick Google search I found Walt had a very elegant solution using WordPress Shortcodes and Custom Fields.

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.

[showads]

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:

[field name=iframe]

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:

WordPress-iframe-shortcode-functions-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.

Migrated To WordPress MU 2.7

Thanks to Donncha’s ever amazing work, I’ve finally upgraded my site from WordPress MU 2.6.5 to WordPress MU (WPMU) 2.7. There were some hiccups during the initial WPMU 2.7 beta upgrade, so I ended up wiping all the WordPress files except for my config file (wp-config.php) and the contents of blogs.dir inside the wp-content folder and re-uploading all the files from the stable release WPMU 2.7. So for those who are having a problem with their WPMU installation after an upgrade, you could always delete everything but the wp-config.php file and blogs.dir folder and re-upload all the files fresh. I’ve found doing a drag-and-drop via FTP of new files on top of old files has never failed to produce errors. Another good option might be Subversion.

So how is the new WordPress MU 2.7, the new user interface, and functionality? Well so far, it’s excellent. Read on to hear more about my thoughts on the new WPMU 2.7. Continue reading Migrated To WordPress MU 2.7

Problems With Donncha’s Domain Mapping Plugin

I have been using Donncha’s very cool WordPress MU plugin, Domain Mapping, for awhile now with great success. Before anyone thinks anything, this post isn’t to highlight anything bad about the Domain Mapping plugin, but rather assure other users they are not alone when they experience issues with using the plugin. Donncha is a great assets to the WPMU community and he is obviously very busy with Automattic projects. Continue reading Problems With Donncha’s Domain Mapping Plugin

WordPress iPhone Native App

The new WordPress iPhone Native App sadly does not work with WordPress MU if you use the domain mapping option. It only works for the main website. It won’t connect to any other domain mapped website. The problem has to do with the way we are doing domain mapping and how it affects XML-RPC.