You are here: Home » WordPress Tutorial » WordPress Custom Fields : How To, Tips & Resources

WordPress Custom Fields : How To, Tips & Resources

If you are a core WordPress user, you might already know about WordPress Custom Fields but if you are new to WordPress, it’s the right time to look at this extended capability of WordPress.

Do you know that WordPress gives you an ability to add some extra data with each single post that can be saved as meta-data that are stored as custom fields which can then be called upon anywhere to show to your visitors or users.

These custom fields in WordPress are really easy to use and allows theme developers or theme editors to extend the design or function capabilities of your WordPress theme.

WordPress Custom Field Example


If you are feeling confused, let’s look at this example of my subdomain where I have created and used the custom fields in the sidebar to show theme details ( Available at, Price, Buttons) along with other data on the sidebar.

How To Use WordPress Custom Field


Display Custom Fields In WordPress Panel

By default, the custom fields option is unchecked in the WordPress dashboard. To get this done;

From your Post, Go to Screen Options and check Custom Fields. Here is the screenshot for your reference.

Display Custom Fields In WordPress Panel

Usage

After you have successfully written your post, scroll down to the bottom of the page and look for the block titled – Custom Fields.

1. To create a new custom field;  Click Enter New as shown below:

Using wordpress Custom Fields

2. After you have created your custom fields, enter the Name and Value. As I have used Music Band and Linkin Park; you can use your own name and value.

How to use WordPress Custom Fields

3. You can create as many custom fields as you want just by clicking Add Custom Field again.

Getting The Content – Display To The World

Now, you have successfully created and added custom fields with your post; it’s time to display your custom field values to show to your readers.

Suppose you want to display this value at the bottom your page after the user has finished reading. For this open your single.php and use this code:

 <?php the_meta(); ?> 

It will display something like this:

Music Band: Linkin Park

Similarly you can use this code on your sidebar to display its value on your WordPress sidebar. For that you have to open your sidebar.php and paste the code at the location you want.

By default, <?php the_meta(); ?> gives us this:

<ul>
<li><span class="post-meta-key">Key 1:</span> Value for Key 1</li>
<li><span class="post-meta-key">Key 2:</span> Value for Key 2</li>
<li><span class="post-meta-key">Key 3:</span> Value for Key 3</li>
</ul>

You can easily customize the style of your fields using CSS.

.post-meta{}
.post-meta-key{}

Display Value of Specific Key

The above method is useful for any general purpose custom fields in WordPress. But what if you have 4 custom fields and you want to display each custom field’s (meta key and value) at different locations on your page. Fortunately we have:

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

where $key is the name of the custom field. In our case it will be “Music Band”  and used as

<?php echo get_post_meta($post->ID, ‘Music Band’, true); ?>

Simply copy and paste the above code line replaced with ‘$key’ value of yours at any location where you want custom field to display.

Display Content Only When Custom Fields Exist

There may be some post or pages like Home Page where you do not want to display your custom fields. This can achieved by putting the above code with a loop.


<?php if ( get_post_meta($post->ID, $key, true) ) { ?>
global $wp_query;
$postid = $wp_query->post->ID; ?>
<ul>
	<li><?php echo (get_post_meta($postid, $key, true)); ?></li>
</ul>
<?php  wp_reset_query();?>

This is the most basic loop and of course you can customize it according to your own needs and the way you want to display the fields.

WordPress Custom Field Plugins


In case you don’t want to try your hands on code and want to achieve the results with the help of some plugins, I am listing here some of the most common WordPress Custom Field plugins. Some of the plugins can even increase the power of Custom fields and provide you with more and better results.

Additional Learning Resources


I hope the article had helped you understanding Custom Fields in WordPress. Incase you feel that something is missing and needs a worthy mention, please post it via comments below.

Editorial Staff at Web Loggerz is a team of Web Technology lovers led by Ansh Gupta.

Leave a Reply

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