Adding custom fields to posts and pages in WordPress

Adding custom fields to posts and pages in WordPress

Online by J&S Code
14 August 2017 | MySQL PHP PHP - MySQL WP snippets, code & hacks | 1991 recognitions

Do you want to capture more data when creating a post or a page? Do you want to add some custom fields to your custom post type? With WordPress’s metabox functionality, you can! There are a few moving parts here, so let’s walk through them one-by-one.

Create your metabox

We can use the add_meta_box() function to create new metaboxes. We need to hook into WordPress’s add_meta_boxes action hook.

In add_meta_box(), you’ll give your metabox an ID, a name, a function to use to generate the markup, a post type to display it on (posts, pages, etc.), and a location and priority on the page.

The post type can only be a single value (not an array), so if you want to use your metabox on multiple post types, you’ll need to repeat the add_meta_box() function a couple of times.

Rendering the metabox markup

Now we need to create content for the function specified in add_meta_box().

We’ll want to grab the $post, and get our saved field value (if one exists). We also need to include a security field that we’ll check against to make sure this is a valid submission from the WordPress Dashboard.

You’ll note that our field data is wrapped in an esc_attr() function. This escapes and encodes any data for proper use in an input field value.

Saving your metabox

When the post or page is submitted, we want to save any data in our custom fields.

To do that, we first look to see if the submitted data contains our security field. If it does, we validate that field using the wp_verify_nonce() function. We also check that the submitting user has permission to edit the post.

Finally, we make sure that our field was submitted with data. If all criteria are met, we can save our field.

It’s important to sanitize any data before saving it to the database. This prevents malicious code and scripts from being run on your server. We’ll use the wp_filter_post_kses() function, which strips our dangerous code and allows through anything you can include a post.

Saving revision history

This is optional, and potentially undesireable for certain data types, but you can save your field data to revision history. Restoring a a post to an old version will also update the metabox.

We’ll hook into the save_post action hook to do this.

Restoring from revision history

Naturally, when restoring a post, we’ll want to update the metabox field value as well.

We’ll hook into the wp_restore_post_revision action hook for this, updating the post meta value with the historic version.

Displaying your metabox field in the revisions view

If you want to be able to see the historic version in the revisions view, you’ll need two additional functions.

First, we’ll add a field to the revision fields with the _wp_post_revision_fields filter. (WARNING! This function’s access is marked private. This means it is not intended for use by plugin or theme developers, only in other core functions. It is listed here for completeness. )

Next, we’ll tell WordPress to show that field on the revisions page with the _wp_post_revision_field_my_meta filter.

Wrap up

In a future article, I’ll show you how to work with multiple fields, set defaults, and avoid over-taxing your database.

Now it’s time to code!

About The Author

J&S Code

Sorin C is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.


What if I need to sanitize multiple fields, how to achieve it?

This code returns string, but how about array?
$sanitized = wp_filter_post_kses( $_POST[ ‘_js_code_metabox’ ] )

    An option that will work in some cases, is to change the code to sanitize each part of the array separately, instead of all at once.

    For example, an array like this:
    foreach ( $input as $key => $val ) {

    $new_input[ $key ] = ( isset( $input[ $key ] ) ) ?
    sanitize_text_field( $val ) :


Put here your thoughts

Your email address will not be published. Please complete all fields * correctly You may use these HTML tags: bold text, italicised text, and paragraphs.

On the same idea

Securing WordPress AJAX Forms Using Nonce
Online by stevenmedia | 7 August 2018

When creating a WordPress theme or plugin, AJAX is often used in order to enhance the user experience. In order to ensure security and protect your site against several types...

AJAX for WordPress
Online by stevenmedia | 7 August 2018

This tutorial is just a simple guide to understand the basic about using AJAX in WordPress. (more…)

Customizing the WordPress Query
Online by stevenmedia | 6 August 2018

One of the most powerful features of WordPress is the WP Query. It is what determines what content is displayed on what page. And often you’ll want to modify this...