Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress customizer for themes and more

503 views

Published on

Introduction of WordPress Themes, Introduction and details description of CUSTOMIZER API and CODER CUSTOMIZER FRAMEWORK.
It was present in the WordPress Meetup in Nepal on 27th September 2015.

Published in: Software

WordPress customizer for themes and more

  1. 1. Santosh Kunwar  WordPress Developer at eVisionThemes  Plugin Developer  http://codersantosh.com 11/21/2015 1WordPress Customizer for Themes and More WordPress Customizer for Themes
  2. 2. 11/21/2015 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 )
  3. 3. 11/21/2015 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
  4. 4. 11/21/2015 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
  5. 5. 11/21/2015 5WordPress Customizer for Themes and More Fig : Customizer
  6. 6. 11/21/2015 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.
  7. 7. 11/21/2015 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.
  8. 8. 11/21/2015 8WordPress Customizer for Themes and More Code Example Adding 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;
  9. 9. 11/21/2015 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
  10. 10. 11/21/2015 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. ) );
  11. 11. 11/21/2015 11WordPress Customizer for Themes and More Adding Controls $wp_customize->add_control( 'setting_id', array( 'type' => 'url', 'priority' => 10, 'section' => 'title_tagline', 'label' => '', ) );
  12. 12. 11/21/2015 12WordPress Customizer for Themes and More Basic Control Types  text  hidden  textarea  checkbox  number  range  select  url  email  password  dropdown-pages
  13. 13. 11/21/2015 13WordPress Customizer for Themes and More Control contd… Class Available  Color  Upload  Image  Media (New)  Cropped image(New)
  14. 14. 11/21/2015 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', ) ) );
  15. 15. 11/21/2015 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. ) );
  16. 16. 11/21/2015 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');
  17. 17. 11/21/2015 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
  18. 18. 11/21/2015 18WordPress Customizer for Themes and More  Download this plugin, unzip it and put it inside theme-folder  Download Link:  https://wordpress.org/plugins/coder- customizer-framework/  https://github.com/codersantosh/coder- customizer-framework  In functions.php of the active theme define constant for plugin Integrating in the Theme
  19. 19. 11/21/2015 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*/
  20. 20. 11/21/2015 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
  21. 21. 11/21/2015 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
  22. 22. 11/21/2015 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
  23. 23. 11/21/2015 23WordPress Customizer for Themes and More  radio_image  category_dropdown  message  post_dropdown  tags_dropdown  user_dropdown Coder Customizer Custom Control Types
  24. 24. 11/21/2015 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
  25. 25. 11/21/2015 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
  26. 26. 11/21/2015 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
  27. 27. 11/21/2015 27WordPress Customizer for Themes and More  https://make.wordpress.org/core/2014/07/08/cust omizer-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_Customizatio n_API  https://developer.wordpress.org/themes/advanced -topics/customizer-api/  http://codersantosh.com/coder-customizer- framework/ Reference Links
  28. 28. 11/21/2015 WordPress Customizer for Themes and More 29

×