WordPress Color Switch Feature

WordPress Color Switch Feature

14 Feb 2018 8 min read

This useful Feature is rather easy to implement, and it can be interesting for those who time to time need to change some elements in a website design without changing a WP theme or rewrite it every time in style sheets.

Following sample shows how to implement Color Switch Feature. But if needed, functional can be extended by adding other elements.

Well, first we have to create a file with theme settings, for more comfortable feature usage.

Create a file theme_settings.php and include it to a functions.php of a chosen theme:

require(get_template_directory() . '/file path… /theme_settings.php');

In the theme_settings.php file create a settings section:

<?php
add_action('customize_register', function($customizer){
/* Theme Color Settings */
$customizer->add_section(
'theme_color',
array(
'title' => 'Theme Color Settings',
'description' => '',
)
);
$customizer->add_setting(
'color_settings',
array('default' => 'blue')
);
$customizer->add_control(
'color_settings',
array(
'type' => 'select',
'label' => 'Theme Color',
'section' => 'theme_color',
'choices' => array(
'blue_theme' => 'Blue',
'light_blue_theme' => 'Light blue',
'green_theme' => 'Green',
'purple_theme' => 'Purple',
'black_theme' => 'The black',
),
)
);

We just created a hook with an added function.

add_section($id, $args) method adds settings section.
It has 2 parameters:

$id — a unique slug-like string to use as an id.

$args — an associative array.

Arguments

title — the visible name of a controller section.

description — an optional argument can add additional descriptive text to the section.

priority — this controls the order in which this section appears in the Theme Customizer sidebar, 10 as default.

capability — is permissions to perform changes, so each user may have different permissions to see specific parameters. Optional.

theme_supports — is an optional argument that registers theme support for a given feature. Optional. This can be used to hide a setting if the theme lacks support for a specific feature

Then, add Settings, inside customize_register hook and after add_section() method.

add_setting($id,$args) method has 2 parameters:

$id — a unique slug-like ID for the theme setting.

$args — an associative array containing following arguments for the setting:

Arguments

default — default setting value.

type — determine the type of setting it is.

capability — optional. You can define a capability a user must have to modify this setting.

theme_supports — is an optional argument that registers theme support for a given feature. Optional. This can be used to hide a setting if the theme lacks support for a specific feature

transport — optional. How  settings changes will be displayed in preview, by either ‘refresh’ (default) or AJAX reload. As default page will refresh after each settings update.

sanitize_callback — a function name to call for sanitizing the input value for this setting.

sanitize_js_callback — a function name to call for sanitizing the value for this setting for the purposes of outputting to javascript code. The function should be of the form of a standard filter function, where it accepts the input data and returns the sanitized data. This is only necessary if the data to be sent to the customizer window has a special form.

Now let’s add control to the settings.

add_control($id,$args) method has 2 parameters:

$id — a string or a specific customization controller object.

$args — an associative array created using the specified arguments.

Arguments

label — optional. Displayed label.

description —  well, it is description

section — any readily available or user defined section, where control and setting will be placed to.

type — type of control (as default: text)

choices — custom parameters for “select” control type.

priority — section placement priority, default 10.

As a result in admin panel will see a new section   Appearance > Customize

theme-color-settings

Theme color settings.

customizing-theme-color-settings

In body set a unique id with color scheme name, for color change at any block on the page.

For this, into header.php file add a line that calls created settings for customization.

<body id="<?php echo get_theme_mod('color_settings'); ?>">

Now you can see how changes page id after color theme switching.

customizing-theme-color-settings-script
theme-color
theme-color-script
theme-color-green

Now, having a unique id for document body, it’s very easy to change colors of different elements on the page.  The easiest way to arrange style sheet for each color scheme is to use scss, but if need so, simply css also can be used.

Create a file with style.scss style sheet. Set the variables for each color scheme. And set these variables as a value for the required elements.

<?php
add_action('customize_register', function($customizer){
/* Theme Color Settings */
$customizer->add_section(
'theme_color',
array(
'title' => 'Theme Color Settings',
'description' => '',
)
);
$customizer->add_setting(
'color_settings',
array('default' => 'blue')
);
$customizer->add_control(
'color_settings',
array(
'type' => 'select',
'label' => 'Theme Color',
'section' => 'theme_color',
'choices' => array(
'blue_theme' => 'Blue',
'light_blue_theme' => 'Light blue',
'green_theme' => 'Green',
'purple_theme' => 'Purple',
'black_theme' => 'The black',
),
)
);

After saving, you can try the color switch feature. Choose blue, save and see in the Developer Tools how the switch works.

color-settings

Change the theme color for green in customizer and will see new color values.

color-settings-green-theme

Implementation such kind of features helps make changes inside your current WP Theme. But if you need more variety for your website you can use a ready to use WP plugin. There is a Theme Manager plugin that allows to push a several themes around and juggle with different filters.

ERP development final cta

Get a Custom Solution with Web Design Sun

At Web Design Sun, we specialize in building web applications for clients in every business and industry.  If you’re interested in custom applications for your business, contact us today.

Contact us today to get started

More From Blog

How to Strengthen Your Offline Business With Online Features

Are you ready to start working remotely? We're looking forward to sharing ideas and tips with our customers and anyone else who's looking for ways to ease the transition.
24 Apr 2020 6 min read

How Much Does It Cost To Build a Web Application?

You want to build a web application, but you’re worried about the cost. If that sounds familiar, we understand your fear. We’ve wrote this article to show that there are ways to control the costs, and it’s possible to get a custom web application that doesn’t break the bank.
19 Nov 2021 23 min read

Elementor Custom Widget Tutorial

Sometimes there is a need for specific functionality on our site. For such case, you can create Elementor Custom Widget with our easy-to-follow tutorial.
20 Jun 2021 14 min read