sandy
We all know this new feature that recently become necessary for every theme developer to implement into their wp theme. Now many user wanted to know how to put their links into customizer like upgrade to pro or documentation ok if we leave that how to customize look and feel of wp customizer with using css.
Actually there is function with that you can call or put your own css code into customizer i’m going to make some example for this.
As you can see into above image there I was activated Mazagine Style theme with default customizer now let do some fun.
Customizer Enqueue Script
/**
* Enqueue script for custom customize control.
*/
function theme_slug_custom_customize_enqueue() {
wp_enqueue_style( 'customizer-css', get_stylesheet_directory_uri() . '/css/customizer.css' );
}
add_action( 'customize_controls_enqueue_scripts', 'theme_slug_custom_customize_enqueue' );
Copy above code and put into function.php file this code enqueue your script you can add JavaScript or css file. After create a file name with customizer.css and put css code like below example.
Customizer CSS style
#customize-controls .wp-full-overlay-sidebar-content{background-color: #829FBB;}
#customize-theme-controls .accordion-section-title{color: #35CB5F;}
Now you can see the output into image:
I just changed background color and font color you can do whatever you want. There are many ways you can customize option panel like Inspect Element feature of your browser it’s now matter what you use but every field is customize-able some of fields for example Textarea, Text Field, Ratio Buttons, Submit Buttons , Check Box, Dropdawn List etc.
If you have any question related to article please post in comments.
