WordPress Custom Fields 101: Tips, Tricks, and Hacks

Are you trying to benefit from customized fields in your WordPress web site?

Custom fields are a useful WordPress characteristic that permits you to add additional information and data to your WordPress posts and pages. A whole lot of well-liked WordPress plugins and themes use customized fields to retailer essential information.

In this text, we’ll present you the best way to use WordPress customized fields with some suggestions, tips, and hacks.

Since it is a lengthy article, we’ve added a desk of contents for simpler navigation. Just use the short hyperlinks beneath to leap to the part you need to learn:

What Are WordPress Custom Fields?

WordPress customized fields are metadata used so as to add additional data to the publish or web page you’re modifying.

By default, once you write a brand new publish, web page, or some other content material sort, WordPress saves that content material in two completely different elements.

The first half is the physique of your content material that you just add utilizing the WordPress content editor.

The second half is the details about that content material. For instance, the title, creator, date, time, and extra. This data is named metadata.

A WordPress website routinely provides all of the required metadata to every publish or web page you create. You may also create and retailer your individual metadata by utilizing customized fields.

By default, the customized fields choice is hidden on the publish edit display. To view it, you have to click on on the three-dot menu within the top-right nook of the display and choose ‘Preferences’ from the menu.

This will open a popup the place you have to change to the ‘Panels’ tab and then allow the ‘Custom fields’ choice.

After that, merely click on on the ‘Enable & Reload’ button to reload the publish editor.

The publish editor will reload, and it is possible for you to to see the Custom Fields panel beneath the content material editor.

Custom fields can be utilized so as to add any data associated to the publish, web page, or different content material sort. This meta data can then be displayed in your theme.

However, to try this, you will have to edit your WordPress theme recordsdata.

Having mentioned that, let’s check out the best way to add and use customized fields in WordPress.

Adding Custom Fields in WordPress

First, you have to open a publish or web page within the block editor so to add customized fields. Then, you have to go to the Custom Fields meta field.

Next, you have to present a Name in your customized area and then enter its Value. Click on the ‘Add Custom Field’ button to put it aside.

The area might be saved and displayed within the Custom Fields meta field like this:

You can edit this tradition area any time you need and then simply click on on the ‘Update’ button to save lots of your adjustments. You may also delete it in case you don’t need to use it anymore.

Now, you have to save your publish to retailer your customized area settings.

Displaying Custom Fields in WordPress Themes

To show your customized area in your web site, you will have to edit your WordPress theme recordsdata and code snippets.

We don’t suggest straight modifying the theme recordsdata as a result of the slightest mistake can break your web site. An simpler means to do that is by utilizing WPCode.

It is the most effective code snippet plugin for WordPress that permits you to add customized code and handle snippets out of your WordPress dashboard.

If you haven’t executed this earlier than, then we additionally suggest studying our information on how to copy and paste code in WordPress.

First, you will have to put in and activate the free WPCode plugin. For extra particulars, please see our newbie’s information on how to install a WordPress plugin.

Upon activation, you will have to go to Code Snippets » + Add Snippet from the WordPress dashboard and choose the ‘Add Your Custom Code (New Snippet)’ choice.

Now you have to copy this code so as to add to your theme recordsdata:

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

Don’t overlook to interchange key with the identify of your customized area.

Next, you have to enter the code into the ‘Code Preview’ space and change the Code Type to ‘PHP Snippet’.

For instance, we used this code in our demo theme:

<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

From right here, you possibly can scroll right down to the Insertion part.

Here, you possibly can choose the place the code will run. By default, WPCode will Auto Insert the code and run it in all places in your web site.

However, you possibly can change this and choose the place you want to the customized area to look.

For instance, we’ll select the ‘Page Specific’ tab and choose the ‘Insert Before Post’ choice. This means, the customized area will seem initially of the weblog publish.

You can now save your adjustments and go to the publish the place you added the customized area to see it in motion.

You can use this tradition area in all of your different WordPress blog posts as effectively.

You may also simply modify the customized area for various weblog posts. Simply create a brand new publish or edit an current one.

Then, go to the Custom Fields meta field and choose your customized area from the dropdown menu and enter its Value.

Once you’re executed, merely click on the ‘Add Custom Field’ button to save lots of your adjustments and then publish or replace your publish.

Troubleshooting: Can’t Find Custom Field in Dropdown on Post Edit Screen

