Over the past two years I’ve found some improvements to my process, most notably around serialized arrays.

Before Migrating, Custom Table Prefix

When building a new website, make sure to use a custom table prefix (you define this in wp-config.php). If you started with an existing database, use this process to change the prefix.

I like to make mine [clientname][date]_. So if my client was Automattic and I built the website today, the prefix would be automattic05232012_.

This is so that there’s no risk you upload your tables to a database with the same named tables. When working on an existing site, it’s important to have both sets of tables in the database so that if there’s any issues with the migration, you can quickly switch back to the old site while you figure out the issue.

Migration Process

1. Backup the database tables. I like to use Sequel Pro to connect to my database and export them, but you can also use the Adminer WordPress plugin or phpMyAdmin through your server’s cPanel. The default export will the a .sql file, but you might want to use one of the compressed formats. Many hosts only allow you a small file upload (like 2MB), and compressing it can help you stay under that limit.
2. Backup the wp-content directory. This can be as easy as FTP’ing onto your server and dragging a copy of wp-content/ to your computer. If you have SSH access and are comfortable with command line, I like to make a tarball because it is much faster to download than a lot of small files. Use a command like this: tar -pvczf wp-content.tar.gz wp-content/. You can also use the WPEngine Snapshot plugin to make this tarball (it will also let you back up the database, but it includes every table in the database and I prefer to be more selective).
3. Upload the database to the new server. If WordPress is already installed, use the Adminer plugin to add the database. If not, you might use phpMyAdmin provided by the host.
4. Upload searchreplacedb2.php to the top level of your server (wherever wp-config.php is). This is used to find all the uses of the old domain and replace them with the new domain. The reason we’re using this tool instead of simply doing it in the database is that it will work with serialized arrays. Click the above link to read more about the problem and solution. If you’re really worried about security, do this locally or on your development server so that this file never has to be on the production server.
5. Load the the search and replace tool at http://www.yoursite.com/searchreplacedb2.php. It will auto-populate the database information from wp-config.php. Click “Next”, select the applicable tables, then on the find/replace screen type the old and new domain. Make sure you do not include a trailing slash (correct = http://www.yoursite.com | incorrect = http://www.yoursite.com/). Do the find and replace, then remove this file from your server.
6. If a brand new website, upload copy of WordPress along with your custom wp-content directory. If there’s already a WordPress website live, follow the rest of the steps below.
7. On your computer, unpackage the wp-content tarball (if you tarballed it), and then rename the folder wp-content.new. The name doesn’t matter, it just has to be different than wp-content. Upload the folder to the same directory that has the old wp-content/ .
8. Open wp-config.php. Find the line that starts with $table_prefix. Comment it out, and create a new $table_prefix line with your custom table prefix. It will look something like this.
9. Save wp-config.php, and then immediately rename wp-content/ to wp-content.old/, and wp-content.new to wp-content/
10. Check the website’s homepage. If anything looks wrong, switch to the old site while you figure it out. Go into wp-config.php, comment out the new table prefix and remove the commenting on the old table prefix. Rename the wp-content directories back to how they were.
11. If the site is working, log in and go to Settings > Permalinks, then click Save. This will update the permalink structure and ensure all URLs work. Then go to Settings > Privacy and make sure you have the site visible to search engines.

A popular request is to list posts in multiple columns. I do it on my blog, and do it often on my clients’ sites.

Genesis developed a Grid Loop, which you can utilize inside your Genesis themes for this effect, and is how this blog does it. While very useful, it can be difficult to set up. I believe this is because they combined two separate functions: what content to display (your query) and how to display it.

By breaking those two functions we can use another feature of Genesis, the column classes, to build grid loops easier. You can also copy that CSS to any WordPress theme and make it work too.

For this example I’ll be using a Gallery theme I recently built. On the archive pages, it displays posts in three columns. See the screenshot above, or click here) for an example.

Step 1: Multiple columns using post_class

The post_class filter lets us customize the classes applied to each post in the loop. Since I want this to only apply to archive pages, I’m placing it in archive.php.

<?php

/**
 * Archive Post Class
 * @since 1.0.0
 *
 * Breaks the posts into three columns
 * @link http://www.billerickson.net/code/grid-loop-using-post-class
 *
 * @param array $classes
 * @return array
 */
function be_archive_post_class( $classes ) {
	$classes[] = 'one-third';
	global $wp_query;
	if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 3 )
		$classes[] = 'first';
	return $classes;
}
add_filter( 'post_class', 'be_archive_post_class' );

