Creating Custom Fields and Meta Boxes in WordPress Theme Development

Tutorials Wordpress

Meta Boxes are a very useful feature in WordPress which allow you to add completely custom data to a post or page in WordPress. For e.g. You are creating a website for a client which needs to display nutritional information alongside products in a store. You can add any number of custom meta boxes to the post and page editing screens in the backend of WordPress, for both posts and custom post types.

Generally custom meta boxes contain data and form fields, which allow admins to edit, add or delete posts meta data i.e custom fields, overcoming the not so good in-built custom field box.

Here we will show you how to add your own custom meta boxes to a post edit screen. We will discuss how to add and manage text fields, and checkboxes that will give users more advanced control over post meta data.

What is a Meta Box?

A meta box is a draggable box displayed in the post editing screen in the backend of WordPress. If users want they can select or enter extra information in meta boxes addition to the content in the main post editing area.

You can enter two types of data in meta boxes: metadata (i.e. Custom fields), and taxonomy terms.

Adding a Meta Box


WordPress provides a add_meta_box_function with the specific purpose to add a new Custom Meta Box. This function has to be called from inside a callback function that should be executed when the current page’s meta boxes are loaded. We can perform this task by hooking the callback to the add_meta_box_{custom-post-type} action hook.

Now we will learn how to add basic custom fields to a post, save them in the database and show them on the front end of the website, without using a plugin.

Our goals are:-
• Create a custom post type
• Add a custom meta box
• Create the following custom fields:-

1. Input Text field
2. Textarea
3. Checkbox
4. Select Menu
5. Image with Image upload

Have you ever wanted to add an extra field to a WordPress post? May be a URL or a date or an email address? Now we will learn how to do that. Have you ever wanted to add another upload field for images outside of the “Featured Image” thumbnail option? Now we will learn how to add an upload button and browse through the media gallery to insert an image.

Create a Custom Post
Let’s start off with a completely empty WordPress theme. We are going to create a custom post called Book, with the id your_post. You can call it with whatever name you want.

Below is the code that will go into functions.php:-


The most important things that it does are:-

• Registers a post type called Your Post, with the id your_post.
• Supports a title – the_title(), editor – the_content(), excerpt – the_excerpt(), and thumbnail/featured image – the_post_thumbnail()
• Supports taxonomies or ways to group posts, with tags and categories.

How to Display the Custom Post

Now we will see how to display the post on the front end. You can also display the contents of a custom post anywhere. We are just going to put it in page.php for testing purposes, hence any page we make will display our custom loop.

The variable $your_loop can be anything.
$meta = get_post_meta( $post->ID, ‘book_author’, true); is not necessary right now but it will be important later.
Back End
For updating the title and editor fields like in a regular post.

Code
Now inserting the template codes like normal

Title

Content

Front End

Just to make it simpler we are not using any styles in order not to make complex.
Hence the custom post is all set up now.

Create a Meta Box

Below is the code to add a meta box:-

The actual function is add_meta_box($id, $title, $callback, $screen, $context, $priority). The most important ones are $title, which is Your Fields and $screen which is where the meta box will be added. You can add it to a regular post but here we chose to add it to your_post, our custom post.

Saving Fields in the Database
The function that will display all of your custom fields:-

We will discuss later.

Right now, directly below the above function, we are going to paste the below code that will save all your_fields to the database:-

You have to make sure your_meta_box_nonce matches the name attribute and you have specified your_fields in the meta box function. This part of code is verifying the nonce from the first function and making sure the user has the right permission to update the fields and updating the post meta fields.

Create Custom Fields

Now let’s discuss

Text Area:-

The code for text area is almost same as the input except the value is echoed out between the tags instead of as an attribute and the rows, cols and style places on it doesn’t much matter. Also we should leave no space between the tags to make sure no extra space ends up in your textbox.

Checkbox:-

There are many ways to implement the checkbox, below is one of those ways:-

Select Menu:-

You can include many options here. We are doing two for example:-

Image:-

Actually the image upload part is most complicated one. The actual display code is not much complicated. You should include the meta-image class on the text input and image-upload class on the submit button.

Just below it you can place the below JavaScript code. This code will open the in-built WordPress media gallery when you will click browse and insert the selected URL into the input field.

This is all what you need to do into the functions.php file. We can also place this JavaScript in a separate file and call it on the admin pages.

Output:-

Now as we have all out fields and they all appear in the Your Fields meta box, we are going to fill them all out, check the checkbox, select an option, upload an image and publish the post. These all will go in the $your_loop query. Make sure $meta = get_post_meta($post->ID, ‘your_fields’, true); Is in your loop.

Text Input:-

Simple output of the text field:-

Text Input

Text Area Simple output of the textarea:-

Textarea

Checkbox We are going to check if the checkbox has been checked or not and will display a message based on that.

Checkbox

Checkbox is checked. Checkbox is not checked.

Select:-

You can do this in two ways:-

Image:-

Finally displaying the image:-

Conclusion

This article explains in the most basic way to add custom fields and update the database. There are so many ways to do it. Also plugins like ACF can also do it for you. But as we have shown it is useful to know how to interact with the database and learn how to do it without using a plugin.

Subscribe & Get E-Mail Updates Delivered

Our informative Design related articles featuring the latest Resources for Web Designers & the Web get delivered via email dialy. Thousands of readers have signed up already. Why don't you subscribe as well, and get articles delivered to your inbox?

Sophia Philips

Sophia is a trained WordPress developer working with WordPrax Ltd.- A leading HTML to WordPress conversion company. If you're planning to convert HTML website to WordPress for a brilliant online presence, she can help you. Some stunning articles related to website markup conversions can be found under her name.

Leave a Reply

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