Elegant Themes Blog

Stay up to date with our most recent news and updates

How To Create WordPress Custom Fields

Posted on July 10 by in Tips & Tricks | 38 comments

How To Create WordPress Custom Fields

WordPress has the ability to allow authors to assign custom fields to a post. This extra information is known as meta-data. Meta data for custom posts can be information like a mood status or what you are currently listening to as the WordPress Codex points out. In more recent times, custom fields have allowed users to make their blog more personable as well as completely custom by extending their posts even more than before. These fields can be extended to include more than just meta data as many users have figured out.

This post will share the different methods in implementing custom fields as well as a tutorial on how to create WordPress custom fields from scratch.

Examples

To start off, you’ll need to gather what a custom field truly is. What better way than seeing some examples?
Custom fields can include almost any value you can think of if implemented correctly. Some examples include but are not limited to:

  • Custom Thumbnails
  • Status Updates
  • Advanced Links
  • Titles and Subtitles
  • Author Information
  • Weather Statuses
  • Custom Times and Dates
  • many more!

If you take a look at the WordPress admin area you’ll notice that when you click Add New under the Posts menu a field below the post content text area is titled Custom Fields. There’s a chance you won’t see this feature. If not, look to the top right of your window and click Screen Options. From there make sure the Custom Fields option is selected. Once selected you should see it at the bottom of your screen like I have below.

admin-custom-post

Custom Fields are below your editor inside your admin area when making a new post.

The custom fields section contains two input fields labeled Name and Value. The name input is usually the identifier that which once used, triggers WordPress to display the content within the value field.

An example could be Name: contact-link and Value: Contact Us.

Once the custom field is added it should display in an area pre-defined within your WordPress theme. Just remember custom fields don’t display by default unless your theme has been customized to do so. I will show you how to do this in a bit.

Plugins

There are some great plugins that can handle all of the functionality of Custom Fields for you. I put together a few of my favorites that I use myself.

Advanced Custom Fields

Advanced Custom Fields is a plugin built for WordPress developers in mind. Even though the plugin does a lot of heavy lifting you will still need to edit some of your template files to include the Custom Fields it helps you create. Rather than writing code from scratch the Advanced Custom Fields plugin allows you to use a wizard to create what, how or where your custom fields will be displayed. For an example, say you want a specific post type to only display certain meta information when posting to a specific category. With the ACF plugin, you can set it that when you select a category in your admin area a whole new interface appears to allow for the custom meta data to be included by you such as photos, thumbnails, titles, links and more. I’m only scratching the surface at what this plugin is capable of. Check it out and see for yourself. Their website also does a great job explaining what the plugin is and what it can achieve.

acf-homepage

Advanced Custom Fields Home Page – Custom Fields Plugin for WordPress

Pods

Pods is a plugins that makes it easy to create custom content types and fields. It features a wizard that helps you build your custom fields and post types without ever touching a line of code. Pods also extends upon already built post types, taxonomies, custom fields, and more. This plugin allows you to customize nearly every aspect of your theme. Areas within your user account, short codes, widgets, and more can be targeted in order to produce a unique experience for your users.

Types

Types is a plugin that offers custom post types, taxonomies, and fields out of the box. The plugin is part of a family of plugins that offer the ability to develop and customize any WordPress theme without needing to touch a single line of PHP code. Setting things up is a breeze and with this plugin you can undo your work easily. Types also offers repeatable post types offering virtually endless customizations to your theme.

Extending Your Theme With Custom Fields

To get things started it is best to have some custom fields published on one or more of your blog posts. Below you’ll see a sample post I created using our Divi 2.0 theme.

Here’s the post from the admin view:

added-custom-field

I’ve included a some content, a title, and you’ll notice I have added a custom field. I used author-link for the Name input and Andy Leverenz for the Key input. My plan is to add a small blurb to remind users who wrote the blog post after each post I make within this theme.

Here’s how the post looks after being published:

added-custom-field-post-before

Our custom field being output.

At this point you’ll notice the output of our content and title but not our custom field values. In order to get these values to display we need to add a small amount of PHP to our WordPress loop function inside our theme’s code.
Let’s do that now.

If you are comfortable editing some of your theme’s code the opportunity exists to define your own custom fields within your WordPress theme. To start you’ll need a code editor and access to your theme directory which is located at wp-content/themes/yourthemename.

Open your entire theme folder inside a code editor. You’ll need to find where your main WordPress Loop originates. In my case I am using the Divi 2.0 theme from our Elegant Themes library.