The first line adds a class of ‘one-third’ to all posts. Then I grab the current post counter out of $wp_query, and if this is the first post ( 0 == $wp_query->current_post ) or if the remainder of the current post divided by 3 is zero (this tells us the current post is the first in a row), apply a class of “first” as well.

That’s it! You now have your content broken into multiple columns. If you want two columns, use ‘one-half’ and divide the current post by 2. If you want four columns, use ‘one-fourth’ and divide the current post by 4.

Step 2: Customize the Query

When I view the archive page now, it’s in three columns but it’s only displaying 10 posts. The last post sits by itself in its own row. I’m going to modify the main query to show 27 posts per page. You could use any number you want, just make sure it’s a multiple of columns. For more information on customizing the main query, see this post.

<?php

add_filter( 'pre_get_posts', 'be_archive_query' );
/**
 * Archive Query
 *
 * Sets all archives to 27 per page
 * @since 1.0.0
 * @link http://www.billerickson.net/customize-the-wordpress-query/
 *
 * @param object $query
 */
function be_archive_query( $query ) {
	if( $query->is_main_query() && $query->is_archive() ) {
		$query->set( 'posts_per_page', 27 );
	}
}

This code must go in functions.php, since the main query runs before it reaches archive.php (it checks the query to figure out what template to load).

Even easier sitewide

If you’re using this for all listings of posts (home, archive, search…), it is even easier to set up. Put the post_class filter in functions.php so it runs sitewide, and add a conditional to check if it isn’t singular:

<?php

/**
 * Archive Post Class
 * @since 1.0.0
 *
 * Breaks the posts into three columns
 * @link http://www.billerickson.net/code/grid-loop-using-post-class
 *
 * @param array $classes
 * @return array
 */
function be_archive_post_class( $classes ) {

	// Don't run on single posts or pages
	if( is_singular() )
		return $classes;

	$classes[] = 'one-third';
	global $wp_query;
	if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 3 )
		$classes[] = 'first';
	return $classes;
}
add_filter( 'post_class', 'be_archive_post_class' );

And instead of the function to customize the number of posts, go to Settings > Reading and tweak it there.

Read the full article here.

I recently built an Event Manager theme for promoting an event, and on our Event Theme Settings page we had fields for event date and location, so these could be used throughout the site and pulled from a single source.

This code is pretty technical, but it is 100x easier than making admin pages without Genesis. See this 10 page tutorial by Chip Bennett for instructions on making them without Genesis’ help.

You should only use this method if you’re building a Genesis theme or a Genesis-specific plugin. If you build a plugin for public distribution, make sure you put some checks in place to ensure the user is running Genesis (take a look at the AgentPress plugin code as an example).

Here’s the steps:

1. Specify the page information. This includes the page’s name and default values for your fields.
2. Create the sanitization filters. These keep the page secure by ensuring the right type of data are entered.
3. Set up the help tab, a very useful feature that was improved in WordPress 3.3.
4. Add your metaboxes to the page.
5. Build your metaboxes.
6. Finally, add the new admin page to the backend.

For a complete example, see the child-theme-settings.php file in my base child theme.

Specify the page information

First, it’s best to keep all this code in its own file so your theme is easy to browse. I like to create a “lib” folder in my child theme where I store everything. In my example, I created /lib/admin/child-theme-settings.php, then added this to my functions.php to include it:

<?php

// Setup Theme Settings
include_once( CHILD_DIR . '/lib/admin/child-theme-settings.php');

Now inside your child-theme-settings.php file, place the following:

<?php
/**
 * Child Theme Settings
 * Requires Genesis 1.8 or later
 *
 * This file registers all of this child theme's specific Theme Settings, accessible from
 * Genesis > Child Theme Settings.
 *
 * @package     BE Genesis Child
 * @author      Bill Erickson <bill@billerickson.net>
 * @copyright   Copyright (c) 2011, Bill Erickson
 * @license     http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link        https://github.com/billerickson/BE-Genesis-Child
 */ 
 
/**
 * Registers a new admin page, providing content and corresponding menu item
 * for the Child Theme Settings page.
 *
 * @package BE Genesis Child
 * @subpackage Admin
 *
 * @since 1.0.0
 */
class Child_Theme_Settings extends Genesis_Admin_Boxes {

