Adding the CSS for a Color Scheme in the Theme Customizer

In the first part of this two part series, Rachel McCollin showed you how to create the settings and controls for a color scheme in the WordPress theme customizer. In this part, you'll use these to define CSS in the theme based on what users select using the customizer. You could easily take this further - perhaps by using radio buttons to provide layout options or by giving users a choice as to which colors from their scheme are used where. She would warn against making things too complicated though - in her opinion, the benefit of this approach is that it keeps things simple.

This consists of four steps:

  1. Defining a variable based on each of the options your users select in the customizer
  2. Using the value of these variables to define CSS
  3. Adding classes to the body element based on the radio box selections in your 'Solid Backgrounds' section
  4. Using these classes to define the CSS for the header and footer.

We'll start by defining variables for the colors.

Lubov Cholakova

Lubov CholakovaLubov has been with DMXzone for 8 years now, contributing to the Content and Sales departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.

See All Postings From Lubov Cholakova >>

Comments

Be the first to write a comment

You must me logged in to write a comment.