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


Disable RSS Feed in WordPress

By default WordPress generates RSS feeds for all post types, Taxonomies, Comments and etc.. that are built in, such as: http://example.com/feed/ http://example.com/feed/rss/ http://example.com/feed/rss2/ http://example.com/feed/rdf/ http://example.com/feed/atom/ There are two ways to disable RSS feed like using plugins and with custom codes. You can use many free plugins for disable RSS feeds. But let we disable RSS […]

Custom Pagination in WordPress

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

Increasing the WordPress Memory Limit

This article for increase memory limit in WordPress. Below are some ways to increase memory limit. Edit wp-config.php file First you need to edit the wp-config.php file on your WordPress site. It is located in your WordPress site’s root folder, and you will need to use an FTP client or file manager in your web […]

How to Change WordPress Post excerpt length

For Change post excerpt length add following code in your current themes functions.php file.

Enable SVG Support in WordPress

For Enable svg support you’ll need to add the following code to your current themes functions.php file.

How to create custom widgets in wordpress

Include the following code file to your current themes functions.php file Here is the code for sidebar register.


Leave a Reply

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