{"id":822,"date":"2016-01-14T10:24:08","date_gmt":"2016-01-14T01:24:08","guid":{"rendered":"http:\/\/n8finch.com\/?p=822"},"modified":"2019-06-30T07:03:37","modified_gmt":"2019-06-29T22:03:37","slug":"custom-meta-boxes-and-post-meta","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/custom-meta-boxes-and-post-meta\/","title":{"rendered":"This Week I Learned: Custom Meta Boxes and Post Meta"},"content":{"rendered":"<p>&#8220;Can we have a l way to link a slider image to a specific page?&#8221; my client asked.<\/p>\n<p>&#8220;Sure, no problem,&#8221; I said.<\/p>\n<p>Now, I had never done this before, but it seemed easy enough to do. In my mind, I pictured the solution:<\/p>\n<ul>\n<li>In the slider custom post type (cpt), I need a custom field that can store the hyperlink they need.<\/li>\n<li>Then I need to be able to get that hyperlink data in the slider cpt php file, and wrap the slider in an `&lt;a&gt;` tag.<\/li>\n<li>That sound work, and there will be much rejoicing.<\/li>\n<\/ul>\n<p>Well.. it wasn&#8217;t quite as straightforward as that, but not too far off. Thanks to Google, the <strong><a href=\"https:\/\/codex.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Codex<\/a><\/strong> (bless you!), and a pointer from the awesome folks at <strong><a href=\"https:\/\/ZigZagPress.com\" target=\"_blank\" rel=\"noopener noreferrer\">ZigZagPress.com<\/a><\/strong> (thanks Joe!), I was off to the races.<\/p>\n<p>Here&#8217;s what I did&#8230;<!--more--><\/p>\n<h2>Adding the Metabox<\/h2>\n<p>I&#8217;m still a little murky on the difference between custom fields and custom metaboxes, as there&#8217;s definitely some overlap, but the long and short of it is:<\/p>\n<blockquote>\n<p style=\"padding-left: 30px;\">Custom fields are key\/value pairs for storing data. Metaboxes are structures that contain custom fields, or at least, a place to store custom data. Metaboxes can be styled and dragged around on a post type view.<\/p>\n<\/blockquote>\n<p>Great! So, I set to work on adding my first real like custom metabox!<\/p>\n<p>I headed over to the WordPress Codex and grabbed the <strong><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/add_meta_box\" target=\"_blank\" rel=\"noopener noreferrer\">code for adding a metabox<\/a><\/strong>. After check the parameters, and deciding I wanted the box on the sidebar high up on the post page, I ended up with this basic function and hook:<\/p>\n<pre class=\"brush: php; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">\/*\r\n * Adds Custom Meta Box for Slider Hyperlink\r\n -------------------------------------------*\/\r\n\r\n\/**\r\n * Adds a box to the main column on the Post and Page edit screens.\r\n *\/\r\nfunction n8f_add_meta_box() {\r\n\r\n    $screens = array( 'slide' ); \/\/determines what post type this will show up on\r\n\r\n    foreach ( $screens as $screen ) {\r\n\r\n        add_meta_box(\r\n            'n8f_sectionid',\r\n            __( 'Slide hyperlink ', 'n8f_textdomain' ), \/\/'Slide hyperlink' is the title of the metabox\r\n            'n8f_meta_box_callback',\r\n            $screen,\r\n            'side', &amp;nbsp;\/\/where I want the metabox&amp;nbsp;to be, main or side content\r\n            'high' &amp;nbsp;\/\/priority of the metabox, we want that guy on top!\r\n        );\r\n    }\r\n}\r\nadd_action( 'add_meta_boxes', 'n8f_add_meta_box' );\r\n\r\n<\/pre>\n<p>If you look at the comments in the code, you can see the main pieces I changed and why. Parameter values are listed on the Codex page.<\/p>\n<p>Implementing this code in my functionality plugin yielded the desired results:<\/p>\n<p><a href=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/v1561845817\/Slide-hyperlink-metabox_lf40dn.jpg\" rel=\"attachment wp-att-855\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-855\" src=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/v1561845817\/Slide-hyperlink-metabox_lf40dn.jpg\" alt=\"Slide hyperlink metabox\" width=\"485\" height=\"251\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Booyah! I also added the rest of the of the code from the Procedural example on the Codex page because I also wanted to:<\/p>\n<ul>\n<li>have the stored data\u00a0print when the page was loaded<\/li>\n<li>save the data properly<\/li>\n<li>make sure the data was secure (using sanitization and nonces, two things I know very little about)<\/li>\n<\/ul>\n<p>These all seemed like good things to me, so they&#8217;re in!<\/p>\n<p>I tested to make sure a hyperlink would save, it did, so it was on to the next thing&#8230;<\/p>\n<p>**<strong>Note:<\/strong> I could have also written code to evaluate the data entered to validate that it was a proper URL, and not just a note that said &#8220;Howdy!&#8221; or something. I didn&#8217;t do that simply because of time constraints and I don&#8217;t think anyone is going to put anything but a URL in there&#8230; but you never know&#8230;<\/p>\n<h2>Linking to the Slide<\/h2>\n<p>This part was fairly simple as well, thanks to Joe from ZigZagPress.com telling me where to look. I am using their <strong><a href=\"https:\/\/demo.zigzagpress.com\/dharma\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dharma theme<\/a><\/strong> for this particular client&#8217;s site, with some modifications and customizations.<\/p>\n<p>First, I needed to make sure I could get the necessary metadata, so, I used <code>get_post_meta()<\/code> to get the necessary data and store it in a variable:<\/p>\n<pre class=\"brush: php; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">$n8f_slide_id = $post-&amp;gt;ID;\r\n$n8f_slide_hyperlink = ( get_post_meta( $n8f_slide_id, $key = '_n8f_slide_hyperlink', $single = true ));<\/pre>\n<p>After that, I located the slider output and wrapped the slider image in an <code>&amp;lt;a&amp;gt;<\/code> tag as planned:<\/p>\n<pre class=\"brush: php; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">$output .= '&amp;lt;a href=&quot;'.$ecck_slide_hyperlink.'&quot;&amp;gt;&amp;lt;img class=&quot;img-responsive&quot; alt=&quot;'.get_the_title().'&quot; src=&quot;'.$image_url.'&quot; \/&amp;gt;&amp;lt;\/a&amp;gt;';<\/pre>\n<p>And done! Wait&#8230; that didn&#8217;t exactly work. I went to the homepage of the site and the images\u00a0<strong><em>weren&#8217;t\u00a0<\/em><\/strong>clickable or linked! What did I miss?<\/p>\n<p>Thankfully, Joe reminded me there was an overlay <code>&amp;lt;div&amp;gt;<\/code> a few lines before. Once that was removed, all the links worked like a charm!<\/p>\n<h2>Takeaways<\/h2>\n<p>The WordPress Codex is your friend and has done a TON (I cannot overstate this word enough, a\u00a0<span style=\"text-decoration: underline;\"><strong><em>TON<\/em><\/strong><\/span>) of work for you already so you can come in with fairly clear examples and direction on what to do and expect when you&#8217;re customizing a site.<\/p>\n<p>Don&#8217;t be afraid to ask for help from people that know more. While I pay for ZigZag support, you can go to a local WP meetup or connect with folks online. The WordPress community is always eager to help.<\/p>\n<p>Part of what I <strong>LOVE<\/strong> about this work is the amount of learning as I got. This was a fairly simple metabox and metadata application. However, I&#8217;ll be able to draw on this in the future.<\/p>\n<p>Looking forward to that moment.<\/p>\n<p>Peace,<\/p>\n<p><strong>Nate<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>**<strong>Note:\u00a0<\/strong>some code changed to protect the innocent, or at least the production code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Can we have a l way to link a slider image to a specific page?&#8221; my client asked. &#8220;Sure, no problem,&#8221; I said. Now, I had never done this before, but it seemed easy enough to do. In my mind, I pictured the solution: In the slider custom post type (cpt), I need a custom [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[9,1,8],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>This Week I Learned: Custom Meta Boxes and Post Meta | Nate Finch<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"This Week I Learned: Custom Meta Boxes and Post Meta | Nate Finch\" \/>\n<meta property=\"og:description\" content=\"&#8220;Can we have a l way to link a slider image to a specific page?&#8221; my client asked. &#8220;Sure, no problem,&#8221; I said. Now, I had never done this before, but it seemed easy enough to do. In my mind, I pictured the solution: In the slider custom post type (cpt), I need a custom [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/\" \/>\n<meta property=\"og:site_name\" content=\"Nate Finch\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-14T01:24:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-29T22:03:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/Add-Metabox-Codex_ql4lo1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"787\" \/>\n\t<meta property=\"og:image:height\" content=\"454\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nate\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@n8finch\" \/>\n<meta name=\"twitter:site\" content=\"@n8finch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nate\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/\"},\"author\":{\"name\":\"Nate\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"headline\":\"This Week I Learned: Custom Meta Boxes and Post Meta\",\"datePublished\":\"2016-01-14T01:24:08+00:00\",\"dateModified\":\"2019-06-29T22:03:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/\"},\"wordCount\":922,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"articleSection\":[\"20 Hours Ahead\",\"Blog\",\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/\",\"url\":\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/\",\"name\":\"This Week I Learned: Custom Meta Boxes and Post Meta | Nate Finch\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch.local\/#website\"},\"datePublished\":\"2016-01-14T01:24:08+00:00\",\"dateModified\":\"2019-06-29T22:03:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/n8finch.local\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"This Week I Learned: Custom Meta Boxes and Post Meta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/n8finch.local\/#website\",\"url\":\"https:\/\/n8finch.local\/\",\"name\":\"Nate Finch\",\"description\":\"All the things, keeping it clever...&#x1f913;\",\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/n8finch.local\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\",\"name\":\"Nate\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"contentUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"width\":796,\"height\":792,\"caption\":\"Nate\"},\"logo\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"This Week I Learned: Custom Meta Boxes and Post Meta | Nate Finch","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:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/","og_locale":"en_US","og_type":"article","og_title":"This Week I Learned: Custom Meta Boxes and Post Meta | Nate Finch","og_description":"&#8220;Can we have a l way to link a slider image to a specific page?&#8221; my client asked. &#8220;Sure, no problem,&#8221; I said. Now, I had never done this before, but it seemed easy enough to do. In my mind, I pictured the solution: In the slider custom post type (cpt), I need a custom [&hellip;]","og_url":"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/","og_site_name":"Nate Finch","article_published_time":"2016-01-14T01:24:08+00:00","article_modified_time":"2019-06-29T22:03:37+00:00","og_image":[{"width":787,"height":454,"url":"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/Add-Metabox-Codex_ql4lo1.jpg","type":"image\/jpeg"}],"author":"Nate","twitter_card":"summary_large_image","twitter_creator":"@n8finch","twitter_site":"@n8finch","twitter_misc":{"Written by":"Nate","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/#article","isPartOf":{"@id":"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/"},"author":{"name":"Nate","@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"headline":"This Week I Learned: Custom Meta Boxes and Post Meta","datePublished":"2016-01-14T01:24:08+00:00","dateModified":"2019-06-29T22:03:37+00:00","mainEntityOfPage":{"@id":"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/"},"wordCount":922,"commentCount":0,"publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"articleSection":["20 Hours Ahead","Blog","Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/","url":"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/","name":"This Week I Learned: Custom Meta Boxes and Post Meta | Nate Finch","isPartOf":{"@id":"https:\/\/n8finch.local\/#website"},"datePublished":"2016-01-14T01:24:08+00:00","dateModified":"2019-06-29T22:03:37+00:00","breadcrumb":{"@id":"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/n8finch-site.site.strattic.io\/custom-meta-boxes-and-post-meta\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/n8finch.local\/"},{"@type":"ListItem","position":2,"name":"This Week I Learned: Custom Meta Boxes and Post Meta"}]},{"@type":"WebSite","@id":"https:\/\/n8finch.local\/#website","url":"https:\/\/n8finch.local\/","name":"Nate Finch","description":"All the things, keeping it clever...&#x1f913;","publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/n8finch.local\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce","name":"Nate","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/","url":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","contentUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","width":796,"height":792,"caption":"Nate"},"logo":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/822"}],"collection":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/comments?post=822"}],"version-history":[{"count":8,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/822\/revisions"}],"predecessor-version":[{"id":1859,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/822\/revisions\/1859"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media\/856"}],"wp:attachment":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media?parent=822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/categories?post=822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/tags?post=822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}