Skip to content

Instantly share code, notes, and snippets.

@pgroot91

pgroot91/color-scheme-preview.js

Forked from digvijayad/color-scheme-preview.js
Created February 11, 2020 23:07
Show Gist options
  • Save pgroot91/86c87408319b09a24a13831a90423eb4 to your computer and use it in GitHub Desktop.
Save pgroot91/86c87408319b09a24a13831a90423eb4 to your computer and use it in GitHub Desktop.
Download ZIP
How to add Color Schemes to your WordPress theme with live preview: full working sample
Raw
color-scheme-preview.js
(function($) {
var style = $('#yourtheme-color-scheme-css'),
api = wp.customize;
if (!style.length) {
style = $('head').append('<style type="text/css" id="yourtheme-color-scheme-css" />')
.find('#yourtheme-color-scheme-css');
}
// Color Scheme CSS.
api.bind('preview-ready', function() {
api.preview.bind('update-color-scheme-css', function(css) {
style.html(css);
});
});
})(jQuery);
Raw
color-scheme.js
(function(api) {
var cssTemplate = wp.template('yourtheme-color-scheme'),
colorSettings = [
'link_color',
'button_background_color',
'button_hover_background_color',
'section_dark_background_color',
'footer_background_color',
'highlight_color'
];
// Update list of colors when select a color scheme.
function updateColors(scheme) {
scheme = scheme || 'default';
var colors = YourThemeColorScheme[scheme].colors;
_.each(colorSettings, function(key, index) {
var color = colors[index];
api(key).set(color);
api.control(key).container.find('.color-picker-hex')
.data('data-default-color', color)
.wpColorPicker('defaultColor', color);
});
}
api.controlConstructor.select = api.Control.extend({
ready: function() {
if ('color_scheme' === this.id) {
this.setting.bind('change', updateColors);
}
}
});
// Update the CSS whenever a color setting is changed.
function updateCSS() {
var scheme = api('color_scheme')(),
css,
colors = _.object(colorSettings, YourThemeColorScheme[scheme].colors);
_.each(colorSettings, function(setting) {
colors[setting] = api(setting)();
});
css = cssTemplate(colors);
api.previewer.send('update-color-scheme-css', css);
}
_.each(colorSettings, function(setting) {
api(setting, function(setting) {
setting.bind(updateCSS);
});
});
})(wp.customize);
Raw
color-scheme.php
<?php
/**
* Color Scheme Class: Create color schemes for your theme,
* and give user the ability to change colors using live preview via custozimer.
*
* @author Henry Chow
* @link https://deluxeblogtips.com/add-color-schemes-wordpress-theme/
*
* Note: This is just a working sample of the color scheme provided by the author all in one place , To understand how this works, Please follow
* the original tutorial found at the link above.
*
* Setup:
* 1. add your css in the get_css function.
* 2. add your color schemes get_color_schemes() function
* 3. Rename 'YourTheme_Color_Scheme' class to your prefered name.
* 4. in your functions.php - add the following code to include the new file.
*
* require get_template_directory() . '/color-scheme.php';
* new YourTheme_Color_Scheme;
* 5. Rename 'yourtheme-style-name' for wp_add_inline_style to your theme's style sheet handle.
*
* Note: This is not necessary, you could just call the class in your functions.php file to get the color schemes working.
* 6. Rename all instances of 'yourtheme' from color-scheme.php, color-scheme.js, and color-sheme-preview.js
* 7. Rename all instances of 'YourThemeColorScheme' from color-scheme.php and color-scheme.js
*/
class YourTheme_Color_Scheme {
public function __construct() {
add_action( 'customize_register', array( $this, 'customizer_register' ) );
add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_js' ) );
add_action( 'customize_controls_print_footer_scripts', array( $this, 'color_scheme_template' ) );
add_action( 'customize_preview_init', array( $this, 'customize_preview_js' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'output_css' ) );
}
public function customizer_register( WP_Customize_Manager $wp_customize ) {
$wp_customize->add_section( 'colors', array(
'title' => __( 'Colors', 'yourtheme-textdomain' ),
) );
$wp_customize->add_setting( 'color_scheme', array(
'default' => 'default',
'transport' => 'postMessage',
) );
$color_schemes = $this->get_color_schemes();
$choices = array();
foreach ( $color_schemes as $color_scheme => $value ) {
$choices[$color_scheme] = $value['label'];
}
$wp_customize->add_control( 'color_scheme', array(
'label' => __( 'Color scheme', 'yourtheme-textdomain' ),
'section' => 'colors',
'type' => 'select',
'choices' => $choices,
) );
$options = array(
'link_color' => __( 'Link color', 'yourtheme-textdomain' ),
'button_background_color' => __( 'Button background color', 'yourtheme-textdomain' ),
'button_hover_background_color' => __( 'Button hover background color', 'yourtheme-textdomain' ),
'section_dark_background_color' => __( 'Section dark background color', 'yourtheme-textdomain' ),
'footer_background_color' => __( 'Footer background color', 'yourtheme-textdomain' ),
'highlight_color' => __( 'Hightlight color', 'yourtheme-textdomain' ),
);
foreach ( $options as $key => $label ) {
$wp_customize->add_setting( $key, array(
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $key, array(
'label' => $label,
'section' => 'colors',
'setting' => $key,
) ) );
}
}
public $options = array(
'link_color',
'button_background_color',
'button_hover_background_color',
'section_dark_background_color',
'footer_background_color',
'highlight_color',
);
public function get_css( $colors ) {
$css = '
/*#f7c651*/
.main-navigation #primary-menu.menu li ul li.current-menu-item,
.main-navigation ul ul li:hover > a,
.main-navigation ul ul li.focus > a,
.main-navigation ul ul a:hover,
.main-navigation ul ul li.current_page_item > a,
#nav-icon span,
input[type="submit"],
.counter-area .title h2:after,
.entry-content a:hover,
.entry-footer a,
.nav-links a ,
.footer-area-bottom,
h2.widget-title:after,
.section.cta,
.title h2:after {
background-color: %1$s;
}
.main-navigation li:hover > a,
.main-navigation li.focus > a,
li:hover.menu-item-has-children:after,
.main-navigation li.current_page_ancestor a,
.main-navigation .current_menu_ancestor a ,
a:hover,
input[type="submit"]:hover,
.footer-area-top .contact-name,
.footer-area-top .widget-resources a,
.footer-area-top .contacts li i,
.blog-block:hover .blog-desc h4 a,
.widget ul li a:hover {
color: %1$s;
}
.main-navigation ul ul a,
.widget_search .search-form input[type="search"],
.main-navigation ul ul a:hover ,
.main-navigation li.current_page_ancestor ul a,
.main-navigation ul ul li.current_page_item > a ,
.counter-area .title h2,
.breadcrumb-title,
.counter-number, .counter-prefix,
.counter-description,
.cta-block h2, .cta-block p,
.dtl a ,
.footer-area-top .footer-box,
.footer-area-bottom{
color: %2$s;
}
.main-navigation .menu-cta-button a:hover,
#drop::before,#drop::after,
input[type="submit"]:hover,
.cta .dtl a:hover {
background-color: %3$s;
}
//rest of the css
';
// More CSS
return vsprintf( $css, $colors );
}
public function customize_js() {
wp_enqueue_script( 'yourtheme-color-scheme', get_template_directory_uri() . '/js/color-scheme.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true );
wp_localize_script( 'yourtheme-color-scheme', 'YourThemeColorScheme', $this->get_color_schemes() );
}
public function color_scheme_template() {
$colors = array(
'link_color' => '{{ data.link_color }}',
'button_background_color' => '{{ data.button_background_color }}',
'button_hover_background_color' => '{{ data.button_hover_background_color }}',
'section_dark_background_color' => '{{ data.section_dark_background_color }}',
'footer_background_color' => '{{ data.footer_background_color }}',
'highlight_color' => '{{ data.highlight_color }}',
);
?>
<script type="text/html" id="tmpl-yourtheme-color-scheme">
<?php echo $this->get_css( $colors ); ?>
</script>
<?php
}
public function customize_preview_js() {
wp_enqueue_script( 'yourtheme-color-scheme-preview', get_template_directory_uri() . '/js/color-scheme-preview.js', array( 'customize-preview' ), '', true );
}
public function output_css() {
$colors = $this->get_color_scheme();
if ( $this->is_custom ) {
wp_add_inline_style( 'yourtheme-style-name', $this->get_css( $colors ) );
}
}
public $is_custom = false;
public function get_color_scheme() {
$color_schemes = $this->get_color_schemes();
$color_scheme = get_theme_mod( 'color_scheme' );
$color_scheme = isset( $color_schemes[$color_scheme] ) ? $color_scheme : 'default';
if ( 'default' != $color_scheme ) {
$this->is_custom = true;
}
$colors = array_map( 'strtolower', $color_schemes[$color_scheme]['colors'] );
foreach ( $this->options as $k => $option ) {
$color = get_theme_mod( $option );
if ( $color && strtolower( $color ) != $colors[$k] ) {
$colors[$k] = $color;
}
}
return $colors;
}
public function get_color_schemes() {
return array(
'default' => array(
'label' => __( 'Default', 'yourtheme-textdomain' ),
'colors' => array(
'#f7c651',
'#fff',
'#000',
'#2c383f',
'#222b30',
'#e67e22',
),
),
'pink' => array(
'label' => __( 'Pink', 'yourtheme-textdomain' ),
'colors' => array(
'#d11241',
'#ededed',
'#002d62',
'#aa6600',
'#9d5f00',
'#dd8500',
),
),
'green' => array(
'label' => __( 'Green', 'yourtheme-textdomain' ),
'colors' => array(
'#22bd3c',
'#ededed',
'#002d62',
'#aa6600',
'#9d5f00',
'#dd8500',
),
),
// Other color schemes
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment