wordpress customizer for themes and more

Santosh KunwarWordPress Developer

at eVisionThemesPlugin Developerhttp://

codersantosh.com

WordPress Customizer for Themes

05/03/2023 2WordPress Customizer for Themes and More

What is WordPress theme? Collections of files working together Focus on frontend display, graphical

interface and design To create unique look for your site Ease for WordPress site owner. ( No

need to have knowledge PHP, CSS, HTML )


What is WordPress Customizer?

A framework for live-previewing the changes

Edit and view change New way to add options in the theme

( added in WordPress 3.4 ) Now Just customizer is allowed for

submitting theme in WordPress dot org


Why Customizer? To standardize Theme Review Team (TRT) won’t

have to learn dozens of completely different theme option interfaces when reviewing the themes.

User friendly


Fig : Customizer


Main Parts of Customizer

Controls UI elements, basically a form field.

Setting Settings associate controls. Setting will save user-entered data

from the control to the database, sanitizing it handle live preview and more.


Main Parts of Customizer contd..

SECTIONS A section is a container for

controls.

Panels A panel is a container for sections.


Code ExampleAdding Customizer

if ( ! function_exists( 'themeslug_customize_register' ) ) : function themeslug_customize_register( $wp_customize ) { // Do stuff with $wp_customize, the WP_Customize_Manager object. $wp_customize->add_panel(); $wp_customize->get_panel(); $wp_customize->remove_panel(); /*use add_ , get_, remove_ for section, setting and control */ }add_action( 'customize_register','themeslug_customize_register' );endif;


Adding Panels

$wp_customize->add_panel( 'panel_id', array( 'priority' => 10, 'capability' => 'edit_theme_options', 'theme_supports' => '', 'title' => '', 'description' => '',) );

Panels must contain at least one Section, which must contain at least one Control, to be displayed


Adding Sections

$wp_customize->add_section( 'custom_css', array( 'title' => __( 'Custom CSS' ), 'description' => __( 'Add custom CSS here' ), 'panel' => '', // Not typically needed. 'priority' => 160, 'capability' => 'edit_theme_options', 'theme_supports' => '', // Rarely needed.) );


Adding Controls

$wp_customize->add_control( 'setting_id', array( 'type' => 'url', 'priority' => 10, 'section' => 'title_tagline', 'label' => '',) );


Basic Control Types text hidden textarea checkbox number range

select url email password dropdown-pages


Control contd… Class Available

Color Upload Image Media (New) Cropped image(New)


Adding Controls from Class

$wp_customize->add_control( new WP_Customize_Media_Control( $wp_customize, 'audio_control', array( 'label' => __( 'Media Control (audio)' ), 'section' => 'media', 'mime_type' => 'audio',) ) );


Adding Setting

$wp_customize->add_setting( 'setting_id', array( 'type' => 'theme_mod', // or 'option' 'capability' => 'edit_theme_options', 'theme_supports' => '', // Rarely needed. 'default' => '', 'transport' => 'refresh', // or postMessage 'sanitize_callback' => '', 'sanitize_js_callback' => '', // Basically to_json.) );


Removing Panels, Sections, Setting and Controls

$wp_customize->remove_panel( ‘panel_id');

$wp_customize->remove_section( 'section_id');

$wp_customize->remove_setting( 'setting_id');

$wp_customize->remove_control( ‘control_id');


This plugin is not actually build to use as independent plugin but to integrate it in the theme to build customizer of theme fast and efficient way.

But you can use it as plugin too. Array uses Fast development of options No need to worry about sanitization Sufficient hooks are available

Coder Customizer Framework


Download this plugin, unzip it and put it inside theme-folder

Download Link: https://wordpress.org/plugins/code

r-customizer-framework/ https://github.com/codersantosh/co

der-customizer-framework In functions.php of the active theme

define constant for plugin

Integrating in the Theme

https://wordpress.org/plugins/coder-customizer-framework/

https://wordpress.org/plugins/coder-customizer-framework/

https://github.com/codersantosh/coder-customizer-framework

https://github.com/codersantosh/coder-customizer-framework


While defining constant In Main theme

In Child theme

Now Include plugin main file in just below the constant

Integrating in the Theme

define( 'coder_customizer_theme', 1);

define( 'coder_customizer_child_theme', 1 );

require trailingslashit( get_template_directory() ) . 'coder-customizer-framework/coder-customizer-framework.php';/*use get_stylesheet_directory () in child theme*/


$panels['panel_1'] = array( 'priority' => 110, 'capability' => 'edit_theme_options', 'theme_supports' => '', 'title' => __( 'Panel Example 1', 'text-domain' ), 'description' => '', );$panels['panel_2'] = array( 'priority' => 120, 'capability' => 'edit_theme_options', 'theme_supports' => '', 'title' => __( 'Panel Example 2', 'text-domain' ), 'description' => '', );

Creating array of Panels


$sections['section_1'] = array( 'priority' => 110, 'capability' => 'edit_theme_options', 'theme_supports' => '', 'title' => __( 'Section Example 1 for panel 1', 'text-domain' ), 'description' => '', 'panel' => 'panel_1', );$sections['section_2'] = array( 'priority' => 120, 'capability' => 'edit_theme_options', 'theme_supports' => '', 'title' => __( 'Section Example 2 for panel 2', 'text-domain' ), 'description' => '', 'panel' => 'panel_2', );

Creating array of Sections


$settings_controls['setting_control_1'] = array( 'setting' => array( 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'theme_supports' => '', 'default' => '', 'transport' => 'refresh', 'sanitize_callback' => 'esc_attr', 'sanitize_js_callback' => 'esc_attr', ), 'control' => array( 'label' => __( 'Control Example 1 for section 1', 'text-domain' ), 'section' => 'section_1', 'type' => 'text', 'priority' => 12, 'description' => '', 'active_callback' => '' ) );

Creating array of Setting and Controls


radio_image category_dropdown message post_dropdown tags_dropdown user_dropdown

Coder Customizer Custom Control Types


Create array of Panel, Section, Setting id to remove Removing existing Panel$remove_panels = array('widgets','panel_1'); Removing existing Section$remove_sections = array('colors','section_2'); Removing existing Setting and

Control$remove_settings_controls =array(blogname','blogdescription');

Removing existing panel section setting controls


$coder_customizer_args = array( 'panels' => $panels, /*always use key panels */ 'sections' => $sections,/*always use key sections*/ 'settings_controls' => $settings_controls,/*always use key settings_controls*/ 'remove_panels' => $remove_panels,/*always use key remove_panels*/ 'remove_sections' => $remove_sections,/*always use key remove_sections*/ 'remove_settings_controls' => $remove_settings_controls,/*always use key remove_settings_controls*/);

Final Array


function theme_slug_add_panels_sections_settings() { global $coder_customizer_args; return $coder_customizer_args;}add_filter( 'coder_panels_sections_settings', ‘theme_slug_add_panels_sections_settings' );

Finally use filter hook coder_panels_sections_settings


https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/

https://make.wordpress.org/core/2015/07/16/new-customizer-media-controls-in-4-3-and-4-2/

https://codex.wordpress.org/Theme_Customization_API

https://developer.wordpress.org/themes/advanced-topics/customizer-api/

http://codersantosh.com/coder-customizer-framework/

Reference Links

wordpress customizer for themes and more

Software