{"id":29178,"date":"2021-09-02T15:00:43","date_gmt":"2021-09-02T13:00:43","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=29178"},"modified":"2021-09-01T21:59:31","modified_gmt":"2021-09-01T19:59:31","slug":"how-to-add-custom-meta-boxes-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-custom-meta-boxes-in-wordpress\/","title":{"rendered":"How to Add Custom Meta Boxes in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Using custom meta boxes is a great way to insert some additional metadata into your content<\/strong>. Namely, by adding different custom meta boxes to your WordPress pages, posts, and\/or custom post types<\/a>, you will be able to make your editing interface appear more organized and user-friendly as a whole. In fact, many plugin developers use them to create and add custom plugin meta boxes.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]We should also mention right away that every content type in WordPress has its own set of metadata used to provide more information about the content in question (such as date, title, and so on). And while WordPress does come with the default custom field box that you can use to add your own custom meta boxes and metadata, this meta box does not offer that many options in general.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Thus, we\u2019ve decided to show you how to add custom meta boxes in WordPress posts and post types using the help of one of the most popular plugins in this category \u2013 the Advanced Custom Fields plugin. Stick with us as we explain how to create and add custom meta boxes to your WordPress content<\/strong>, as well as how to display your custom field metadata on your site.<\/strong>[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Creating Custom Meta Boxes in WordPress With a Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]The plugin we recommend for this task is called Advanced Custom Fields<\/a>. This is a rather popular and comprehensive plugin option for generating custom fields on your site, and for a good reason. If you use this plugin, you will be able to add your custom fields virtually anywhere you want on your site (including pages, posts, taxonomies, users, etc.), and you will get to do so quickly and with ease.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Advanced <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you install the plugin<\/a> and activate it, you will be able to see a new menu item called Custom Fields<\/em> in your admin bar. Go to Custom Fields >> Add New<\/em> to create your custom field.<\/strong> By doing so, you will be redirected to the page called Add New Field Group<\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Add a title to your field group (this will be your meta box title). Then, hit the \u201c+Add Field\u201d button<\/strong> to create a new field. This will open a whole new row of settings.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The Field Label<\/em> option allows you to set a name for your meta box. This will be the name of the entire section that will appear in the page backend itself.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The Field Name<\/em> option allows you to enter an additional name for your field. It should be a single word with no spaces (although you can use underscores and dashes). You will copy this name to display your custom field metadata on your site, but more on that later.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Field <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, you will be able to select the Field Type<\/em>. You will have plenty of options at your disposal \u2013 from text, radio buttons, checkboxes, and numbers to images, files, users, taxonomies, and plenty more.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Field <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You will also get to insert field Instructions<\/em> that can be particularly useful since they let a user know what they should insert into the given field.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Instruction\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Afterward, you will be able to set a whole bunch of other options such as the Default Value, Placeholder Text, Character Limit, and so on.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Close <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Hit the Close Field<\/em> button to hide it once you\u2019re done with setting your options.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In case you need more fields in your meta box, simply hit the \u201c+ Add Field\u201d button again and adjust its options according to your preferences.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, the Location<\/em> area will allow you to set the rules which will determine the types of edit screens on which your custom meta box will be displayed. You will be able to select different post types, post categories, taxonomies, etc.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Location\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now, in the Settings<\/em> field, you will be able to pick the meta box Style<\/em> (standard or seamless). We recommend setting it to Standard.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You will also get to select the meta box Position in the page backend (after the content, before, or in the right column).
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Style <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In addition, you will be able to set the position of your Label and Instruction placement and pick the Order number (the number that will define the order of your field). The latter is useful in case you have more than one field group set on one location (otherwise you can set this option to 0).
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Additional <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, the Hide on screen<\/em> option will allow you to check or uncheck certain meta box fields to show or hide them on your post or page editing screen.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Hide <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Hit the Publish<\/em> button (located in the upper right corner of your screen) once you\u2019re done.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Publish\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Feel free to go ahead and visit the backend of one of your pages\/posts to see what your custom meta box looks like live. Once there, you will also be able to use your new meta boxes to add your custom metadata.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Custom <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Displaying Your Custom Meta Box Data on Your Site<\/h2>\n

[\/vc_column_text][vc_column_text]Now that you\u2019ve succeeded in creating your custom meta box, it\u2019s time to display the data that you entered in your fields on your site itself (i.e. your page, post, etc.).
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Go to the Field Groups<\/em> page.<\/strong> Once there, you will be able to access your custom fields. What you need to do is to copy the text displayed under the \u201cName\u201d field:[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Field <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now, to display the data entered in your custom fields on your site, you can use two different options. You can either add them via a shortcode or using a PHP code.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To display your custom field data on a single page or post, simply add this shortcode into your content:
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
[acf field=\"weather\"]<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Of course, you should add the name of your own field in the quotes.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Another way to do this is by inserting a line of code into one of your theme files. This method is great if you want the metadata to automatically appear on all pages of a certain type.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Access the theme file you wish to edit by going to Appearance >> Theme Editor<\/strong><\/em>. Which file you will edit depends on where you want your data to be displayed. These can be files such as single.php, blog.php, page.php, etc.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]We\u2019ve used our own free Qi Theme<\/a> for our example, so we\u2019ve inserted our code into the blog.php template file. Of course, you should feel free to add your own code wherever you like.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Theme                        <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n    
\n                                    \"Theme                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Enter the following code:
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
<h2 class=\"weather\"><?php the_field('weather'); ?><\/h2><\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This will display the metadata from our \u201cweather\u201d custom meta box as a H2 heading on our page. Of course, you should replace the name we\u2019ve added within quotes with your own custom field name and adjust the HTML to suit your needs.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The code you\u2019ve inserted into your theme file will display the data you insert in your custom meta field on all pages that use the specific page template you decided to edit.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Hit the Update File<\/em> button once you\u2019re done and go ahead to see what your metadata looks like displayed on your page\/post.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Custom                        <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Conclusion<\/h2>\n
[\/vc_column_text][vc_column_text]No matter if you need to insert a simple line of text or add more advanced metadata, custom meta boxes are a great way to make the most out of your edit screen while making it appear as intuitive and user-friendly as possible. We recommend using the Advanced Custom Fields plugin to create and add custom meta fields to any of your edit screens. This plugin comes with a comprehensive set of options that will allow you to customize the look of your custom meta boxes in all sorts of ways. Make sure to follow our instructions carefully to learn how to customize your custom meta boxes in full detail and display your metadata on your WordPress site with ease.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
Read on as we show you how to create and add custom meta boxes to your WordPress content, as well as display your custom field metadata on your website.<\/p>\n","protected":false},"author":2,"featured_media":29206,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[143,4,13],"class_list":["post-29178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-customziation","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=29178"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29178\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/29206"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=29178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=29178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=29178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}