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 toadd_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. Theregister_post_type()
function is used to customize the article type, and its parameter array containsregister_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 theupdate_post_meta()
oradd_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 thecontext
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 thepost_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!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

When managing WordPress projects with Git, you should only include themes, custom plugins, and configuration files in version control; set up .gitignore files to ignore upload directories, caches, and sensitive configurations; use webhooks or CI tools to achieve automatic deployment and pay attention to database processing; use two-branch policies (main/develop) for collaborative development. Doing so can avoid conflicts, ensure security, and improve collaboration and deployment efficiency.

Use WordPress testing environments to ensure the security and compatibility of new features, plug-ins or themes before they are officially launched, and avoid affecting real websites. The steps to build a test environment include: downloading and installing local server software (such as LocalWP, XAMPP), creating a site, setting up a database and administrator account, installing themes and plug-ins for testing; the method of copying a formal website to a test environment is to export the site through the plug-in, import the test environment and replace the domain name; when using it, you should pay attention to not using real user data, regularly cleaning useless data, backing up the test status, resetting the environment in time, and unifying the team configuration to reduce differences.

In WordPress, when adding a custom article type or modifying the fixed link structure, you need to manually refresh the rewrite rules. At this time, you can call the flush_rewrite_rules() function through the code to implement it. 1. This function can be added to the theme or plug-in activation hook to automatically refresh; 2. Execute only once when necessary, such as adding CPT, taxonomy or modifying the link structure; 3. Avoid frequent calls to avoid affecting performance; 4. In a multi-site environment, refresh each site separately as appropriate; 5. Some hosting environments may restrict the storage of rules. In addition, clicking Save to access the "Settings>Pinned Links" page can also trigger refresh, suitable for non-automated scenarios.

The key to creating a Gutenberg block is to understand its basic structure and correctly connect front and back end resources. 1. Prepare the development environment: install local WordPress, Node.js and @wordpress/scripts; 2. Use PHP to register blocks and define the editing and display logic of blocks with JavaScript; 3. Build JS files through npm to make changes take effect; 4. Check whether the path and icons are correct when encountering problems or use real-time listening to build to avoid repeated manual compilation. Following these steps, a simple Gutenberg block can be implemented step by step.

To implement responsive WordPress theme design, first, use HTML5 and mobile-first Meta tags, add viewport settings in header.php to ensure that the mobile terminal is displayed correctly, and organize the layout with HTML5 structure tags; second, use CSS media query to achieve style adaptation under different screen widths, write styles according to the mobile-first principle, and commonly used breakpoints include 480px, 768px and 1024px; third, elastically process pictures and layouts, set max-width:100% for the picture and use Flexbox or Grid layout instead of fixed width; finally, fully test through browser developer tools and real devices, optimize loading performance, and ensure response

TosetupredirectsinWordPressusingthe.htaccessfile,locatethefileinyoursite’srootdirectoryandaddredirectrulesabovethe#BEGINWordPresssection.Forbasic301redirects,usetheformatRedirect301/old-pagehttps://example.com/new-page.Forpattern-basedredirects,enabl

UsingSMTPforWordPressemailsimprovesdeliverabilityandreliabilitycomparedtothedefaultPHPmail()function.1.SMTPauthenticateswithyouremailserver,reducingspamplacement.2.SomehostsdisablePHPmail(),makingSMTPnecessary.3.SetupiseasywithpluginslikeWPMailSMTPby

Tointegratethird-partyAPIsintoWordPress,followthesesteps:1.SelectasuitableAPIandobtaincredentialslikeAPIkeysorOAuthtokensbyregisteringandkeepingthemsecure.2.Choosebetweenpluginsforsimplicityorcustomcodeusingfunctionslikewp_remote_get()forflexibility.