By default, WordPress solely masses 30 customized fields within the dropdown menu on the publish edit display.

If you’re utilizing WordPress themes and plugins that already use customized fields, then these may seem first within the dropdown menu, and you received’t be capable of see your newly-created customized area.

To repair this problem, you will have so as to add the next code to your theme’s functions.php file or by utilizing WPCode (advisable):

add_filter( 'postmeta_form_limit', 'meta_limit_increase' );
operate meta_limit_increase( $restrict ) {
    return 50;
}

The above code will change that restrict to 50. If you continue to can’t see your customized area, then you possibly can strive growing that restrict even additional.

Creating a User Interface for Custom Fields Using Advanced Custom Fields

As you possibly can see, when you add a customized area, you’ll have to choose the sphere and enter its worth every time you write a publish.

If you will have many WordPress customized fields or multiple authors writing on your website, then this isn’t a super resolution.

Wouldn’t or not it’s good in case you may create a person interface the place customers can fill in a kind so as to add values to your customized fields?

In reality, that is what so many popular WordPress plugins already do.

For instance, the search engine optimisation title and meta description field inside the favored All in One SEO plugin is a customized meta field:

The best method to create a person interface for including customized fields is by utilizing the Advanced Custom Fields plugin.

The very first thing you have to do is set up and activate the Advanced Custom Fields plugin. For extra particulars, see our step-by-step information on how to install a WordPress plugin.

Upon activation, you have to go to the ACF » Field Groups web page and click on on the ‘Add New’ button.

A area group is sort of a container with a set of customized fields. It permits you to add a number of panels of customized fields.

Now, you have to present a title in your area group and click on the ‘+ Add Field’ button within the top-right nook.

You can now choose a area sort.

Advanced Custom Fields permits you to create all kinds of fields, together with textual content, picture add, quantity, dropdown, checkboxes, and extra.

Next, you possibly can scroll right down to see different choices for that individual area, like area identify, area label, and default worth. You can change them to your individual necessities.

You may also add a number of fields to your area group if you need. Once you’re completed, simply click on on the ‘Save Changes’ button.

Next, edit a publish or create a brand new one, and you will note a brand new panel along with your WordPress customized fields beneath the content material editor.

For detailed step-by-step directions, you possibly can see our information on the best way to add custom meta boxes in WordPress posts and post types.

How to Hide Empty Custom Fields With Conditional Statements

So far, we’ve lined the best way to create a customized area and show it in your theme.

Now let’s see the best way to verify that the customized area just isn’t empty earlier than displaying it. To try this, we’ll modify our code to first verify if the sphere has information in it:

<?php 

$temper = get_post_meta($post->ID, 'Mood', true);

if ($temper) { ?>

<p>Today's Mood: <? echo $temper; ?></p>

<?php 

} else {
// do nothing;
}

?>

Don’t overlook to interchange Mood with your individual customized area identify.

Adding Multiple Values to a Custom Field

Custom fields might be reused in the identical publish so as to add a number of values. You simply want to pick out the sphere once more and add one other worth to the ‘Value’ field.

However, the code we’ve used within the above examples will solely be capable of present a single worth.

To show all values of a customized area, we have to modify the code and make it return the info in an array. You might want to add the next code to your theme file:

