The custom fields are a very powerful part of WordPress, and yet many people do not even realise that they are there. If you are editing a post, then they are usually located someone below the editor. If not, you will need to click on “Screen Options” to activate them.
And with a custom field you can do all sorts of tricks in WordPress. Today, I’m going to show you how to use them to change the design of your site on a per-post basis.
I wanted to do this myself because on my “AllThingsGerman” site I wanted to be able to control which header appeared above a post, and subtly change it to fit the content if I was writing about a particular town or event. I could not use a category to do this, because the town or event often have posts that are spread across different categories.
In both cases, I use a custom field where I enter the name of the town or event in order to activate the special header.
Here’s how it works:
To add a custom field, move down in the editor to below the main text area . The first time you do this you will need t0 click on “Enter new” and give your custom field a name, but after that it will be in the selection box.
I called my field “stadt” (which is German for “town”).
The code that you enter in the field will need to be the same every time you use it, so stick to lower case letters and avoid special characters and spaces.
I used the codes “oberursel” and “hessentag” for the examples above.
In the theme files
Depending on which theme you are using and where you want the dynamic part to be, you may need to look carefully to see where the code has to be changed.
In my case, the site was using a variant on the Kubrick theme and I wanted to change the header graphic, so I created a file called custom-top.php which was called from header.php instead of inserting the graphic there as world normally be the case.
In custom-top.php I use the following code:
$c_loc = $_SERVER[‘REQUEST_URI’];
if ($c_loc == “/blog/”)
// leave the start page alone
$stadt = “”;
$stadt = get_post_meta($post->ID, ‘stadt’, true);
$stadt = “-” . $stadt;
echo “<a href=\”http://www.allthingsgerman.net/blog/\”><img src=\”http://www.allthingsgerman.net/images/titel-970-160″ . $stadt . “.jpg\” border=\”0\” width=\”970\” height=\”160\” alt=\”AllThingsGerman.net\”></a>”;
The line $c_loc = $_SERVER[‘REQUEST_URI’] gets the URL of the blog, and the lines that follow check to see if I am on the front page. If I am, then I don’t want any dynamic areas to be changed, as they would use the variables from the top post, so I just set the variable $stadt to be empty.
Otherwise $stadt = get_post_meta($post->ID, ‘stadt’, true); sets the variable $stadt to be the value of the custom field using the get_post_meta function. I then add a minus sign to the front of the value.
The echo line then produces the code <img src… to insert the graphic. My header is actually called titel-970-160.jpg, but the variants are stored in the same directory and have the same dimensions. They just have the town or event name tagged onto them, eg. titel-970-160-oberursel.jpg or titel-970-160-hessentag.jpg.
This way, the value in $stadt causes the right version of the graphic to be inserted into the echo line and displayed on the site.
There are many different ways that the custom fields can be used and this is just one example. If you have any more, then please leave a comment below, even if you don’t know how to make them work, and maybe I can write some sample code for yours too!