How to Create a Custom Panel and Fields in Post Page [Plugin]

Question

I would like to write a custom plugin that adds a custom panel below the post compose panel that will have a few fields and a submit button. JS will kick-in to submit content to the database, without saving or interfering with the post save/submit mechanism.

The purpose is to save data to be used and quickly access while writing a post. I could do a plugin settings page, but I don't like the idea of using two screens when it can be done at the same place :)

I saw the Custom Fields plugins, but they add value to a post while I want something more flexible that is created while writing a post but not necessarily linked to this post.

I can't seem to find how to do this...

Thanks!

Answer 1

In the WordPress World it is called "Meta box" and in your case it would be the same as for posts the only thing you would need to do different is the save function that should save the data in the options table , here is a modified example from the codex that should work for you as a starting point:

<?php
/* Define the custom box */
add_action( 'add_meta_boxes', 'myplugin_add_custom_box_WPA83147' );

/* Adds a box to the main column on the Post and Page edit screens */
function myplugin_add_custom_box_WPA83147() {
  add_meta_box( 
      'myplugin_sectionid',
      __( 'My Post Section Title', 'myplugin_textdomain' ),
      'myplugin_inner_custom_box_WPA83147',
      'post' 
  );
}

/* Prints the box content */
function myplugin_inner_custom_box_WPA83147( $post ) {

  // Use nonce for verification
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename_WPA83147' );

  // The actual fields for data entry
  // Use get_option to retrieve an existing value from the database and use the value for the form
  $options = get_option('_WPA83147_options', array());
  echo '<label for="myplugin_new_field">';
       _e("Description for this field", 'myplugin_textdomain' );
  echo '</label> ';
  echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="'.(isset($options['myplugin_new_field']) ? $options['myplugin_new_field'] : "").'" size="25" />';
}


/* Do something with the data entered */
add_action( 'save_post', 'myplugin_save_postdata_WPA83147' );
/* When the post is saved, saves our custom data */
function myplugin_save_postdata_WPA83147( $post_id ) {
  // verify if this is an auto save routine. 
  // If it is our form has not been submitted, so we dont want to do anything
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return;

  // verify this came from the our screen and with proper authorization,
  // because save_post can be triggered at other times

  if ( !wp_verify_nonce( $_POST['myplugin_noncename_WPA83147'], plugin_basename( __FILE__ ) ) )
      return;


  // Check permissions
  if ( 'page' == $_POST['post_type'] ) 
  {
    if ( !current_user_can( 'edit_page', $post_id ) )
        return;
  }
  else
  {
    if ( !current_user_can( 'edit_post', $post_id ) )
        return;
  }

  // OK, we're authenticated: we need to find and save the data
  if (isset($_POST['myplugin_new_field'])){
    //sanitize user input
    $mydata = sanitize_text_field( $_POST['myplugin_new_field'] ); 
    //get all saved options
    $data = get_option('_WPA83147_options', array());
    //updated the field you need
    $data['myplugin_new_field'] = $mydata;
    //store in the database
    update_option('_WPA83147_options', $$data);
  }

}