If you need a refresher on what the WordPress loop looks like you can read more about it on the WordPress Codex or look over the code I provided below:

# The WordPress Loop
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//  Your Code/Content Here
<?php endwhile; else: ?>
<?php endif; ?>

The above code is a barebones example of the famous WordPress loop. If you’re following along and have the Divi theme installed you’ll notice some code within the loop. This content and code is what generates your blog posts to appear dynamically on your website.

Since I want to insert a blurb about the author of each post after each post I’ll need to find the end of the loop and just before it add the code below:

<div class="author-blurb">
	<p>This post was written by : <?php echo get_post_meta($post->ID, 'author-link', true); ?> </p>
</div>

The loop can be found in different files. The index.php file in particular displays our posts as excerpts and when clicked will take you to our single.php file’s loop. The single.php file will usually display a post in it’s entirety. Since we don’t want our custom field visible on our homepage I’ll only include the code above within our single.php file. I placed it at the end of the loop before the .

My post now looks like this:

custom-field-added

If you look really hard you will notice our custom field just after our post’s content ends. Look for the lines that say “This post was written by: Andy Leverenz”.

We have successfully added a custom field. Let’s make sure it works again by creating a new post. For the sake of brevity I will use an alternate name for the author name.

Here’s our new post from the admin area:

custom-post-2

Our Name input is again author-link and our Key is now a link to John Doe

When we hit published the content was sent to our database and output onto our web page. If you click into our newly published post you should see the content, title, and our custom field displaying properly.

custom-post-2-published

Styling

To make our custom field stand out a bit more I’ll include some simple CSS to space things out as well as offer a more attractive look.

Add the CSS below to your stylesheet if you’re following along.

.author-blurb {
    border-top: 1px solid #e2e2e2;
    font-size: 16px;
    margin-top: 2em;
    padding-top: 1em;
}

With the styles applied, our author blurb block now looks like it belongs on each post.

styles-updated

Our custom field with some CSS styles.

Extend even further

The need may come for you to need to provide custom fields of multiple values. Say a group of unique images or songs for example. Inside your custom field panel you can add as many as you like. As long as the custom field name is the same you can even display the group of custom fields in one simple line code.

Let try it:

song-titles

Our custom fields of song titles.

I’ve created a new post called “Songs Named After Girls”. I have also added a small amount of content and six new custom field entries.

The name of our custom field is song-title and our key is a song title with the artist who produced it.

Now we need to include the code to display the song-title custom field into our posts. If you foresee having a lot of posts like this one it might be a good opportunity to create a custom post type so you can build a custom template just for this type of post but for the sake of this tutorial we will just be modifying our single.php file again. If you would like to learn how to add a custom post type into your theme then check out my other post about this very thing.

Open your single.php file and add the code below. Make sure it’s added within the area of your main content and before our author blurb custom post type we created earlier.

<?php $songs = get_post_meta($post->ID, 'song-title', false); ?>
    <ul>
        <?php foreach($songs as $song) {
            echo '<li>'.$song.'</li>';
            } ?>
    </ul>

The code above successfully traverses through all of our custom field inputs and displays each that we have added. Rather than adding multiple lines of PHP we have coded it so that PHP loops through each custom field and displays them as an un ordered list.

Our post now looks like the image below after being published:

SongsNamedAfterGirls

Our custom fields displaying in an unordered list.

This type of code can be combined into a function and later used as a short code to include inside our main editor rather than adding specific code to your single.php file. That type of concept is better saved for another blog post.

Finish

By now, hopefully you understand a little more of what custom fields are and how you can use them to really utilize your WordPress posting abilities. Many custom fields can be included on posts, pages, custom templates, and more. It’s all really a matter of your understanding of how to integrate them or find the best solution to your problem. The plugins above are capable of doing exactly what I’ve shown you in this tutorial and then some. I suggest trying your hand at adding your own so when you do go to use a plugin, you really understand what is happen when you add custom fields support to your WordPress Theme

Useful Links

Custom Fields Documentation
The WordPress Loop
Blog Post Creating Custom Post Types – by Yours Truly
Advanced Custom Fields : Plugin
Types: Plugin
Pods: Plugin

