Enhance your WordPress site with Custom Fields

Over the years of converting other graphic designer’s design into WordPress templates, I’ve had to think of ways to keep the code simple and easy for clients to maintain the site once live. Working on a few challenging design lately has given me the opportunity to look at using custom fields.

You’ll find custom fields in your admin panel under all post and page text areas. These custom fields allow you to add extra information, technically termed meta-data, and allows you to add jazz up your posts or pages. Here are a few examples of how custom fields can be used:

Add a style to your header

Navigating through the various topic of one of our latest projects, “The Challenge Series” you’ll notice that the sustainability section has a green title, while history is orange, policy red and design concepts blue.

This was achieved by doing the following:
1. Adding a custom field called Colour and assigning it a value of green, orange, red of blue.

2. Editing the code in my index.php as follows:

<h1 class="<?php $key="Colour"; echo get_post_meta($post->ID, $key, true); ?>"><?php the_title(); ?></h1>

3. Setting up the appropriate styles in my CSS as follows:

h1.orange {background:#F26F21 }
h1.green {background:#5D9632}
h1.red {background:#B22217}
h1.blue {background:#00728E}

Insert an image outside your content area

During the build of the latest version of the Crisis Centre website, the design required that a unique image be inserted in the top right hand corner of each page. Inserting the image within the main content entry would have required me to fiddle with the padding of my paragraph tags. Instead I opted to use a custom field and added this piece of code to my index.php template:

<div id="photo"><img src="<?php bloginfo('template_directory'); ?>/images/photos/<?php $key="photo"; echo get_post_meta($post->ID, $key, true); ?>" alt="" border="0" /></div>

This line of code, simply pulls the image specified in the custom field and inserts in a div tag which has its own unique style.

Although custom fields, can get a bit tricky, especially when using more than one per entry, they allow you to enhance your site and give you much more design freedom.