WordPress, Oxygen & Metabox.io

August 5, 2019

So I bought metabox back on black Friday in 2018, and never got around to really playing with it till just lately, I usually always used pods for CPT's. I Really like how it outputs the code for you so you can add it to your own plugin and do all kinds of extra things within the code itself.

This is a small article about what I recently learned about WordPress, Metabox, & CPT's (Custom Post Types).

So far metabox plays very well with oxygen, as long as you don't mind a little PHP to display fields:

//$value = rwmb_meta( 'star_rating' );
//echo $value;

$value = rwmb_meta( $field_id );
echo $value;

or if you are using the dynamic data in oxygen, the available fields will show up under custom post meta. Unless your using the Metabox settings addon (more on that later in the article).

Thinking ahead

So with oxygen coming out with the design set feature, I thought it would be a good idea to build out a generic design set site with certain "tougher" sections like a testimonial slider etc... already built out. With that I realized I could do all the CTP's on one main site and export what I needed.

I also built out blank WP multisite site I could use for my design sets, then a different subsite for CPT's. Then a couple generic blank subsites (with all the usual settings, so I could export each w/ WP All In One Migration)
Speaking of testimonials, that was one of the CPT's I decided to make.

the things outlined below can all be done with all Worpress CPT's just different functions depending how you created the CPT's. I used metabox to create these.
When adding the fields for the Testimonials I wanted the "star rating" to be in the same metabox and not feel so disconnected/out-of-place, so I hid everything but the featured image. Then when making the fields (name, & testimonial) I set their ID to the corresponding WordPress database key I was replacing (post_title, & post_content).

More CPT's Maybe?

So I made a FAQ, Testimonial, Services, Team Members, and a Website Info Settings page. Once you make a new CPT it is then available via the wordpress query, in other words it will work with the easy posts module. So you might need a archive template, and single template (built w/Oxygen) for each of those CPT's if you want them.

Front End Submission

Metabox also has a frontend submission, but it does not look that great, and since I use caldera forms anyway I thought why not use it for this as well. Well as it turns out Caldera Forms has a plugin Caldera Forms Custom Fields that does just that and it works the same as the "post_title" field did before. Just set the slug of the caldera forms field to the ID of your custom field and it will save it there. You can then insert that form anywhere for people to submit testimonials. You can also use that same form to edit CPT's if you stick it on a Single template (set it to only show to logged in users). **Bonus points for making a new fullwidth section, with a fullwidth toggle button to toggle the viewing of the edit form on the front end.

Metabox Settings

The Metabox setttings api requires you to do some coding but thats the other awesome thing about metabox, it makes the coding part super simple! I copied the example from metabox.io & used the custom field builder to get the fields code. I then made a new snippet in my code snippets plugin and added the example code, and saved to see what it would do. I then pasted in the code from the field builder and made a couple changes as you can see below.

add_filter( 'mb_settings_pages', 'prefix_options_page' );
function prefix_options_page( $settings_pages ) {
    $settings_pages[] = array(
        'id'          => 'client',
        'option_name' => 'client',
        'menu_title'  => 'Client Details',
        'icon_url'    => 'dashicons-edit',
        'style'       => 'default',
        'columns'     => 1,
		'parent'      => 'options-general.php',
		'tabs'        => array(
            'general' => 'General Settings',
            'social'  => 'Social Media',
            'my_settings'     => 'Settings',
        ),
        'position'    => 1,
    );
    return $settings_pages;
}

add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );
function your_prefix_register_meta_boxes( $meta_boxes ) {
	$meta_boxes[] = array (
		'title'          => 'Client details',
		'id'             => 'client_fields',
		'tab'            => 'general',
		'settings_pages' => 'client',
		'fields' => array(
			array (
				'id' => 'client_name',
				'type' => 'text',
				'name' => 'Client/Company Name',
			),
			array (
				'id' => 'client_address',
				'type' => 'text',
				'name' => 'Client Address',
			),
			array (
				'id' => 'client_address_2',
				'type' => 'text',
				'name' => 'Client Address 2',
			),
			array (
				'id' => 'client_city',
				'type' => 'text',
				'name' => 'Client City',
			),
			array (
				'id' => 'client_state',
				'type' => 'text',
				'name' => 'Client State',
			),
			array (
				'id' => 'client_zip',
				'type' => 'text',
				'name' => 'Client Zip',
			),
			array (
				'id' => 'client_phone',
				'type' => 'text',
				'name' => 'Client Phone',
			),
			array (
				'id' => 'client_email',
				'type' => 'text',
				'name' => 'Client Email',
			),
			
		),
		
	);
	$meta_boxes[] = array (
		'title'          => 'Client Social',
		'id'             => 'client_social',
		'settings_pages' => 'client',
		'tab'            => 'social',
		'fields' => array(
			array (
				'id' => 'Facebook_url',
				'type' => 'url',
				'name' => 'Facebook URL',
			),
			array (
				'id' => 'instagram_url',
				'type' => 'url',
				'name' => 'Instagram URL',
			),
			array (
				'id' => 'twitter_url',
				'type' => 'url',
				'name' => 'Twitter URL',
			),
			array (
				'id' => 'Google Business_url',
				'type' => 'url',
				'name' => 'Google Business',
			),
			array (
				'id' => 'yelp_url',
				'type' => 'url',
				'name' => 'Yelp URL',
			),
		),
	);
	
	return $meta_boxes;
}

For this to work you need to have multiple Metabox plugins installed (metabox, mbsettings, & mb tabs)

I wanted to be able to have the Clients phone number, contact email, address etc. in a settings page so I could access/display that data on any page. I also made a second tab for social media links so in the future you only have to change it in one place for the entire website! Although to get this to display the settings values on the front end I made a small function and added it to the bottom of my setting snippet.

function mbSettings ( $field_id, $option_name ){
	$value = rwmb_meta( $field_id, array( 'object_type' => 'setting' ), $option_name );
return $value;
}

So now armed with this snippet you can pull that data in with oxygen using the PHP return function in the insert data box.

click on that box and enter mbSettings as the function name, and client_phone, client in the function arguments ( replace "client_phone" with the settings field ID you would like to show). The second argument is the ID of the setting page.

Final Thoughts

I really like metabox, though it defiantly has a learning curve! Another cool thing metabox has is google maps integration, so you could have a locations CPT with all diff addresses and have them all show on the map w/ custom tooltips & or when you click on a pin, the CPT info shows below the map! I think I like metabox more than other CPT plugins because you can get into the code and edit what you want etc, its just more versatile and I like to dig into the code.

Anyway hope this helps someone out!

© 2019 DMS Designz | Designed By DMS Designz
envelope-oclosechevron-leftchevron-rightphonefacebookgithubbarslinkedin