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.
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.
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.
Change the theme color for green in customizer and will see new color values.
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.
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