WordPress metaboxes Object Oriented way…..

This is something that I’ve been meaning to do for a while but didn’t get around to it till recently, or rather, mid November last year. I wanted a neat, clean, Object Oriented way to create metaboxes in WordPress, which would be light & fast, and yet flexible enough to allow override on both UI render and data validation/sanitization. The other requirement was that I was looking to over-haul some old code that we’ve been using at PMC (my employer), so naturally the code has to be WordPress.com VIP compliant as pretty much all our sites are hosted there. And because I’ve the uncurable itch to roll my own thing, I just had to do it! 😉

So without further ado, let’s see how this new thing works. WordPress starts creating metaboxes on add_meta_boxes action, so calling this API and enqueuing your metaboxes anytime before add_meta_boxes is run will be good enough.

		
			$metabox = new iG\Metabox\Metabox( 'my-metabox-1' );

$metabox->set_title( 'My 1st Metabox' )
		->set_context( 'normal' )
		->set_priority( 'default' )
		->set_css_class( 'my-1st-metabox' )
		->set_post_type( 'post' )
		->set_post_type( 'custom-post-type' )

		// Call set_post_type() for each post type or
		// pass them all as array to set_post_types()
		->set_post_types( array(
			'custom-post-type-2', 'custom-post-type-3'
		) )
		->add_field(	//add a simple text input field
			iG\Metabox\Text_Field::create( 'my-txt-1', 'My 1st Text Field 1' )
							->set_description( 'Some Desc for 1st Field' )
							->set_css_class( 'my-txt-css-1' )
							->set_placeholder( 'Enter the first text here' )
							->set_size( 50 )
		)
		->add_field(	//add a checkbox toggle
			iG\Metabox\Checkbox_Field::create( 'my-toggle-1', 'Flag Toggle' )
								->set_description( '1st Toggle Switch' )
								->set_value( 'yes' )
		)
		->add_field(	//add a HTML5 number input field
			iG\Metabox\Number_Field::create( 'my-num-1', 'My Number Field A' )
								->set_description( 'Some Desc for 1st Number Field' )

								// Call set_css_class() for each class or
								// pass them all as array to
								// set_css_classes()
								->set_css_classes( array(
									'my-num-fld-1', 'x-custom-flds'
								) )
								->set_placeholder( 'Enter the a number here' )

								// Make numbers incrementable or
								// reducable by 2.5
								->set_step( 2.5 )
		)
		->add_field(	//add a radio button group
			iG\Metabox\Radio_Group::create( 'my-rdg-1', 'My Radio Group A' )
								->set_description( 'Some Desc for 1st Radio Group' )
								->set_css_class( 'my-rdg-css-1' )
								->set_values( array(
									'apple' => 'Apple',
									'grape' => 'Grape',
									'banana' => 'Banana',
									'orange' => 'Orange',
									'peach' => 'Peach',
								) )
		)
		->add();		
	

This code, when run, will create a new metabox named My 1st Metabox on the add/edit screens of post types post, custom-post-type, custom-post-type-2 & custom-post-type-3 in wp-admin containing a text input field, a checkbox to act as toggle switch for a flag, a HTML5 number field and a radio button group. Besides rendering this whole UI, the library would also save all these values in post-meta of the said post (when the post is saved) and those values would be retreivable using the normal get_post_meta() API call of WordPress.

Here’s an example:

		
			$txt_field = get_post_meta( $post_id, 'my-txt-1', true );
$cb_toggle_field = get_post_meta( $post_id, 'my-toggle-1', true );
$number_field = get_post_meta( $post_id, 'my-num-1', true );
$radio_field = get_post_meta( $post_id, 'my-rdg-1', true );		
	

Its just as simple, no fuss no muss. Each field type has its own class which inherits the iG\Metabox\Field abstract class. So the library follows the Single Responsibility principle whereby every class has only one focus & a single class does not try to do everything.

Here are some more tid-bits:

• Every field API has set_render_callback() to which you can pass a callback which would be responsible for rendering the HTML for that field. Your callback would have to return the HTML for the field and not echo it out.
• Every field API has set_sanitize_callback() to which you can pass a callback which would be responsible for sanitizing the data of that field. You can set different parameters to be passed to your callback by passing them in an array as second parameter of set_sanitize_callback() and all those would be passed to your callback in same order from second parameter onwards, ie., first parameter passed to your callback would always be field data that is to be sanitized and then your additional callback parameters would be passed. Your callback would have to return the sanitized data back for the field class to save it in post meta.

Looks good?

You can grab it from:

• WordPress.org: https://wordpress.org/plugins/ig-custom-metaboxes/
• Github: https://github.com/coolamit/ig-custom-metaboxes

Pull requests are welcome on Github. :tup: