{"id":43421,"date":"2018-11-09T11:21:58","date_gmt":"2018-11-09T17:21:58","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=43421"},"modified":"2024-01-10T13:40:31","modified_gmt":"2024-01-10T19:40:31","slug":"how-to-customize-a-wordpress-themes-colors","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/","title":{"rendered":"How to Customize a WordPress Theme\u2019s Colors"},"content":{"rendered":"\n

One of the best parts of using WordPress is that you get access to thousands of themes<\/a> you can use to customize your site’s style. However, sometimes you’ll find the perfect theme, only to realize that it doesn’t feature a color scheme you like.<\/p>\n\n\n\n

This can be frustrating, but it doesn\u2019t have to derail your plans. With a little work, you can change your theme\u2019s color options, and make your website look just the way you want it to.<\/p>\n\n\n\n

In this article, we’re going to explore two ways you can customize a WordPress theme’s colors, including a manual approach and a plugin method. Let’s get started!<\/p>\n\n\n\n

How to Change WordPress Theme Colors<\/h2>\n\n\n\n

In this section, we’re going to show you how to change your WordPress theme colors the manual way. To do this, you’ll want to use a \u201cchild theme,\u201d<\/a> so you don’t lose any of the changes you make when the \u201cparent\u201d theme is updated.<\/p>\n\n\n\n

What’s more, setting up a child theme is almost always a smart idea if you plan on making any custom changes to your site\u2019s framework. Let’s talk about how to get the job done.<\/p>\n\n\n\n

Step 1: Create a Child Theme<\/h3>\n\n\n\n

A child theme is a copy of a parent theme, which inherits the same styles. You can make changes to its code without affecting the parent, and they won’t get overwritten when you need to update the theme. This approach enables you to edit your site’s style safely, so that if you make any mistakes, you can revert to the parent and start over.<\/p>\n\n\n\n

When it comes to creating a child theme, there are two ways you can go about it. First, you can follow the manual approach, which we cover in this article<\/a> and can sum up in four steps:<\/p>\n\n\n\n

    \n
  1. Connect to your website via File Transfer Protocol (FTP)<\/a>, using a client such as FileZilla<\/a>.<\/li>\n\n\n\n
  2. Navigate to your WordPress Themes folder.<\/li>\n\n\n\n
  3. Create a new folder for your child theme.<\/li>\n\n\n\n
  4. Set up a style.css<\/em> file<\/a> for your child theme.<\/li>\n<\/ol>\n\n\n\n

    However, you can instead opt to use a plugin<\/a> if you’re not comfortable editing WordPress files manually. For this scenario, we recommend Child Theme Configurator<\/a>. With this plugin, you can generate a child theme<\/a> and configure its settings using a simple menu.<\/p>\n\n\n\n

    You’re free to use whichever method you prefer, of course. When your child theme is set up, you can activate it and move on to the next step.<\/p>\n\n\n\n

    Step 2: Log In to WordPress and Open the Customizer<\/h3>\n\n\n\n

    Before you can change your WordPress theme colors, you’ll need to log in to your dashboard. Once there, navigate to the Appearance<\/em> > Editor<\/em> tab:<\/p>\n\n\n\n

    \"how<\/figure>\n\n\n\n

    There, you’ll find a simple text editor that enables you to alter your child theme’s files. Keep in mind that you can also do this using FTP and your favorite text editor, but the results will be the same either way.<\/p>\n\n\n\n

    If you’d rather preview the changes you make live, you can also edit your theme’s colors using the WordPress Customizer<\/em>. To do that, navigate to the Appearance<\/em> > Customize<\/em> tab, and then open the Additional CSS<\/em> section:<\/p>\n\n\n\n

    \"change<\/figure>\n\n\n\n

    In either case, you’ll need to use Cascading Style Sheets (CSS) to alter your theme’s colors. That\u2019s where our final step comes in.<\/p>\n\n\n\n

    Step 3: Change Your WordPress Theme Colors<\/h3>\n\n\n\n

    This step is fairly straightforward if you’re already familiar with CSS<\/a>. Each element within your theme has its own name or ‘class’, which you can target using CSS code. You’ll need to know what the relevant class is, and then use HEX color codes<\/a> to change it.<\/p>\n\n\n\n

    For example, if you want to change your theme’s background color, you can add a CSS snippet like this to your child theme (using any of the methods in the last section):<\/p>\n\n\n\n

    background-color: #XXXXXX;<\/pre>\n\n\n\n
    The first part of that code targets the correct class for the element you want to modify. Then you\u2019ll just need to specify the HEX color you\u2019d like to use. Once you\u2019re done, don\u2019t forget to save the changes to your theme’s stylesheet.<\/p>\n\n\n\n
    Fortunately, since you’re using a child theme, you can experiment freely without worrying about breaking anything on your site. If you\u2019re new to CSS, check out this guide on how to identify elements<\/a> within your site. Then, you can play around with HEX color codes until you find a combination you like.<\/p>\n\n\n\n
    Plugins That Change WordPress Theme Colors<\/h2>\n\n\n\n
    If you’d prefer to use plugins rather than CSS, you’ll be happy to know that there are several options you can use to customize WordPress theme colors. Let’s go over two of our favorite tools.<\/p>\n\n\n\n
    Plugin 1: Child Theme Configurator<\/a><\/h3>\n\n\n\n
    \"change<\/figure>\n\n\n\n
    Child Theme Configurator<\/a> is our top choice, because it enables you to both create a child theme and customize its color scheme. That means you can skip over a lot of the steps we covered earlier, and start experimenting with color palettes a lot faster. With this plugin, you’ll be able to change font colors, background tones, and much more.<\/p>\n\n\n\n
    Plugin 2: Central Color Pallete<\/a><\/h3>\n\n\n\n
    \"how<\/figure>\n\n\n\n
    As its name implies, Central Color Pallete<\/a> enables you to change your theme’s color palette. This plugin integrates well with many popular themes and plugins, and lets you skip the process of using the WordPress editor to pick and switch colors. Two of the plugins Central Color Palette works smoothly with are Beaver Builder<\/a> and Elementor<\/a>. However, this plugin has not been tested with the latest version of WordPress, so you’ll want to take extra precaution if you choose this option.<\/p>\n\n\n\n
    Update Your WordPress Digital Experience with WP Engine<\/h2>\n\n\n\n
    Regardless of what theme you choose, you’ll need a web host that provides you with the stability and performance you\u2019ll need to run and customize your site. With WP Engine, you get both of those features, and access to a stellar support team.<\/p>\n\n\n\n
    If you’re more of a Do-It-Yourself (DIY) kind of person, we also publish a lot of tutorials<\/a> you can use to troubleshoot or make changes to your website. Check out our plans<\/a> or learn more about our WordPress hosting<\/a> today!<\/p>\n","protected":false},"excerpt":{"rendered":"
    One of the best parts of using WordPress is that you get access to thousands of themes you can use to customize your site’s style. However, sometimes you’ll find the perfect theme, only to realize that it doesn’t feature a color scheme you like. This can be frustrating, but it doesn\u2019t have to derail your…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":43422,"template":"","resource-topic":[904,901],"resource-role":[896,906,897,903],"resource-type":[916],"class_list":["post-43421","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Customize a WordPress Theme\u2019s Colors<\/title>\n<meta name=\"description\" content=\"In this guide, we'll explain how to change theme colors in WordPress, both by making changes to your child theme or by using a plugin!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize a WordPress Theme\u2019s Colors\" \/>\n<meta property=\"og:description\" content=\"In this guide, we'll explain how to change theme colors in WordPress, both by making changes to your child theme or by using a plugin!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/\" \/>\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-01-10T19:40:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/11\/change-theme-colors-resource1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Customize a WordPress Theme\u2019s Colors\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/11\/change-theme-colors-resource1.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/\",\"name\":\"How to Customize a WordPress Theme\u2019s Colors\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2018-11-09T17:21:58+00:00\",\"dateModified\":\"2024-01-10T19:40:31+00:00\",\"description\":\"In this guide, we'll explain how to change theme colors in WordPress, both by making changes to your child theme or by using a plugin!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Customize a WordPress Theme\u2019s Colors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Customize a WordPress Theme\u2019s Colors","description":"In this guide, we'll explain how to change theme colors in WordPress, both by making changes to your child theme or by using a plugin!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Customize a WordPress Theme\u2019s Colors","og_description":"In this guide, we'll explain how to change theme colors in WordPress, both by making changes to your child theme or by using a plugin!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-01-10T19:40:31+00:00","og_image":[{"width":1100,"height":400,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/11\/change-theme-colors-resource1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Customize a WordPress Theme\u2019s Colors","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/11\/change-theme-colors-resource1.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/","name":"How to Customize a WordPress Theme\u2019s Colors","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2018-11-09T17:21:58+00:00","dateModified":"2024-01-10T19:40:31+00:00","description":"In this guide, we'll explain how to change theme colors in WordPress, both by making changes to your child theme or by using a plugin!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-customize-a-wordpress-themes-colors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Customize a WordPress Theme\u2019s Colors"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/11\/change-theme-colors-resourcegrid.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Developer, Entrepreneur, Freelancer, Marketer","topic":"<strong>Topics:<\/strong> Marketing, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/43421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/43422"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=43421"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=43421"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=43421"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=43421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}