Adding Meta Boxes to Post Types in WordPress

WordPress website builders or developers often use Meta Boxes. This article will dive into the association and integration of metaboxes with custom article types, and how to use data saved in the WordPress front-end using metaboxes.

Core points

• Use the add_meta_box() function (mount to add_meta_boxes action) to add metaboxes to any article type editing interface. This function can be used to add metaboxes to multiple article types (such as articles, pages, and custom article types "books"), or to all existing and future created article types.
• The metabox can be restricted to a specific article type by appending the article type name to the add_meta_boxes action hook. The register_post_type() function is used to customize the article type, and its parameter array contains register_meta_box_cb, whose value is the callback function called when setting the metabox.
The
• global_notice_meta_box_callback function contains the form fields of the metabox. save_post Action hooks process data saved to text areas when saving articles as drafts or publishing. This data can be effectively utilized by displaying the data entered in the meta box before saving the corresponding article content.

Add the metabox to the article type screen

Narayan Prusty has covered most, if not all, PHP functions, parameters, and action hooks that create metaboxes.

To add a metabox to any article type editing screen, you can use the add_meta_box() function and attach it to the add_meta_boxes action.

The following code adds the metabox to the article editing screen. Note the global_notice_meta_box_callback function, which is used to display form fields in the metabox. We will introduce it in detail later.

function global_notice_meta_box() {
    add_meta_box(
        'global-notice',
        __( '全局公告', 'sitepoint' ),
        'global_notice_meta_box_callback',
        'post'
    );
}
add_action( 'add_meta_boxes', 'global_notice_meta_box' );

To add a metabox to multiple post type screens (article, page, and custom post type "book"), create an article type array, loop through the array, and add it to these posts using add_meta_box() in type.

function global_notice_meta_box() {
    $screens = array( 'post', 'page', 'book' );
    foreach ( $screens as $screen ) {
        add_meta_box(
            'global-notice',
            __( '全局公告', 'sitepoint' ),
            'global_notice_meta_box_callback',
            $screen
        );
    }
}
add_action( 'add_meta_boxes', 'global_notice_meta_box' );

To add a metabox to all existing and future created article types, use get_post_types() to get the article type array and replace the above $screen value with it.

function global_notice_meta_box() {
    $screens = get_post_types();
    foreach ( $screens as $screen ) {
        add_meta_box(
            'global-notice',
            __( '全局公告', 'sitepoint' ),
            'global_notice_meta_box_callback',
            $screen
        );
    }
}
add_action( 'add_meta_boxes', 'global_notice_meta_box' );

Metabox can also be added to all existing and new post types by omitting the third ($screen) parameter:

function global_notice_meta_box() {
    add_meta_box(
        'global-notice',
        __( '全局公告', 'sitepoint' ),
        'global_notice_meta_box_callback'
    );
}
add_action( 'add_meta_boxes', 'global_notice_meta_box' );

You can also limit the metabox to a specific article type by attaching the article type name (in this case "book") to the add_meta_boxes action hook:

function global_notice_meta_box() {
    add_meta_box(
        'global-notice',
        __( '全局公告', 'sitepoint' ),
        'global_notice_meta_box_callback'
    );
}
add_action( 'add_meta_boxes_book', 'global_notice_meta_box' );

The

register_post_type() function is used to customize the article type, and its parameter array contains register_meta_box_cb, and its value is the callback function called when setting the metabox.

Suppose we create a custom article type called "book" using the following code:

function global_notice_meta_box() {
    add_meta_box(
        'global-notice',
        __( '全局公告', 'sitepoint' ),
        'global_notice_meta_box_callback',
        'post'
    );
}
add_action( 'add_meta_boxes', 'global_notice_meta_box' );

Adding the global_notice_meta_box function definition in the register_meta_box_cb PHP function (the value of add_meta_box() above) will add the metabox to the editing screen of the "book" custom article type.

Again, this is our example global_notice_meta_box function.

function global_notice_meta_box() {
    $screens = array( 'post', 'page', 'book' );
    foreach ( $screens as $screen ) {
        add_meta_box(
            'global-notice',
            __( '全局公告', 'sitepoint' ),
            'global_notice_meta_box_callback',
            $screen
        );
    }
}
add_action( 'add_meta_boxes', 'global_notice_meta_box' );