	/**
	 * Create an admin menu item and settings page.
	 * 
	 * @since 1.0.0
	 */
	function __construct() {

		// Specify a unique page ID. 
		$page_id = 'child';

		// Set it as a child to genesis, and define the menu and page titles
		$menu_ops = array(
			'submenu' => array(
				'parent_slug' => 'genesis',
				'page_title'  => 'Genesis - Child Theme Settings',
				'menu_title'  => 'Child Theme Settings',
			)
		);

		// Set up page options. These are optional, so only uncomment if you want to change the defaults
		$page_ops = array(
		//	'screen_icon'       => 'options-general',
		//	'save_button_text'  => 'Save Settings',
		//	'reset_button_text' => 'Reset Settings',
		//	'save_notice_text'  => 'Settings saved.',
		//	'reset_notice_text' => 'Settings reset.',
		);		

		// Give it a unique settings field. 
		// You'll access them from genesis_get_option( 'option_name', 'child-settings' );
		$settings_field = 'child-settings';

		// Set the default values
		$default_settings = array(
			'phone'   => '',
			'address' => '',
		);

		// Create the Admin Page
		$this->create( $page_id, $menu_ops, $page_ops, $settings_field, $default_settings );

		// Initialize the Sanitization Filter
		add_action( 'genesis_settings_sanitizer_init', array( $this, 'sanitization_filters' ) );

	}

	function sanitization_filters() {

	}

}

This is a lot of code, so I’ll walk through it:

• I start out with some page-specific documentation that describes what this page is (always a good practice).
• Then there’s the documentation for our new class, Child_Theme_Settings
• We create our new class by extending the existing Genesis_Admin_Boxes class
• First thing in our new class is the __construct() method (functions inside of classes are called methods). This is what sets everything up.
• We create an unique page ID for this page. I’m calling mine ‘child’, but you could call yours whatever you’d like. I recommend naming it the same as your child theme since it will contain your child-theme-specific settings.
• Next we specify some information about the menu item. It’s a child of the ‘genesis’ page, we give it a page title and a menu title.
• Then we create the $page_ops variable which lets you customize some page settings. I’ve left the defaults in there and commented them out so you can see. Uncomment a line and then modify it to change the default.
• Then we define the settings field. All the settings on this page will be grouped together. If you create a field called address you can get to it like this: $address = genesis_get_option( 'option_name', 'child-settings' );
• Finally, we create the admin page by adding all the variables together in the create() method.
• I’ve also added the sanitation action (in __construct() method) and sanitization_filters() method to create the sanitization filters, which we’ll do in the next step.

Before we move on, a few quick notes about classes. Everything inside the class should use the __construct() method for hooking to appropriate actions/filters. Classes are their own namespace, so you can name the methods whatever you’d like. Unlike standard functions where you always need to prefix, you don’t have to worry about any other function having the same name. And finally, when hooking methods to actions make sure you use array( $this, 'method_name' ) instead of just 'method_name'.

Create the sanitization filters

Sanitization is about ensuring the data collected is the type of data you expect. By limiting a checkbox to a 0 or 1, a title to no html… you’re able to prevent code you didn’t expect (whether malicious or not) from altering the way your theme/plugin works.

See my previous post on Genesis options for more details on sanitization filters.

I’m planning to have two fields on this page – phone and address – so I’ll register those as no_html. Update your sanitization_filters() method like this:

<?php


/** 
 * Set up Sanitization Filters
 *
 * See /lib/classes/sanitization.php for all available filters.
 *
 * @since 1.0.0
 */	
function sanitization_filters() {

	genesis_add_option_filter( 'no_html', $this->settings_field,
		array(
			'phone',
			'address',
		) );
}

Help Tab

While not required, it’s a good idea to put instructions and other useful information in the help tab. If you’d like to have a help tab, simply create a help() method in your class.

Here’s a screenshot of the help tab in my Event Theme. I don’t usually provide this much information, but the client plans to sell the theme so we wanted to provide as much information as possible.

To create a help tab, add this method inside your Child_Theme_Settings class ( so before the last } ).

<?php

/**
 * Set up Help Tab
 * Genesis automatically looks for a help() function, and if provided uses it for the help tabs
 * @link http://wpdevel.wordpress.com/2011/12/06/help-and-screen-api-changes-in-3-3/
 *
 * @since 1.0.0
 */
 function help() {
 	$screen = get_current_screen();

	$screen->add_help_tab( array(
		'id'      => 'sample-help', 
		'title'   => 'Sample Help',
		'content' => '<p>Help content goes here.</p>',
	) );
 }

Provide an unique ID for the tab, then give it a title (shown on the left) and HTML content (shown on the right). For multiple tabs, simply repeat the $screen->add_help_tab() method inside your help() method.

Add your metaboxes

We’ll now create a method inside our class called metaboxes(). For each metabox we’d like to add to our page, we’ll write a simple one line of code to add_meta_box().

<?php

/**
 * Register metaboxes on Child Theme Settings page
 *
 * @since 1.0.0
 *
 * @see Child_Theme_Settings::contact_information() Callback for contact information
 */
function metaboxes() {

	add_meta_box('contact-information', 'Contact Information', array( $this, 'contact_information' ), $this->pagehook, 'main', 'high');

}

I’ve added a single metabox with an ID of ‘contact-information’, a title of ‘Contact Information’, a callback function (where the actual metabox code is) of contact_information(), I’m putting it on the current page, it goes in the main column (not that there’s any other columns for it) and I want it positioned at the top. For more information on this function, see add_meta_box() in the Codex.

Build your metaboxes

In the previous method we referenced a callback function called contact_information(). Now it’s time to build this.

My metabox, Contact Information, will contain two fields. Phone will be a text field, and Address is a textarea. For examples of more fields, look at the actual Genesis admin pages (/lib/admin/…). And I’ve heard there might be a tool similar to our Custom Metabox Library for making Genesis admin fields (talk with NickTheGeek).

This method also goes inside your Child_Theme_Settings class.

<?php

/**
 * Callback for Contact Information metabox
 *
 * @since 1.0.0
 *
 * @see Child_Theme_Settings::metaboxes()
 */
function contact_information() {

	echo '<p>Phone:<br />';
	echo '<input type="text" name="' . $this->get_field_name( 'phone' ) . '" id="' . $this->get_field_id( 'phone' ) . '" value="' . esc_attr( $this->get_field_value( 'phone' ) ) . '" size="50" />';
	echo '</p>';

	echo '<p>Address</p>';
	echo '<p><textarea name="' . $this->get_field_name( 'address' ) . '" cols="78" rows="8">' . esc_textarea( $this->get_field_value( 'address' ) ) . '</textarea></p>';		
}

The important thing to note here is the handy methods that are built into the class (examples below are for the field ‘phone’ ).

• $this->get_field_name( 'phone' );
• $this->get_field_id( 'phone' );
• $this->get_field_value( 'phone' );

That’s It!

That’s all it takes to build custom admin pages in Genesis. The code definitely looks complicated, but once you get started it’s pretty easy to modify it to your needs. StudioPress has done all the hard (and repetitive) work for you, so you just have to specify the things that are unique to the page.

Here’s the completed code:

<?php
/**
 * Child Theme Settings
 * Requires Genesis 1.8 or later
 *
 * This file registers all of this child theme's specific Theme Settings, accessible from
 * Genesis > Child Theme Settings.
 *
 * @package     BE Genesis Child
 * @author      Bill Erickson <bill@billerickson.net>
 * @copyright   Copyright (c) 2011, Bill Erickson
 * @license     http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link        https://github.com/billerickson/BE-Genesis-Child
 */ 
 
/**
 * Registers a new admin page, providing content and corresponding menu item
 * for the Child Theme Settings page.
 *
 * @package BE Genesis Child
 * @subpackage Admin
 *
 * @since 1.0.0
 */
class Child_Theme_Settings extends Genesis_Admin_Boxes {

	/**
	 * Create an admin menu item and settings page.
	 * 
	 * @since 1.0.0
	 */
	function __construct() {

		// Specify a unique page ID. 
		$page_id = 'child';

		// Set it as a child to genesis, and define the menu and page titles
		$menu_ops = array(
			'submenu' => array(
				'parent_slug' => 'genesis',
				'page_title'  => 'Genesis - Child Theme Settings',
				'menu_title'  => 'Child Theme Settings',
			)
		);

		// Set up page options. These are optional, so only uncomment if you want to change the defaults
		$page_ops = array(
		//	'screen_icon'       => 'options-general',
		//	'save_button_text'  => 'Save Settings',
		//	'reset_button_text' => 'Reset Settings',
		//	'save_notice_text'  => 'Settings saved.',
		//	'reset_notice_text' => 'Settings reset.',
		);		

		// Give it a unique settings field. 
		// You'll access them from genesis_get_option( 'option_name', 'child-settings' );
		$settings_field = 'child-settings';

		// Set the default values
		$default_settings = array(
			'phone'   => '',
			'address' => '',
		);

		// Create the Admin Page
		$this->create( $page_id, $menu_ops, $page_ops, $settings_field, $default_settings );

		// Initialize the Sanitization Filter
		add_action( 'genesis_settings_sanitizer_init', array( $this, 'sanitization_filters' ) );

	}

