WordPress customizer for themes and more
-
Upload
santosh-kunwar -
Category
Software
-
view
445 -
download
1
Transcript of 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 )
05/03/2023 3WordPress Customizer for Themes and More
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
05/03/2023 4WordPress Customizer for Themes and More
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
05/03/2023 5WordPress Customizer for Themes and More
Fig : Customizer
05/03/2023 6WordPress Customizer for Themes and More
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.
05/03/2023 7WordPress Customizer for Themes and More
Main Parts of Customizer contd..
SECTIONS A section is a container for
controls.
Panels A panel is a container for sections.
05/03/2023 8WordPress Customizer for Themes and More
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;
05/03/2023 9WordPress Customizer for Themes and More
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
05/03/2023 10WordPress Customizer for Themes and More
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.) );
05/03/2023 11WordPress Customizer for Themes and More
Adding Controls
$wp_customize->add_control( 'setting_id', array( 'type' => 'url', 'priority' => 10, 'section' => 'title_tagline', 'label' => '',) );
05/03/2023 12WordPress Customizer for Themes and More
Basic Control Types text hidden textarea checkbox number range
select url email password dropdown-pages
05/03/2023 13WordPress Customizer for Themes and More
Control contd… Class Available
Color Upload Image Media (New) Cropped image(New)
05/03/2023 14WordPress Customizer for Themes and More
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',) ) );
05/03/2023 15WordPress Customizer for Themes and More
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.) );
05/03/2023 16WordPress Customizer for Themes and More
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');
05/03/2023 17WordPress Customizer for Themes and More
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
05/03/2023 18WordPress Customizer for Themes and More
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
05/03/2023 19WordPress Customizer for Themes and More
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*/
05/03/2023 20WordPress Customizer for Themes and More
$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
05/03/2023 21WordPress Customizer for Themes and More
$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
05/03/2023 22WordPress Customizer for Themes and More
$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
05/03/2023 23WordPress Customizer for Themes and More
radio_image category_dropdown message post_dropdown tags_dropdown user_dropdown
Coder Customizer Custom Control Types
05/03/2023 24WordPress Customizer for Themes and More
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
05/03/2023 25WordPress Customizer for Themes and More
$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
05/03/2023 26WordPress Customizer for Themes and More
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
05/03/2023 27WordPress Customizer for Themes and More
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