Would you like to discover how to Create Meta Boxes in WordPress posts, pages, and custom content types? WordPress already puts in some details like when it was published, its categories, and tags, but sometimes you want to add your own special information.
In this article, we’ll teach you how to do this simply. We’ll show you how to Create Custom Meta boxes in WordPress to add unique information to your content.
- What are Meta Boxes?
- Why do we need to Create Meta Boxes?
- What is meant by MetaData?
- What is a Custom Meta Box in WordPress?
- How do I create a Custom Meta Boxes in WordPress Posts and Posts types?
- Difference Between Meta Boxes And Custom Fields:
- What are Custom Fields used for?
- Create Custom fields for the Meta Box in WordPress Posts:
- Create a Custom Editor to the WordPress Content Editor:
- Showing Your Custom Meta Box in WordPress Theme
What are Meta Boxes?
Meta boxes in WordPress are like a little box you can change that shows up when you’re making or editing a post, page, or custom content. It lets you put in and show extra information connected to what you’re writing. This extra stuff can be things like special fields, boxes to tick, places to type in text, or other kinds of information that fit with your content. People use meta boxes to make WordPress more powerful and adaptable because they help you add and control specific details linked to your content.
Uses Of Meta Boxes:
Adding Special Info: You can use them to add special details, like words, numbers, dates, or web links, to your content. This is useful when you want to connect specific info to a post or page.
Keeping Content Neat: Meta boxes help you keep your content organized. You can sort posts, give them different importance, or add extra bits of info that help you find and arrange content.
Getting Seen in Searches: Some plugins use meta boxes to make your content show up better in search results. You can type in things like titles, descriptions, and keywords to boost your content’s visibility.
Tailoring Info: If your website has different types of content, like houses on a real estate site, meta boxes let you add special details just for those types. For example, you can have a meta box for house info like price, location, and bedroom count.
Controlling Posts: Meta boxes help you manage posts. You can decide when they appear, what picture is highlighted, or how they look, all from the post editing screen.
Engaging Users: They can make your website more interesting for visitors. For example, if you want people to rate your posts or leave reviews, a meta box can do that.
Customizing: If you’re a developer, you can create your own special meta boxes to add exactly the features you want. This makes WordPress very adaptable.
In simple terms, meta boxes in WordPress are versatile tools that help you add, manage, and show all sorts of information and functions linked to your content.
Types of Meta Boxes:
There are main types of Meta Boxes:
1:Meta boxes in WordPress
2:Custom Fields Box
3:Featured Image Box
4:Excerpt Box
5:Page Attributes Box
6:Discussion Box
7:Slug Box
8:Author Box
9:Publish Box
10:Categories and Tags Boxes
11:Post Format Box
12:Custom Metaboxes
13:SEO Metaboxes
14:Custom Post Type Metaboxes
Types of meta boxes explain
Meta boxes in WordPress: are like special boxes that help you add extra information to your posts, pages, or custom content. These boxes have names that tell you what they’re for. Here are some examples:
Custom Fields Box: It’s for adding your own information to your posts. It might be called “Custom Fields” or something similar.
Featured Image Box: This box is for setting a special image for your post. It’s usually just called “Featured Image.”
Excerpt Box: You can put a short summary of your post in this box. It’s called “Excerpt.”
Page Attributes Box: This one helps you organize your pages. It might be named “Page Attributes.”
Discussion Box: You can decide if people can comment on your post here. It’s called “Discussion.”
Slug Box: This lets you change the web address of your post. It’s often called “Slug.”
Author Box: You can change the author of a post here. It’s usually named “Author” or “Authorship.”
Publish Box: This box has options for when and how your post is shown. It’s called “Publish.”
Categories and Tags Boxes: You can sort your posts into categories and add tags to help organize them. These boxes are often named “Categories” and “Tags.”
Post Format Box: If your website has different post styles, like “Standard,” “Gallery,” or “Video,” you can pick them here. It’s the “Post Format” box.
Custom Metaboxes: Sometimes, you’ll see unique boxes made by plugins or special coding. They have names related to what they do, like “Product Details” or “Event Information.”
SEO Metaboxes: SEO plugins might add boxes to help with search engine optimization. For example, “Yoast SEO” has a box named “Yoast SEO.”
Custom Post Type Metaboxes: If you create special types of content on your website, you can make custom meta boxes with names that fit what that content is about.
These names can be different on various websites, depending on the theme, plugins, and how the website was built. But they’re usually chosen to make it easy for you to understand what each box does.
Why do we need to Create Meta Boxes?
Meta boxes in content management systems like WordPress serve important purposes:
Customization and Extensibility: They let users tweak and expand their websites without messing with the core code. This is handy for folks who aren’t tech-savvy and want to add stuff to their posts or pages without coding.
Content Organization: Meta boxes help tidy up content by giving a neat way to add and show extra info. For example, on a real estate site, you can use a meta box to add property details like price and bedrooms.
Data Input and Checking: Meta boxes often check that you type in data the right way. This keeps things consistent and accurate.
User-Friendly :They make it easier for users to put in and handle content. Instead of writing everything in one big text box, you get separate fields for different info.
Contextual Tips: Meta boxes can show helpful info based on what you’re working on. For a blog, they might suggest tags or related posts.
Adding Plugins and Themes: Developers can use meta boxes to smoothly add their plugins or themes to the CMS. This means you can add cool features without causing problems.
Controlling Who Does What: You can control who gets to see and change specific info. Admins might see everything, but regular users might only see a few options.
SEO Help: Meta boxes can help with SEO by letting you add stuff like titles and descriptions that help your content show up better in search engines.
Managing Work: Sometimes, they help with how content gets made. You might use a “Status” meta box to mark content as “Draft,” “Pending Review,” or “Published.”
In short, meta boxes make content systems more flexible and useful. They let people fine-tune their websites and content, whether it’s for a blog or an online store. Developers can also use them to make plugins and themes that add special features while keeping everything working smoothly.
What is meant by MetaData?
Metadata is like information about information. It’s data that describes other data.
Imagine you have a library of books. Each book has a title, author, and a short summary on its cover. These details are like metadata. They help you understand what each book is about without having to read the whole thing.
On a computer or the internet, everything from photos to documents has metadata. For a photo, it could include things like when the picture was taken, what camera was used, and even where it was taken. This helps you organize and find your photos.
In simple terms, metadata is like the labels and tags that tell you more about something, making it easier to organize, search for, and understand.
What is a Custom Meta Box in WordPress?
When you make special boxes for things in WordPress like posts, pages, or custom stuff you create, they often come with their own extra information. This extra info is all about the thing, like when it was made, who made it, what it’s called, and other details
Important Note: If you can’t find the Custom Fields box in the post editor, check out our guide on how to solve the issue of Custom Fields not appearing in WordPress.
How do I create a Custom Meta Boxes in WordPress Posts and Posts types?
Creating a custom meta box in WordPress involves a few steps. Meta boxes are often used to add extra fields and information to your posts, pages, or custom post types. Here’s a simple guide on how to create a custom meta box in WordPress:
Step 1: Define the Meta Box
First, you’ll need to define your custom meta box. You can do this by adding code to your theme’s functions.php file or by creating a custom plugin (recommended for better organization).
Here’s an example of how to define a basic meta box:
function custom_meta_box() {
add_meta_box(
'custom-meta-box-id', // Unique ID
'Custom Meta Box', // Title
'display_custom_meta_box', // Callback function to display the meta box
'post', // Post type where you want the meta box to appear (e.g., 'post', 'page', or a custom post type)
'normal', // Context (e.g., 'normal', 'advanced', or 'side')
'high' // Priority (e.g., 'high', 'core', 'default', or 'low')
);
}
add_action('add_meta_boxes', 'custom_meta_box');
In this code:
‘custom-meta-box-id’ is a unique ID for your meta box.
‘Custom Meta Box’ is the title of your meta box.
‘display_custom_meta_box’ is the function that will display the content of your meta box.
‘post’ is the post type where you want the meta box to appear (you can change this to match your needs).
‘normal’ is the context where you want the meta box to appear (usually ‘normal’).
‘high’ is the priority (you can use ‘high’, ‘core’, ‘default’, or ‘low’).
Step 2: Create the Callback Function
Next, you need to create the callback function ‘display_custom_meta_box’ that will display the content of your meta box. This is where you define the fields you want to add to your meta box
function display_custom_meta_box($post) {
// Retrieve the current value of the meta field, if it exists
$custom_value = get_post_meta($post->ID, '_custom_meta_key', true);
// Output the HTML for your meta box
?>
<label for="custom_meta_field">Custom Field:</label>
<input type="text" id="custom_meta_field" name="custom_meta_field" value="<?php echo esc_attr($custom_value); ?>">
<?php
}
In this code:
- get_post_meta() is used to retrieve the current value of the meta field, if it exists.
- The HTML input field is displayed where users can input their data.
Step 3: Save the Meta Box Data
You also need to save the data when a post is updated. Add the following code to save the data:
function save_custom_meta($post_id) {
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (isset($_POST['custom_meta_field'])) {
update_post_meta($post_id, '_custom_meta_key', sanitize_text_field($_POST['custom_meta_field']));
}
}
add_action('save_post', 'save_custom_meta');
In this code:
- update_post_meta() is used to save the data to the post.
- sanitize_text_field() is used to sanitize and validate the data before saving it.
Step 4: Display the Meta Box Data
To display the meta box data on your posts or pages, you can use get_post_meta() like this:
$custom_value = get_post_meta(get_the_ID(), '_custom_meta_key', true);
echo 'Custom Field Value: ' . esc_html($custom_value);
This retrieves the value of your custom meta field and displays it where you want it to appear in your theme’s template files.
That’s it! You’ve created a custom meta box in WordPress. Make sure to customize the code to match your specific needs, such as changing field types or adding multiple fields.
The Custom Fields box is great when you only need to put custom info on a few posts. But, if you want to add a ton of unique stuff to your content, it’s smarter to build your own custom info box.
Actually, lots of well-known WordPress plugins put their own Meta boxes on the Edit screen for posts and pages. In this picture below, you can see how simple it is to add SEO details to your post using a custom info box from AIOSEO
Difference Between Meta Boxes And Custom Fields:
The key difference is that Custom Fields are native to WordPress so each post/page has them built-in. But if you want create a Theme Options page you probably will want to use Meta Box to create the same results as Custom Fields provide natively.
So, let’s find out how you can effortlessly include custom Meta boxes in WordPress for posts and different types of posts.
What are Custom Fields used for?
Custom fields in WordPress are a way to add extra information to your posts or pages. They’re like special labels or tags you can attach to your content to give it more details.
Here’s a simple example: Imagine you’re writing a blog post about a book. You have the title, author, and the book’s release date. These details can be added as custom fields. So, instead of just having a regular post with a title and content, you can also add these custom fields to provide specific information about the book.
Custom fields are flexible because you can use them for various types of content. For example, if you have a recipe website, you can use custom fields to list ingredients and cooking times for your recipes.
In summary, custom fields allow you to attach extra bits of information to your posts or pages, making your content more organized and informative. They’re handy when you want to include specific details that don’t fit into the standard title and content of a post or page.
Create Custom fields for the Meta Box in WordPress Posts:
To begin, click on the ‘Field Type’ menu, and from there, pick the kind of field you want to include. You can choose from options like Text, Date Picker, Checkbox, or any other type of field you need.
Next, enter a name for the field. This name will be displayed by Advanced Custom Fields as a label right before the field. This label guides users about the information they should provide.
Advanced Custom Fields will create the ‘Field Name’ for you automatically, so you don’t need to fill in this part.
With that done, you may want to type in a ‘Default Value.’ This will be added to the page, post, or custom post type automatically if the user doesn’t add their own information.
You might find additional choices depending on the type of field you’re making. For instance, if you picked ‘Image’ from the ‘File Type’ menu, you can then decide on the format for the image.
Many of these choices are easy to understand, so you can simply follow the instructions on the screen to set up your custom field.
Once you’re satisfied with how you’ve configured the field, click ‘Close Field’ to close that section.
To add more fields to the custom meta box, click the ‘Add Field’ button now.
Next, just set up the new field by following the same process we talked about earlier.
Create a Custom Editor to the WordPress Content Editor:
When you’ve finished setting up the custom meta box just the way you like it, you’ll have to specify where and when it should show up.
Go down to the ‘Settings’ section, and then select the ‘Location Rules’ tab by clicking on it.
Advanced Custom Fields allows you to include this box on various types of content. For instance, you can make it appear on certain types of posts, categories, labels, menus, and more.
Just use the drop-down menus to pick where you want this box to show up in your WordPress dashboard. For instance, if you get guest posts, you can add the box to all posts in the ‘Guest Posts’ category.
Then, click on the ‘Presentation’ tab.
On this tab, you can pick how the meta box looks, where it shows up on your WordPress site, and where the label and instructions will be visible.
If you want to put several boxes in the same spot, you can change the order they show up by typing a number in the ‘Order No’ field.
For instance, if you place the most important meta boxes near the top of the screen, it could make your editing process smoother.
If you’re not sure, you can leave this field at 0.
On this screen, you’ll also find a list of all the fields that WordPress normally displays on the post editing screen.
If you want to make a field disappear, just tick the box next to it. For example, if you’re making a custom author info box, you might want to hide the standard ‘Author’ field.
Once you’re satisfied with the changes you’ve made, click ‘Save Changes’ to apply the field group
Congratulations! You’ve just made a custom meta box for your WordPress post, page, or custom post type. Depending on how you set things up, you can go to the post editor now to check out your new custom meta box in action.
Showing Your Custom Meta Box in WordPress Theme
Great job! You’ve added a special box to the WordPress dashboard. Any details people put into this box will be saved in the WordPress database when they save or publish the post. But remember, this information won’t show up on your website automatically. You’ll need to do more to display it on your site.
Now, let’s ensure that the special information you added appears on your WordPress theme, so your website visitors can see it.
You can achieve this by either using a shortcode or by making changes to your WordPress theme files.
How To Display Custom MetaData Using Shortcode
The simplest way to do this is by adding a shortcode in WordPress. It gives you precise control over where the information shows up on your site. For instance, if you made a ‘Star Rating’ field, you can display this info after the post title, within the content, at the bottom of the page, or anywhere else you want, just by adding a shortcode.
But keep in mind, you’ll have to insert a shortcode into every individual page, post, or custom post type one by one. This could be quite time-consuming, especially if you have a lot of content.
What is by Custom Metadata?
Custom metadata, often referred to as custom fields or post metadata, is additional information or data that you can attach to posts, pages, or custom post types in a content management system (CMS) like WordPress. This metadata allows you to store and display specific details that go beyond the standard title and content of a post or page.
Custom metadata is highly flexible and can be used for various purposes, such as:
Content Organization: You can use custom metadata to categorize and organize your content. For example, on a real estate website, you can attach metadata to property listings, including details like price, square footage, and number of bedrooms.
Additional Information: It provides a way to include extra information related to a post or page. For instance, on a product review website, custom metadata can store product specifications, ratings, and prices.
Customization: Custom metadata allows you to tailor your content to your specific needs. You can define your own fields to capture and display information that’s unique to your website or project.
Search and Filtering: It helps users find content more easily. Visitors can search for or filter content based on the custom metadata associated with each post.
Displaying Dynamic Content: Custom metadata can be used to display dynamic content on your website. For example, you can create a “Related Posts” section based on specific metadata criteria.
Integration with Plugins and Themes: Many plugins and themes in CMSs like WordPress use custom metadata to extend functionality. For instance, e-commerce plugins often use metadata to store product information.
In WordPress, custom fields are a common way to add custom metadata to posts and pages. You can define custom fields and associate them with posts, allowing you to store and retrieve additional data as needed.
In summary, custom metadata, or custom fields, is a powerful feature in CMSs that enables you to add, store, and display specific information alongside your content, making your website more organized, informative, and adaptable to your unique requirements.
Types of Custom Metadata:
Custom metadata, also known as custom fields or post metadata, can take various forms depending on your specific needs and how you choose to implement them. Here are some common types of custom metadata:
Text: This is a simple text field where you can input any text-based information. It’s versatile and can be used for things like author names, descriptions, or custom notes.
Numeric: Numeric fields are used for numerical data such as prices, ratings, or quantities. They ensure that only numbers are entered.
Date and Time: Date and time fields allow you to capture specific dates or times. They are handy for event dates, publication dates, or scheduling content.
Checkbox: Checkboxes are often used for binary choices. You can have a single checkbox for options like “Featured” or “Published,” which can be checked or unchecked.
Radio Buttons: Radio buttons provide a list of options, but you can only select one. They are useful for scenarios where you need users to choose from predefined options.
Select Dropdown: Dropdown menus offer a list of choices, and users can pick one from the list. They are suitable for situations where there are multiple predefined options.
File Upload: File upload fields enable users to upload files, such as images or documents, to associate with a post. This is useful for galleries, attachments, or featured images.
URL or Link: URL fields allow you to input web addresses, which can be linked to external sites or resources. They’re useful for adding related links or references.
Colour Picker: Color picker fields permit users to select colors visually. They’re valuable for design-related metadata or highlighting content.
Image: Image fields store image URLs or references to images in your media library. This is useful for associating specific images with posts or pages.
Rich Text (WYSIWYG): Rich text fields provide a text editor where you can enter and format content with styles, images, and links. They’re excellent for adding custom formatted content.
Location: Location fields store geographical coordinates (latitude and longitude). They’re used for mapping and location-based content.
Email: Email fields ensure that the input matches an email format. They’re helpful for storing email addresses associated with posts.
Relationship: Relationship fields establish connections between different posts or content types. They’re used for creating associations like related articles or authors to their posts.
Taxonomy: Taxonomy fields link posts to specific categories, tags, or custom taxonomies. They help organise content hierarchically.
User: User fields allow you to associate posts with specific users on your website, which can be useful for bylines, authors, or contributors.
Now if you want to learn about custom shortcode read our article How to Create Custom Shortcode in WordPress | A Step by Step guide.