A custom metabox in WordPress allows you to add additional fields to the editing screen of a post, page, or custom post type. This can be useful for adding extra information or functionality to your content. Here’s a step-by-step guide to creating a custom metabox:

Using Code in Your Theme’s functions.php

  1. Open your theme’s functions.php file:
  • Access it through your WordPress dashboard by navigating to Appearance > Theme Editor and selecting functions.php.
  • Alternatively, use a code editor and access the file directly through your theme folder.
  1. Add Custom Metabox Code:
   // Add custom metabox
   function custom_metabox() {
       add_meta_box(
           'custom_metabox_id',            // Unique ID
           'Custom Metabox Title',         // Metabox title
           'custom_metabox_callback',      // Callback function to display the metabox content
           'post',                         // Post type (e.g., 'post', 'page', 'custom_post_type')
           'normal',                       // Context (normal, advanced, side)
           'high'                          // Priority (high, core, default, low)
       );
   }

   add_action('add_meta_boxes', 'custom_metabox');

   // Metabox callback function
   function custom_metabox_callback($post) {
       // Retrieve existing value from the database
       $custom_value = get_post_meta($post->ID, '_custom_value', true);

       // HTML for the custom field
       ?>
       <label for="custom_value">Custom Field:</label>
       <input type="text" id="custom_value" name="custom_value" value="<?php echo esc_attr($custom_value); ?>" style="width: 100%;">
       <?php
   }

   // Save custom metabox data
   function save_custom_metabox($post_id) {
       if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;

       if (isset($_POST['custom_value'])) {
           update_post_meta($post_id, '_custom_value', sanitize_text_field($_POST['custom_value']));
       }
   }

   add_action('save_post', 'save_custom_metabox');
  1. Modify the Code:
  • Change instances of “Custom Metabox Title,” “custom_metabox_id,” and “_custom_value” with your desired labels and field names.
  • Adjust the HTML and styling in the custom_metabox_callback function according to your needs.
  1. Save Changes:
  • Save the changes to your functions.php file.
  1. Check the Admin Dashboard:
  • Visit the editing screen of a post or page in your WordPress admin dashboard, and you should see your custom metabox.

Explanation of the Code:

  • The add_meta_box function is used to register the metabox. Adjust parameters like title, callback function, post type, context, and priority according to your requirements.
  • The custom_metabox_callback function is the callback function that renders the content of the metabox. It includes an input field for the custom value.
  • The save_custom_metabox function is responsible for saving the custom field value when the post is saved.

Remember to customize the code to fit your specific use case. This example provides a simple text input field, but you can expand it to include various types of fields such as checkboxes, radio buttons, or even a WYSIWYG editor.

PHP, Wordpress

Tagged in:

,