• Skip to main content
  • Skip to primary sidebar
  • About
  • Contact
  • Resources
  • Blog
    • Easy Digital Downloads
    • General
    • Genesis Framework
    • jQuery/JavaScript
    • Project Management
    • WordPress Functions
    • WordPress Plugin Development
  • Army Lessons

Scott DeLuzio

WordPress Development Tutorials

How to Add Custom Color Styles in Genesis

August 22, 2016 Scott DeLuzio Leave a Comment

Many Genesis Framework themes come with several color options. Others may not have any color options. If you need to add custom color styles in Genesis, you can do so rather easily.

First, we need to list the color options available to your theme. This adds the style selector menu to your Genesis > Theme Settings page.

add_theme_support( 'genesis-style-selector', array(
    'theme-name-blue'    => __( 'Blue', 'genesis' ),
    'theme-name-pink'    => __( 'Pink', 'genesis' ),
    'theme-name-orange'  => __( 'Orange', 'genesis' ),
    'theme-name-yellow'  => __( 'Yellow', 'genesis' )
) );

add_theme_support( 'genesis-style-selector', array( 'theme-name-blue' => __( 'Blue', 'genesis' ), 'theme-name-pink' => __( 'Pink', 'genesis' ), 'theme-name-orange' => __( 'Orange', 'genesis' ), 'theme-name-yellow' => __( 'Yellow', 'genesis' ) ) );

If you choose the Blue color style option, your theme will get a .theme-name-blue class applied to the body.

Finally, you will need to target the CSS specific to each custom color style in Genesis.

For example, if you wanted to change the style of any links on the page using the Blue color style option, you could use something like this:

.theme-name-blue a {
    color: #87CEFA;

.theme-name-blue a { color: #87CEFA;

The same could be done for any other existing element on your page.

Customizing an Existing Theme

Many Genesis themes already have much of the code above already in place. If you are editing a child theme, you can simply add your own style selector to the add_theme_support function.

add_theme_support( 'genesis-style-selector', array(
    'theme-name-blue'    => __( 'Blue', 'genesis' ),
    'theme-name-pink'    => __( 'Pink', 'genesis' ),
    'theme-name-orange'  => __( 'Orange', 'genesis' ),
    'theme-name-yellow'  => __( 'Yellow', 'genesis' ),
    'theme-name-custom'  => __( 'My Custom Color', 'genesis' )
) );

add_theme_support( 'genesis-style-selector', array( 'theme-name-blue' => __( 'Blue', 'genesis' ), 'theme-name-pink' => __( 'Pink', 'genesis' ), 'theme-name-orange' => __( 'Orange', 'genesis' ), 'theme-name-yellow' => __( 'Yellow', 'genesis' ), 'theme-name-custom' => __( 'My Custom Color', 'genesis' ) ) );

Then in your Genesis child theme’s style.css file, find the section labeled “Theme Colors”, or something similar.

Chances are the theme author already picked out most of the classes that should be styled with a certain color so the hard work is already done for you. You can copy and paste one of the existing color style sections and modify those colors to fit your own custom style’s needs.

/* Theme Name Blue
--------------------------------------------- */
 
.theme-name-blue .content .entry-title a:hover,
.theme-name-blue .content #genesis-responsive-slider a,
.theme-name-blue .content #genesis-responsive-slider h2 a:hover,
.theme-name-blue .nav-secondary .genesis-nav-menu .current-menu-item > a,
.theme-name-blue .nav-secondary .genesis-nav-menu .sub-menu a:hover,
.theme-name-blue .nav-secondary .genesis-nav-menu a:hover,
.theme-name-blue .nav-secondary .genesis-nav-menu li:hover > a,
.theme-name-blue .widget-title,
.theme-name-blue a {
	color: #2483d0;
}
 
.theme-name-blue a:hover {
	color: #1e6dad;
}
 
.theme-name-blue .content #genesis-responsive-slider a:hover,
.theme-name-blue .content #genesis-responsive-slider h2 a,
.theme-name-blue .footer-widgets .widget-title,
.theme-name-blue .genesis-nav-menu a,
.theme-name-blue .site-footer a:hover,
.theme-name-blue .site-header .widget-title,
.theme-name-blue .site-title a,
.theme-name-blue .site-title a:hover {
	color: #fff;
}
 
.theme-name-blue .site-footer a {
	color: #666;
}
 
.theme-name-blue .genesis-nav-menu .sub-menu a,
.theme-name-blue .home-bottom .widget-title {
	color: #333;
}
 
.theme-name-blue .genesis-nav-menu a:hover,
.theme-name-blue .genesis-nav-menu .current-menu-item > a,
.theme-name-blue .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	color: #000;
}
 
.theme-name-blue .archive-pagination .active a,
.theme-name-blue .archive-pagination li a:hover,
.theme-name-blue .button,
.theme-name-blue .nav-primary,
.theme-name-blue button,
.theme-name-blue input[type="button"],
.theme-name-blue input[type="reset"],
.theme-name-blue input[type="submit"] {
	background-color: #2483d0;
	color: #fff;
}
 
.theme-name-blue .button:hover,
.theme-name-blue .site-header,
.theme-name-blue button:hover,
.theme-name-blue input:hover[type="button"],
.theme-name-blue input:hover[type="reset"],
.theme-name-blue input:hover[type="submit"] {
	background-color: #1e6dad;
	color: #fff;
}
 
.theme-name-blue .sub-footer {
	background-color: #edf3f4;
}
 
.theme-name-blue,
.theme-name-blue .footer-widgets,
.theme-name-blue .site-footer {
	background-color: #222e37;
}
 
.theme-name-blue .author-box,
.theme-name-blue .nav-secondary .wrap,
.theme-name-blue .sidebar .widget  {
	background-color: #17222b;
}
 
.theme-name-blue .nav-secondary .genesis-nav-menu .sub-menu,
.theme-name-blue .nav-secondary .genesis-nav-menu .sub-menu a {
	background-color: #17222b;
	border-color: #2d3b45;
	color: #fff;
}
 
.theme-name-blue .enews-widget input:hover[type="submit"] {
	background-color: #eee;
	color: #333;
}
 
/* Your Custom Style
--------------------------------------------- */
 
.theme-name-custom .content .entry-title a:hover,
.theme-name-custom .content #genesis-responsive-slider a,
.theme-name-custom .content #genesis-responsive-slider h2 a:hover,
.theme-name-custom .nav-secondary .genesis-nav-menu .current-menu-item > a,
.theme-name-custom .nav-secondary .genesis-nav-menu .sub-menu a:hover,
.theme-name-custom .nav-secondary .genesis-nav-menu a:hover,
.theme-name-custom .nav-secondary .genesis-nav-menu li:hover > a,
.theme-name-custom .widget-title,
.theme-name-custom a {
	color: #006400;
}
 
.theme-name-custom a:hover {
	color: #9acd32;
}
 
.theme-name-custom .content #genesis-responsive-slider a:hover,
.theme-name-custom .content #genesis-responsive-slider h2 a,
.theme-name-custom .footer-widgets .widget-title,
.theme-name-custom .genesis-nav-menu a,
.theme-name-custom .site-footer a:hover,
.theme-name-custom .site-header .widget-title,
.theme-name-custom .site-title a,
.theme-name-custom .site-title a:hover {
	color: #fff;
}
 
.theme-name-custom .site-footer a {
	color: #666;
}
 
.theme-name-custom .genesis-nav-menu .sub-menu a,
.theme-name-custom .home-bottom .widget-title {
	color: #333;
}
 
.theme-name-custom .genesis-nav-menu a:hover,
.theme-name-custom .genesis-nav-menu .current-menu-item > a,
.theme-name-custom .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	color: #000;
}
 
.theme-name-custom .archive-pagination .active a,
.theme-name-custom .archive-pagination li a:hover,
.theme-name-custom .button,
.theme-name-custom .nav-primary,
.theme-name-custom button,
.theme-name-custom input[type="button"],
.theme-name-custom input[type="reset"],
.theme-name-custom input[type="submit"] {
	background-color: #006400;
	color: #fff;
}
 
.theme-name-custom .button:hover,
.theme-name-custom .site-header,
.theme-name-custom button:hover,
.theme-name-custom input:hover[type="button"],
.theme-name-custom input:hover[type="reset"],
.theme-name-custom input:hover[type="submit"] {
	background-color: #9acd32;
	color: #fff;
}
 
.theme-name-custom .sub-footer {
	background-color: #edf3f4;
}
 
.theme-name-custom,
.theme-name-custom .footer-widgets,
.theme-name-custom .site-footer {
	background-color: #223722;
}
 
.theme-name-custom .author-box,
.theme-name-custom .nav-secondary .wrap,
.theme-name-custom .sidebar .widget  {
	background-color: #192b17;
}
 
.theme-name-custom .nav-secondary .genesis-nav-menu .sub-menu,
.theme-name-custom .nav-secondary .genesis-nav-menu .sub-menu a {
	background-color: #192b17;
	border-color: #3a452d;
	color: #fff;
}
 
.theme-name-custom .enews-widget input:hover[type="submit"] {
	background-color: #eee;
	color: #333;
}