	/** 
	 * Set up Sanitization Filters
	 *
	 * See /lib/classes/sanitization.php for all available filters.
	 *
	 * @since 1.0.0
	 */	
	function sanitization_filters() {

		genesis_add_option_filter( 'no_html', $this->settings_field,
			array(
				'phone',
				'address',
			) );
	}

	/**
	 * Set up Help Tab
	 * Genesis automatically looks for a help() function, and if provided uses it for the help tabs
	 * @link http://wpdevel.wordpress.com/2011/12/06/help-and-screen-api-changes-in-3-3/
	 *
	 * @since 1.0.0
	 */
	 function help() {
	 	$screen = get_current_screen();

		$screen->add_help_tab( array(
			'id'      => 'sample-help', 
			'title'   => 'Sample Help',
			'content' => '<p>Help content goes here.</p>',
		) );
	 }

	/**
	 * Register metaboxes on Child Theme Settings page
	 *
	 * @since 1.0.0
	 *
	 * @see Child_Theme_Settings::contact_information() Callback for contact information
	 */
	function metaboxes() {

		add_meta_box('contact-information', 'Contact Information', array( $this, 'contact_information' ), $this->pagehook, 'main', 'high');

	}

	/**
	 * Callback for Contact Information metabox
	 *
	 * @since 1.0.0
	 *
	 * @see Child_Theme_Settings::metaboxes()
	 */
	function contact_information() {

		echo '<p>Phone:<br />';
		echo '<input type="text" name="' . $this->get_field_name( 'phone' ) . '" id="' . $this->get_field_id( 'phone' ) . '" value="' . esc_attr( $this->get_field_value( 'phone' ) ) . '" size="50" />';
		echo '</p>';

		echo '<p>Address</p>';
		echo '<p><textarea name="' . $this->get_field_name( 'address' ) . '" cols="78" rows="8">' . esc_textarea( $this->get_field_value( 'address' ) ) . '</textarea></p>';		
	}


}


add_action( 'genesis_admin_menu', 'be_add_child_theme_settings' );
/**
 * Add the Theme Settings Page
 *
 * @since 1.0.0
 */
function be_add_child_theme_settings() {
	global $_child_theme_settings;
	$_child_theme_settings = new Child_Theme_Settings;	 	
}

And once you do have your custom admin page up-and-running, you’ll need to access that information. Just use genesis_get_option( [field-name], [settings-field] );.

So in the above example, to access the phone number use: $phone = genesis_get_option( 'phone', 'child-settings' );.

There’s three pieces of code we’ll add to our core functionality plugin ¹:

1. Register the connection. This adds the metaboxes for linking posts.
2. Pre-Loop code. This adds the related posts information to the $wp_query (better performance)
3. Display Related Posts.

Register the Connection

<?php

add_action( 'init', 'be_post_type_connections' );
/**
 * Related Post Connection
 * @author Bill Erickson
 * @link http://www.billerickson.net/manually-curated-related-posts/
 *
 * @uses Posts2Posts
 * @link https://github.com/scribu/wp-posts-to-posts/wiki
 */
function be_post_type_connections() {

	// Make Sure plugin is active
	if ( !function_exists( 'p2p_register_connection_type' ) )
		return;

	p2p_register_connection_type( array(
		'name' => 'related-articles', // unique name
		'from' => 'post',
		'to' => 'post',
		'title' => array( 'to' => 'All Connections', 'from' => 'Related Articles' )
	) );
}

I’m creating this connection from the post post type, to the post post type. So when you’re editing a post, you can select other posts to connect it to. This actually creates two metaboxes: a from metabox that you use to connect the current post to others, and a to metabox that shows what posts have already been connected to this one. I’ve labeled the from metabox “Related Articles” since this is what is displayed as related to the current post, and I labeled to “All Connections”.

Once you add this code to your site, you should see metaboxes like this when editing a post:

Pre-Loop Code

<?php

/**
 * Related Posts Before Loop
 * Adds connection data to $wp_query. Run before the loop.
 *
 * @author Bill Erickson
 * @link http://www.billerickson.net/manually-curated-related-posts/
 */
function be_related_posts_pre_loop() {
 	// Make Sure plugin is active
 	if ( !function_exists( 'p2p_register_connection_type' ) )
		return;

	global $wp_query;
	p2p_type( 'related-articles' )->each_connected( $wp_query );	
}

