A lot of fuss is being made quite lately about as how the “color accent” feature has got removed from the Twenty Fourteen WordPress theme. The feature was quite helpful as it allowed theme developers to pick up light colors by personalizing the look and feel of the theme completely. But the option does not exist any more, probably because it also persuaded users to make poor color choices, especially when they have to select very light colors and contrasts. Further, it also added a lot of inline CSS, which isn’t a good practice to follow.
While developing a WordPress theme, you come across a variety of options that help you complete the overall look of your template. Planning colors for your theme is vital so as to ensure the professional and coordinated look of your site. There are so many themes out there that give you a number of color options, however, the majority of them are still not able to provide developers enough power to come up with the color scheme that clearly conveys the mood and message of their site.
Finding the right contrast or color combinations isn’t easy, as it demands an in-depth understanding of the user psychology, knowledge regarding trends, software philosophy and so on. The color choice should be dependent on the type and nature of website. A “professional” design blended with a wise color choice increases usability, reduces bounce rates, and make visitors feel that they have landed on a right website.
So, what are the ways we can adopt to protect theme developers from making bad color choices, while providing them complete flexibility to leverage the full potential of theme color options to make their design feel “just right”.
Rectify Your Contrasts Using SASS or LESS
Contrast is an extremely important factor to consider in web design. Getting the right amount of contrast is important because it has a strong influence on the visual aesthetic and readability of any website. If you love to play around CSS preprocessors, then you must be familiar with the role of SASS and LESS in terms of contrast accessibility. You can make use of ‘brightness()’ or ‘lightness ()’ to help you achieve better contrasting colors. Also, ‘darken ()’ and ‘lighten ()’ can be used to modify the color contrast. You can also move beyond to get the desired color luminance and contrast ratios.
However, when it comes to developing WordPress themes stylesheet using Sass or LESS, you are in a way dynamically changing and recompiling the CSS in an entirely new form. To bundle Sass or LESS PHP-based compiler within your theme, is simply offload the CSS compilation into a plugin called Jetpack.
Jetpack Custom CSS
Jetpack is a great WordPress plugin with a plethora of highly advanced features. It comes with a lot of goodies and one of them is Custom CSS editor. The Custom CSS editor allows you to customize the overall appearance of your website without having you any need to overwrite the theme or child theme. It also provides a support to LESS and Sass preprocessors. This implies that Jetpack already comes packed with the required PHP Libraries, and execute them all with the help of some specific functions, such as jetpack_sass_css_preprocess ().
$accent_color = get_theme_mod( ‘accent_color’, ‘#00ff00′ );
$sass = sprintf( ‘$accent-color: %s;’, $accent_color );
$sass .= get_the_rest_of_the_sass_code();
$css = jetpack_sass_css_preprocess( $sass ); // boom!
Users can now make use of $accent_color variable in the rest of Sass code just like this:
color: if( lightness( $accent-color ) > 50, ‘black’, ‘white’ );
background: darken( $accent-color, 5% );
It’s completely a matter of personal choice as from where the user is willing to get the desired Sass code. You can store it in the form of a string within your PHP file, or you can use functions like wp_remote_get(), as a fallback if nothing works out.
Compiling Sass and LESS is a time-consuming process, and it can be extended further when the user starts using mathematical functions such as ‘pow ()’ or ‘nthroot’. It’s a serious process, we recommend you to do it carefully.
If this does not work out, you can also choose to grab a hash of some color choices, probably the style sheet version, and then cache the compiled version in a theme mod. In situations where you’ll notice some changes within the colors, we advice to modify the cached entry.
The magic of Sass provides you with a number of useful functions which you can use to alter and manipulate colors with an absolute ease. It offers us to play around with more robust options to change our background color and text variables and prevent us from making poor color choice when designing WP themes.
Author Bio: Maria Mincey is a software developer for Xicom Technologies, a web development company which delivers most comprehensive web applications and solutions for different industry verticals.