Add Customizer Panels, Sections & Controls to LayersWP
WordPress Customizer Controls are the form elements that you see inside the WordPress Customizer which provide options such as color pickers, layouts, styling and widget area selectors .
Customizer controls may be added in both Extensions and Child Themes.
Panels, Sections , Controls & Option:
Default & LayersWP Panels are:
Site Setting, Menu, Header, Blog, Footer, WooCommerce (If Installed).
// Customizer panel
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
add_filter('layers_customizer_panels','layers_child_customizer_panels', 60); add_filter('layers_customizer_sections','layers_child_customizer_sections', 100); add_filter( 'layers_customizer_controls', 'layers_child_customizer_controls', 100 ); if( !function_exists( 'layers_child_customizer_panels' ) ) { function layers_child_customizer_panels( $panels ){ $panels['demoextension'] = array( 'title' => __( 'My Theme Option' , 'child' ), 'description'=> __( 'Your custom description.' , LAYERS_DEMO_EXTENSION_SLUG ), 'priority' => 130 ); return $panels; } } if( !function_exists( 'layers_child_customizer_sections' ) ) { function layers_child_customizer_sections( $sections ){ $sections[ 'header-social-media' ] = array( 'title' => __( 'Social Media Profiles' , 'layers-child-demo' ), 'panel' => 'demoextension', ); return $sections; } } if( !function_exists( 'layers_child_customizer_controls' ) ) { function layers_child_customizer_controls( $controls ){ $controls[ 'header-social-media' ] = array( 'social-twitter' => array( 'type' => 'layers-text', 'label' => __( 'Twitter Username' , 'layers-child-demo' ) ), 'social-facebook' => array( 'type' => 'layers-text', 'label' => __( 'Facebook URL' , 'layers-child-demo' ) ), 'social-instagram' => array( 'type' => 'layers-text', 'label' => __( 'Instagram Username' , 'layers-child-demo') ) ); return $controls; } } |
// Adding controls to existing section
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
add_filter( 'layers_customizer_controls' , 'mytheme_customizer_sections', 130 ); if( !function_exists( 'mytheme_customizer_sections' ) ) { function mytheme_customizer_sections( $controls){ $social_media_controls = array( 'social-twitter1' => array( 'type' => 'layers-text', 'label' => __( 'Twitter Username' , 'mytheme_textdodmain' ), ), 'social-facebook1' => array( 'type' => 'layers-text', 'label' => __( 'Facebook URL' , 'mytheme_textdodmain' ), ), 'social-pinterest1' => array( 'type' => 'layers-text', 'label' => __( 'Pinterest Username' , 'mytheme_textdodmain' ), ), ); $controls['header-layout'] = array_merge( $controls['header-layout'], $social_media_controls ); return $controls; } } |
// Using Option Settings on the Front-End
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
add_action( 'layers_before_header_nav' , 'my_header_social_media_icons' ); function my_header_social_media_icons(){ ?> <div class="pull-right"> <?php if( '' != layers_get_theme_mod( 'social-facebook' ) { ?> <a href="<?php echo layers_get_theme_mod( 'social-facebook' ); ?>"><i class="i-facebook">facebook</i></a> <?php } ?> <?php if( '' != layers_get_theme_mod( 'social-twitter' ) { ?> <a href="<?php echo layers_get_theme_mod( 'social-twitter' ); ?>"><i class="i-twitter">facebook</i></a> <?php } ?> <?php if( '' != layers_get_theme_mod( 'social-instagram' ) { ?> <a href="<?php echo layers_get_theme_mod( 'social-pinterest' ); ?>"><i class="i-instagram">instagram</i></a> <?php } ?> </div> <?php }; } |
// Unset Controls
Learn more: How to remove Layers customizer element
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
add_filter( 'layers_customizer_controls' , 'mytheme_unset_customizer_sections', 100 ); if( !function_exists( 'mytheme_unset_customizer_sections' ) ) { function mytheme_unset_customizer_sections( $controls){ unset($controls['header-layout']['header-menu-layout']['choices']['header-logo-center-top']); unset($controls['header-layout']['header-menu-layout']['choices']['header-logo-top']); unset($controls['header-layout']['header-menu-layout']['choices']['header-logo-center']); unset($controls['site-colors']['colors-upsell-layers-pro']); unset($controls['title_tagline']['logo-upsell-layers-pro']); unset($controls['header-layout']['header-upsell-layers-pro']); } } |
// Field Types
layers-button
layers-checkbox
layers-button
layers-checkbox
layers-code
layers-color
layers-css
layers-font
layers-heading
layers-number
layers-range
layers-rte
layers-select-icons
layers-select-images
layers-select
layers-seperator
layers-text
layers-textarea
Video Tutorials for this lesson is available for our Premium Students.
Ref: LayersWP