How To Easily Create Meta Box WordPress with Plugin Metabox.io

Posted on January 15th, 2018, 572 viewed

I have previously discussed the latest awesome font 5, this time I will discuss how to create custom metabox on wordpress theme.

when I look for custom metabox tutorials to be used on this theme, I’ve tried to take meta boxes from the usagistream theme, but because the code is very difficult to adjust to my desires I finally give up. then I searched for another solution and i find a solution that is wordpress plugin meta box made metabox.io.

this plugin meta boxes is very good, you can also customize the field according to your query like field normal text, field number, field url, field for editor and so forth. buddy also does no need to bother editing the meta box manually because metabox.io has provided an Online Generator that simplify you and also save your time.

See Also :MegumiNovel Blogger Template
How To Make Preloader to Website with Jquery Preloadme
How to Skip Safelinku for Download My Themes

well in this article I will explain everything from how to install plugin meta boxes on your wordpress and also how to create a custom meta box wordpress.

Add Custom Meta Box WordPress Plugin

1. first go in your wp-admin, then click the menu Plugins and select Add New
2. on the right there is a search box. enter keyword “Meta Box” or “Meta” in the search box.
3. then you will see the Meta Box as shown below.
4. click Install Now then wait for the process until the button turns blue as shown below.
custom meta boxes wordpress
5. click Activate, then you will be directed to the introductory page meta box.
6. click button Go to Online Generator and please continue on the new title. ^_^

The second alternative

if the search error then do the second solution is to download the plugin manually and then upload it on the menu plugin.
1. download plugin meta box in here
2. Log in to your WordPress Dashboard, then click the menu Plugins and select Add New
custom meta boxes wordpress
3. click on the Upload Plugins button next to the title
4. click Choose File then select the meta box that you have downloaded earlier.
5. and click Install Now
6. wait for the upload. if successful it will be like the picture below
custom meta boxes wordpress
7. then click Activate Plugin.

Add Custom Meta Boxes to WordPress themes

1. Go to https://metabox.io/online-generator/.
2. then you will see like the picture below.
Example :
custom meta boxes wordpress

Name Explanation
Function name Please fill in the name of the function you want
Text domain If you’re translating a plugin or a theme, you’ll need to use a text domain to denote all text belonging to that plugin. for more details please come here or here
Field ID Prefix Ignore this

3. then go to the next tab Meta Box. do not click on Generate Code button.
Example :
custom meta boxes wordpress

Name Explanation
ID Customize the id you want
Title Customize the title you want
Priority You can ignore this
Context You can ignore this
Post types if you want to appear in custom post type, please adjust the name in 'post_types' => array( 'post' ), code, example : 'post_types' => array('post','anime'), then the meta box will appear in post type post and anime
Autosave Tick this

4. go to the next tab Fields
Example :
custom meta boxes wordpress
5. if it is finished making its metabox please click Generate Code and copy code then paste into your theme’s function.php
custom meta boxes wordpress

Result
custom meta boxes wordpress

How to add multiple meta boxes in wordpress themes

Buddy also can make multiple metabox very easily

Example Code :

function download_area( $meta_boxes ) {
	$prefix = 'prefix-';

	$meta_boxes[] = array(
		'id' => 'download480',
		'title' => esc_html__( 'Download 480P', 'metabox-online-generator' ),
		'post_types' => array( 'post' ),
		'context' => 'advanced',
		'priority' => 'default',
		'autosave' => true,
		'fields' => array(
			array(
				'id' => $prefix . 'url_1',
				'type' => 'url',
				'name' => esc_html__( 'Mediafire', 'metabox-online-generator' ),
				'size' => 90,
			),
			array(
				'id' => $prefix . 'url_2',
				'type' => 'url',
				'name' => esc_html__( 'Solidfiles', 'metabox-online-generator' ),
				'size' => 90,
			),
			array(
				'id' => $prefix . 'url_3',
				'type' => 'url',
				'name' => esc_html__( 'Google Drive', 'metabox-online-generator' ),
				'size' => 90,
			),
		),
	);

	return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'download_area' );
then
function download_area( $meta_boxes ) {
	$prefix = 'prefix-';

	$meta_boxes[] = array(
		'id' => 'download480',
		'title' => esc_html__( 'Download 480P', 'metabox-online-generator' ),
		'post_types' => array( 'post' ),
		'context' => 'advanced',
		'priority' => 'default',
		'autosave' => true,
		'fields' => array(
			array(
				'id' => $prefix . 'url_1',
				'type' => 'url',
				'name' => esc_html__( 'Mediafire', 'metabox-online-generator' ),
				'size' => 90,
			),
			array(
				'id' => $prefix . 'url_2',
				'type' => 'url',
				'name' => esc_html__( 'Solidfiles', 'metabox-online-generator' ),
				'size' => 90,
			),
			array(
				'id' => $prefix . 'url_3',
				'type' => 'url',
				'name' => esc_html__( 'Google Drive', 'metabox-online-generator' ),
				'size' => 90,
			),
		),
	);

	$meta_boxes[] = array(
		'id' => 'download720',
		'title' => esc_html__( 'Download 720P', 'metabox-online-generator' ),
		'post_types' => array( 'post' ),
		'context' => 'advanced',
		'priority' => 'default',
		'autosave' => true,
		'fields' => array(
			array(
				'id' => $prefix . 'url_4',
				'type' => 'url',
				'name' => esc_html__( 'Mediafire', 'metabox-online-generator' ),
				'size' => 90,
			),
			array(
				'id' => $prefix . 'url_5',
				'type' => 'url',
				'name' => esc_html__( 'Solidfiles', 'metabox-online-generator' ),
				'size' => 90,
			),
			array(
				'id' => $prefix . 'url_6',
				'type' => 'url',
				'name' => esc_html__( 'Google Drive', 'metabox-online-generator' ),
				'size' => 90,
			),
		),
	);

	return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'download_area' );

Explanation by Image
custom meta boxes wordpress
custom meta boxes wordpress

Result
custom meta boxes wordpress

How to call Meta Box in Theme

*update 10/02/18
thanks to “Unknown” which has reminded me.

<?php echo get_post_meta($post->ID, 'text_1', true); ?>
text_1 change with ID your metabox

Example code metabox in single-anime.php (Fanstrap WordPress Themes)
meta boxes

Thank you for reading this article, if you are very helpful with this article or love this article please Share to your social media to let your friends know and if you are still confused please comment.I will answer as soon as I can.
Lastly I apologize if my language is stiff or unclear. because I use google translate

Reference
I created this article with some references to add my insights
– https://translate.google.com/
– https://metabox.io/online-generator/
– https://tinypng.com/

Related Post

Please wait....
Disqus comment box is being loaded