Have you ever wished for a way to add some custom data to your posts or pages? Maybe an extra bit of information that doesn’t quite fit in the main body of the content? Well, today we’ll learn how to create custom meta boxes in WordPress, and yes, without a plugin. So, tighten your coding belt and let’s jump right in!
Meta boxes in WordPress are the draggable boxes you see on the post or page editing screens. They allow you to add custom data to your posts or pages. Some common examples include the Categories, Tags, and Featured Image boxes.
To add a custom meta box, you’ll need to use the add_meta_box function in your theme’s functions.php file.
Here’s a simple example that adds a meta box to the post editing screen:
function my_custom_meta_box() {
add_meta_box('my_meta_box', 'My Custom Meta Box', 'display_my_meta_box', 'post', 'normal', 'high');
}
add_action('add_meta_boxes', 'my_custom_meta_box');
my_meta_box to the post editing screen. The meta box will be displayed in the ‘normal’ area of the screen, and its priority is ‘high’, so it will appear towards the top.
display_my_meta_box function will display the content inside our meta box. Let’s create this function:
function display_my_meta_box($post) {
$custom_text = get_post_meta($post->ID, 'custom_text', true);
echo '<input type="text" name="custom_text" value="' . $custom_text . '"/>';
}
This function retrieves any saved meta data for the post using get_post_meta and displays it in an input box.
The last step is to save the data from your meta box when a post is saved. Here’s how you can do this:
function save_my_meta_box_data($post_id) {
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if ($parent_id = wp_is_post_revision($post_id))
$post_id = $parent_id;
if (isset($_POST['custom_text'])) {
update_post_meta($post_id, 'custom_text', $_POST['custom_text']);
}
}
add_action('save_post', 'save_my_meta_box_data');
This function checks if the post is an autosave or a revision and, if not, updates the post’s meta data with the new data entered in our meta box.
Let’s look at all the code together:
// functions.php
function my_custom_meta_box() {
add_meta_box('my_meta_box', 'My Custom Meta Box', 'display_my_meta_box', 'post', 'normal', 'high');
}
add_action('add_meta_boxes', 'my_custom_meta_box');
function display_my_meta_box($post) {
$custom_text = get_post_meta($post->ID, 'custom_text', true);
echo '<input type="text" name="custom_text" value="' . $custom_text . '"/>';
}
function save_my_meta_box_data($post_id) {
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if ($parent_id = wp_is_post_revision($post_id))
$post_id = $parent_id;
if (isset($_POST['custom_text'])) {
update_post_meta($post_id, 'custom_text', $_POST['custom_text']);
}
}
add_action('save_post', 'save_my_meta_box_data');
And voila! You now know how to add a custom meta box in WordPress without a plugin. This opens up a whole new world of customization for your posts and pages. Remember, with great power comes great responsibility! Until next time, happy coding! 🚀
Enables the creation of unique, personalized landing pages at scale by offering unlimited placeholders for dynamic content.
Essential for crafting content-rich, unique pages for each visitor or target group, optimizing for local SEO, e-commerce variability, or specific event details.