WordPress uses a powerful and flexible framework that has wonderful features to help users create a website easily and quickly. WordPress provides necessary features for creating and editing content, but perhaps for a lot of websites, we need to add more information or data. In this situation, WordPress provides a Meta Box feature.
What is a WordPress Meta Box?
WordPress Meta Box is a group of custom fields which allows you to add more information to posts, pages and custom posts types. You can add custom meta boxes via custom codes in your theme/plugin, or use one of the following plugins for easier and faster workflow.
In this article, let’s cover three of the most popular WordPress Meta Box plugins.
Create WordPress Meta Box with Advanced Custom Fields Plugin
Nowadays, this Advanced Custom Fields is the most popular plugin for creating custom fields. The visual builder allows you to add fields to WordPress edit screens conveniently. Furthermore, with the builder, you can add fields all over your WordPress website including posts, pages, user, media, comments, and taxonomies.
Features
- Simple & Intuitive
- Powerful Functions
- Over 30 Field Types
- Extensive Documentation
- Millions of Users
Field Types
- Basic (Text, Text Area, Number, Range, Email, Url, Password)
- Content (Image, File, Wysiwyg Editor, oEmbed)
- Choice (Select, Checkbox, Radio Button, Button Group, True / False)
- Relational (Link, Post Object, Page Link, Relationship, Taxonomy, User)
- jQuery (Google Map, Date Picker, Date Time Picker, Time Picker, Color Picker)
- Layout (Message, Accordion, Tab, Group)
Creating a WordPress Meta Box
Now that you have some information about Advanced Custom Fields plugin, it’s time to create four fields for an author of a post, then add the fields to the end of the post edit screen.
Author fields
- Author age
- Author profession
- Author hobby
- Author wish
1. From the left sidebar of WordPress admin menu, click on Custom Fields > Add New.
2. Click on the Add Field button for creating fields.
3. Fill out the Field Label, Field Name, Field Type and other fields based on your needs.
4. Add three other fields similar to the above step then click on Publish/Update button.
For showing the created fields in the edit post screen, configure the Location settings as shown below.
6. Edit a post to see the fields.
7. For showing the value of these fields, read this article about displaying values in your theme.
Useful Resources:
Awesome ACF lists many extensions for this plugin. For this article, let’s mention some of them.
Admin Columns allows you to display ACF custom fields for posts (post meta) and users (user meta) as columns on your list overview.
Automatically generates the code you need to implement ACF fields in your themes.
Add a Font Awesome icon field type to Advanced Custom Fields.
Allows you to add a Date and Time Picker field type.
Create flexible and developer-friendly forms using the power of Advanced Custom Fields.
Create a WordPress Meta Box with Meta Box plugin
Another powerful and lightweight plugin for creating unlimited custom fields is Meta Box. with this plugin, we can add custom fields to post, page, forms, etc. Furthermore, this plugin has over 40 field types.
The free version of Meta Box Plugin doesn’t have an admin page in WordPress dashboard. For creating a meta box, you need to use an Online Generator tool. This tool generates necessary codes to register a meta box in your child theme.
Features
- Supports 40+ custom field types
- Powerful options for custom fields
- Lightweight and well-coded
- Developer friendly
Field Types
- Input fields (Text, Number, URL, Email, Range, Text List)
- Basic fields (Checkbox, Checkbox List, Button, Password, Radio, Select, Select Advanced Textarea, Hidden, Image Select)
- Advanced Fields (Color Picker, OEmbed, Slider, WYSIWYG, Autocomplete, Fieldset Text, Map, Heading, Divider)
- Date & Time Fields (Date, Date-Time, Time)
- WordPress Fields (Post, Taxonomy, Taxonomy Advanced, User)
- Media Fields (HTML File, File Input, File Advanced, Image Advanced, HTML Image, Video)
How to Create a WordPress meta box
Now, it’s time to create four fields for an author of a post in Meta Box plugin.
Author Fields
- Autor Phone Number
- Autor Email
- Autor Birthday
- Autor Site Address
1. Go to the Online Generator tool.
2. In the General tab, set the Function Name and Text Domain.
3. In the Meta Box tab, set the ID and Title of your meta box. Configure the other options to show the meta box at an appropriate place.
4. In the Fields tab, create the fields as explained below:
Field 1: Create Field with Number Type and set ID to author_phone_number and NAME to Author Phone Number.
Field 2: Create Field with Email Type and set ID to author_email and NAME to Author Email.
Field 3: Create Field with Date Type and set ID to author_birthday and NAME to Author Birthday.
Field 4: Create Field with Url Type and set ID to author_website and NAME to Author Website.
5. For generating codes, click on the Generate button. Click on the Copy link to copy codes to the clipboard.
6. Go to Function.php of your child theme then paste the codes and save it.
7. Edit a post to see the fields.
8. For showing the value of these fields, read this article about displaying fields.
Useful Resources:
The Meta Box website has a dedicated page for extensions. For this article, let’s mention some of them:
Create and manage custom post types and taxonomies quickly with an easy-to-use interface.
Pull all meta values from posts and terms into the WP REST API responses.
Create and manage custom taxonomies in WordPress with a user-friendly interface.
Add WordPress custom fields to comments in WordPress. It supports all field types and options.
Create WordPress Meta Box with Pods plugin
Pods is a framework to manage all your custom content needs in ONE location. This plugin allows you to create and edit custom post types, taxonomy, fields, and even extend existing WordPress objects like users, media, posts, and pages.
Features:
- Create a type of content in WordPress
- Extend existing content types
- Different field types and build your own with extensible field type classes
- Importers to help your transition from other plugins
Field Types
- Date / Time (Date, Time, both)
- Number (Plain Number, Currency)
- Text (Plain Text, Website, Phone, E-mail, Password)
- Paragraph Text (Plain Paragraph, WYSIWYG, Code)
- Color Picker
- Yes / No
- File / Image / Video
- Avatars
- Relationships
Create a WordPress Meta Box
Now, let’s add a meta box with some author fields in WordPress pages.
Author fields:
- Author age
- Author position
1. From the left sidebar of WordPress admin menu, click on Pods Admin > Add New.
2. In the new screen, choose Extend Existing.
3. Set content Type to Post Types (Posts, Pages, Etc) and Post Type to Pages then click on Next Step.
4. Add a Text field type and set the label to Author Age then set Name to author_age.
5. Add a Text field type and set the label to Author Position then set Name to author_position. Click on Save Pod button to save your fields.
6. Edit a post to see the fields.
Useful Extensions:
Pods plugin is a developer-friendly framework so some developers develop extensions to enhance the plugin. For this article, let’s mention some of them:
Easily select Pods fields in Beaver-Themer field connections from a dropdown based on the currently displayed item (CPT).
This extension provides the ability to sync entries from a Form Submission and Entry Edit screen.
This extension provides optimal performance with Pods sites on hosts with no object caching or low limits.
Conclusion
In this article, we introduced three plugins to help you to create, manage and extend WordPress Meta Box easily and quickly. The ACF plugin is the most popular plugin at the moment. Some popular themes like Jupiter X rely on ACF to manage the Meta Box and custom fields.
There are also some other plugins in the WordPress Community for managing Meta Box. Feel free to share your favorite one with us in the comment section!
No comment yet, add your voice below!