Deprecated: Return type of Give\Framework\FieldsAPI\Contracts\Node::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-content/plugins/give/src/Framework/FieldsAPI/Contracts/Node.php on line 29

Deprecated: DateTime::__construct(): Passing null to parameter #1 ($datetime) of type string is deprecated in /var/www/codexcoach.com/wp-includes/script-loader.php on line 333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/class-wp.php on line 173
How to Include JavaScript & CSS in WordPress - CodeXCoach
Deprecated: parse_str(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/formatting.php on line 4952

Deprecated: parse_str(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/formatting.php on line 4952

Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/wp-db.php on line 3030

Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/wp-db.php on line 3030
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


Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/wp-db.php on line 3030

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 […]

Adding Custom Meta Fields to Taxonomies in WordPress

For add Custom Meta Field in taxonomy use following code in your current themes functions.php file.

Custom Pagination in WordPress

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

Display Popular Tags in WordPress

you’ll need to add following code to your current themes functions.php file.

How to add /blog/ in front of your single post URLs in WordPress

when we want to add /blog/ only for wordpress default post, add Following code in your current themes functions.php File.

Redirect to Checkout after add to cart WooCommerce

Redirecting the user to the checkout page when they’ve added a product to their cart. This may come in handy if you only sell one product / one product per time. The filter woocommerce_add_to_cart_redirect makes it easy to redirect user to custom page. Code goes in function.php file of your active child theme (or active […]


Leave a Reply

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