{"id":156382,"date":"2016-07-12T14:00:23","date_gmt":"2016-07-12T14:00:23","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=156382"},"modified":"2016-10-05T05:44:22","modified_gmt":"2016-10-05T05:44:22","slug":"wordpress-development-intermediate-users-custom-fields-metadata","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/wordpress-development-intermediate-users-custom-fields-metadata\/","title":{"rendered":"WordPress Development for Intermediate Users: Custom Fields and Metadata"},"content":{"rendered":"<p>The default Page and Post content types in WordPress are enough for many websites, but if you really want to harness the powers of WordPress as a CMS it\u2019s time to start learning about custom fields and metadata.<\/p>\n<p>This is the sixth post in our WordPress Development for Intermediate Users series. This series follows on from our popular <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-beginners-getting-started\/\" target=\"_blank\">WordPress Development for Beginners<\/a> tutorials, which introduced you to the fundamentals of developing websites with WordPress, how to get started coding with PHP, and building themes and plugins.<\/p>\n<p>In this part of the series, we&#8217;ll focus on how to create and display metadata in WordPress, including post metadata or custom fields as they&#8217;re often known. You&#8217;ll learn:<\/p>\n<ul>\n<li>What metadata\u00a0is and how it&#8217;s used in\u00a0WordPress.<\/li>\n<li>How to add\u00a0custom fields to your posts and display them.<\/li>\n<li>How to create\u00a0a custom metabox for post metadata\/custom fields.<\/li>\n<li>How to display other kinds of metadata in your theme including user metadata.<\/li>\n<\/ul>\n<p>Let&#8217;s get stuck in.<\/p>\n<p><strong>Missed a tutorial in our WordPress Development for Intermediate Users series? You can catch up on all seven posts here:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-intermediate-theme-development-in-detail\/\" target=\"_blank\">WordPress Development for Intermediate Users: Theme Development in Detail<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-for-intermediate-users-making-your-themes-customizer-ready\/\" target=\"_blank\">WordPress Development for Intermediate Users: Making Your Themes Customizer-Ready<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-intermediate-building-plugins\/\" target=\"_blank\">WordPress Development for Intermediate Users: Building Plugins<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-for-intermediate-users-custom-post-types-and-taxonomies\/\" target=\"_blank\">WordPress Development for Intermediate Users: Custom Post Types and Taxonomies<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-intermediate-users-queries-loops\/\" target=\"_blank\">WordPress Development for Intermediate Users: Queries and Loops<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-intermediate-users-custom-fields-metadata\/\" target=\"_blank\">WordPress Development for Intermediate Users: Custom Fields and Metadata<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-intermediate-users-internationalization\/\" target=\"_blank\">WordPress Development for Intermediate Users: Internationalization<\/a><\/li>\n<\/ul>\n<a class=\"general_big_button\" href=\"https:\/\/wpmudev.com\/academy\/\"><span class=\"text\">That&#8217;s right, tons of WordPress knowledge, peer review, instructor feedback and certification, for free for WPMU DEV members<\/span><span class=\"button-a-b\">Start Learning<\/span><\/a>\n<h3>What is Metadata in WordPress?<\/h3>\n<p>Let&#8217;s start by defining metadata. What exactly is it?<\/p>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Metadata\" target=\"_blank\">Wikipedia<\/a> defines metadata as:<\/p>\n<blockquote><p>&#8220;&#8230; data\u00a0that provide information about other data.&#8221;<\/p><\/blockquote>\n<p>In WordPress this means that metadata is data about the core content, which includes posts (of all types), comments, users and taxonomy terms. An easy way to identify this is by looking at the <a href=\"https:\/\/codex.wordpress.org\/Database_Description\" target=\"_blank\">database<\/a> structure, which you can see in the diagram below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/database-structure.png\" alt=\"database structure diagram\" width=\"522\" height=\"735\" \/><\/p>\n<p>There are four database tables for data:<\/p>\n<ul>\n<li><em>wp_posts<\/em>: for posts of all types (including pages, attachments and custom post types)<\/li>\n<li><em>wp_comments<\/em>: for comments<\/li>\n<li><em>wp_users<\/em>: for users<\/li>\n<li><em>wp_terms<\/em>: for taxonomy terms<\/li>\n<\/ul>\n<p>Each of these has a corresponding table for metadata about the relevant\u00a0type of data:<\/p>\n<ul>\n<li><em>wp_postmeta<\/em> for post metadata (or custom fields)<\/li>\n<li><em>wp_commentmeta<\/em> for comment\u00a0metadata (e.g. data added by comment plugins such as Akismet)<\/li>\n<li><em>wp_usermeta<\/em> for user metadata (e.g. roles and dashboard settings)<\/li>\n<li><em>wp_termmeta<\/em> for taxonomy terms metadata (e.g. the term description).<\/li>\n<\/ul>\n<p>You don&#8217;t need to worry about all this too much at this stage \u2013 the database will be covered\u00a0in more depth in our upcoming <a href=\"https:\/\/wpmudev.com\/academy\/\" target=\"_blank\">Academy course WordPress Development for Advanced Users<\/a>. All you need to know is that metadata exists and how to access it, which you&#8217;ll find out about if you read on.<\/p>\n<h3>Adding and Displaying Custom Fields<\/h3>\n<p>Adding custom fields is very simple but displaying them involves writing some code in your theme or hooking it in via a plugin. Let&#8217;s take a look at both.<\/p>\n<h4>Adding Custom Fields<\/h4>\n<p>The simplest way to add post metadata is by using the built-in custom field interface in the post editing screen. Here is one of the posts in the demo site I&#8217;ve been using with this series:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/custom-fields-empty.png\" alt=\"A post with no metadata added - editing screen\" width=\"670\" height=\"377\" \/><\/p>\n<p>Adding a custom field is as simple as typing in its name (stored as a <em>key<\/em> in the database) and value (stored as a <em>value<\/em>):<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/custom-fields-populated.png\" alt=\"A custom field added to the post editing screen\" width=\"670\" height=\"308\" \/><\/p>\n<p>Once you&#8217;ve added one, you can use that name again for additional custom fields on that post and others.<\/p>\n<h4>Displaying Custom Fields<\/h4>\n<p>If you want to display the values of your custom fields, you&#8217;ll need to add some code to your theme. Alternatively if you have hooks in your theme, you can insert it using those via a plugin, which you&#8217;ve already learned to do in this series.<\/p>\n<p>Let&#8217;s add custom field display to the single post template in our theme.<\/p>\n<p>Start by opening the\u00a0template file in your theme that displays the loop for single posts. In the theme we&#8217;ve been working on in this series it&#8217;s <em>loop-single.php<\/em>.\u00a0If you haven&#8217;t been working along, you can download the Part 5 version of the theme via the series <a href=\"https:\/\/github.com\/rachelmccollin\/wpmudev-intermediate-WordPress-development\" target=\"_blank\">source files on GitHub<\/a>.<\/p>\n<p><em>Note: If you&#8217;re working with your own theme, you may need to work in a different template file. Adapt what I&#8217;m doing here for your theme.<\/em><\/p>\n<ol>\n<li>In your <em>loop-single.php<\/em> file, find this code:<br \/>\n<div class=\"gist\" data-gist=\"6d11b4e279074fb2f1b91ea53f65c33c\" data-gist-file=\"loop-single-code.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/6d11b4e279074fb2f1b91ea53f65c33c.js?file=loop-single-code.php\">Loading gist 6d11b4e279074fb2f1b91ea53f65c33c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/li>\n<li>We need to include the post metadata in a new conditional tag. First, let&#8217;s add the extra tag. Edit the code so it reads like this:<br \/>\n<div class=\"gist\" data-gist=\"8bf21d0f9b90f8064e1be7d3f9079275\" data-gist-file=\"loop-conditional-tag-added.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/8bf21d0f9b90f8064e1be7d3f9079275.js?file=loop-conditional-tag-added.php\">Loading gist 8bf21d0f9b90f8064e1be7d3f9079275<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/li>\n<li>Next, add the <code>the_meta()<\/code> function inside a div:<br \/>\n<div class=\"gist\" data-gist=\"30198e94fd4b0c3416c5e6f0cb375280\" data-gist-file=\"the-meta.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/30198e94fd4b0c3416c5e6f0cb375280.js?file=the-meta.php\">Loading gist 30198e94fd4b0c3416c5e6f0cb375280<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/li>\n<\/ol>\n<p>Save your file and take a look at a post for which you&#8217;ve added a custom field. It won&#8217;t\u00a0look perfect now, but by using the <code>post-meta<\/code> class you&#8217;ve accessed styling we already set up for a custom post type in an earlier part of the series. I want to remove the bullet points and tweak the margins and padding, so I&#8217;ll make some changes to the stylesheet. You can find them in the source files for this part of the series.<\/p>\n<p>Here&#8217;s my final version:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/post-meta-styled.png\" alt=\"post metadata displayed below the post using the_meta()\" width=\"670\" height=\"485\" \/><\/p>\n<p>You can add whatever styling you need. Note that I&#8217;ve taken advantage of the <code>span<\/code> tags that WordPress automatically puts around the name of the custom field to add bold styling.<\/p>\n<p>If you want to have more control over the way your post meta data is displayed in each post, you can use the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\" target=\"_blank\"><code>get_post_meta()<\/code><\/a> function instead and then echo out its results. You can see this in action in our post\u00a0on <a href=\"https:\/\/wpmudev.com\/blog\/creating-content-taxonomies-and-fields\/\" target=\"_blank\">working with custom fields<\/a> and I&#8217;ll also cover it later in this part of the series.<\/p>\n<h3>Creating a Custom Metabox for Post Meta<\/h3>\n<p>Using the custom fields interface is all well and good, but it doesn&#8217;t give you much control and it can result in your users making mistakes. What if you want to limit the values\u00a0for a post meta field to a few options and not let users type in their own? Or you want to predefine some post meta fields for consistency?<\/p>\n<p>The way you do this is by creating a metabox in the post editing screen, using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\" target=\"_blank\"><code>add_meta_box()<\/code><\/a> function. This function has no less than seven parameters:<\/p>\n<div class=\"gist\" data-gist=\"db606bc2e95449154ee7b988a5417ba6\" data-gist-file=\"add-meta-box.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/db606bc2e95449154ee7b988a5417ba6.js?file=add-meta-box.php\">Loading gist db606bc2e95449154ee7b988a5417ba6<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The parameters are:<\/p>\n<ul>\n<li><em>$id<\/em>: adds\u00a0a CSS ID to the div containing your meta box<\/li>\n<li><em>$title<\/em>: the name of the meta box as displayed on the post editing page<\/li>\n<li><em>$callback<\/em>: the name of the function containing the HTML for your meta box<\/li>\n<li><em>$post-type<\/em>: the type of content for which this meta box will be available (leave it blank for all)<\/li>\n<li><em>$context<\/em>: where in the editing page the meta box should be displayed &#8211; <code>'normal'<\/code>, <code>'advanced'<\/code> or <code>'side'<\/code><\/li>\n<li><em>$priority<\/em>: the priority level for displaying your meta box\u2014 <code>'high'<\/code>, &#8216;core&#8217;, &#8216;default&#8217; or &#8216;low&#8217;. The default is (unsurprisingly) <code>'default'<\/code>; use <code>'high'<\/code> to move it above other meta boxes.<\/li>\n<li><em>$callback_args<\/em>: arguments to pass into your callback function. This is needed if your function requires arguments other than <code>$post<\/code>, which is automatically passed to the callback function.<\/li>\n<\/ul>\n<p>Let&#8217;s create our own function to do this, which will help all of these parameters make more sense. I&#8217;m going to create a new plugin that will both add the meta box and output what&#8217;s added to it via a hook in my theme.<\/p>\n<p>So start by creating a new plugin and adding the usual commented out text at the top.<\/p>\n<h4>Creating the Metabox<\/h4>\n<p>The first step is to write\u00a0the function that creates the metabox. In your plugin, add this:<\/p>\n<div class=\"gist\" data-gist=\"96a6314f7d29fbdf09085895883880b3\" data-gist-file=\"wpmu-add-post-metabox.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/96a6314f7d29fbdf09085895883880b3.js?file=wpmu-add-post-metabox.php\">Loading gist 96a6314f7d29fbdf09085895883880b3<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>This sets up the metabox, with the following parameters:<\/p>\n<ul>\n<li>an ID of <code>wpmu_metabox<\/code><\/li>\n<li>a title of &#8216;Add More&#8217;<\/li>\n<li>a callback function called\u00a0<code>wpmu_metabox_callback<\/code><\/li>\n<li>it will be displayed on the <em>post<\/em> post type<\/li>\n<li>a position of <code>normal<\/code> (i.e. on the left and high (just below the main editing pane).<\/li>\n<\/ul>\n<p>Don&#8217;t try saving your plugin just yet: you need to create a callback function or WordPress will throw up an error.<\/p>\n<h4>Creating the Callback Function<\/h4>\n<p>The callback function defines what will be displayed on the post editing screen, which is a form. You need to use the <code>get_post_meta()<\/code> function to display the value of a particular meta key.<\/p>\n<p>Add this to your plugin:<\/p>\n<div class=\"gist\" data-gist=\"522bf76662764c2170a6e7dacfd2ec05\" data-gist-file=\"wpmu-metabox-callback.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/522bf76662764c2170a6e7dacfd2ec05.js?file=wpmu-metabox-callback.php\">Loading gist 522bf76662764c2170a6e7dacfd2ec05<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Let&#8217;s take a look at what this does:<\/p>\n<ol>\n<li>It opens up a <code>form<\/code> element.<\/li>\n<li>It adds a nonce field, which won&#8217;t be visible to your users but which helps with security: the nonce field will be checked before the metadata is saved, to be sure that users have used this metabox to add metadata and not done it any other way.<\/li>\n<li>It uses <code>get_post_meta()<\/code> to retrieve the value of a new <code>wpmu_weather<\/code> field and assigns that value to the <code>$weather<\/code> variable.<\/li>\n<li>It creates a table for our field.<\/li>\n<li>It creates a field whose value is that <code>$weather<\/code> variable.<\/li>\n<li>It closes the <code>form<\/code> element<\/li>\n<\/ol>\n<p>Now save your plugin and take a look at the post editing screen on your site (making sure you&#8217;ve activated your plugin first).<\/p>\n<p>Here&#8217;s mine:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/empty-metabox-field.png\" alt=\"A metabaox on the post editing screen - no value added yet\" width=\"670\" height=\"498\" \/><\/p>\n<p>You&#8217;ll notice that the <code>wpmu_weather<\/code> field has also been added to the custom fields below. That could be confusing so we&#8217;ll fix it shortly.<\/p>\n<p>If you type something into that metabox\u00a0it won&#8217;t save. That&#8217;s because we still need to add a function for that.<\/p>\n<h4>Adding a Function to Save the Metadata<\/h4>\n<p>Now add a third function:<\/p>\n<div class=\"gist\" data-gist=\"e9c6678f7c6b3b404f09929768761019\" data-gist-file=\"wpmu-save-my-meta.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/e9c6678f7c6b3b404f09929768761019.js?file=wpmu-save-my-meta.php\">Loading gist e9c6678f7c6b3b404f09929768761019<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Let&#8217;s walk though that function:<\/p>\n<ol>\n<li>It checks that the nonce has been set, which will only be the case if the user has input the new value using that metabox.<\/li>\n<li>It checks that the current user has the <code>edit_post<\/code> capability, in other words, that they&#8217;re authorized to do this.<\/li>\n<li>It checks if a new value has been added to our field.<\/li>\n<li>If so, it replaces the old value with the new value and saves it to the database.<\/li>\n<\/ol>\n<p>Now try adding a value to your field and saving your post:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/metabox-populated.png\" alt=\"Post metabox with a value added\" width=\"670\" height=\"485\" \/><\/p>\n<p>That works. Now let&#8217;s see how it looks on the site:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/metabox-metadata-on-frontend.png\" alt=\"Post metadata from the metabox on the front end of the site\" width=\"670\" height=\"497\" \/><\/p>\n<p>That doesn&#8217;t look so good. Because we used a name for the field of <code>wpmu_weather<\/code> and not something more user-friendly, it&#8217;s not very nice to read. We could fix that by changing that name, but I&#8217;d rather not as it&#8217;s good practice\u00a0to use a unique name with a suffix. So let&#8217;s change the way the metadata is output.<\/p>\n\n<h4>Outputting Metadata with More Control<\/h4>\n<p>To add more control to the output of metadata, we replace <code>the_meta()<\/code> with some more content using the <code>get_the_meta()<\/code> function.<\/p>\n<p>Let&#8217;s add this to our plugin and then activate it via the <code>wpmu_after_content<\/code> hook in our theme. If your theme doesn&#8217;t have an action hook after the content, add one. You learned how to do this in <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-intermediate-theme-development-in-detail\/\" target=\"_blank\">part one<\/a> of the series.<\/p>\n<p>In your plugin, add this function:<\/p>\n<div class=\"gist\" data-gist=\"043e287a51140e6df04957a35223e97c\" data-gist-file=\"wpmu-display-postmeta.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/043e287a51140e6df04957a35223e97c.js?file=wpmu-display-postmeta.php\">Loading gist 043e287a51140e6df04957a35223e97c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Here&#8217;s what the function does:<\/p>\n<ol>\n<li>It checks if we&#8217;re on a single post.<\/li>\n<li>If so, it defines the <code>$weather<\/code> valuable using <code>get_post_meta()<\/code>. Note that to fetch the ID of the current post I&#8217;ve used\u00a0<code>get_the_ID()<\/code> because we&#8217;re not in the loop.<\/li>\n<li>It then creates a div and an unordered list, and in the first list item outputs a span followed by the value of the <code>$weather<\/code> variable.<\/li>\n<li>It attaches the function to the <code>wpmu_after_content<\/code> hook. I&#8217;ve used a priority of <code>5<\/code> so that this is displayed before anything else I&#8217;ve attached to that hook.<\/li>\n<\/ol>\n<p>Because I&#8217;ve used the same classes as WordPress does with the <code>the_meta()<\/code> function, the styling works fine. If you prefer, you can add this styling to your plugin. The demo plugin in the source files has an empty stylesheet that I&#8217;ve enqueued following the technique you learned earlier in this series \u2013 feel free to add your own\u00a0styling to it.<\/p>\n<p>Here&#8217;s my metabox on the site:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/get-post-meta-display.png\" alt=\"Post metadata displayed on the front end with more control\" width=\"670\" height=\"511\" \/><\/p>\n<p>Right now there are two boxes with metadata &#8211; I&#8217;ll comment out the code for the first one in the theme so it&#8217;s still there for reference but doesn&#8217;t output anything. You might want to delete yours.<\/p>\n<h4>Hiding the Custom\u00a0Fields Interface<\/h4>\n<p>We noticed earlier that our new custom metadata field was showing up twice on the post editing screen &#8211; in our new metabaox and in the custom field interface. Let&#8217;s hide the custom field interface to fix this problem.<\/p>\n<p>In your plugin, add this:<\/p>\n<div class=\"gist\" data-gist=\"2cf3966997ab77595d7f5cc7fdf06157\" data-gist-file=\"wpmu-remove-custom-fields-ui.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/2cf3966997ab77595d7f5cc7fdf06157.js?file=wpmu-remove-custom-fields-ui.php\">Loading gist 2cf3966997ab77595d7f5cc7fdf06157<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Now if you visit your post editing screen, all you can see is the metabox you added:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/custom-fields-ui-removed.png\" alt=\"Post editing screen without the custom fields interface\" width=\"670\" height=\"484\" \/><\/p>\n<p>That gives us more control &#8211; users will only have access to the metadata field we&#8217;ve created.<\/p>\n<h3>Displaying Other Kinds of Metadata<\/h3>\n<p>So far we&#8217;ve focused on post metadata (or custom fields). But WordPress also stores metadata for other content types, namely users, comments and taxonomy terms.<\/p>\n<p>You&#8217;ve already learned how to output some term metadata in <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-for-intermediate-users-custom-post-types-and-taxonomies\/\" target=\"_blank\">part four<\/a> of this series, when you output the term description on its archive page, using the <code>term_description()<\/code> function. Here&#8217;s what this looks like:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/term-description.png\" alt=\"The term description on the term archive page\" width=\"670\" height=\"511\" \/><\/p>\n<p>Let&#8217;s take a look at user metadata. This is metadata about all your site&#8217;s users, whatever their role, but the most common use for it is in providing information about authors. Each author on your site will have their own author archive, and by adding user metadata to this you can give your readers information about authors. You can also add author metadata to single posts.<\/p>\n<p>Let&#8217;s add some author metadata to our <em>loop-single.php<\/em> template file, along with some post metadata with information about the date the post was written.<\/p>\n<ol>\n<li>In your theme, open the <em>loop-single.php<\/em> file.<\/li>\n<li>Find the <code>&lt;h1&gt;<\/code> element.<\/li>\n<li>Below it, add this:<br \/>\n<div class=\"gist\" data-gist=\"955df6f3576c675c8666ff4e11fd6e48\" data-gist-file=\"entry-meta-before1.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/955df6f3576c675c8666ff4e11fd6e48.js?file=entry-meta-before1.php\">Loading gist 955df6f3576c675c8666ff4e11fd6e48<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/li>\n<li>Save the file.<\/li>\n<\/ol>\n<p>This displays the author&#8217;s name and the date on which the post is written. Because I&#8217;ve included a conditional tag, it only does this on posts, not projects.<\/p>\n<p><em>Note: You may have noticed that there are now two conditional tags in our loop-single.php file. You might prefer to create a different version of this file for each post type. You should be able to work out how to do this using what you learned in part one of this series about the template hierarchy.<\/em><\/p>\n<p>The author and date are now displayed on my site:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/author-metadata-without-link.png\" alt=\"The author name displayed below the post title\" width=\"670\" height=\"345\" \/><\/p>\n<p>Let&#8217;s make it a bit more helpful, by including a link to the author&#8217;s archive page. You do that by replacing the <code>the_author()<\/code> tag with <code>the_author_posts_link()<\/code>.<\/p>\n<p>Edit your code so it reads like this:<\/p>\n<div class=\"gist\" data-gist=\"0c541a1a2a626873322c73b5f510aa89\" data-gist-file=\"entry-meta-before2.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/0c541a1a2a626873322c73b5f510aa89.js?file=entry-meta-before2.php\">Loading gist 0c541a1a2a626873322c73b5f510aa89<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Now the author&#8217;s name is displayed with a link:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/author-link-in-post.png\" alt=\"The author's name displayed below the post title with a link to the author archive page\" width=\"670\" height=\"354\" \/><\/p>\n<h4>Extra\u00a0Challenge: Displaying Taxonomy Terms<\/h4>\n<p>You can also display metadata relating to taxonomy terms &#8211; you should remember learning about that earlier in this series.\u00a0Why not try applying\u00a0what you&#8217;ve learned in the previous part on working with custom taxonomies to your <em>loop-single.php<\/em> file, and adding the taxonomy terms for the post to the single post page.<\/p>\n<p>I&#8217;m not going to work through this in detail but I will give you some hints:<\/p>\n<ul>\n<li>For taxonomy terms, you&#8217;ll need to use <code><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/get_the_term_list\" target=\"_blank\">get_the_term_list()<\/a><\/code> which you used in the previous part of this series.<\/li>\n<li>For categories, you can use <code><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/get_the_category_list\" target=\"_blank\">get_the_category_list()<\/a><\/code>\u00a0&#8211; although I prefer to use <code>get_the_term_list()<\/code> as it&#8217;s easier to work with.<\/li>\n<li>For tags, use\u00a0<code><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/get_the_tag_list\" target=\"_blank\">get_the_tag_list()<\/a><\/code>\u00a0or <code>get_the_term_list()<\/code>.<\/li>\n<\/ul>\n<p>If you get stuck doing this, check out the <a href=\"https:\/\/github.com\/rachelmccollin\/wpmudev-intermediate-WordPress-development\" target=\"_blank\">source code<\/a>. I&#8217;ve also added some styling to my metadata. Here it is:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/post-meta-before.png\" alt=\"The post author and categories displayed after the post title\" width=\"670\" height=\"380\" \/><\/p>\n<p>Feel free to add whatever metadata you want to your post and style it more imaginatively than I have!<\/p>\n<h3>Metadata Adds an Extra Layer to Your Data<\/h3>\n<p>Metadata is another way to get even more control over your data in WordPress. Use it for extra information about users, comments, taxonomy terms and posts themselves, and you can then puppet it in your theme or plugin however you want.<\/p>\n<p>In this part of the series, you&#8217;ve learned what metadata is and how to create a metabox for adding it to posts. You&#8217;ve also learned how to display other kinds of metadata about a post.<\/p>\n<p>Why not try experimenting\u00a0with more metadata in your theme?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The default Page and Post content types in WordPress are enough for many websites, but if you really want to harness the powers of WordPress as a CMS it\u2019s time to start learning about custom fields and metadata. This is the sixth post in our WordPress Development for Intermediate Users series. This series follows on [&hellip;]<\/p>\n","protected":false},"author":347011,"featured_media":157336,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[557],"tags":[9770,10493],"tutorials_categories":[],"class_list":["post-156382","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-development-2","tag-intermediate"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/156382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/347011"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=156382"}],"version-history":[{"count":18,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/156382\/revisions"}],"predecessor-version":[{"id":209722,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/156382\/revisions\/209722"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/157336"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=156382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=156382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=156382"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=156382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}