{"id":602,"date":"2019-02-09T17:58:24","date_gmt":"2019-02-09T09:58:24","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=602"},"modified":"2019-02-26T09:55:53","modified_gmt":"2019-02-26T01:55:53","slug":"change-default-colors-in-wordpress-customizer","status":"publish","type":"post","link":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/","title":{"rendered":"How To Change The Default Colors In WordPress Customizer"},"content":{"rendered":"\n

Many of the better WordPress themes add a color picker to the WordPress customizer. This makes it easier to design your website visually, rather than with code.<\/p>\n\n\n\n

When you use the WordPress Customizer, you may have seen something like this:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

The circled colours is what we'll be changing today.<\/p>\n\n\n\n

Why go to the trouble of changing the default color palette?<\/p>\n\n\n\n

We'll be making the changes in a child theme. You can use this child theme on many other projects. So if you have a default set of colors you like to use, this will make designing a lot easier.<\/p>\n\n\n\n

You won't have to remember the hexadecimal code for your colors. Just click the right shade.<\/p>\n\n\n\n

How to change the default colors in the WordPress Customizer<\/strong>:<\/p>\n\n\n\n

  1. Switch to a Child Theme<\/em><\/li>
  2. Create an array of eight hexadecimal colors in functions.php<\/em><\/li>
  3. Connect the array to the WordPress Customizer using add_filter<\/em>.<\/li><\/ol>\n\n\n\n

    The exact filter you connect with depends on your theme.<\/p>\n\n\n\n

    In this tutorial, I'll be showing how to do it in Astra and GeneratePress.<\/p>\n\n\n\n

    Switch to a Child Theme<\/h2>\n\n\n\n

    For this to work, we need to edit the functions.php<\/em> file.<\/p>\n\n\n\n

    You should never do this on the main theme, or your customizations will be deleted the next time you update the theme.<\/p>\n\n\n\n

    I've written a full tutorial on how you can create your own child theme for any WordPress theme here<\/a>. It's worth taking the time to do that now, if you haven't already got one.<\/p>\n\n\n\n

    Create an array of eight hexadecimal colors<\/h2>\n\n\n\n

    In functions.php<\/em> we're going to create an array of eight colors in hexadecimal.<\/p>\n\n\n\n

    It must<\/strong> be eight colors. No more. No fewer.<\/p>\n\n\n\n

    Regardless of which theme you're using, we'll do this with the same function:<\/p>\n\n\n\n

    function intelliwolf_custom_palettes($palettes) {\n  $palettes = array(\n    '#000000',\n    '#FFFFFF',\n    '#F1C40F',\n    '#666A86',\n    '#C5AFA4',\n    '#CC7E85',\n    '#CF4D6F',\n    '#8FA998'\n  );\n  return $palettes;\n}<\/code><\/pre>\n\n\n\n

    You can call the function whatever you want. Just as long as it's unique. That way it won't conflict with other parts of the code.<\/p>\n\n\n\n

    I like to use Coolors<\/a> to decide on my color palettes. It's a great, free tool.<\/p>\n\n\n\n

    Coolors has the Hex codes for the colors inside the tool. You would just copy and paste to replace the default colors with your own.<\/p>\n\n\n\n

    Connect the array to the WordPress Customizer<\/h2>\n\n\n\n

    The exact filter you need to hook into depends on which theme you're using.<\/p>\n\n\n\n

    To change the default colors in Astra<\/strong>, use this code:<\/p>\n\n\n\n

    add_filter('astra_color_palettes', 'intelliwolf_custom_palettes');\n\nfunction intelliwolf_custom_palettes($palettes) {\n  $palettes = array(\n    '#000000',\n    '#FFFFFF',\n    '#F1C40F',\n    '#666A86',\n    '#C5AFA4',\n    '#CC7E85',\n    '#CF4D6F',\n    '#8FA998'\n  );\n  return $palettes;\n}<\/code><\/pre>\n\n\n\n

    To change the default colors in GeneratePress<\/strong>, use this code:<\/p>\n\n\n\n

    add_filter('generate_default_color_palettes', 'intelliwolf_custom_palettes');\n\nfunction intelliwolf_custom_palettes($palettes) {\n  $palettes = array(\n    '#000000',\n    '#FFFFFF',\n    '#F1C40F',\n    '#666A86',\n    '#C5AFA4',\n    '#CC7E85',\n    '#CF4D6F',\n    '#8FA998'\n  );\n  return $palettes;\n}<\/code><\/pre>\n\n\n\n

    Notice that the only difference is the filter we're hooking into.<\/p>\n\n\n\n

    In Astra, we add the filter to astra_color_palettes<\/em>, while in GeneratePress we add it to generate_default_color_palettes<\/em>.<\/p>\n\n\n\n

    How to find which filter to use in a theme not listed here<\/h2>\n\n\n\n

    The way this works is it piggybacks onto the WordPress Color Picker API.<\/p>\n\n\n\n

    You can read more about the color picker API here<\/a>.<\/p>\n\n\n\n

    The one thing they all have in common is connecting to jQuery through \"wp-color-picker\".<\/p>\n\n\n\n

    To find which filter your theme uses, search your files for \"wp-color-picker\". That will likely have a JSON encoded array of colors from another function.<\/p>\n\n\n\n

    Find that function and you'll find the filter.<\/p>\n\n\n\n

    Don't try to search file by file for this. Just install Atom<\/a> for free (works on OSX, Windows and Linux), open the theme folder in Atom and use the \"Find in Project\" function (CTRL+Shift+F on Windows).<\/p>\n","protected":false},"excerpt":{"rendered":"

    Many of the better WordPress themes add a color picker to the WordPress customizer. This makes it easier to design your website visually, rather than with code. When you use the WordPress Customizer, you may have seen something like this: The circled colours is what we’ll be changing today. Why go to the trouble of<\/p>\n","protected":false},"author":2,"featured_media":605,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"yoast_head":"\nHow To Change The Default Colors In WordPress Customizer (Astra, GeneratePress)<\/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:\/\/www.intelliwolf.com\/change-default-colors-in-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 Change The Default Colors In WordPress Customizer (Astra, GeneratePress)\" \/>\n<meta property=\"og:description\" content=\"Many of the better WordPress themes add a color picker to the WordPress customizer. This makes it easier to design your website visually, rather than with code. When you use the WordPress Customizer, you may have seen something like this: The circled colours is what we'll be changing today. Why go to the trouble of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/\" \/>\n<meta property=\"og:site_name\" content=\"Intelliwolf\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-09T09:58:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-26T01:55:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mike Haydon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Haydon\" \/>\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:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/\"},\"author\":{\"name\":\"Mike Haydon\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\"},\"headline\":\"How To Change The Default Colors In WordPress Customizer\",\"datePublished\":\"2019-02-09T09:58:24+00:00\",\"dateModified\":\"2019-02-26T01:55:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/\"},\"wordCount\":581,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png\",\"articleSection\":[\"Theme Customization\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/\",\"url\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/\",\"name\":\"How To Change The Default Colors In WordPress Customizer (Astra, GeneratePress)\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png\",\"datePublished\":\"2019-02-09T09:58:24+00:00\",\"dateModified\":\"2019-02-26T01:55:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#primaryimage\",\"url\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png\",\"contentUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.intelliwolf.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Theme Customization\",\"item\":\"https:\/\/www.intelliwolf.com\/category\/theme-customization\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Change The Default Colors In WordPress Customizer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.intelliwolf.com\/#website\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"name\":\"Intelliwolf\",\"description\":\"WordPress, Web Design & Coding Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.intelliwolf.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\",\"name\":\"Intelliwolf\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"contentUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"width\":300,\"height\":100,\"caption\":\"Intelliwolf\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\",\"name\":\"Mike Haydon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"caption\":\"Mike Haydon\"},\"sameAs\":[\"https:\/\/intelliwolf.com\/about-mike-haydon\/\"]}]}<\/script>\n","yoast_head_json":{"title":"How To Change The Default Colors In WordPress Customizer (Astra, GeneratePress)","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:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/","og_locale":"en_US","og_type":"article","og_title":"How To Change The Default Colors In WordPress Customizer (Astra, GeneratePress)","og_description":"Many of the better WordPress themes add a color picker to the WordPress customizer. This makes it easier to design your website visually, rather than with code. When you use the WordPress Customizer, you may have seen something like this: The circled colours is what we'll be changing today. Why go to the trouble of","og_url":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/","og_site_name":"Intelliwolf","article_published_time":"2019-02-09T09:58:24+00:00","article_modified_time":"2019-02-26T01:55:53+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png","type":"image\/png"}],"author":"Mike Haydon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mike Haydon","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#article","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/"},"author":{"name":"Mike Haydon","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343"},"headline":"How To Change The Default Colors In WordPress Customizer","datePublished":"2019-02-09T09:58:24+00:00","dateModified":"2019-02-26T01:55:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/"},"wordCount":581,"commentCount":2,"publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"image":{"@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png","articleSection":["Theme Customization"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/","url":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/","name":"How To Change The Default Colors In WordPress Customizer (Astra, GeneratePress)","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#primaryimage"},"image":{"@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png","datePublished":"2019-02-09T09:58:24+00:00","dateModified":"2019-02-26T01:55:53+00:00","breadcrumb":{"@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#primaryimage","url":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png","contentUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-09_change-default-wordpress-color-picker-palette.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.intelliwolf.com\/change-default-colors-in-wordpress-customizer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.intelliwolf.com\/"},{"@type":"ListItem","position":2,"name":"Theme Customization","item":"https:\/\/www.intelliwolf.com\/category\/theme-customization\/"},{"@type":"ListItem","position":3,"name":"How To Change The Default Colors In WordPress Customizer"}]},{"@type":"WebSite","@id":"https:\/\/www.intelliwolf.com\/#website","url":"https:\/\/www.intelliwolf.com\/","name":"Intelliwolf","description":"WordPress, Web Design & Coding Tutorials","publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intelliwolf.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.intelliwolf.com\/#organization","name":"Intelliwolf","url":"https:\/\/www.intelliwolf.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","contentUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","width":300,"height":100,"caption":"Intelliwolf"},"image":{"@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343","name":"Mike Haydon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","caption":"Mike Haydon"},"sameAs":["https:\/\/intelliwolf.com\/about-mike-haydon\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/602"}],"collection":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":0,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/602\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/media\/605"}],"wp:attachment":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/media?parent=602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/categories?post=602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/tags?post=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}