Key Points To Watch Out While Developing WP Themes

More On Creating A Website Using WordPress

UPDATED: AUGUST 17, 2016 – ARTICLE: KEY POINTS TO WATCH OUT WHILE DEVELOPING WP THEMES

Category: Website Design & Development

Although, WordPress is a popular open source CMS, and a great way to create your own website there are a lot of users who commit common mistakes while developing WP themes.

This article will take you through a common blooper and measures to keep it at bay. It is a simple error that has found being made even by expert developers.

You might have observed that how the removal of the “color accent” feature of the Twenty Fourteen, a popular WordPress theme has created a lot of fluff among the WP developers.

It was used by theme developers to customize the visual appeal of the theme by implementing light colors. However, it has also enticed users to generate worst color choices with light colors, thus, resulting in ugly and poor design of a website.

This is not only the case with the color accent feature of the Twenty Fourteen theme, there are several themes that allow users to personalize the look and feel in a desired fashion with a list of color options to choose a color for various elements of a website.

Therefore, it would be worthy to throw some light on effective ways that can help users to make the best color contrast choice and avoid ruining the entire appearance of a site.

Here, our main objective is to offer some useful tips when you make a website to ensure freedom to customize a WP theme without compromising with the site usability and UX.

Let’s decipher a few noteworthy tips that can help you make a better choice for color contrast, while developing from the scratch or customizing an existing WP theme.

Correcting The Contrast Via LESS Or Sass

sass-or-less

Sass and LESS are the CSS preprocessors and most of the developers are familiar with. But, some developers don’t know how these preprocessors can help rectify the color contrast. It offers a slew of options to accomplish the task with a flair, here are a few of them.

  • brightness() or lightness(): Help streamline the choice for a better color contrast
  • Darken() and lighten(): Help modify colors in a suitable way for a better contrast
  • These functions can also be used to determine the contrast ratios and color luminance.

Although, Sass and LESS allow one to create CSS for customizing color contrast of a WP theme, for facilitating users to personalize the theme with a list of options will require an advanced approach. And, one of the ideal solutions to accomplish this is to pack these CSS preprocessors within a theme. There is a better approach is to this is by offloading CSS compilation into a plugin, one of the plugins that use this principle is Jetpack.

Jetpack Custom CSS

jetpack

There is no doubt that Jetpack is a prolific WP plugin that enables users to efficiently customize their websites. Among various resourceful features, the custom CSS editor is one of the amazing feature with which developers can proficiently edit the code.

Moreover, the Jetpack Custom CSS comes complete with LESS as well as Sass preprocessors. Since, most of the users are not aware of this feature of the Jetpack’s Custom CSS module, they are not able to reap the benefits of this capability.

Due to this feature, all the requisite PHP libraries are already included in this theme and these libraries can be accessed via certain specific function, that is, jetpack_sass_css_preprocess() function.

Code Snippet Of This Function:

$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!

With this code, it is clear that the $accent_color variable (that is defined by users) can be implemented in the rest of the Sass code. Let’s have a look at the example that use this variable.

.element {

background: $accent-color;

color: if( lightness( $accent-color ) > 50, ‘black’, ‘white’ );

&:hover {

background: darken( $accent-color, 5% );

}

}

The Sass code can be accessed in a number of different ways and is completely a matter of personal preference. It can be either saved in a PHP file as a string, used by implementing the wp_remote_get() function or by making the query to the file system for the genuine Sass file.

The compilation of Sass and LESS can consume a little time and take more time when a mathematical function is used. It is, thus, advisable to think twice and work with optimal precision while handling such functions.

Another alternative is to latch on to a hash of color choice, if possible, the style sheet version and cache the compiled CSS in the theme mod. You can update the cached entry if any change in the colors is observed.

Final Thought

Sass offers colossal resourceful features that can help tinker with the color contrast without leaving the astonishing look and feel behind. While customizing the color contrast of a theme, you can efficiently accomplish the task and deliver a usable and remarkable design by taking the aforementioned points into account.

About rickbrown

Rick Brown is a veteran iPhone application developer for www.mobiers.com. In case, you are willing to dig-out more information about the related services, get in touch with him.