Home Tutorials Using Custom Fields Part Two - Styling Per Post

Using Custom Fields Part Two – Styling Per Post



Updated on


Now we are going to get into the really exciting things that can be done with custom fields! If you haven’t already taken a look at Part One, give it a quick read to bring yourself up to date with the rest of us. In this post (and the posts to come!) we are going to look at some more advanced techniques involving the use of custom fields.

The end of the last post directed readers to take a look at the advanced section of the guide on custom fields in the WordPress codex. Give it a quick read if you haven’t. The advanced section introduced us to this function:

get_post_meta($post_id, $key, $single)


What does this function allow us to do?

  1. It allows us to call up a custom field from a specific post.
  2. It allows us to call up a specific key value.
  3. And it allows us to control how the resulting data is displayed. (In other words whether the data is displayed as an array or a single value.)

In this lesson we are going to focus on number two from the list above. Using the following simple function to call up a specific key value:

<?php echo get_post_meta($post->ID, ‘your key name here‘,true) ?>

Lets run through how we can use this function to create flexible custom layouts on a per post basis.

Complete the following steps:

  1. In your WordPress admin go to Presentation: Theme Editor: Select the theme you wish to edit in the drop down menu: then select the Main Index Template.
  2. In the Index Template find the area in the image below that is highlighted (located in the The Loop):
    Custom Field Area
  3. Now replace “post” with
    <?php echo get_post_meta($post->ID,’post’, true) ?>
  4. We are done editing the Index Template make sure to save it. Next go to a create a new post. While writing a new post go down to custom fields to create a new key and value labeled like in the image below, click the add Custom Field button when complete:
    Custom Fields Area
  5. After adding the Custom Field you should see something like this:
    After custom fields area
  6. Now type up a simple post. And publish it. If you look at the source code after publishing you should see something like this for the class of your new post:
    <div class=”default” id=”post-1″>
  7. To style it simply create a new styling attribute in your CSS similar to the following:

    default {background: #114433; font-family: Verdana, Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;}
  8. Now when publishing a normal post make sure to add the custom field with the key name “post” and to then type in default. This will be the default style. If you want to change the styling just type in a different class name in the value area. Make sure to do this with your single template as well if you wish.

Simple and elegant I think. The possibilities are endless. The only negative is that this is something you need to do at the start of a new blog or risk the need to create custom fields for every post you have published. There is a way around this issue that I will cover in a future post. Next, in the custom fields tutorial series, we will look at using custom fields to create a custom image per post. (ie. a category icon)

Follow this Custom Fields tutorial series from the beginning.


Please enter your comment!
Please enter your name here

Recent posts

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

How Can Domain Name Extensions Influence Your Brand Name?

Are domain name extensions important in naming your brand? The shortest answer is "Yes." In today's online world, it is the first thing that...

Recent comments