(+84) 463.28.7979

WordPress Custom Fields 101: Tips, Tricks, and Hacks

One of our users pointed out that we have a lot of hacks and tutorials that cover WordPress Custom fields, but we never bothered explaining what exactly is a WordPress Custom Field, and how it can be utilized. So in this article, we will share a step by step guide to use WordPress Custom Fields which should beginning developers or DIY users very excited. Furthermore, we will be compiling a list of cool things you can do with WordPress Custom Fields in this article, so this will really show you how custom fields can extend the power of WordPress.

Note: In WordPress 3.1 – the core team wanted to make the Write Panel cleaner, so they unchecked the view button for Custom Fields. If you don’t see them, then click on the Screen Options Tab (in the top right hand corner), and check Custom Fields.

What are WordPress Custom Fields?

Custom Fields are a form of meta-data that allows you to store arbitrary information with each WordPress post. While this does not sound so powerful, it is the single most powerful component of WordPress posts and content types (aka post types). This meta-data is handled with key/value pairs. The key is a “name” which identifies the specific field thus it is a constant and should stay the same for all posts however you can use the same key multiple times within one post. The value is the information that will be displayed for the field when you call it in your WordPress theme thus it can change with each post.

Now let’s take a look at a very basic example of WordPress Custom Fields in Action. While editing your posts, you see this section called Custom Fields. Scroll down a little, and you should see one. We will use that box to add the post author’s mood at the time of writing. So you will add the name “Today’s Mood”, and then you will add the value which can be Happy, Sad, Excited etc.

Custom Fields to display the Mood

Now once you add this field, and save the post. This additional arbitrary information related to your post is stored in the database, and it can be called anywhere within your WordPress theme. So for this very basic example, we will use the very basic way of displaying it in the post. Let’s say, you want to display your mood before the person reads the post, so they know what to expect. Well, then you will open your single.php file and add this code inside the WordPress loop:

<?php the_meta(); ?>

It will display something like this:

Today’s Mood: Happy

Now by using the_meta hook, you will display all fields associated with that post. This is great when you have one field, but if you have 5 different fields that you want to display at 5 different locations, then we will have to use get_post_meta hook. Let’s say you want to display the custom field at a separate location by itself, then you will add the following code within the post loop.

<?php echo get_post_meta($post->ID, 'key', true); ?>

Note: replace the key value to whatever your key is.

What if you have a custom field like ‘songs’ for the songs you were listening while writing the post? Well you can have multiple ‘songs’ keys and have different values stored from the backend. Then inside your loop paste a code like this:

<?php $songs = get_post_meta($post->ID, 'songs', false); ?>
	<h3>This post is inspired by:</h3>
		<?php foreach($songs as $song) {
			echo '<li>'.$song.'</li>';
			} ?>

Note the trick here is the third parameter “false”. By changing it to false, we tell the function to return an array of the values for the specified key. This is a very handy trick for displaying multiple key values.

Source: Jeff Starr at Perishable

Extending the Power of Custom Fields

Custom fields can and does go beyond just the mood and songs example. Powerful plugins like Yoast’s WordPress SEO, WP-Post Ratings, and many more are utilizing custom fields to achieve their respective functionalities. Many powerful frameworks like Genesis, Headway, iThemes Builder and others are also utilizing custom fields to control different single post layouts. In short, custom fields played a crucial role in revolutionizing the way we think of WordPress themes.

Now you might be wondering if so many of these plugins are using custom fields, then why don’t I see them in my post admin panel? This is because a lot of these plugins provide you with a simpler user-interface (UI) to improve user experience (UX). For example WordPress SEO Plugin gives you a section to enter your title, description, keyword etc. for each post. Genesis gives you a visual examples of layouts to select from. Themify gives you color boxes to select different color schemes per post. Now imagine if all of these frameworks and plugins required you to enter each of their custom field key’s and value manually, you will spend weeks writing a single post. Because you would have to print out a 15 page cheat sheet to memorize each specific key and values attributed to it. To avoid clutter and confusion, these theme and plugin developers hide their custom fields entries and give you a more robust easy to use interface.

If you are a new developer or theme designer looking to learn, then you will be wondering how exactly are they hiding these fields? Well, all you have to do is add an underscore ‘_’ before the value of your custom field’s name. So the name would look like this: “_wpbeginner-trending”, and the value could be generated through a custom user interface or dynamically through your code. So if you were to add the custom fields through your plugin or theme’s functions file, then you would add it like this:

add_post_meta($id, '_name', 'value');

Notice that underscore must be there in order for it to remain hidden from the user. Often when you are dealing with clients that are not very “tech-savvy”, it is very useful to utilize the technique above. You can also entirely remove the custom fields area and create a custom write panel (with a better user-interface) to help your client maximize the power WordPress without having them confused. This is extremely important when you have a lot of meta-data customization options available in your theme. An example of a write panel can be seen in the image below:

Custom Write Panel for WordPress Custom Fields

The image reflects the current version of our portfolio located at Uzzz Productions. Now you are probably wondering how did we create this write panel? Well, Spencer over at WeFunction has written an amazing tutorial that walks you step by step to creating a custom write panel for your themes. Mark at SitePoint also has an awesome tutorial that walks you through creating a custom write panel for a custom post type. These write panels essentially can replace the default custom fields layout, so once you are done creating the easy write panel for your client’s theme, then it is time to go ahead and disable the default custom field display for them.

How to Hide Custom Fields from Your Users

Open up your theme’s functions.php file and add the following:

function remove_custom_meta_boxes() {

Now we will go into sharing some of the cool tips, tricks, and hacks for custom fields. Custom fields are limited to your imagination only, so there are tons of cool tricks that we might miss.

Using Custom Fields with Conditional Statement

It is always best practice to display custom fields with a conditional statement, so if that field does not exist, then a default content would take it’s place. For example, if you are not listening to a song while writing the post, so you forgot about the field and left it empty. Well, then the default content can take it’s place. Look in the example below:

<?php $songs = get_post_meta($post->ID, 'songs', true);
//Checking if anything exists for the key Songs
if ($songs) { ?>
Listening to: <?php echo $songs; ?>
<?php } //if there is nothing for songs then display
else { ?>
Listening to: Nothing (Grooveshark is under maintenance)
<?php } ?>

By displaying the conditional elements and default content, you keep the styling of your theme intact, and it looks professional.

Using Custom Fields as a Conditional Statement

Using custom fields as conditional statements can be a very handy technique. We will show few examples of how you can utilize custom fields as a conditional statement for your WordPress theme design.

Only Display Posts with a Specific Custom Field

The best part about query_posts function in WordPress is that it has a parameter for custom fields. So we can use it to create a loop that only displays posts with a specific custom field key and/or value. All you would have to do is enter the query_posts tag above your post’s loop statement. Let’s say you want to display posts that you wrote while listening to a music as opposed to posts that you wrote in reflection of the book you read.

You will paste the following query before you start the loop:


This code will list posts with the meta key music present.

Let’s say you want to customize it a bit more by saying you want to display posts that you wrote while listening to Eminem’s Songs. Well then, you will customize the codes like this:


Display the Digg Button only when the custom field is present

Not every post is meant to be submitted to Digg. For example your blog’s anniversary post will most likely not make it to the front page. By having it submitted, you can actually hurt the chances of your site ever hitting the front page. Well to solve this issue, you can display the digg button only when a specific custom field is present.

Paste the following code in your single.php file inside the loop:

// check for digg button for single page
$digg = get_post_meta($post->ID, 'Digg', $single = true);
// if there's a single page digg button
if($digg !== '') { ?>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
<?php } // end if statement
// if there's not a digg button
else { echo ''; } ?>

Now all you have to do when writing your posts is enter the custom field with the key “Digg” and the value “true”.

Source: How to Add a Digg Button Using Custom Fields

You can use this similar technique to display the Facebook Like button in selective WordPress posts.

Rewrite Guest Author’s name with Custom Fields

Have you ever had a guest post on your blog? How do you go about giving the author full credit? Some bloggers create entire new author profiles for their guest authors in order to display the right name. We think that it is pointless to create extra user profiles if you know that this guest author will only post once. This trick will let you replace the author name with a custom field.

Paste the following code in your theme’s functions.php file:

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );

function guest_author_name( $name ) {
global $post;

$author = get_post_meta( $post->ID, 'guest-author', true );

if ( $author )
$name = $author;

return $name;

Now every time that you are posting a guest post, just make sure that you add a custom field called guest-author and it will replace the author’s name with the text that you put in that custom field.


Add guest author name with Custom Fields

Source: How to rewrite Guest Author Name with Custom Fields in WordPress

Display Custom Fields Outside the Loop in WordPress

Until now in this article, all we have shown you is adding custom fields inside the post loop. Well, there will be times that you need to display post-specific content outside the post loop. All you have to do is display the custom fields like this:

global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'Your-Custom-Field', true);

You will need to make sure that you change the part where it says “Your-Custom-Field”.

Source: How to Display Custom Fields outside the loop in WordPress

Display Custom Header, Footer, Sidebar using Custom Fields

Header, Footer, and Sidebar stays the same for all posts and pages in WordPress. Well, if you are creating a custom design and want to have different sidebar, header, or footer for each post, then it is possible to do so with custom fields. In this example, we will just replace sidebar as an example. You will need to open your single.php or page.php file and find the following code:

<?php get_sidebar(); ?>

Replace it with the following:

global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);

