Change Style Add CSS to Theme Customizer

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

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.

default wp customizer

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:

wp customizer color change
wp customizer color change

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.


personal technology columnist, author and founder of, a widely read tech and how-to blog since 2009. Wants to explore and share interesting Tips, Tutorials and More. Also WordPress Theme Designer @ here. Contact: Contact

Leave a Reply

Your email address will not be published. Required fields are marked *