Free Tutorials Genesis Tutorials

Beginners Guide To Adding Custom Fields In WordPress

Need to quickly add content to a specific area of your post or page? You could add your content using the WordPress editor but what if you want to display the content outside the content area of a post or page? What if you want to add different content in the same position but on a specific page only?

You could create a widget but the content you add to it will, by default, display site wide. Not only that, the content will be the same when what you want is to display different content in the same location when you need to.

A more flexible and powerful solution is to create a custom field which you can use selectively on any post or page. You can also change the content that displays in the same area of your theme.

The advantage of using custom fields is that once you create the function, you can use the same custom field on any page or post. You can take this even further and use it to display your content in any hook position your theme offers or using any WordPress hook. On top of this, you can also add a conditional tag so your content only displays when and where you want it.

Custom Field Code Example #

Simply add a custom function to your child themes functions.php file and you’re set.

add_action( 'loop_start', 'before_single_post_content' );
function before_single_post_content() {
if ( is_singular( 'post') ) {
$cf = get_post_meta( get_the_ID(), 'custom_field_name', true );
if( ! empty( $cf ) ) {
echo '<div class="before-content">'. $cf .'</div>';

Swap out loop_start with any genesis hook.

The above code enables you to display text or HTML after your entry title on any page or post and before the content area. All you need to do then is:

  1. Select the name of your custom field from the drop down menu in the Custom Fields module below your editor.
  2. Type in your text or HTML content into the native custom fields Value box to the right of the custom field name
  3. Click Update in your Publish box and view your posts or page on the front end.

screen options

Enter New Custom Field

Scroll down to the Custom Fields module below your editor and click create new.

Enter in the name of your custom field which you included in the function above. In this example its wpsitesdotnet

Then enter in the content you want to display on the page or post you are using the custom field, in the value field.

custom fields

The name you enter must match the name in the function you added to your child themes functions.php file.

The value can be anything you like and generally is a text or HTML message that can be different or the same on any page/post you add the custom field.

Sample Custom Field Content Displaying On A Single Post

Here’s what the custom field message looks like once you add it to a post.

example custom fields

Now you can use the same function and custom field name to display custom content on any page or post based on the location the hook you added to the function outputs your content.

Simply select the name of your custom field from the drop down menu in the Custom Fields module and add content to that specific page or post.

select custom field from drop down menu

The name for your custom field will always stay the same however the value you add in the form of text content, can vary on different posts.

add new custom field text content

Why Use Custom Fields

Clearly custom fields offer more flexibility than creating custom widgets which output the same content in all locations you use them in like after post or header right widget. Custom fields enable you to use exactly the same or different hooks in your theme to position the output location of your content. They also give you the added flexibility of displaying different content in that hook position on any specific page or post you use custom fields.

Using custom fields with custom functions enables you to use both your themes hooks and conditional tags to control the position and the conditions your content is displayed. It doesn’t get much more powerful and flexible as this.

You can also style the output of your custom fields content adding a div class which will be generated by your custom function.

An example of a very popular custom field plugin is the Next Gen Gallery custom fields plugin. This plugin enables you to add a custom field which you can use for different purposes like add custom links to gallery image thumbnails.

Custom Meta Boxes

By default, WordPress include a list of custom fields which they have already added to the core. This may cause some confusion if you’re a beginner, therefore you might want to remove them or simple create your own meta box for one or more custom fields you have created.

Next time, we’ll take a look at how to add a custom meta box to all edit post screens which you can use with your custom fields.

Here’s the code for a custom meta box and we’ll also take a look at some plugins that do the same job for non coders.

Learn more about using custom fields in WordPress (Includes video)

Related Posts

34 replies on “Beginners Guide To Adding Custom Fields In WordPress”

Hello Brad,

Thank you for the great tips. You have saved me a lot of time trying to figure out how to incorporate ACF with the genesis hooks.

A quick question though with regards to a problem. I’m unable to parse the data from a custom field that will include a short code, so the short code only shows up as plain text.

Using your genesis hook method with Advanced Custom Fields, how do you filter the content to enable short codes to work?

Here is the slightly modified example code which includes the custom post type “gallery” and the ACF “intslider”:

add_action( 'genesis_after_header', 'custom_field_before_content', 15 );
function custom_field_before_content() {
if ( is_singular(array( 'gallery' )) &amp;&amp; genesis_get_custom_field('intslider') ) :
echo ''. genesis_get_custom_field('intslider') .'';

Thank you.

I’m getting:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘custom_field_before_content’ not found or invalid function name in /home/rmswe0/public_html/rain/wp-includes/plugin.php on line 470

Hello Renee

Because you didn’t copy all the code.

I test all code posted on this site and have tested it again and it works perfectly.

Please copy ALL the code from the view raw link in the Gist and paste it at the end of your child themes functions.php file using a text editor like Notepad++.

Don’t forget to remove the code you pasted incorrectly.

I am using your code and it worked great, what if I want to add multiple custom fields in a
How would the code look?

Ok so I making custom fields for a custom post type portfolio

I want to display the custom fields on the singular portfolio items, that part is working but I want to display them in a list and have different fields

For example:
Job Date: Custom Field Data
Price: Custom Field Data
Plan Used: Custom Field Data

Heres what I have:

Can’t see your code. Please paste it into a Github Gist and link to or embed it in your comment.

Hi Brad,
I’ve been looking for a way to display a unique image and text on every page, above the entry content. This tutorial seems to be a good solution. I’m using the Genesis Sample Child Theme. I’ve followed your steps, but I can’t seem to get the custom field value to display on my site. Is this related to my theme? My site is here:
Thanks for any tips.

I can’t inspect PHP from the front end only the output in the source code.

Use any of these hooks in the code, add new custom field named after-title and select the custom field name from the drop down menu (after-title) and add the content to the value field.




Here’s my functions.php:

I’m a novice with php, so I wasn’t sure you were suggesting to replace ‘genesis_entry_header’ with the three hooks you listed. (It didn’t work so I’m likely doing this wrong.)

I am using “after-title” as the custom field name, and have some text in the value field.

Thanks again.

I tested the code in your Gist and it works perfectly for me.

You may not see the text you add in the custom fields value because it prints at the very start of your content along with your existing content.

I will change the hook position in the code so its easier to find however all you need to do is this:

  1. Select the custom field from the drop down menu in the Custom Fields meta box below your editor.
  2. Add your text or HTML to the value field
  3. Click Update in the Publish box next to your editor.

Yes, you’re right, for some reason it’s not showing on my pages…shows fine on posts though.

Thank you for all your help.

It will be your conditional tags.

You can use either:

if ( is_singular( 'post', 'page' ) )


if ( is_page() || is_single() )

Thanks for this tutorial and all the others you have made. I have read the ones you have done on Advanced Custom Fields and now wondering why you would use this over ACF?

My guess is the ACF allows for more type of fields like file upload.

Because its already built into WordPress and doesn’t require installation of a plugin.

Or you could hand code a custom editor rather than install ACF.

You can’t include plugins in theme development.

Hi Gina

The genesis_after_post_title hook works on themes running XHTML markup which is now named the genesis_entry_header hook for themes running HTML 5.

The hooks have changed for themes running HTML 5 and the code has been updated and tested.

The old hooks will NOT work on new HTML 5 themes and vice versa.

Thanks for your feedback which is always welcome.

Your tutorials are very helpful. I’m thinking everyone that uses this site are graphic designers b/c I don’t know what I’m doing. I didn’t get this to work at all.

Sorry to here that.

The screenshots prove the code works.

All you need to do is paste it into your functions file and then use the native custom fields under every Edit screen.

Hi Brad,

Thanks so much for this I’ve got the Custom Fields working great on my site. I’m using Advance Custom Fields to create my fields and then outputting them with:

function custom_field_before_content() {
    if(is_page() || is_single() || is_archive() ) {
        echo genesis_get_custom_field('instrument');
add_action( 'genesis_entry_header', 'custom_field_before_content' );

And there showing up on my site perfect. The only problem I have is I’m not sure how to style them then? Do you know how or where I can put a div around the custom field?

Brad/Ciarán: Great info! Just a couple quick questions: how should I add to or change this to:
-Display the custom field’s name or label in addition to its data?
-Make it display below the content instead of above?

Thanks in advance!

Add the text before the custom field in the value field or code and use the genesis_entry_footer hook assuming you’re on Genesis.

Thanks, Brad! It’s working great!!!

Do I make these changes/additions directly in my theme (Metro Pro)? If so, how do I protect my customizations when StudioPress comes out with an update to Metro Pro?

Hi Brad:

What a fountain of information on this site. Thanks ever so much. I’m going through all of your posts and saving them to Pocket to knock this site out.

Thanks Brad, this worked like a charm.

Once I found it, I was able to implement with 2-3 minutes.

Now if only I hadn’t spent 2-3 hours surfing the web trying to figure out how to achieve the result I wanted!!

Leave a Reply

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