Now when you are writing a post or a page, and you want to display a custom sidebar all you need to do is add the custom field “sidebar” and include the name of the sidebar file. For example if you insert “wpbpage”, it will display sidebar-wpbpage.php as your sidebar.

Custom Sidebar in WordPress using Custom Fields

You must have the file already in place to call it from a specific post. This trick is mostly used in larger magazine style sites, but it is commonly used for custom pages also. One of the easiest way to start out creating a new sidebar file is copying your sidebar.php codes into this new file and edit/add the codes that you want.

You can use the similar technique to replace header and footer.

Source: Display Different Sidebar for Each WordPress Post

Manipulating the RSS feed content with Custom Fields

Did you ever want to add a specific content just for your RSS readers in a specific post? Well this can also be done with custom fields. In this first example, we will show you how you can use custom field to display specific text/object in your WordPress RSS Feed. This trick will allow you to show different text, advertisement, image, or anything else for each post. First open your functions.php and paste the following codes in the php tags:

function wpbeginner_postrss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) {
if($coolcustom !== '') {
$content = $content."<br /><br /><div>".$coolcustom."</div>\n";
else {
$content = $content;
return $content;
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

Now just create a custom field called “coolcustom” and add any value you like. You can add google adsense in there, or any other ads/images/text that you like.

In the second technique, we will show you how to add additional text to post titles in RSS. This comes very handy when you are running a blog and have guest posts / sponsored posts. By utilizing this technique, you can tell your RSS readers in the title whether a specific post is a sponsored post or a guest post.

For example if your title was “Start Microblogging in WordPress with Wumblr” and it was a sponsored post, then you can change it to “Sponsored Post: Start Microblogging in WordPress with Wumblr“. Same if someone wrote a guest post etc.

To accomplish this, open your theme’s functions.php file and add the following code in there:

function wpbeginner_titlerss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$gpost = get_post_meta($postid, 'guest_post', true);
$spost = get_post_meta($postid, 'sponsored_post', true);

if($gpost !== '') {
$content = 'Guest Post: '.$content;
elseif ($spost !== ''){
$content = 'Sponsored Post: '.$content;
else {
$content = $content;
return $content;
add_filter('the_title_rss', 'wpbeginner_titlerss');

The code above search for two custom fields name “guest_post” or “sponsored_post”. If any of these two custom fields are found with a value “true”, then it will add the appropriate text before the title. This technique can be utilized in various ways to fit whatever you like.

Source: Completely Manipulate Your WordPress RSS Feeds

Set an Expiration Date for Your WordPress Posts

This hack comes becomes very useful when you are running a contest because you might be posting information such as clues or hints that you don’t want to stay up for ever. Instead of manually removing the article, you can just make it expire automatically. It also works if you have a product that you are offering a discount on. You posted it on your blog, but you don’t want that discount to stay on your blog after its over. So you can remove it automatically with this code.

Your loop would need to look like this:

if (have_posts()) :
while (have_posts()) : the_post(); ?>
$expirationtime = get_post_custom_values('expiration');
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);

$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween > 0 ) {
// For example…

Note: You may have to customize the codes to fit the look of your theme.

Once you pasted this code, you can use custom fields when writing a post to set an expiration date. Make sure you select the key “expiration” and use the the following date format: mm/dd/yyyy 00:00:00

Alternatively, you can the Post Expiration Plugin.

How to Style Individual Posts with Custom Fields

Want an entirely different look for your WordPress single posts? Well you can do this by adding custom post classes via custom field. We have written an entire article on how to style each WordPress post differently, so this code is based on that tutorial.

First thing you need to do is create a custom field with the name “post-class” and then add the value which will be your class. So in this example, we will use “anniversary”. Once you have done that, then add the following code inside your loop:

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Now if you look in your loop, there is a post_class function inside a div class. Just replace that with something like this:

<?php post_class('class-1 class-2 ' . $custom_values); ?>

Alternatively, you can also add inline css to the header of your single pages. If that is something that you are looking to do, then open your header.php file, and insert the following code somewhere between the head tags.

<?php if (is_single()) {
$customstyle = get_post_meta($post->ID, 'customstyle', true);
if (!empty($customstyle)) { ?>
<style type="text/css">
<?php echo $customstyle; ?>
<?php }
} ?>

Once this code is added, now you can simply add the custom field with the name “customstyle” and add any css text in the value. An example text would be this:

#coolimageclass{border: 5px solid #ccc;}

We hope that this article broadens your horizon about the WordPress custom fields. If you know of other cool tricks that can be done with WordPress custom fields, then feel free to post in the comments.

There are some other neat plugins that expands the functionalities of WordPress Custom Fields that you should check out:

Custom Fields Template
More Fields

Additional Resources:

Digging into WordPress
Using Custom Fields Basics Part I // Part II
Extend WordPress with Custom Fields

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>