As described in the Posts 2 Posts wiki, when dealing with archive pages its much better to add the connected posts to the $wp_query before you run the loop.

Display Related Posts

<?php

/**
 * Display Related Posts
 * @author Bill Erickson
 * @link http://www.billerickson.net/manually-curated-related-posts/
 */
function be_related_posts() {
 	// Make Sure plugin is active
 	if ( !function_exists( 'p2p_register_connection_type' ) )
		return;

	global $post;
	if( isset( $post->connected ) && !empty( $post->connected ) ):
		echo '<div class="related-posts">';
		$count = 1;
		foreach( $post->connected as $related ):
			if( $count < 6 ) {	
				echo '<div class="related-post">';
				echo '<a class="image" href="' . get_permalink( $related->ID ) . '">';
				$cat = wp_get_object_terms( $related->ID, 'category', array( 'count' => 1 ) );
				echo '<span class="category">' . $cat[0]->name . '</span>';
				echo get_the_post_thumbnail( $related->ID, 'be_home_small' );
				echo '</a>';
				echo '<a class="title" href="' . get_permalink( $related->ID ) . '">' . $related->post_title . '</a>';
				echo '</div>';
				$count++;
			}
		endforeach;
		echo '</div>';
	endif;
}

You can of course display the related posts however you’d like. For my specific implementation, I wanted to limit it to 5, display the post image at a specific size, float the category name on top of the post image, and then display the title below the image.

The important thing to note is that $post->connected is an array of post objects, so use the foreach() to loop through them and then display the post data however you’d like.

Integrating it with your theme

Once you’ve added this code to your core functionality plugin, you have to actually call it in your theme. Just place be_related_posts_pre_loop() before you call the loop, and be_related_posts() somewhere inside the loop. If you’re using Genesis, it has hooks throughout the theme, so you just need to add the following two lines to your theme’s functions.php file (alter the second line to change the positioning of the related posts):

<?php

// Related Posts (see mu-plugins/lib/functions/related-posts.php
add_action( 'genesis_before_loop', 'be_related_posts_pre_loop' );
add_action( 'genesis_after_post_content', 'be_related_posts', 15 );

I’d love to hear any thoughts you have about this, especially if you have experience with Posts 2 Posts.

1. Core Functionality Plugin
   While you could put all this code in your theme’s functions.php file, a core functionality plugin is better for things like this because if you change your theme in the future, you’ll want to easily move this functionality to your new theme. If it’s in a plugin, all you have to do is add two lines to your theme (call the pre-loop code and then the display code). If all the code is in your old theme, you have to dig through all your files, figuring out how you built your related posts section so you can duplicate it in your new theme. In my core functionality plugin, I created /lib/functions/related-posts.php so that all the code was on one location.

There’s two different ways I set up client sites to use this:

• Adding Editor Styles
• Div Shortcode Plugin

Adding Editor Styles

If the client is somewhat comfortable with HTML – she’s not afraid to click the “HTML” tab in the editor – then I’ll add the column classes to the editor’s stylesheet. This will make it so the columns are visible in the editor and the client can easily see where the content she’s writing will show up. I also recommend using the fullscreen editor when using this because the inline one is a bit too small.

In your theme, create a file called editor-style.css and add the column class CSS styles to it. You can also add any other styles you’d like reflected in the editor (I often add the headlines styles so the client can visually see how her h2′s and h3′s will look from the editor).

Then, add this to your functions.php file: add_editor_style( 'editor-style.css' );.

That’s it! Now when editing a post, switch to HTML view and add this:

<div class="one-half first">

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

</div>

<div class="one-half">

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

</div>

When you switch back to Visual view, your editor should look like this:

Div Shortcode Plugin

For those who get completely lost in the HTML tab, I have a plugin that let’s them use [div] shortcodes. Once Div Shortcode Plugin is activated, they just have to write something like this in the Visual Editor:

[div class="one-half first"]

This is the left column

[end-div]

[div class="one-half"]

This is the right column

[end-div]

The benefit here is that they can see exactly where in the Visual editor one column is ending and another is beginning. They’re able to control div’s without ever switching to the HTML view (where they might get lost).

Other Notes

When building out a site, I’ll often create two sample pages using each technique so the client can choose which is best for her.

If every page will have the same number of columns, you might consider pre-populating the content area with default text. This way they never have to switch to HTML mode to create the columns – they are there already.

It looks like a future version of Genesis might include icons in the TinyMCE Editor for creating the columns, which will give you one more way for doing this.

But when you’re building websites with complex content structures, you’ll often need to build a very specific template hierarchy of your own, or else duplicate a lot of code.

