This website uses cookies to allow us to see how the site is used. If you continue to use this site, we assume that you are okay with this. If you want to use the sites without cookies, please see our privacy policy.

How to add metaboxes to your plugin settings page

A handy snippet for plugin developers…

<?php
/**
 * Plugin Name: Metaboxes on Plugin Setings Pages
 * Description: How to add metaboxes to your plugin settings page
 * Version:     1.0
 * Author:      malCure
 * Author URI:  https://malcure.com/
 * Text Domain: malcure
 * License:     MIT
 * License URI: https://opensource.org/licenses/MIT
 * Plugin URI:  https://malcure.com/
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

final class my_metaboxes_init {
	static function get_instance() {
		static $instance = null;
		if ( is_null( $instance ) ) {
			$instance = new self();
			$instance->init();
		}
			return $instance;
	}

	private function __construct() {
	}

	function init() {
		add_action( 'admin_menu', array( $this, 'settings_menu' ) );
		add_action( 'load-toplevel_page_malcure', array( $this, 'load_meta_boxes' ) );
		add_action( 'load-toplevel_page_malcure', array( $this, 'add_meta_boxes' ) );
		add_action( 'load-toplevel_page_malcure', array( $this, 'add_admin_scripts' ) );
	}

	function settings_menu() {
		add_menu_page( 'My Plugin Settings', 'My Plugin Settings', 'manage_options', 'malcure', array( $this, 'settings_page' ), 'dashicons-chart-pie', 79 );
	}

	function load_meta_boxes() {
		add_action( 'add_meta_boxes', array( $this, 'my_plugin_metaboxes' ) );
	}

	function add_meta_boxes() {
		do_action( 'add_meta_boxes', 'toplevel_page_malcure', '' );
	}

	function add_admin_scripts() {
		wp_enqueue_script( 'jquery' );
		wp_enqueue_script( 'common' );
		wp_enqueue_script( 'wp-lists' );
		wp_enqueue_script( 'postbox' );
	}

	function settings_page() {
		?>
		<div class="wrap">
		<h1 id="page_title">My Settings Page Heading</h1>
			<div id="poststuff">
				<div class="metabox-holder columns-2" id="post-body">
					<div class="postbox-container" id="post-body-content">
						<?php do_meta_boxes( 'toplevel_page_malcure', 'main', null ); ?>
					</div>
					<!-- #postbox-container -->
					<div id="postbox-container-1" class="postbox-container">
						<?php
								do_meta_boxes( 'toplevel_page_malcure', 'side', null );
						?>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		//<![CDATA[
		jQuery(document).ready(function($) {
			// close postboxes that should be closed
			$('.if-js-closed').removeClass('if-js-closed').addClass('closed');
			// postboxes setup
			postboxes.add_postbox_toggles('toplevel_page_malcure');
		});
		//]]>
		</script>
		<?php
	}

	function my_plugin_metaboxes() {
		add_meta_box( 'my_first_metabox', 'My First Metabox', array( $this, 'my_first_metabox_html' ), 'toplevel_page_malcure', 'main', 'high' );
		add_meta_box( 'my_second_metabox', 'My Second Metabox', array( $this, 'my_second_metabox_html' ), 'toplevel_page_malcure', 'side', 'high' );
	}

	function my_first_metabox_html() {
		?>
		Howdy! I'm your first custom metabox. Now with some WordPress and PHP magic you can customize me as you like.
		<?php
	}

	function my_second_metabox_html() {
		?>
		Meanwhile, I'll sit in the side. I'm your second custom metabox.
		<?php
	}

}


function my_metaboxes_init() {
	return my_metaboxes_init::get_instance();
}

my_metaboxes_init();