<?php 
$temper = get_post_meta($post->ID, 'Mood', false);
if( rely( $temper ) != 0 ) { ?>
<p>Today's Mood:</p>
<ul>
<?php foreach($temper as $temper) {
            echo '<li>'.$temper.'</li>';
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

Again, don’t overlook to interchange Mood with your individual customized area identify.

In this instance, you’ll discover that we’ve modified the final parameter of get_post_meta operate to false. This parameter defines whether or not the operate ought to return a single worth or not. Setting it to false permits it to return the info as an array, which we then displayed in a foreach loop.

How to Search Posts by Custom Field in WordPress

WordPress’s default search doesn’t work with any customized fields in your web site. It solely makes use of the content material to seek out the publish you or your guests are searching for in your website.

However, SearchWP adjustments that by bettering your WordPress search. It’s the best WordPress search plugin that goes past utilizing the publish content material and indexes every part, together with WordPress customized fields, PDF paperwork, customized tables, textual content, recordsdata, and extra.

You can modify the search algorithm with out modifying code utilizing SearchWP. Simply install the plugin and then head over to SearchWP » Algorithm out of your WordPress admin space.

After that, you have to go to the ‘Engines’ tab and then modify the Attribute Relevance slider. This will change the significance given to every attribute throughout a search.

For occasion, you possibly can set the Custom Fields slider to most and modify sliders for different attributes accordingly. This means, SearchWP will give desire to information in customized fields when trying to find content material in WordPress.

Another benefit of utilizing SearchWP is that works with a few of the hottest customized area plugins, together with Advanced Custom Fields (ACF), Meta Box, and Pods.

For extra particulars, you possibly can learn our beginner-friendly information on how to improve WordPress search with SearchWP.

Displaying Posts With a Specific Custom Key

WordPress permits you to show posts with customized keys and their values. For instance, in case you are making an attempt to create a customized archive web page to show all posts with particular customized keys, then you should utilize the WP_Query class to question posts matching these fields.

You can use the next code as a place to begin:

$args = array(
    'meta_key'   => 'Mood',
    'meta_value' => 'Happy'
);
$the_query = new WP_Query( $args );
 
<?php 
// the question
$the_query = new WP_Query( $args ); ?>
 
<?php if ( $the_query->have_posts() ) : ?>
 
    <!-- the loop -->
    <?php whereas ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
 
    <?php endwhile; ?>
    <!-- finish of the loop -->
 
    <!-- pagination right here -->
 
    <?php wp_reset_postdata(); ?>
 
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your standards.' ); ?></p>
<?php endif; ?>

Don’t overlook to interchange meta_key and meta_value parameters with your individual values.

How to Add Guest Author Name Using Custom Fields

Do you need to add a visitor publish however don’t need to add a new user profile only for that publish? An simpler technique is including a visitor creator identify as a customized area.

To do that, you will have so as to add the next code to your theme’s capabilities.php file or use WPCode (advisable):

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );
operate guest_author_name( $identify ) {
world $publish;
$creator = get_post_meta( $post->ID, 'guest-author', true );
if ( $creator )
$identify = $creator;
return $identify;
}

For extra particulars, please see our information on pasting snippets from the web into WordPress.

This code hooks a operate to the_author and get_the_author_display_name filters in WordPress.

The operate first checks for the visitor creator’s identify. If it exists, then it replaces the creator’s identify with the visitor creator’s identify.

Now you will have to edit the publish the place you need to show the visitor creator’s identify. Go to the Custom Fields meta field, add your visitor creator identify, and lastly click on on the ‘Add Custom Field’ button.

For extra particulars, see our article on how to rewrite guest author names with custom fields in WordPress.

How to Display Contributors to an Article Using Custom Fields

On many well-liked blogs and news sites, many authors contribute to writing a single article. However, WordPress solely permits a single creator to be related to a publish.

One method to clear up this downside is by utilizing the Co-Authors Plus plugin. To be taught extra, see our information on the best way to add multiple authors to a WordPress post.

Another technique is including contributors as a customized area.

First, you have to edit the publish the place you need to show co-authors or contributors. Then, scroll right down to the Custom Fields meta field and add creator names as co-author customized fields.

Now, you have to add this code to your theme recordsdata the place you need to present co-authors:

<?php 
 
$coauthors = get_post_meta($post->ID, 'co-author', false);
if( rely( $coauthors ) != 0 ) { ?>
<ul class="coauthors">
<li>Contributors</li>
<?php foreach($coauthors as $coauthors) { ?>
           <?php echo '<li>'.$coauthors.'</li>' ;
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

To show creator names separated by commas, you possibly can add the next custom CSS:

.coauthors ul { 
show:inline;
}
.coauthors li { 
show:inline;
list-style:none;
}
.coauthors li:after { 
content material:","
}
.coauthors li:last-child:after {
    content material: "";
}
.coauthors li:first-child:after {
    content material: ":";
}

This is the way it regarded on our demo website.

How to Display Custom Fields Outside the Loop in WordPress

What if you have to present customized fields within the sidebar of a single publish?

To show the customized fields outdoors the WordPress loop, you possibly can add the next code to your theme recordsdata:

<?php
world $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

Don’t overlook to interchange key along with your customized area identify.

Usually, most WordPress themes use the identical header, footer, and sidebar on all pages.

There are additionally some ways to indicate completely different sidebars, headers, or footers for various pages in your web site. You can see our information on the best way to display a different sidebar for each WordPress post or page.

One means to do that is by utilizing customized fields. Just edit the publish or web page the place you need to present a distinct sidebar and then add the sidebar as a customized area.

Now you have to edit your WordPress theme file, corresponding to single.php, the place you need to show a customized sidebar. You might be searching for the next code:

Replace this line with the next code:

<?php
world $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

This code merely appears for the sidebar customized area and then shows it in your theme. For instance, in case you add webpage as your sidebar customized area, then the code will search for a sidebar-webpage.php file to show.

You might want to create the sidebar-webpage.php file in your theme folder. You can copy the code out of your theme’s sidebar.php file as a place to begin.

Manipulating RSS feed Content With Custom Fields

Want to show further metadata or content material to your RSS feed customers? Using customized fields you possibly can manipulate your WordPress RSS feed and add customized content material into your feeds.

First, you have to add the next code to your theme’s capabilities.php file or use WPCode (advisable):

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

Now, simply create a customized area referred to as ‘coolcustom’ and add any worth you want. You can use it to show ads, pictures, textual content, or something you need.

For extra particulars, please see our information on how to copy and paste code from the web into WordPress.

How to Manipulate RSS Feed Title With Custom Fields

Sometimes chances are you’ll need to add additional textual content to a publish title for RSS feed customers. For instance, this may be useful in case you are publishing a sponsored publish or a visitor publish.

First, you have to add the next code to your theme’s capabilities.php file or use WPCode to add the custom code snippet with out breaking your web site:

operate wpbeginner_titlerss($content material) {
world $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 material="Guest Post: ".$content material;
}
elseif ($spost !== ''){
$content material="Sponsored Post: ".$content material;
}
else {
$content material = $content material;
}
return $content material;
}
add_filter('the_title_rss', 'wpbeginner_titlerss');

Next, you have to edit the publish the place you need to show the additional textual content within the title area.

Then, add guest_post and sponsored_post as customized fields.

If both of those two customized fields is discovered with a price “true”, then the code will add the suitable textual content earlier than the title. This method can be utilized in some ways to suit no matter you want.

Want to be taught extra cool RSS feed hacks? See our information on the best way to add content and manipulate your WordPress RSS feeds.

How to Set Expiration Date for Posts in WordPress Using Custom Fields

Want to set an expiration date for some posts in your WordPress website? This is useful once you need to publish content material just for a particular interval like operating surveys or limited-time provides.

One means to do that is by manually eradicating the publish content material or by utilizing a plugin like Post Expirator.

Another choice is utilizing customized fields to routinely expire posts after a particular time. You might want to edit your theme recordsdata and modify the WordPress loop like this:

<?php
if (have_posts()) :
whereas (have_posts()) : the_post();
$expirationtime = get_post_meta($post->ID, "expiration", false);
if( rely( $expirationtime ) != '' ) {
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}

$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween >= 0 ) {
echo 'This publish will expire on ' .$expirestring.'';
the_content();
} else {
echo "Sorry this publish expired!"
}
} else {
the_content();
}
endwhile;
endif;
?>

Note: You might want to edit this code to match your theme.

After including this code, you possibly can add the expiration customized area to the publish you need to expire. Make certain you add the time on this format mm/dd/yyyy 00:00:00.

How to Style Individual Posts Using Custom Fields

Want to vary the look of a person publish utilizing CSS? WordPress routinely assigns every publish its personal class, which you should utilize so as to add customized CSS.

However, by utilizing customized fields, you possibly can add your individual customized lessons and then use them to model posts in a different way.

First, you have to edit a publish that you just want to model in a different way. Go to the Custom Fields field and add the post-class customized area.

Next, you have to edit your WordPress theme recordsdata and add this code initially of the WordPress loop:

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

Now you have to discover the road with the post_class() operate.

Here is the way it regarded in our demo theme:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

You should change this line to incorporate your customized area worth, like this:

<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

Now in case you study the publish’s supply code utilizing the Inspect tool, then you will note your customized area CSS class added to the post-class.

You can now can use this CSS class so as to add customized CSS and model your publish in a different way.

We hope this text helped you be taught extra about WordPress customized fields. You can also need to see our information on how to add custom meta fields to custom taxonomies in WordPress and the best WordPress page builder plugins that can assist you design your web site the way in which you need.

If you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Facebook.