I’m building a site right now with four custom post types, and each post type has 2-4 taxonomies. Take a look at the screenshot above. The ‘recipe’ post type has two taxonomies: ‘name-range’ which allows the client to break down the list of recipes by name (ex: A-D, E-G…), and ‘base’ (dropdown says category), which is a shared taxonomy with another post type that specifies the alcoholic base of the cocktail.

I want a single template file that is used in all of these situations:

• Recipe post type archive
• Name Range taxonomy archive
• Base taxonomy archive (if post type is also ‘recipe’)

For this, I’ll use the template_include filter. This filter runs right after WordPress determines what template it thinks it should use, but before that template is actually loaded. This is where you can hop in and specify your own template hierarchy.

Without this technique, I’d need to put the same code in archive-recipe.php, taxononomy-name-range.php, and taxonomy-base.php (with some extra code in here to check for the current post type).

<?php

/**
 * Template Chooser
 * Use CPT archive templates for taxonomies
 * @author Bill Erickson
 * @link http://www.billerickson.net/code/use-same-template-for-taxonomy-and-cpt-archive/
 *
 * @param string, default template path
 * @return string, modified template path
 *
 */
function be_template_chooser( $template ) {

	if( is_post_type_archive( 'recipe' ) || is_tax( 'name-range' ) || ( is_tax( 'base' ) && 'recipe' == get_post_type() ) )
		$template = get_query_template( 'archive-recipe' );
	return $template;
}
add_filter( 'template_include', 'be_template_chooser' );

The code above says “if this is the post type archive for ‘recipe’, the taxonomy archive ‘name-range’, or the taxonomy archive ‘base’ AND post type ‘recipe’, then use the template file archive-recipe.php.”

I also like to generalize this section checker into its own function so I can use it elsewhere. You might want to add a body class called ‘section-recipe’ if any of these templates are in use. Here’s how:

<?php

/**
 * Return Archive Section
 * @author Bill Erickson
 * @link http://www.billerickson.net/code/helper-function-for-template-include-and-body-class/
 * 
 * @param null
 * @return string
 */
function be_return_archive_section() {
	if( is_post_type_archive( 'lifestyle' ) || is_tax( 'lifestyle-section' ) || is_tax( 'lifestyle-type' ) || is_tax( 'lifestyle-series' ) )
		return 'lifestyle';

	if( is_post_type_archive( 'recipe' ) || is_tax( 'name-range' ) || ( is_tax( 'base' ) && 'recipe' == get_post_type() ) )
		return 'recipe';		

	if( is_post_type_archive( 'brand' ) || ( is_tax( 'base' ) && 'brand' == get_post_type() ) )
		return 'brand';

	if( is_post_type_archive( 'experience' ) )
		return 'experience';

	return false;
}

add_filter( 'template_include', 'be_template_chooser' );
/**
 * Template Chooser
 * Use CPT archive templates for taxonomies
 * @author Bill Erickson
 * @link http://www.billerickson.net/code/use-same-template-for-taxonomy-and-cpt-archive/
 *
 * @param string, default template path
 * @return string, modified template path
 *
 */
function be_template_chooser( $template ) {
	if ( be_return_archive_section() ) 
		$template = get_query_template( 'archive-' . be_return_archive_section() );	

	return $template;
}

add_filter( 'body_class', 'be_section_body_classes' );
/**
 * Section Body Classes
 * @author Bill Erickson
 * 
 * @param array $classes
 * @return array
 */
function be_section_body_classes( $classes ) {
	if( be_return_archive_section() )
		$classes[] = 'section-' . be_return_archive_section();

	return $classes;
}

First I’m creating a function that returns the current section if there’s a match, and ‘false’ if there isn’t.

Then I have my template redirect function. If the current page is in a section, it loads the template ‘archive-$section’ (ex: archive-recipe.php).

Then I have my body class filter. If the current page is in a section, it adds the body class ‘section-$section’ (ex: ‘section-recipe’ ).

If you add a new taxonomy, just edit the be_return_archive_section() function to specify the section it belongs in, and it will automatically use the correct template file and have the body class.

It’s been about six months since my original Custom Metaboxes post announcing the release of this code library for easily creating metaboxes. If you haven’t had a look at it since then, I highly recommend you hop on Github and look at the latest version and the wiki.

Some of the features:

