{"id":139668,"date":"2016-01-13T11:00:33","date_gmt":"2016-01-13T11:00:33","guid":{"rendered":"https:\/\/getflywheel.com\/?p=14955"},"modified":"2024-06-25T18:44:44","modified_gmt":"2024-06-25T23:44:44","slug":"how-to-add-options-to-the-wordpress-customizer","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/","title":{"rendered":"How to add options to the WordPress Customizer"},"content":{"rendered":"\n<p>One of the great advantages of using WordPress is the abundance of avenues to accomplish the same outcome. This especially rings true when adding options to your theme. I used the Options Page functionality of the <a rel=\"noopener noreferrer\" href=\"http:\/\/www.advancedcustomfields.com\/\" target=\"_blank\">Advanced Custom Fields<\/a> (ACF) plugin quite effectively for some time, but I had been thinking about using the Customizer instead.<\/p>\n\n\n\n<p>Switching to a new system of development is always hard; there&#8217;s a learning curve, which means investing time (and I already feel like I never have enough of it). So why change? If it ain&#8217;t broke, don&#8217;t fix it, or something like that, right?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Reasons for using the Customizer<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>If at all possible, I try to make themes that are not dependent on plugins. This is especially true if a plugin has far more features than I need for the purpose of my theme. If the only feature of ACF I used was the Options Page, there was a better way \u2013&nbsp;the Customizer.<\/li>\n\n\n\n<li>WordPress has been pushing people to use the Customizer for some time, so jumping on board is wise. Accomplishing consistency with the user experience is invaluable to the WordPress community, as a whole. If the platform is universally used as intended, we are all able to limit the potential bugs affecting our users\u2019 sites as they make upgrades.<\/li>\n\n\n\n<li>Taking advantage of the live preview is a win for clients. This tool helps give our clients confidence in making changes to their websites by giving them a look at the adjustments in real time. If they can see the effects of their changes right in the moment, they can move forward on their own without needing additional assistance from us.<\/li>\n<\/ol>\n\n\n\n<p>Using the Customizer was a bit overwhelming at first, but once I dove in, I found it easier than expected. So let\u2019s break it down \u2013 here\u2019s how to use the Customizer for theme options.<\/p>\n\n\n\n<p><strong>Pro-tip:<\/strong> The <a rel=\"noopener noreferrer\" href=\"https:\/\/codex.wordpress.org\/Theme_Customization_API\" target=\"_blank\">codex Theme Customization API<\/a> is a great resource as well.<\/p>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity\"\/>\n\n\n\n<p><a href=\"https:\/\/wpengine.com\/local\/\" data-type=\"URL\" data-id=\"https:\/\/wpengine.com\/local\/\" target=\"_blank\" rel=\"noreferrer noopener\">Remember: You should never make changes on a live site. Our free local development app, Local, will help you simplify your workflow and safely experiment with your site. Try it today!<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Structuring theme files<\/h1>\n\n\n\n<p>The following code should go into your <code>functions.php<\/code> file, or I personally like to create a new file specifically for this information in order to keep my <code>functions.php<\/code> file from getting too cluttered.<\/p>\n\n\n\n<p><strong>Here are the files I have in my theme folder that I&#8217;ll be referencing:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>header.php<\/code><\/li>\n\n\n\n<li><code>functions.php<\/code><\/li>\n\n\n\n<li><code>inc\/customizer.php<\/code><\/li>\n<\/ul>\n\n\n\n<p>In my <code>functions.php<\/code> file, I include the following line so that it will load my Customizer file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n* Customizer additions.\n*\/\nrequire get_template_directory() .'\/inc\/customizer.php';<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">Add the settings and controls<\/h1>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/wordpress-customizer-site-identity-default.png\" alt=\"wordpress-customizer-site-identity-default\" class=\"wp-image-14962\"\/><\/figure>\n\n\n\n<p>Now, let&#8217;s discuss how to add controls and settings to the Customizer. One of the options I always include in my themes is the ability to upload a logo. This is a cornerstone for any business site. By default, WordPress includes a Site Identity panel with a site title\/tagline section in the Customizer. This is where we will add our logo field, using the <code>customize_register<\/code> hook.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/wordpress-customizer-site-identity-options.png\" alt=\"wordpress-customizer-site-identity-options\" class=\"wp-image-14963\"\/><\/figure>\n\n\n\n<p>We are going to create a unique function that adds the setting so that WordPress knows to store a new value, and then add the control for this setting to the Site Identity panel in the Customizer.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre class=\"wp-block-syntaxhighlighter-code\">\/**\n* Create Logo Setting and Upload Control\n*\/\nfunction your_theme_new_customizer_settings($wp_customize) {\n\/\/ add a setting for the site logo\n$wp_customize-&amp;amp;amp;gt;add_setting('your_theme_logo');\n\/\/ Add a control to upload the logo\n$wp_customize-&amp;amp;amp;gt;add_control( new WP_Customize_Image_Control( $wp_customize, 'your_theme_logo',\narray(\n'label' =&amp;amp;amp;gt; 'Upload Logo',\n'section' =&amp;amp;amp;gt; 'title_tagline',\n'settings' =&amp;amp;amp;gt; 'your_theme_logo',\n) ) );\n}\nadd_action('customize_register', 'your_theme_new_customizer_settings');<\/pre><\/code><\/pre>\n\n\n\n<p>The fields will now appear in the Customizer for your theme, but we also need to include the logo in the template files.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/wordpress-customizer-site-identity-logo.png\" alt=\"wordpress-customizer-site-identity-logo\" class=\"wp-image-14964\"\/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Use the option in your theme&#8217;s template files<\/h1>\n\n\n\n<p>So in <code>header.php<\/code> where you want the logo to appear, you&#8217;ll want to insert some code along these lines:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre class=\"wp-block-syntaxhighlighter-code\">&lt;?php\n\/\/ check to see if the logo exists and add it to the page\nif ( get_theme_mod( 'your_theme_logo' ) ) : ?>\n&lt;img src=\"&lt;?php echo get_theme_mod( 'your_theme_logo' ); ?>\" alt=\"&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>\" >\n&lt;?php \/\/ add a fallback if the logo doesn't exist\nelse : ?>\n&lt;h1 class=\"site-title\">&lt;?php bloginfo( 'name' ); ?>&lt;\/h1>\n&lt;?php endif; ?><\/pre><\/code><\/pre>\n\n\n\n<p>Well done! Your logo will now appear in your theme.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/wordpress-customizer-logo-example.png\" alt=\"wordpress-customizer-logo-example\" class=\"wp-image-14965\"\/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Adding additional panels<\/h1>\n\n\n\n<p>You can also add additional panels to the Customizer to better organize your options. I try to think through what is most intuitive and organize accordingly. <\/p>\n\n\n\n<p><strong>WordPress includes the following panels\/sections by default:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>themes<\/strong> &#8211; Name of the theme<\/li>\n\n\n\n<li><strong>title_tagline<\/strong> &#8211; Site identity<\/li>\n\n\n\n<li><strong>colors<\/strong> &#8211; Colors<\/li>\n\n\n\n<li><strong>header_image<\/strong> &#8211; Header image and site icon<\/li>\n\n\n\n<li><strong>background_image<\/strong> &#8211; Background image<\/li>\n\n\n\n<li><strong>static_front_page<\/strong> &#8211; Static front page<\/li>\n<\/ul>\n\n\n\n<p>By including the following code in your unique function from the instructions above, you can create a new panel.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre class=\"wp-block-syntaxhighlighter-code\">\/\/ Add Footer Section\n$wp_customize-&amp;amp;amp;gt;add_section('your_theme_footer', array(\n'title' =&amp;amp;amp;gt; 'Footer',\n'description' =&amp;amp;amp;gt; '',\n'priority' =&amp;amp;amp;gt; 120,\n));<\/pre><\/code><\/pre>\n\n\n\n<p>It&#8217;s important to note that a panel will not appear unless there are settings and controls assigned to it. So make sure to add a control using <code>'section' =&gt; 'your_theme_footer',<\/code> or whatever you named your new section.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Easy-peasy, right?<\/h1>\n\n\n\n<p>So there you have it, go test your new found skills and add some options to your theme using the Customizer.<\/p>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><a rel=\"noreferrer noopener\" aria-label=\"What's next? (opens in a new tab)\" href=\"https:\/\/localbyflywheel.com\/?utm_campaign=local-by-flywheel&amp;utm_medium=internal&amp;utm_source=layout-article&amp;utm_content=how-to-add-options-article\" target=\"_blank\">What&#8217;s next?<\/a><\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/08\/local-hero-macbook-updated-1-784x441.png\" alt=\"\" class=\"wp-image-36611\"\/><\/figure>\n\n\n\n<p>Don&#8217;t try this on your live site! Try out Local! Learn more <a href=\"https:\/\/wpengine.com\/local\/\" data-type=\"URL\" data-id=\"https:\/\/wpengine.com\/local\/\" target=\"_blank\" rel=\"noreferrer noopener\">here.<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the great advantages of using WordPress is the abundance of avenues to accomplish the same outcome. This especially rings true when adding options to your theme. I used the Options Page functionality of the Advanced Custom Fields (ACF) plugin quite effectively for some time, but I had been thinking about using the Customizer<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":297,"featured_media":20627,"template":"","resource-topic":[],"resource-role":[],"resource-type":[916],"class_list":["post-139668","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to add options to the WordPress Customizer | WP Engine<\/title>\n<meta name=\"description\" content=\"Explore our detailed instructions on how to add custom options to the WordPress Customizer to enhance your site personalization and user control.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add options to the WordPress Customizer | WP Engine\" \/>\n<meta property=\"og:description\" content=\"Explore our detailed instructions on how to add custom options to the WordPress Customizer to enhance your site personalization and user control.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-25T23:44:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/resources\/wp-content\/uploads\/2016\/11\/2-second-delay.png\" \/>\n\t<meta property=\"og:image:width\" content=\"431\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/\",\"url\":\"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/\",\"name\":\"How to add options to the WordPress Customizer | WP Engine\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/resources\/#website\"},\"datePublished\":\"2016-01-13T11:00:33+00:00\",\"dateModified\":\"2024-06-25T23:44:44+00:00\",\"description\":\"Explore our detailed instructions on how to add custom options to the WordPress Customizer to enhance your site personalization and user control.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to add options to the WordPress Customizer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/resources\/#website\",\"url\":\"https:\/\/wpengine.com\/resources\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/resources\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521\",\"name\":\"Erin Myers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"caption\":\"Erin Myers\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add options to the WordPress Customizer | WP Engine","description":"Explore our detailed instructions on how to add custom options to the WordPress Customizer to enhance your site personalization and user control.","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:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/","og_locale":"en_US","og_type":"article","og_title":"How to add options to the WordPress Customizer | WP Engine","og_description":"Explore our detailed instructions on how to add custom options to the WordPress Customizer to enhance your site personalization and user control.","og_url":"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-06-25T23:44:44+00:00","og_image":[{"width":431,"height":260,"url":"https:\/\/wpengine.com\/resources\/wp-content\/uploads\/2016\/11\/2-second-delay.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/","url":"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/","name":"How to add options to the WordPress Customizer | WP Engine","isPartOf":{"@id":"https:\/\/wpengine.com\/resources\/#website"},"datePublished":"2016-01-13T11:00:33+00:00","dateModified":"2024-06-25T23:44:44+00:00","description":"Explore our detailed instructions on how to add custom options to the WordPress Customizer to enhance your site personalization and user control.","breadcrumb":{"@id":"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/resources\/how-to-add-options-to-the-wordpress-customizer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/resources\/"},{"@type":"ListItem","position":3,"name":"How to add options to the WordPress Customizer"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/resources\/#website","url":"https:\/\/wpengine.com\/resources\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/resources\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521","name":"Erin Myers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","caption":"Erin Myers"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/resources\/wp-content\/uploads\/2016\/11\/2-second-delay-239x144.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":false,"topic":false,"_links":{"self":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource\/139668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/users\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/media\/20627"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/media?parent=139668"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource-topic?post=139668"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource-role?post=139668"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/resource-type?post=139668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}