How to create custom meta boxes in wordpress?

In this article we will teach you how to create custom meta boxes in wordpress.

A meta box is a draggable box shown on the post or page editing screen. Its purpose is to allow the user to enter information in addition to the main post or page content. This information should be related to the post or page in some way.

Basically, WordPress has some default meta boxes like Editor, Custom Fields, Featured Image, Categories, and Tags on a post, page or custom post type admin interface are default meta boxes. But sometimes we need some extra information to our post, page or article like author, biography, address, post class, SEO tags etc. So, for this we can create our custom meta boxes with custom fields.

We can create the meta boxes with two methods.

Method 1 : Create Meta Boxes in WordPress with Plugin

If you want to create custom meta boxes with plugin. Then you can use the plugin MetaBox – WordPress Custom Fields Framework. Meta Box is a powerful, professional, and lightweight toolkit for developers to add unlimited custom meta boxes and WordPress custom fields.

Here are just a few of the data types you can customize with this plugin:

  • Posts
  • Pages
  • Custom post types
  • Taxonomies
  • Settings pages
  • Theme option pages
  • User profile pages
  • Post comments
  • And even more data types

Method 2 : Create Meta Boxes in WordPress without plugin

If you want to create custom meta boxes without plugin. Then paste the code given below in your functions.php file. Here we are creating Song Author meta box.

/*add custom meta box*/

/* Create one or more meta boxes to be displayed on the post editor screen. */
function rmc_add_post_meta_boxes() {

  add_meta_box(
    'rmc-song-author',      // Unique ID
    esc_html__( 'Song Author', 'twentytwenty' ),    // Title
    'rmc_song_author_meta_box',   // Callback function
    'songs',         // Admin page (or post type)
    'side',         // Context
    'default'         // Priority
  );
}

/* Fire our meta box setup function on the post editor screen. */
add_action( 'load-post.php', 'rmc_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'rmc_post_meta_boxes_setup' );


/* Display the post meta box. */
function rmc_song_author_meta_box( $post ) { ?>

  <?php wp_nonce_field( basename( __FILE__ ), 'rmc_song_author_nonce' ); ?>

  <p>
    <label for="rmc-song-author"><?php _e( "Add a Song Author Name.", 'twentytwenty' ); ?></label>
    <br />
    <input class="widefat" type="text" name="rmc-song-author" id="rmc-song-author" value="<?php echo esc_attr( get_post_meta( $post->ID, 'rmc_song_author', true ) ); ?>" />
  </p>
<?php }


/* Meta box setup function. */
function rmc_post_meta_boxes_setup() {

  /* Add meta boxes on the 'add_meta_boxes' hook. */
  add_action( 'add_meta_boxes', 'rmc_add_post_meta_boxes' );

  /* Save post meta on the 'save_post' hook. */
  add_action( 'save_post', 'rmc_save_song_author_meta', 10, 2 );
}


/* Save the meta box’s post metadata. */
function rmc_save_song_author_meta( $post_id, $post ) {

  /* Verify the nonce before proceeding. */
  if ( !isset( $_POST['rmc_song_author_nonce'] ) || !wp_verify_nonce( $_POST['rmc_song_author_nonce'], basename( __FILE__ ) ) )
    return $post_id;

  /* Get the post type object. */
  $post_type = get_post_type_object( $post->post_type );

  /* Check if the current user has permission to edit the post. */
  if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
    return $post_id;

  /* Get the posted data and sanitize it for use as an HTML class. */
  $new_meta_value = ( isset( $_POST['rmc-song-author'] ) ? sanitize_html_class( $_POST['rmc-song-author'] ) : ’ );

  /* Get the meta key. */
  $meta_key = 'rmc_song_author';

  /* Get the meta value of the custom field key. */
  $meta_value = get_post_meta( $post_id, $meta_key, true );

  /* If a new meta value was added and there was no previous value, add it. */
  if ( $new_meta_value && ’ == $meta_value )
    add_post_meta( $post_id, $meta_key, $new_meta_value, true );

  /* If the new meta value does not match the old value, update it. */
  elseif ( $new_meta_value && $new_meta_value != $meta_value )
    update_post_meta( $post_id, $meta_key, $new_meta_value );

  /* If there is no new meta value but an old value exists, delete it. */
  elseif ( ’ == $new_meta_value && $meta_value )
    delete_post_meta( $post_id, $meta_key, $meta_value );
}

/*add custom meta box*/

In the code above we used the function add_meta_box and we have used two hook add_meta_boxes, save_post. We have also used the function add_post_meta, update_post_meta, delete_post_meta. You can read in detail by click on these links. We have also used the post type songs and you can read our article how to create custom post type in wordpress.

You can also use default post types post or page also.

That’s it Now using this article you can add custom meta boxes in wordpress, create custom fields in wordpress with or without plugin.

If you want more tutorials and tricks about wordpress then visit our WordPress Page and follow us on facebook, twitter, tumblr, linkdedin and if you like this article then share this.

2024 - RMC