While working on a site recently, a common problem was run into using WordPress as a full fledged CMS. The issue was needing to have multiple content areas within the same Page. For a developer (front end or back end) this typically isn’t an issue, even inside of WordPress. Since the content area allows you to insert custom HTML a developer can just flip to HTML view and position things on the screen how they see fit. However, that’s not always a viable option when handing over content management to your client. The client may not have the knowledge nor the desire to learn HTML on their own. This can leave the theme creator in a difficult position. Luckily WordPress provides Custom Fields as one way to help get around this predicament.

Custom Fields in WordPress can be used for many things:

• Assigning images to Posts (featured image or thumbnail)
• Serving as a data source for content to be loaded via Ajax
• Providing multiple content areas for a Page (custom sidebar for instance)

One “gotcha” of using Custom Fields to solve this issue is that the size of the input area is limited. There are possible ways around this limitation, but they’re outside the scope of this Post so we’ll save that for another time. Putting that all aside though, they can definitely help get you to where you need to be.

Custom Fields have two components, “Name” and “Value.” If you’re of the developer mindset, think of it as a simple key-value pair. You can have multiple identical keys even on the same Page/Post. Once you have used a key once it then becomes available from the select box on future Posts/Pages, making it easier to reuse custom fields for similar operations on other pages. You can use get_post_meta() anytime the WordPress core has been loaded for the Page view and you have access to a Post or Page ID.

Let’s take the third example, providing multiple content areas for a Page, as an example in using Custom Fields in your theme. We’ll be using get_post_meta(). Here are some basic steps to move towards putting this all together:

• Edit a Page you would like to add a unique sidebar to
• Add a custom field name of “sidebar”
• Add any content you would like to the value field
• Save your Page
• Create a Page template file inside your theme directory
• At the top of the template file add this PHP code:

$sidebar_content = get_post_meta($post->ID, 'sidebar', false);

Some explanation:

• $post->ID feeds the primary key of the Post or Page that is being displayed by your theme
• ’sidebar’ is the “Name” or key for the custom field you added to your Page in the WordPress Admin
• false tells get_post_meta() to return an array of key-value pairs for the requested key. If set to true, it would return a single result as a string.

From here, adding the extra content to your Page template is fairly simple. Perhaps you have a sidebar container you would like to place it into. You could use this PHP code to do that:

foreach ($sidebar_content as $content) {
  echo '<p>' . $content . '</p>';
}

The above example would loop through each Custom Field you had added with the name ’sidebar’ and would display its content wrapped in a paragraph tag.

Using this overall approach you can now add custom content areas to specific Pages or expand upon the idea to perform other customizations such as easily formatting a thumbnail for a Post/Page. By using a custom field for the thumbnail, you can then format the thumbnail differently based on the context it is being displayed in, as opposed to just inserting it into the copy area of the Post/Page. For instance, if you wanted to wrap the copy around the image when displaying it as a full Post or Page you could do so, but if you wanted to display recent Posts on your homepage with the copy blocked to the right of the image, that now becomes easy as well (it’s just a matter of html/css markup at that point).