So far, we have learned various ways to register or add metaboxes in WordPress. We also need to create the global_notice_meta_box_callback function that will contain the form fields of our metabox.

The following is the code for the global_notice_meta_box_callback function that will contain a text area field in the metabox.

function global_notice_meta_box() {
    $screens = get_post_types();
    foreach ( $screens as $screen ) {
        add_meta_box(
            'global-notice',
            __( '全局公告', 'sitepoint' ),
            'global_notice_meta_box_callback',
            $screen
        );
    }
}
add_action( 'add_meta_boxes', 'global_notice_meta_box' );

save_post Action hooks process data saved to text areas when saving articles as drafts or publishing.

function global_notice_meta_box() {
    add_meta_box(
        'global-notice',
        __( '全局公告', 'sitepoint' ),
        'global_notice_meta_box_callback'
    );
}
add_action( 'add_meta_boxes', 'global_notice_meta_box' );

To use the data entered in the text area of ​​the metabox, we will display the data before it is displayed to save the corresponding article content.

function global_notice_meta_box() {
    add_meta_box(
        'global-notice',
        __( '全局公告', 'sitepoint' ),
        'global_notice_meta_box_callback'
    );
}
add_action( 'add_meta_boxes_book', 'global_notice_meta_box' );

Code explanation

First, we create a global_notice_before_post function and attach it to a the_content filter with a $content parameter that contains the article content.

Inside the function, we include the global $post variable, which contains the WP_Post object of the article currently being viewed.

Retrieve global announcements saved for a given article by get_post_meta and save them to the $global_notice variable.

Then wrap the announcement in a div and save it in the $notice variable.

Finally, connect the $notice with the global announcement with the $content with the actual article content.

The following is a screenshot of the article with the global announcement before the article content.

Summary

In this tutorial, we learned a variety of ways to register metaboxes in WordPress management screens and how to limit them to article types.

We also reviewed how to add form fields to the metabox and how to save input data when saving or publishing an article.

Finally, we introduce how to put the data entered into the metabox into practice.

In future articles, we will cover how to add context help tabs to the article type management screen.

If you have any questions or suggestions, please feel free to ask them in the comments.

FAQs on adding metaboxes to article types in WordPress

• What is a metabox in WordPress? Metaboxes in WordPress are draggable boxes that are displayed in the admin interface. These boxes are used to display additional input fields, allowing users to customize the functionality and layout of different types of articles. They can be added to articles, pages, and custom post types. Metaboxes can contain various types of fields, including text, check boxes, selection options, and more.

• How to add metaboxes to custom post types in WordPress? To add a metabox to a custom post type in WordPress, you need to use the add_meta_box() function. This function allows you to specify the metabox ID, title, callback function, article type, context, and priority. The callback function is used to output the contents of the metabox.

• Can I add multiple metaboxes to a single article type? Yes. Each metabox should have a unique ID to avoid conflicts. You can use the add_meta_box() function multiple times and use different parameters to add multiple metaboxes.

• How to save data entered into the metabox field? To save data entered into the metabox field, you need to attach a function to the save_post action. This function should check nonce, verify the permissions of the current user, and then use the update_post_meta() or add_post_meta() functions to save the metabox data to the database.

• How to display metabox data on the front end? To display metabox data on the front end, you can use the get_post_meta() function in the loop. This function retrieves metabox data from the database and returns it as a string, which you can then output in the template file.

• Can I add metaboxes to the page and to the article? Yes. When using the add_meta_box() function, you can specify the article type as "page" to add a metabox to the page.

• How to delete metaboxes from article types? The remove_meta_box() function can be used. This function requires the metabox ID and article type as parameters.

• Can I customize the position of the metabox in the article editing screen? Yes. The add_meta_box() parameter of the context function determines the position of the metabox. Possible values ​​are "normal", "side", and "advanced".

• Can I add a metabox to a custom post type created by the plugin? Yes. You just need to know the slug for the custom article type and use it as the add_meta_box() parameter in the post_type function.

• How to style metaboxes and their fields? You can use CSS to style metaboxes and their fields. The metabox will have a "postbox" class, where you can add your own class to the fields in the metabox. You can then locate these classes in CSS to apply styles.

The above is the detailed content of Adding Meta Boxes to Post Types in WordPress. For more information, please follow other related articles on the PHP Chinese website!