38 Comments

  1. Brilliant again thank you !! The themes you produce and the in depth blog tutorials just like this will keep me coming back everytime

  2. Thanks for this! I’ve always just glanced past this portion of the post page.

    I’ll start using this asap!

  3. Fantastic guide, Andy. Awesome work :)!

  4. Thanks for the tutorial! I’ve never used custom fields before, but i’m definitely going to start playing around with it more.

  5. Your byline link works as an example of how to use custom fields, but it’s a bad example of how to add an extra byline. You’d have to add that custom field on every post, and it’s not a friendly interface option for the average user. They’re going to look at the author selector and sensibly assume that determines what’s in the byline. And since you’ve already got an author name attached to the user who is the post author, you should just re-use that. If you need to create co-authors or arbitrary author names that are different from the user who is considered the post author by WP, then you should use a plugin like Co-Authors Plus or Bylines.

    • Thanks for mentioning those two co-author plugins, Dan.

    • Agree it’s not the most user friendly approach but that’s not the purpose of the tutorial. It’s more or less how to use a custom field and show you what it is at the same time. Thanks for sharing!

  6. Hi Andy,

    Thanks for the detailed blog.

    Looking at DIVI, are things like ‘Projects’, ‘Comments’ and ‘Feedback’ examples of Post Taxonomies?

    Cheers,

    John.

    • John,

      The Projects settings area is a custom post type. Comments and Feedback are that as well but these are actually built into WordPress so some of the inner-workings are different.

      Taxonomies are actually the Categories and Tags when you make a new post. These two ship with WordPress but you can also create your own with a few lines of code. They offer a way to group your content within their own specific groups or archives.

      Hope this helps explain things a bit. Thanks!

  7. Very good post about custom fields! It’s a great feature, I hope future versions of WP will make it ease to create, use and display them, as menus and widgets.

    • I’m sure the team behind WordPress are already brainstorming this feature Cesar. Thanks for the comment!

  8. Thanks! Very helpful. I look forward to reading more of your posts!

  9. Thank you for sharing valuable information. Nice collection of plugins and every point clear all it’s stories with great tutorials. Thanks for share.

  10. Good tutorial but in your presentation you forgot to mention CWK http://wordpress.org/plugins/wck-custom-fields-and-custom-post-types-creator/ , the most complete and easy solution that manages Custom Posts, Taxonomies, Fields and Groups of Fields (this is an important feature that no one of your mentioned plugins manages correctly, or freely). Believe me, this plugin deserve a try and works perfectly with ET themes.
    My 2 eurocents

  11. Great tutorial. I heard first time about ACF plugin. Learn many things about custom fields. Thanks for the share.

  12. Hello Andy,
    Can you explain in detail how I can use a custom field for inserting an image in the excerpt. the front page of my site has some excerpts to my posts and i need to add an image from the post to the excerpt, preferably without a plugin.

    • If you use the excerpt text area when filling a new post you can include the source to an image. You will need some basic html to make this happen . This would be a quick way to make it work. Or you can use a custom field like I’ve explained to use above and include it within your post loop inside your theme. This takes more work and is a little more advanced but think of each new post your create and how much easier it would be to add that image you speak of. I hope this helps a little. Thanks Fredy

  13. Is it easy enough to filter posts through custom field data. So filter by a number or price.

  14. Thanks for an extremely useful post by the way. Something I was looking for

  15. Hi Andy,

    Thanks for another great post. One thing I was wondering; how would it be possible to add the post author box similar to what I see on Elegant Themes. These always look great with a thumbnail of the author and a little personal bio.

    Mark

  16. Finally I know what this custom-field is all about :)

    Thanks

  17. One month back, I struggled for one full night struggling to implement this on my Divi blog. Wish this tutorial was available then. Thank You :)

  18. If the php code is modified as you recommend, what happens when WP or the theme (Divi in this particular case) is updated? Should a child theme be used by say, putting single.php in the child theme before modifying?

  19. Great blog Andy i just discover pods.
    I installed it and i create new custom post type and categories.
    Can i make my new custom post type works with pagebuilder?
    Can i use it with the portfolio ?

    thank you for your help

  20. Andy,

    My blog is a multi-author blog with an affiliate program plugin. I’d like the blog posters to have their personal unique aff id attached to each blog post title automatically when they make a blog post.

    Where can I add the affiliate plugin shortcode within wordpress so the /?ap_id=username appends to the blogpost title when an author writes a blog post.

  21. I was making this process much more difficult than it had to be. Your article made everything easy to understand. I would give you some ice cream if I could!

  22. Thanks man, worked perfect for my site, what would u say the best way to custom coupons etc? Cheers :)

  23. Does this work when you are using Divi’s Page Builder?

Leave a Reply

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

Join 261,586 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This