Skip to content

Instantly share code, notes, and snippets.

@mor10 mor10/Component.php
Created Jul 22, 2019

Embed
What would you like to do?
Add color palette option to Customizer in WP Rig theme
<?php
/**
* WP_Rig\WP_Rig\Customizer\Component class
*
* @package wp_rig
*/
namespace WP_Rig\WP_Rig\Customizer;
use WP_Rig\WP_Rig\Component_Interface;
use WP_Rig\WP_Rig\Templating_Component_Interface;
use function WP_Rig\WP_Rig\wp_rig;
use WP_Customize_Manager;
use function add_action;
use function bloginfo;
use function wp_enqueue_script;
use function get_theme_file_uri;
/**
* Class for managing Customizer integration.
*
* Exposes template tags:
* * wp_rig()->get_color_scheme
* * wp_rig()->get_color_scheme_choices
* * wp_rig()->sanitize_color_scheme
* * wp_rig()->filter_body_classes
*
* @link https://wordpress.org/plugins/amp/
*/
class Component implements Component_Interface, Templating_Component_Interface {
/**
* Gets the unique identifier for the theme component.
*
* @return string Component slug.
*/
public function get_slug() : string {
return 'customizer';
}
/**
* Adds the action and filter hooks to integrate with WordPress.
*/
public function initialize() {
add_action( 'customize_register', [ $this, 'action_customize_register' ] );
add_action( 'customize_preview_init', [ $this, 'action_enqueue_customize_preview_js' ] );
add_filter( 'body_class', [ $this, 'filter_body_classes' ] );
}
/**
* Gets template tags to expose as methods on the Template_Tags class instance, accessible through `wp_rig()`.
*
* @return array Associative array of $method_name => $callback_info pairs. Each $callback_info must either be
* a callable or an array with key 'callable'. This approach is used to reserve the possibility of
* adding support for further arguments in the future.
*/
public function template_tags() : array {
return [
'get_color_schemes' => [ $this, 'get_color_schemes' ],
'get_color_scheme' => [ $this, 'get_color_scheme' ],
'get_color_scheme_choices' => [ $this, 'get_color_scheme_choices' ],
'sanitize_color_scheme' => [ $this, 'sanitize_color_scheme' ],
'filter_body_classes' => [ $this, 'filter_body_classes' ],
];
}
/**
* Adds postMessage support for site title and description, plus a custom Theme Options section.
*
* @param WP_Customize_Manager $wp_customize Customizer manager instance.
*/
public function action_customize_register( WP_Customize_Manager $wp_customize ) {
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
if ( isset( $wp_customize->selective_refresh ) ) {
$wp_customize->selective_refresh->add_partial(
'blogname',
[
'selector' => '.site-title a',
'render_callback' => function() {
bloginfo( 'name' );
},
]
);
$wp_customize->selective_refresh->add_partial(
'blogdescription',
[
'selector' => '.site-description',
'render_callback' => function() {
bloginfo( 'description' );
},
]
);
}
/**
* Theme options.
*/
$wp_customize->add_section(
'theme_options',
[
'title' => __( 'Theme Options', 'wp-rig' ),
'priority' => 130, // Before Additional CSS.
]
);
// Add color scheme setting and control.
$wp_customize->add_setting(
'color_scheme',
array(
'default' => 'default',
'sanitize_callback' => array( $this, 'sanitize_color_scheme' ),
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
'color_scheme',
array(
'label' => __( 'Base Color Scheme', 'wp-rig' ),
'section' => 'colors',
'type' => 'select',
'choices' => array(
'default' => __( 'Default', 'wp-rig' ),
'dark' => __( 'Dark', 'wp-rig' ),
),
'priority' => 1,
)
);
}
/**
* Registers color schemes for WPCampus Rig.
*
* @return array An associative array of color scheme options.
*/
public function get_color_schemes() {
/**
* Filter the color schemes registered for use with Twenty Sixteen.
*
* The schemes are 'default' and 'dark'.
*
* @param array $schemes {
* Associative array of color schemes data.
*
* @type array $slug {
* Associative array of information for setting up the color scheme.
*
* @type string $label Color scheme label.
* }
* }
*/
return apply_filters(
'wprig_color_schemes',
array(
'default' => array(
'label' => __( 'Default', 'wp-rig' ),
'slug' => 'color-scheme-default',
),
'dark' => array(
'label' => __( 'Dark', 'wp-rig' ),
'slug' => 'color-scheme-dark',
),
)
);
}
/**
* Retrieves the current WPCampus Rig color scheme.
*
* @return string The color scheme slug.
*/
public function get_color_scheme() {
$color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
$color_schemes = wp_rig()->get_color_schemes();
if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
return $color_schemes[ $color_scheme_option ]['slug'];
}
return $color_schemes['default']['slug'];
}
/**
* Retrieves an array of color scheme choices registered for WPCampus Rig.
*
* @return array Array of color schemes.
*/
public function get_color_scheme_choices() {
wp_rig()->get_color_scheme();
$color_schemes = wp_rig()->get_color_schemes();
$color_scheme_control_options = array();
foreach ( $color_schemes as $color_scheme => $value ) {
$color_scheme_control_options[ $color_scheme ] = $value['label'];
}
return $color_scheme_control_options;
}
/**
* Handles sanitization for WPCampus Rig color schemes.
*
* @param string $value Color scheme name value.
* @return string Color scheme name.
*/
public function sanitize_color_scheme( $value ) {
if ( ! in_array( $value, array( 'default', 'dark' ), true ) ) {
$value = 'default';
}
return $value;
}
/**
* Adds custom classes to indicate current color scheme.
*
* @param array $classes Classes for the body element.
* @return array Filtered body classes.
*/
public function filter_body_classes( array $classes ) : array {
$classes[] = wp_rig()->get_color_scheme();
return $classes;
}
/**
* Enqueues JavaScript to make Customizer preview reload changes asynchronously.
*/
public function action_enqueue_customize_preview_js() {
wp_enqueue_script(
'wp-rig-customizer',
get_theme_file_uri( '/assets/js/customizer.min.js' ),
[ 'customize-preview' ],
wp_rig()->get_asset_version( get_theme_file_path( '/assets/js/customizer.min.js' ) ),
true
);
}
}
/**
* Custom Properties
* aka CSS variables.
*
* @link: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
**/
:root {
--global-font-color: #333;
--global-font-family: "Crimson Text", serif;
--global-font-size: 20;
--global-font-line-height: 1.4;
--highlight-font-family:
"Roboto Condensed",
"Helvetica Neue",
"Arial Narrow",
sans-serif;
--content-width: 45rem;
--dropdown-symbol-width: 0.7em;
--main-nav-text-color: #000;
/* Custom editor colors */
--color-theme-primary: #e36d60;
--color-theme-secondary: #41848f;
--color-theme-red: #c0392b;
--color-theme-green: #27ae60;
--color-theme-blue: #2980b9;
--color-theme-yellow: #f1c40f;
--color-theme-black: #1c2833;
--color-theme-grey: #95a5a6;
--color-theme-white: #ecf0f1;
--color-custom-daylight: #97c0b7;
--color-custom-sun: #eee9d1;
--color-link: #0073aa;
--color-link-visited: #333;
--color-link-active: #00a0d2;
--color-quote-border: #000;
--color-quote-citation: #6c7781;
/* Custom editor font sizes */
--font-size-small: calc(16 / var(--global-font-size) * 1rem);
--font-size-regular: calc(var(--global-font-size) / 16 * 1rem);
--font-size-large: calc(36 / var(--global-font-size) * 1rem);
--font-size-larger: calc(48 / var(--global-font-size) * 1rem);
}
.color-scheme-dark {
background-color: #121212;
--global-font-color: #fff;
--color-link: hsl(267, 95%, 76%);
--color-link-visited: hsl(267, 95%, 96%);
--color-link-active: #fff;
--main-nav-text-color: hsl(267, 95%, 76%);
--color-quote-border: hsl(0, 0%, 80%);
--color-quote-citation: hsl(0, 0%, 50%);
}
/**
* File customizer.js.
*
* Theme Customizer enhancements for a better user experience.
*
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
*/
( function( $ ) {
// Site title and description.
wp.customize( 'blogname', function( value ) {
value.bind( function( to ) {
$( '.site-title a' ).text( to );
} );
} );
wp.customize( 'blogdescription', function( value ) {
value.bind( function( to ) {
$( '.site-description' ).text( to );
} );
} );
// Header text color.
wp.customize( 'header_textcolor', function( value ) {
value.bind( function( to ) {
if ( 'blank' === to ) {
$( '.site-title, .site-description' ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute',
} );
} else {
$( '.site-title, .site-description' ).css( {
clip: 'auto',
position: 'relative',
} );
$( '.site-title a, .site-description' ).css( {
color: to,
} );
}
} );
} );
// Color scheme.
wp.customize( 'color_scheme', function( value ) {
value.bind( function( to ) {
if ( $( 'body.logged-in' ).hasClass( 'color-scheme-' + to ) ) {
} else {
$( 'body.logged-in' )
.removeClass( function( index, className ) {
return ( className.match( /(^|\s)color-scheme-\S+/g ) || [] ).join( ' ' );
} )
.addClass( 'color-scheme-' + to );
}
} );
} );
}( jQuery ) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.