Enqueue Custom CSS And JavaScript Libraries In WordPress

We all know that, as the WordPress developer, for developing the WordPress themes or plugins, it will always be required to provide the Custom CSS code for styling and JavaScript files for some of the animations as well as functionality. So, how to load the required Custom CSS and JavaScript files in your WordPress projects? The answer towards this issue is quite simple, you can either add it to the header or to the footer file of your project, being built.

But, what if you want to follow the standard way? Well, you are in luck with this feature in WordPress. WordPress has provided you with the custom function to load the required Custom CSS and JavaScript files, which is wp_enqueue_scripts. Now, to load up some of the Custom CSS and JavaScript files, you need to provide the link to that file as in the example below:

add_action('wp_enqueue_scripts', 'creative_blog_scripts'); // Enqueueing the required files in WordPress using the action hook.
function creative_blog_scripts() {
wp_enqueue_style('creative-blog-fontawesome-style', get_template_directory_uri() . '/fontawesome/css/font-awesome.css'); // Enqueueing the required CSS code.
wp_enqueue_script('creative-blog-main-script', get_template_directory_uri() . '/js/creative-blog-custom.js', array('jquery'), null, true); // Enqueueing the required JavaScript code.
}

Here, in the above example, we have enqueued both of the Custom CSS and JavaScript files using the functions wp_enqueue_style and wp_enqueue_script respectively, which is the function of WordPress to enqueue or add those files for it to be used while developing the WordPress themes or plugins as required for your project. Now, if you have added all of the codes properly, then, it will be loaded in your site as required for your project.

enqueue-js-css-files

Note: For adding the CSS files, it will be added in the header, but, for the JavaScript files, it can be controlled by us either to load it in the header or in the footer areas, according to the project requirement.

If you have followed this tutorial properly and is success in loading the required Custom CSS and JavaScript files for your project properly, then, we can assume that you are now more familiar on handling the Custom CSS and JavaScript files for your project. Well, if you are still confused and is not able to do so, then, just comment below on the comment box and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.