• The ability to create metaboxes with a simple array rather than a ton of code. Compare this tutorial (without our library) to these examples (with our library).
• Choose from 20 included field types, or add your own field types
• You can limit the metabox to specific post types, page template, page IDs, or create your own filter for where it should show up
• This can be used by both themes and plugins. And as long as you initialize it correctly (see bottom of example-functions.php), it can be used by a theme and as many plugins as you like at the same time.

My favorite field types:

• WYSIWYG. If you’re using WordPress 3.3, this will automatically use the new wp_editor which gives you a ton of flexibility.
• Taxonomy field types (select, radio, multicheck). If you’re dealing with a lot of taxonomies, the default metabox provided by WordPress takes up a lot of screen real estate. Include taxonomies in your custom metabox instead. Using select or radio is also a great way to force users to only select one taxonomy term.
• File upload. Use the built-in media uploader to allow the user to upload any file they want. You can also store the attachment ID in case you want to retrieve other image sizes.
• Title. If your metabox has a lot of fields in it, use the title field type to create subheadings and instructions.
• Text (standard, medium, and small). This is as simple as it comes, but also the one you’ll use most often.
• text_date_timestamp. This one uses a date picker to let the user select a date, and then saves it as a UNIX timestamp. This is great for event metaboxes because you can then query based on the date.

The contributors of this code library, in no particular order, include: Andrew Norcross, Jared Atchison, Travis Smith, Randy Hoyt, Jeremy Pry, Andrew Ryno, Patrick Forringer, Chris Olbekson, Stefan Crain  …and me.

Please use this code, and consider contributing any improvements you make. If you create any field types or show_on filters, post them on the wiki. If you find any bugs, post them in issues (and even better, post the fix!).

Keeping WordPress from messing up code you’re sharing in the post editor can be difficult, and a lot of my old posts had mangled code. By moving everything to github I don’t have to worry about this anymore. It also means I can have a single source of code linked from multiple places (in a blog post, in a code snippet post…).

Other changes:

• Created a Code Snippets area of my site. There’s a lot of little things I’d like to store on here but didn’t warrant a full blog post. It also makes searching through this code easier (there’s a tag cloud at the top). The RSS feed for my code snippets is http://feeds.feedburner.com/BillEricksonCode
• I’ve added an “old” category to my blog. If a tutorial is in this category, it is automatically appended with a notice that the code in here might not work and is no longer maintained. These posts are also excluded from search.
• I created a Contributions page, which lists all my tutorials, themes, plugins, code snippets, patches, and developer tools. It’s great to finally have all this listed in one place.

So take a look around the site and let me know what you think.

To make it easier for my clients, I’ve written a simple plugin called Gallery Metabox. This adds a metabox below the post editor that displays all the attached images. It also has a lot of filters in place for a developer to customize it specifically to the project (see the plugin page for more information).

For instance, if you’re adding a custom field to the uploader to specify which images are in a rotator, you can make the metabox only show these images.

I just built a site for a client that has a photo gallery.

I created a page template called “Photos” which replaces the content area with a photo rotator. But if you edit the page, the edit screen was pretty useless. There’s a big empty wysiwyg, and to get to the actual images in the gallery you have to click a small icon, then go to the Gallery tab.

I’ve added the plugin, along with some code that limits the metabox to this page template. I’ve also added the following code to the theme’s functions.php file to remove the post editor on this page template:

<?php

/**
 * Hide Editor
 * @author Bill Erickson
 * @link http://www.billerickson.net/code/hide-editor-on-specific-page-template/
 */
function be_hide_editor() {
	// Get the Post ID
	if( isset( $_GET['post'] ) ) $post_id = $_GET['post'];
	elseif( isset( $_POST['post_ID'] ) ) $post_id = $_POST['post_ID'];
	if( !isset( $post_id ) ) return;

	// Get the Page Template
	$template_file = get_post_meta( $post_id, '_wp_page_template', true );

	// Exclude on these templates
	$exclude_templates = array( 'template-branch.php' );

	// Exclude on these IDs
	$exclude_ids = array( get_option( 'page_on_front' ) );

	if( in_array( $template_file, $exclude_templates ) || in_array( $post_id, $exclude_ids ) )
		wp_enqueue_style( 'hide-editor', get_stylesheet_directory_uri() . '/lib/css/hide-editor.css' );
}
add_action( 'admin_enqueue_scripts', 'be_hide_editor' );

#postdivrich{display: none;}

So now this is what they see when editing that page:

This is by far a much easier user interface for this specific page template. And even if your page isn’t solely a gallery, I think this is a useful plugin for quickly seeing which images you have attached to the page or displaying in a gallery/rotator.