How to Load Custom Scripts and Styles in WordPress

If you are looking to load your custom scripts or css styles in your WordPress blog without touching the theme’s source files like style.css, functions.php you can do it. In this article, you will learn a quick way to load custom js scripts and css styles to your WordPress site so easily. Read the rest of article to learn how to load custom scripts and styles in WordPress.

WP Customizer is a simple WordPress plugin that let’s you manage your functions, scripts and styles for your WordPress blog in just a one-click. Using this plugin you can load custom scripts and styles in WordPress and you don’t need to edit a couple of codes in your functions.php file or any other source file.

Settings and options:

1. Choose the type of customization you want to load; functions, scripts, CSS in any combination
2. Choose where you want the customizations to load; in the WordPress front-end, in the WordPress admin screens or both
3. Choose where you want to store your customization files, without the need to add to or modify your theme’s or your plugin’s source files

How WP Customizer plugin Works?

If you want to load custom functions, scripts, and styles within your WordPress blog using WP Customizer, kindly follow the steps below:

1. Download, install and activate the plugin WP Customizer in you blog
2. Navigate to Settings > WP Customizer
3. Prepare your customization files. By default, WP Customizer looks for front-end functions in a directory named functions, for front-end scripts in a directory namedscripts and for front-end CSS files in a directory named css.
4. Admin screen customizations are placed in a similar set of directories, prefixed withadmin_, as in admin_functions, admin_scripts and admin_css.
5. Customizations common to both the front-end and the admin screens are placed in directories prefixed with common_, as in common_functions, common_scripts andcommon_css.
6. You can either create the default directories and place your customization files in them or create your own directory hierarchy.
7. Now you can configure the loading of each type of supported customization. From the Dashboard navigate to Settings / WP Customizer and enable loading of the customization files as you require.
8. If you choose to use a non-default set of directory name, you should ensure the plugin’s options are updated to reflect this.