/* Theme Name Blue --------------------------------------------- */ .theme-name-blue .content .entry-title a:hover, .theme-name-blue .content #genesis-responsive-slider a, .theme-name-blue .content #genesis-responsive-slider h2 a:hover, .theme-name-blue .nav-secondary .genesis-nav-menu .current-menu-item > a, .theme-name-blue .nav-secondary .genesis-nav-menu .sub-menu a:hover, .theme-name-blue .nav-secondary .genesis-nav-menu a:hover, .theme-name-blue .nav-secondary .genesis-nav-menu li:hover > a, .theme-name-blue .widget-title, .theme-name-blue a { color: #2483d0; } .theme-name-blue a:hover { color: #1e6dad; } .theme-name-blue .content #genesis-responsive-slider a:hover, .theme-name-blue .content #genesis-responsive-slider h2 a, .theme-name-blue .footer-widgets .widget-title, .theme-name-blue .genesis-nav-menu a, .theme-name-blue .site-footer a:hover, .theme-name-blue .site-header .widget-title, .theme-name-blue .site-title a, .theme-name-blue .site-title a:hover { color: #fff; } .theme-name-blue .site-footer a { color: #666; } .theme-name-blue .genesis-nav-menu .sub-menu a, .theme-name-blue .home-bottom .widget-title { color: #333; } .theme-name-blue .genesis-nav-menu a:hover, .theme-name-blue .genesis-nav-menu .current-menu-item > a, .theme-name-blue .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #000; } .theme-name-blue .archive-pagination .active a, .theme-name-blue .archive-pagination li a:hover, .theme-name-blue .button, .theme-name-blue .nav-primary, .theme-name-blue button, .theme-name-blue input[type="button"], .theme-name-blue input[type="reset"], .theme-name-blue input[type="submit"] { background-color: #2483d0; color: #fff; } .theme-name-blue .button:hover, .theme-name-blue .site-header, .theme-name-blue button:hover, .theme-name-blue input:hover[type="button"], .theme-name-blue input:hover[type="reset"], .theme-name-blue input:hover[type="submit"] { background-color: #1e6dad; color: #fff; } .theme-name-blue .sub-footer { background-color: #edf3f4; } .theme-name-blue, .theme-name-blue .footer-widgets, .theme-name-blue .site-footer { background-color: #222e37; } .theme-name-blue .author-box, .theme-name-blue .nav-secondary .wrap, .theme-name-blue .sidebar .widget { background-color: #17222b; } .theme-name-blue .nav-secondary .genesis-nav-menu .sub-menu, .theme-name-blue .nav-secondary .genesis-nav-menu .sub-menu a { background-color: #17222b; border-color: #2d3b45; color: #fff; } .theme-name-blue .enews-widget input:hover[type="submit"] { background-color: #eee; color: #333; } /* Your Custom Style --------------------------------------------- */ .theme-name-custom .content .entry-title a:hover, .theme-name-custom .content #genesis-responsive-slider a, .theme-name-custom .content #genesis-responsive-slider h2 a:hover, .theme-name-custom .nav-secondary .genesis-nav-menu .current-menu-item > a, .theme-name-custom .nav-secondary .genesis-nav-menu .sub-menu a:hover, .theme-name-custom .nav-secondary .genesis-nav-menu a:hover, .theme-name-custom .nav-secondary .genesis-nav-menu li:hover > a, .theme-name-custom .widget-title, .theme-name-custom a { color: #006400; } .theme-name-custom a:hover { color: #9acd32; } .theme-name-custom .content #genesis-responsive-slider a:hover, .theme-name-custom .content #genesis-responsive-slider h2 a, .theme-name-custom .footer-widgets .widget-title, .theme-name-custom .genesis-nav-menu a, .theme-name-custom .site-footer a:hover, .theme-name-custom .site-header .widget-title, .theme-name-custom .site-title a, .theme-name-custom .site-title a:hover { color: #fff; } .theme-name-custom .site-footer a { color: #666; } .theme-name-custom .genesis-nav-menu .sub-menu a, .theme-name-custom .home-bottom .widget-title { color: #333; } .theme-name-custom .genesis-nav-menu a:hover, .theme-name-custom .genesis-nav-menu .current-menu-item > a, .theme-name-custom .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #000; } .theme-name-custom .archive-pagination .active a, .theme-name-custom .archive-pagination li a:hover, .theme-name-custom .button, .theme-name-custom .nav-primary, .theme-name-custom button, .theme-name-custom input[type="button"], .theme-name-custom input[type="reset"], .theme-name-custom input[type="submit"] { background-color: #006400; color: #fff; } .theme-name-custom .button:hover, .theme-name-custom .site-header, .theme-name-custom button:hover, .theme-name-custom input:hover[type="button"], .theme-name-custom input:hover[type="reset"], .theme-name-custom input:hover[type="submit"] { background-color: #9acd32; color: #fff; } .theme-name-custom .sub-footer { background-color: #edf3f4; } .theme-name-custom, .theme-name-custom .footer-widgets, .theme-name-custom .site-footer { background-color: #223722; } .theme-name-custom .author-box, .theme-name-custom .nav-secondary .wrap, .theme-name-custom .sidebar .widget { background-color: #192b17; } .theme-name-custom .nav-secondary .genesis-nav-menu .sub-menu, .theme-name-custom .nav-secondary .genesis-nav-menu .sub-menu a { background-color: #192b17; border-color: #3a452d; color: #fff; } .theme-name-custom .enews-widget input:hover[type="submit"] { background-color: #eee; color: #333; }

Genesis Framework

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Come say hi!

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube

Tweets by scottdeluzio

My Products

Conditional Checkout FieldsFull Screen Background ImagesQuick CheckoutWP1099

I use affiliate links throughout this site and may earn a commission if you purchase through my links. I do not link to products or services that I do not trust, or use myself.
© 2025 · Scott DeLuzio · Built on the Genesis Framework