Css JavaScript WordPress
April 30, 2020

How to Include JavaScript & CSS in WordPress

When we are customizing any wordpress theme using child theme at some time we need to enqueue any external CSS or JavaScript in site. In this case we can best way to include css and JavaScript in functions.php file. We can enqueue the JavaScript or CSS using wp_enqueue_script() or wp_enqueue_style() functions.

CSS

You can enqueue your css in functions.php file using wp_enqueue_style() function.

You can include these parameters:

  • $handle is simply the name of the stylesheet.
  • $src is where it is located. The rest of the parameters are optional.
  • $deps refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
  • $ver sets the version number.
  • $media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’

If you want to include custom-style.css file in folder css in your child theme directory. You can write below in functions.php file.

JavaScript

You must load Javascript file using wp_enqueue_script() function. Syntax of wp_enqueue_script() is same like to using wp_enqueue_script().

  • $handle is the name for the script.
  • $src defines where the script is located.
  • $deps is an array that can handle any script that your new script depends on, such as jQuery.
  • $ver lets you list a version number.
  • $in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather then in the header, so that it does not delay the loading of the DOM tree.

You should enqueue custom.js like this in your child theme:

Combining Enqueue Example

The best way to combine all css and javascript in a single function using wp_enqueue_scripts WordPress action. It will look like below example. Put below code in functions.php file and move .css and .js file into “js” and “css” folder of child theme.

Load CSS File on WordPress Admin

Sometime you want to load CSS and JavaScript in all admin pages for any customization. You can do that using admin_enqueue_scripts action. You can enqueue script and style using below code.

Load CSS File from Plugin on WordPress Admin

Related Post


Remove Version From CSS & JS in WordPress

Let’s start with removing versions from style and scripts. To do so, add the code below in your active theme’s functions.php file. After adding script on functions.php file you can view the source of any pages version should be removed from all your styles and scripts. You can also remove version from WordPress Head and […]

How to Block Dashboard Access for Non-Admins WordPress

Removing the Admin Bar for Non-Admins Removing the admin bar is a simple code snippet. I’ve shown before how you can hide the admin bar conditionally for users. In there I’ve not mentioned how you can hide it for everyone but admins, so thats where this code snippet comes in. You need to add the […]

How to Create Custom Elements Using Visual Composer API

When we are making site with visual composer some time not possible to built some designs using visual composer elements. So at that time we need to use HTML element for built designs. But visual composer API provide facility to built own custom element for some special requirements and its very easy. We can built […]

How to Create Your Own WordPress Shortcodes

Simple shortcodes Shortcode functions can be added to plugin code or your theme’s functions.php file. If it’s the latter, I’d recommend creating a separate wc-shortcodes.php file, then adding include(‘wc-shortcodes.php’); to functions.php. You can use below code to include file wc-shortcodes.php. If the shortcode produces a lot of HTML then ob_start can be used to capture […]

Custom Pagination in WordPress

For custom pagination Add Following code in your current themes functions.php file.

How to Remove Website URL Field from WordPress Comment Form

Use Following Code in your current themes functions.php file it removed website url field from comment form.


Leave a Reply

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