dingo-d / wordpress-theme-customizer-extra-custom-controls

Additional Wordpress Customizer controls

Wordpress Theme Customizer Extra Custom controls

⚠️ A note regarding the Customize API ⚠️

It has been a long time since I've used this package, and as such I cannot vouch that it works.

The Customize API will most likely be replaced by some kind of Full Site Editing features such as global styles.

I recommend you get acquainted with it, and use that instead, as that will be the way forward for WordPress. You'll learn something new, and save yourself the pain of updaing your themes/projects once Customize API is deprecated.

---

Contributors: Denis Žoljom (dingo-d)

Requires at least: 3.9

Tested up to: 4.7

Stable tag: 1.3.0

License: GPLv2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

======

Customizer usage example for WordPress with added custom controls.

This is all GPL, so you're free to use it, but if you use it in your theme or plugin, don't forget to attribute where you've got this from :)

======

Description

This is a working example of the customizer settings for WordPress theme. You can use it, test it, expand it etc. What ever works for you.

This is a work in progress, so new stuff will be added as time goes on.

How to use

You can download or clone this repo and then just paste the \inc folder inside your theme. Or the \customizer folder wherever you want in your theme.

After that be sure to include it in your functions.php file

require_once( get_template_directory() . '/inc/customizer/customizer.php' );

Also if you want to use selective refresh for widgets, and background settings you can use

add_action( 'after_setup_theme', 'mytheme_theme_setup' );

if ( ! function_exists( 'mytheme_theme_setup' ) ) {
	/**
	 * Sets up theme defaults and registers support for various WordPress features.
	 *
	 * Note that this function is hooked into the after_setup_theme hook, which
	 * runs before the init hook. The init hook is too late for some features, such
	 * as indicating support for post thumbnails.
	 *
	 * @since  1.0.0
	 */
	function mytheme_theme_setup() {
		add_theme_support( 'customize-selective-refresh-widgets' );
		add_theme_support( 'custom-background' );
	}
}

Some of the used sanitization functions, that you can also put in your functions.php file are

/********* Sanitization Functions ***********/
if ( ! function_exists( 'mytheme_allowed_tags' ) ) {
	/**
	 * Allowed tags function for wp_kses()
	 *
	 * @return array Array of allowed HTML tags
	 * @since 1.0.0
	 */
	function mytheme_allowed_tags() {
		return array(
			'a' => array(
				'href' => array(),
				'title' => array(),
			),
			'br' => array(),
			'span' => array(
				'class' => array(),
			),
			'em' => array(),
			'ul' => array(),
			'ol' => array(),
			'li' => array(),
			'strong' => array(),
			'pre' => array(),
			'code' => array(),
			'blockquote' => array(
				'cite' => true,
			),
			'i' => array(
				'class' => array(),
			),
			'cite' => array(
				'title' => array(),
			),
			'abbr' => array(
				'title' => true,
			),
			'select' => array(
				'id'   => array(),
				'name' => array(),
			),
			'option' => array(
				'value' => array(),
			),
		);
	}
}

if ( ! function_exists( 'mytheme_text_sanitization' ) ) {
	/**
	 * Text sanitization function for Customize API
	 *
	 * @param  string $input Input to be sanitized.
	 * @return string        Sanitized input.
	 * @since 1.0.0
	 */
	function mytheme_text_sanitization( $input ) {
		return wp_kses_post( force_balance_tags( $input ) );
	}
}

if ( ! function_exists( 'mytheme_checkbox_sanitization' ) ) {
	/**
	 * Checkbox sanitization function for Customize API
	 *
	 * @param  string $input Checkbox value.
	 * @return integer       Sanitized value.
	 * @since 1.0.0
	 */
	function mytheme_checkbox_sanitization( $input ) {
		if ( true === $input ) {
			return 1;
		} else {
			return '';
		}
	}
}

if ( ! function_exists( 'mytheme_sanitize_integer' ) ) {
	/**
	 * Integer sanitization function for Customize API
	 *
	 * @param  string $input Input value to check.
	 * @return integer        Returned integer value.
	 * @since 1.0.0
	 */
	function mytheme_sanitize_integer( $input ) {
		if ( is_numeric( $input ) ) {
			return intval( $input );
		}
	}
}

Changelog

Ver 1.3.0

Added Box Model Custom control

Ver 1.2.0

• Added Slider Custom control
• Fixed Code

Ver 1.0.1

• Added Multi Input Custom control
• Added Sidebar Dropdown Custom control
• Added Image Select Custom control
• Sanitized few inputs
• Added .js file for custom controls and updated .css file

Ver 1.0

• Added Checkbox Switch custom control

• css taken from: https://proto.io/freebies/onoff/

• Added Custom Info control
• Added Custom Separator control

wordpress-theme-customizer-extra-custom-controls's Issues

Need to handle the case of JS `set`ting a value for a setting object

The following line is setting up event handlers for the controls, but there is a case that is not covered.

wordpress-theme-customizer-extra-custom-controls/inc/customizer/js/custom-controls.js

Line 15 in d0549a5

$( document ).on( 'click', '.customize_multi_add_field', mytheme_customize_multi_add_field )

If I write a custom control to reset to default values (or core provides one), it will likely be by calling setting.set(value) for each of the setting objects. This change is not handled, and needs to have the HTML single fields reflect what the multi field setting was set to.

Usage for plugin

wordpress-theme-customizer-extra-custom-controls/inc/customizer/customizer.php

Line 21 in d0549a5

require_once( get_template_directory() . '/inc/customizer/custom-controls.php' );

How about using this, in case someone wants to use it in a plugin, and not a theme:
require_once dirname( __FILE__ ) . '/custom-controls.php' ;

this code causes clashes with any other instance of customizer.php

i have the code bellow (found it on stack exchange as an answer to a previously asked question) in another file named "customizer.php" for some reason i cant get it to work(i cant get it to switch between my header files ) and when i include "wordpress-theme-customizer-extra-custom-controls" wordpress crashes

This is the code im talking about:

add_action('customize_register', 'mytheme_customize_register');

function mytheme_customize_register( $wp_customize ) {

   
    ------------------------------------------------------------
    SECTION: Header
    ------------------------------------------------------------
    
    $wp_customize->add_section('section_header', array(
        'title'          => esc_html__('Header', 'mytheme'),
        'description'    => esc_attr__( 'Choose one of three different Header Styles', 'mytheme' ),
        'priority'       => 1,
    ));

        /**
        Header Styles
        **/
        $wp_customize->add_setting( 'header_styles', array(
            'default'    => '',
        ));
        $wp_customize->add_control( 'header_styles', array(
            'label'      => esc_html__( 'Header Styles', 'mytheme' ),
            'section'    => 'section_header',
            'type'       => 'select',
            'choices'    => array(
                'style_1'    => esc_html__('Header 1', 'mytheme'),
                'style_2'    => esc_html__('Header 2', 'mytheme'),
                'style_3'    => esc_html__('Header 3', 'mytheme'),
            ),
        ));

}

Issue related to $this->value()

I may be missing something but I am having issues related to $this->value() (I think) in This Line. $this->value() appears to be empty, so where do I get my default settings from?

I used add_option() to create the default values to the database, prior to your code running) and that's where it would be saved, but I was thinking $this->value() should get those values but they do not..

The margin, padding, content boxes appear in the Appearance > Customize section but there is just a - dash

**Also using class Box_Model