{"id":133571,"date":"2018-07-14T13:31:45","date_gmt":"2018-07-14T13:31:45","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=133571"},"modified":"2018-07-14T13:31:45","modified_gmt":"2018-07-14T13:31:45","slug":"create-custom-meta-box-wordpress","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/","title":{"rendered":"Create Custom Meta Box WordPress"},"content":{"rendered":"

Create Custom Meta Box WordPress – In this post we’ll see how we can create custom meta box. Meta box is useful entity in WordPress to provide space for extra functionalities apart from default available.<\/p>\n

Sometimes we need to add extra data to our posts or pages. Using custom meta box, space can be easily provided like for text input, external link for any site or page, any advertisement image, etc.<\/p>\n

Meta box can be added to post, page, or any custom post type as per defined in the add_meta_box function. Let’s start with code, we’ll perform this by creating one test plugin –<\/p>\n

<?php\r\n\r\n\/**\r\n *  Plugin Name: Custom Meta box Example Post Page\r\n *  Description: How to create custom meta box in post edit page\r\n *  Author: Webkul\r\n *  Author URI: https:\/\/webkul.com\r\n *  Text Domain: wk-custom-meta-box\r\n *\/\r\n\r\nadd_action( 'add_meta_boxes', 'wk_create_custom_meta_box', 10, 2 );\r\n\r\nfunction wk_create_custom_meta_box( $post_type, $post ) {\r\n  add_meta_box( 'custom-textbox', __( 'Custom Textbox', 'wk-custom-meta-box' ), 'wk_custom_meta_box_content', 'post', 'side', 'high' );\r\n}\r\n\r\nfunction wk_custom_meta_box_content() {\r\n  echo '<--content goes here-->';\r\n}<\/pre>\n
In above code, first we created a plugin named ‘Custom Meta box Example Post Page’ and added some code into it. We’ll understand the code further. Let’s have a look of plugin’s page –<\/p>\n
\"Create<\/p>\n
When we activate this plugin, a meta box will be added in post edit page. We are taking post edit page here to add custom meta box.<\/p>\n
In code we have added action to ‘add_meta_boxes’ (via – https:\/\/codex.wordpress.org\/Plugin_API\/Action_Reference\/add_meta_boxes<\/a>) hook and in callback function to this action, we created meta box using ‘add_meta_box’ (via – https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/<\/a>) function.<\/p>\n
In add_meta_box function, first parameter is the id of meta box, second is the title of box, third is the callback in which box content will be defined, fourth one is screen means on which page we want to add the meta box, fifth one is context within the screen means meta box will be in side or normal on page, sixth one is the priority means where this meta box will display in respect to other in the page.<\/p>\n
Here, we set screen to post,\u00a0 context to side and priority to high. And in callback we just write some dummy content. So, let’s see how the meta box will look in post edit page.<\/p>\n
\"Create<\/p>\n
This is all for adding custom meta box in post edit page. Now, lets add text box in this and save content on post save.<\/p>\n
\/**\r\n *  Custom Meta Box content\r\n *\/\r\nfunction wk_custom_meta_box_content( $post ) {\r\n  ?>\r\n  <textarea class=\"widefat\" name=\"wk-custom-content\"><?php echo get_post_meta( $post->ID, 'metabox-content', true ); ?><\/textarea>\r\n  <?php\r\n}\r\n\r\n\/**\r\n *  Save textbox content\r\n *\/\r\nfunction wk_save_custom_meta_box_content( $post_id ) {\r\n  $textbox_content = $_POST['wk-custom-content'];\r\n\r\n  update_post_meta( $post_id, 'metabox-content', $textbox_content );\r\n}\r\n\r\nadd_action( 'save_post', 'wk_save_custom_meta_box_content' );<\/pre>\n
In above code,\u00a0 we have added text area to meta box and saved the content when post is saved using the hook ‘save_post’ provided by WordPress which fires when we update the post.<\/p>\n
We saved this data as meta data to the post. And displayed the saved content in text area by getting based on post id and key from database.<\/p>\n
\"Create<\/a><\/p>\n
 <\/p>\n
\n
\n
\n
Support<\/h3>\n<\/div>\n<\/div>\n
\n
\n
Still have any issue feel free to add a ticket and let us know your views to make the code better\u00a0https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><\/p>\n
Thanks for Your Time! Have a Good Day!<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Create Custom Meta Box WordPress – In this post we’ll see how we can create custom meta box. Meta box is useful entity in WordPress to provide space for extra functionalities apart from default available. Sometimes we need to add extra data to our posts or pages. Using custom meta box, space can be easily […]<\/a><\/p>\n","protected":false},"author":109,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1260],"tags":[7084,1258],"class_list":["post-133571","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-custom-meta-box","tag-wordpress"],"yoast_head":"\nCreate Custom Meta Box WordPress - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Create Custom Meta Box WordPress - In this post we'll see how we can create custom meta box. Meta box is useful entity in WordPress to provide space for extra functionalities apart from default available.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Custom Meta Box WordPress - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Create Custom Meta Box WordPress - In this post we'll see how we can create custom meta box. Meta box is useful entity in WordPress to provide space for extra functionalities apart from default available.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-14T13:31:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg\" \/>\n<meta name=\"author\" content=\"Varun Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/imVvashistha\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Varun Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/\"},\"author\":{\"name\":\"Varun Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d\"},\"headline\":\"Create Custom Meta Box WordPress\",\"datePublished\":\"2018-07-14T13:31:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/\"},\"wordCount\":465,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg\",\"keywords\":[\"custom meta box\",\"wordpress\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/\",\"url\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/\",\"name\":\"Create Custom Meta Box WordPress - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg\",\"datePublished\":\"2018-07-14T13:31:45+00:00\",\"description\":\"Create Custom Meta Box WordPress - In this post we'll see how we can create custom meta box. Meta box is useful entity in WordPress to provide space for extra functionalities apart from default available.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg\",\"width\":\"1499\",\"height\":\"121\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Custom Meta Box WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d\",\"name\":\"Varun Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2bf364f755500f5f58d13d0fddbeb303ae75529a58e113c5638c7d20ff48b18d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2bf364f755500f5f58d13d0fddbeb303ae75529a58e113c5638c7d20ff48b18d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Varun Kumar\"},\"description\":\"Inquisitive.\",\"sameAs\":[\"https:\/\/x.com\/https:\/\/twitter.com\/imVvashistha\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/varun-kumar286\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Custom Meta Box WordPress - Webkul Blog","description":"Create Custom Meta Box WordPress - In this post we'll see how we can create custom meta box. Meta box is useful entity in WordPress to provide space for extra functionalities apart from default available.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Create Custom Meta Box WordPress - Webkul Blog","og_description":"Create Custom Meta Box WordPress - In this post we'll see how we can create custom meta box. Meta box is useful entity in WordPress to provide space for extra functionalities apart from default available.","og_url":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-07-14T13:31:45+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg","type":"","width":"","height":""}],"author":"Varun Kumar","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/imVvashistha","twitter_site":"@webkul","twitter_misc":{"Written by":"Varun Kumar","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/"},"author":{"name":"Varun Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d"},"headline":"Create Custom Meta Box WordPress","datePublished":"2018-07-14T13:31:45+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/"},"wordCount":465,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg","keywords":["custom meta box","wordpress"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/","url":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/","name":"Create Custom Meta Box WordPress - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg","datePublished":"2018-07-14T13:31:45+00:00","description":"Create Custom Meta Box WordPress - In this post we'll see how we can create custom meta box. Meta box is useful entity in WordPress to provide space for extra functionalities apart from default available.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/07\/custom-meta-box-1.jpg","width":"1499","height":"121"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/create-custom-meta-box-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Custom Meta Box WordPress"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d","name":"Varun Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2bf364f755500f5f58d13d0fddbeb303ae75529a58e113c5638c7d20ff48b18d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2bf364f755500f5f58d13d0fddbeb303ae75529a58e113c5638c7d20ff48b18d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Varun Kumar"},"description":"Inquisitive.","sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/imVvashistha"],"url":"https:\/\/webkul.com\/blog\/author\/varun-kumar286\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/133571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/109"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=133571"}],"version-history":[{"count":2,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/133571\/revisions"}],"predecessor-version":[{"id":133583,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/133571\/revisions\/133583"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=133571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=133571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=133571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}