WordPress Custom Fields Tutorial

How to Create WordPress Custom Fields

In this WordPress tutorial you will learn how to add a custom field to your post or page using meta boxes. Meta Boxes are simply boxes you can add to a page or post that allow you to add custom data.  If you have an understanding of PHP, WordPress, and the WordPress Codex you may find this tutorial easier to understand.

To accomplish adding a meta box to a post or page we will create three functions in functions.php to add and save the meta box.  We will be using the WordPress functions add_meta_box(), get_post_meta(), and update_post_meta(). We will also use add_action() to hook the functions to the add_meta_boxes action and the save_post action. In the end we will have a meta box to enter a YouTube embed URL, be able to save it, and view the video on your page.

Adding the Meta Box

Open your functions.php file (located in your theme directory under \wp-content\themes) in a text editor and add the following code:

This create a function called new_meta_box(). Inside this function we globalize the global variable $post to access the data from the current post with the following code.

In the IF statement we retrieve the post data if the global $post variable has data to retrieve. We then get the ID of the post using the WordPress function get_The_ID() and store it in the variable $meta. We also get the permalink of the post using get_permalink($meta) and strip it down to the slug name by using the PHP function basename.

More can be found about these WordPress and PHP functions here:
https://developer.wordpress.org/reference/functions/get_the_id/
https://developer.wordpress.org/reference/functions/get_permalink/
http://php.net/manual/en/function.basename.php

We then tell WordPress what page or post we want the meta box to display on, for the $meta variable we entered the ID number of the page or post, this can be found at the end of the URL, for example it says post.php?post=111&action=edit, so the ID would be 111 for this post. For the slug, enter the slug name of the page, this can be found under screen options at the top, check off slug, if it is not already checked, and scroll down to see the slug name.

 

 

 
We then add the add_meta_box() function to show the metabox. The add_meta_box() function has parameters you need to add, the full function with its parameters is shown below.

The required parameters are the $id, $title, and $callback.

• The $id is used as the ID for the meta box, we used ‘video_link’ as the ID.
• The $title is used as the title of the meta box, we used ‘YouTube Video’.
• The $callback is the function with the content used to fill the meta box. The function we created is called youtube_video().

The optional parameters we used are $screen, $context, and $priority.

• $screen is used to specify the screen type the meta box is being displayed on, the default type is the current screen. Other options would be post types such as post or page, we used the page type.
• $context is used to tell WordPress where the meta box should be shown within the screen. Post edit screens include ‘normal’, ‘side’, and ‘advanced’. The default value is advanced which is what we are using.
• $priority tells WordPress the priority of the box to be shown, either high or low. The default value is default; we have this set to high.
• $callback_args is another optional parameter and is the data in the $args property, the second parameter passed to the callback function, we do not have any $args for our function. The default value is null.

We need to add the callback function to the functions.php file by adding the following code:

For this callback function we use the global $post variable declared in the new_meta_box() function to retrieve the meta box information from the post. The variable $youtube_url is the YouTube URL entered inside the meta box. We use the WordPress function get_post_meta() to retrieve it. There are three parameters for get_post_meta(), the full function with its parameters is shown below.
`

The parameters for this WordPress function are $post_id, $key, and $single.

• $post_id is the required parameter, we get this by using $post->ID to get the ID of the current post the meta box is in.
• $key is an optional parameterthe meta key to retrieve, we use the name youtube. The default returns the data for all keys.
• $single is also an optional parameter, it tells WordPress to retrieve a single value, this is either true or false, we set it to true because we only want the YouTube URL returned as the value. The default value is false.

We then close PHP to output the html code for the function and set the value of the input box as the variable $youtube_url and the name attribute is the meta key value. After the HTML code we open the PHP code as you see below.

The final step to add the meta box is to hook the function we created to the add_meta_boxes action. In order to do this we use the add_action() function and add it to the functions.php file. The code is below:

The first parameter in add_action is the action hook and the second parameter is the name of the function we created, in this example it is new_meta_box.

Saving the Meta Box

After we add the meta box to the page or post we need to add the function to save the meta box input, so when you click on the update or publish button it saves. To accomplish this we create another function in the functions.php file, the code is below:

For the save_meta_box function we use the parameter $post_id which is for the save_post action to get the ID of the post in WordPress. Inside the function we globalize the global variable $post, get the ID of the post, and get the $slug name, just like we did in the new_meta_box function. And if the ID is equal to 111 or the $slug is equal to the slug-name we save the meta information.

In the IF statement we check to see if DOING_AUTOSAVE is defined and is set to true, if so we abort saving the meta information. DOING_AUTOSAVE only gets defined in wp_auto_save(). If it’s not an auto save we check to see if the $_POST[‘youtube’] is set or has data, with isset($_POST[‘youtube’]). The $_POST[‘youtube’] is the input box we created in the callback function named youtube, if it has data in it we save the meta information using update_post_meta().

For more information on wp_auto_save() go here:
https://developer.wordpress.org/reference/functions/wp_autosave/

The WordPress function update_post_meta() updates the value of an existing meta key for the specified post. The full function with all its parameters is below:

The parameters for this WordPress function are $post_id, $meta_key, $meta_value, and $prev_value.

• $post_id is required, it is the ID of the post you are editing. We are using this variable for our function so we use $post_id here.
• $meta_key is required, it is the key of the custom field you are editing; in this case we are using youtube as the name.
• $meta_value is requires, it is the data value that is being updated. In this case we are using the $_POST information from the input box named youtube and we add esc_attr to escape the data, esc_attr($_POST[“youtube”]). Escaping data is the process of securing output by stripping out unwanted data, like malformed HTML or script tags, preventing this data from being seen as code.
• $prev_value is the optional parameter which is the previous value to check before updating it to the new value. We do not use this parameter.

For more information on update_post_meta() go here:
https://codex.wordpress.org/Function_Reference/update_post_meta
For more information on esc_attr() go here:
https://developer.wordpress.org/reference/functions/esc_attr/

The final step to save the meta box is to hook the function we created to the save_post action. In order to do this we use the add_action() function and add it to the functions.php file. The code is below:

Those are all the steps, you should now have a working meta box on your page where you can add a YouTube embed URL. This only works with YouTube embed URLS such as https://www.youtube.com/embed/Dtq88gVW1BA Notice the /embed/ before the YouTube code. I hope you are now able to understand how meta boxes work in WordPress and are able to add them to any page or post. Please feel free to leave any questions in the comments below.