How to Add Custom Meta Boxes in WordPress Posts

Do you want to add custom meta boxes to your WordPress pages, and custom post types? Creating meta boxes is a crucial part of WordPress theme development. Adding meta boxes means adding an appealing editor to the post screen and avoids forcing users to rely on custom fields.

Generally, meta boxes consist data and form fields, which allow admins to add/edit/delete posts metadata.

Although, WordPress allows us to add custom meta boxes to your posts, pages, and custom post types via the admin interface. It also provides APIs to customize the default meta boxes.

What Is Custom Meta Box?

The Custom Meta Box is a user-friendly interface that allows us to add additional information to your posts, pages, and other custom post types. It is a draggable box displayed in the post editing screen in the backend of WordPress.

Generally, each content type consists of the actual content and its metadata. Adding metadata using the default custom fields box is not always intuitive. WordPress allows developers to create and add their own custom meta boxes on post edit screens.

Adding Custom Meta Box:

Creating custom meta boxes via code is quite tricky. So to ease this task, there is a plugin available named as Advanced Custom Fields plugin.

Advanced Custom Fields is a WordPress plugin which allows you to add custom meta boxes or content fields to your WordPress edit screens. The plugin tailor the fields you want to show.

Installation:

WordPress makes it easy very easy process to install any plugin.

  • Simply log in to your WordPress site.
  • Search for Advanced Custom Fields and install it.
  • Activate the plugin.
  • A new menu item labeled ‘Custom Fields’ to your WordPress admin bar.

Creating a Custom Meta Boxes:

  • Click on the Custom Fields that added to the admin bar. It will redirect you to the custom fields page.

How to Add Custom Meta Boxes in WordPress Posts

  • Click on the ‘Add New’ to create a new custom field. It will bring you to the ‘Add New Field Group’ page.

Now, it’s time to add start editing your content.

How to Add Custom Meta Boxes in WordPress Posts

  • Provide a title to your newly added field. It will be considered as the title of your meta box.
  • Next, select the field type. There is a whole range of options available for example, text, images, radio buttons, check boxes, full WYSIWYG editor, etc.
  • Provide the field instructions that will tell you what to add into the field.
  • There are also other options available if you want to fill (as per your need).
  • Click on the close field button to collapse the field.
  • Now, scroll down to location section. Here you can define when and where you want your meta box to be displayed.

How to Add Custom Meta Boxes in WordPress Posts

  • Now, jump on the meta box options settings.
  • First at all, choose the order number. Select the proper order number, if you have multiple field groups defined for one location.
  • Next, choose the meta box position on the page.
  • Below that, there is an option available to choose a style for your meta box.

At last, you will see the list of fields that you have created. Here, you can hide the field if you want by checking here. The best way is to keep unchecked.

  • Click on Publish.

Now, You are done with adding a custom meta box to your WordPress post or post type.

As you successfully added the meta field, it is also necessary to show it on your edit screen. So, your next step will be displaying the data stored in those fields on your WordPress theme.

How to Add Custom Meta Boxes in WordPress Posts

To do so, edit the custom field group on the ‘Edit Field Group’ page you created earlier.

You will need the field name to display on your site. There are 2 ways to do this.

  1. Using a shortcode
  2. Adding few lines of code to your WordPress theme files

Using Shortcode:

[acf field="article_byline"]

You can use following shortcode to display a custom field into your post.

Adding few lines of code to your WordPress theme files:

Here, you need to edit the theme file where you want to display the data. While doing this, make sure that you are adding code in WordPress loop.

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

<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

<?php endwhile; // end of the loop. ?>

The code will also help in formatting and style the custom field later while adding custom CSS into our theme.

Now check if the custom field is added to the post where you have previously entered the data. There will be your Custom Meta Data displayed.

Wrapping Words:

I know, adding a Custom Meta Box to your post is quite tricky. ACF made it easy with its powerful options.

I hope this step by step guide helped you in adding custom fields to your WordPress posts or post types. You can add any type of field as a subfield which allows you to create and manage very customized data with ease.

ALSO READ

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Comment Policy: Your words are your own, so be nice and helpful if you can. Please, only use your real name and limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

GET STARTED

Start WordPress Blog: Ultimate Guide For Beginners

Here is our step by step guide for beginners to start a WordPress blog.

Top 6 Best WordPress Theme Frameworks

There are many websites themes which are created by using a framework. Likewise, WordPress Theme frameworks also becoming so popular. The framework allows you...

The Most Essential WordPress Plugins

Here, I have listed some excellent plugins which will surely add more features and new functionality to your WordPress blog.

Tips to Speed Up WordPress Performance

Here, I am sharing some tips to speed up WordPress performance. All you need to modify .htaccess file on your server and add some plugins.

The Ultimate Guide to Harden WordPress Security

Learn how to improve WordPress security. Here are some basic security concepts that will help you to harden WordPress security.

How to Setup CloudFlare Free SSL for WordPress Blog

Google has announced that they will count HTTPS as a ranking factor which means if you using HTTPS you will get a higher position...

DEALS

MonsterInsights

MonsterInsights is the best Google Analytics plugin for WordPress. Setup Google Analytics for WordPress with just a few clicks.

POPULAR NOW

Get almost 100% PageSpeed on Newspaper theme

The newspaper theme is the most popular premium theme for a self-hosted WordPress blog. The theme is developed by team tagDiv. You...

How To Reduce Admin-Ajax Server Load In WordPress

To increase better user experience, we always end up by increasing site speed. After clicking a website link seems like a simple thing. But...

How to setup CloudFlare CDN for WordPress blog

In today's world website speed is a crucial element to getting good ranks on the web. Website speed also aids for indexing your site...

How to Remove jQuery Migrate in WordPress?

jQuery Migrate greatly simplifies the process of moving older jQuery code to a higher jQuery version by identifying deprecated features. It then restores deprecated...

How to Delete Multiple Images in WordPress Media Gallery

Hey, guys today one of my friends asked me a question, How can I delete Multiple Images in WordPress? I replied, "It's very simple." Yeah,...

How to Fix Specify a Vary: Accept-Encoding Header Warning

You regularly check your site loading speed. Right? No doubt, it is essential to run a successful blog or site. While checking site loading...