How to Add Custom Meta Boxes to WordPress Posts and Custom Post Types (Step-by-Step Guide)

Need to enhance your WordPress site's content editing with custom meta boxes for posts, pages, or custom post types? As experienced WordPress developers, we've relied on custom meta boxes for years to streamline metadata input and improve user experience. In this comprehensive guide, we'll demystify custom meta boxes and walk you through adding them effortlessly.

What Are Custom Meta Boxes in WordPress?

Custom meta boxes provide an intuitive interface for adding metadata to posts, pages, and custom post types—far superior to the default custom fields box.

WordPress offers a user-friendly editor for content creation, but metadata like dates, authors, and titles are stored separately. While basic custom fields work, they're clunky. Custom meta boxes, popularized by plugins like Yoast SEO, deliver a polished experience.

For instance, Yoast's SEO meta box is a prime example:

Let's dive into creating your own using the trusted Advanced Custom Fields (ACF) plugin.

Step 1: Creating Custom Meta Boxes with ACF

Install and activate the Advanced Custom Fields plugin—our go-to tool for robust custom fields. For installation help, see our step-by-step plugin guide.

ACF adds a "Custom Fields" menu in your admin dashboard. Click it, then "Add New" to create your first field group.

Enter a title for your meta box (e.g., "Product Details"). Click "+ Add Field" to configure fields.

Set a field label (e.g., "Product Line"), choose a type (text, textarea, image, etc.), and add instructions for users. Fine-tune options like required fields or conditional logic, then close the panel.

Add more fields as needed:

In the "Location" section, define display rules (e.g., specific post types):

Set meta box options: order (default 0), position (normal, side), style (standard), and hide default fields if desired.

Publish the field group. Your meta box now appears on targeted edit screens:

Save posts to store data securely in your database.

Step 2: Displaying Custom Meta Data in Your Theme

Edit your field group to note field names (e.g., "articulo_linea").

Use ACF shortcodes like [acf field="articulo_linea"] for quick display, or PHP in theme files (e.g., single.php). Always add inside the Loop:

<?php while (have_posts()) : the_post(); ?>

Output code example:

<?php if(get_field('articulo_linea')) { ?>
  <h2 class="articulo-linea"><?php the_field('articulo_linea'); ?></h2>
<?php } ?>

Another example:

<?php if(get_field('texto_adicional')) { ?>
  <div class="texto-adicional"><?php the_field('texto_adicional'); ?></div>
<?php } ?>

<?php endwhile; ?>

Replace with your field names. Style with CSS classes. View your post to see live data:

ACF offers endless customization—explore its documentation for advanced features.

This guide equips you to supercharge your WordPress site. For more, check our speed optimization guide. Subscribe to our YouTube channel, follow on Twitter and Facebook for updates.