Keep in mind.
.css file loads using wp_enqueue_style or firstly registered using wp_register_style and then enqueue it.
example:-beautiful.css is a CSS file.
.js file loads using wp_enqueue_script or firstly registered using wp_register_script and then enqueue it.
example:- beautiful.js is a js file.
Read also How to add a custom.css stylesheet in Genesis and How to add custom.js script to in Genesis
get_template_directory_uri() = parent theme folder
get_stylesheet_directory_uri() = child theme folder
Difference between wp_enqueue_style and wp_register_style
wp_enqueue_* firsts add the style/scripts to the queue and wp_register_* prepares these scripts or styles to add in file and load it.
You can read more about it here and here.
Enqueuing styles
The basic function to register a style is:
wp_register_style( $handle, $src, $deps, $ver, $media );
The basic function for enqueuing a style is:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
You can customize and include these parameters:
- $handle is the name of the stylesheet.
- $src is where it is located.
Optional but useful and recommended in most cases.
- $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 shows the version of the file.
- $media specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’
Example:
Let’s say we have a stylesheet named “beautiful.css” in a folder named “CSS” in child theme’s directory, what we can use is this (will not work until enqueued)
wp_register_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css',false,'1.0.0','all');
or
wp_enqueue_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css',false,'1.0.0','all');
But using this, we are not showing it anywhere and couldn’t control the priority of loading the stylesheet. So what we have to do is to 1. Register style using wp_register_style() And then enqueue it using wp_enqueue_style()
Here what we should use:
//* Register and Enqueue Stylesheet add_action( 'wp_enqueue_scripts', 'enqueue_beautiful_style_sheet' ); function enqueue_beautiful_style_sheet() { wp_register_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css', false, '1.0.0' ); wp_enqueue_style( 'beautiful-css' ); }
Enqueuing scripts
Load a script using wp_register_script
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
Load a script using wp_enqueue_script
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
js or jquery files required and should to be loaded using wp_enqueue_script. This is the recommended method which ensures that we are loading it properly which increase the server performance and helps to conditionally target the script on single pages.
Available Parameters:
- $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 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 than in the header, so that it does not delay the loading of the DOM tree. True= in footer. False=in header.
Example:
Let’s assume, we have a script named beautiful.js in /js/ folder of your child theme. Your enqueue function may look like this: (will not work until enqueued)
wp_register_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array( 'jquery' ), CHILD_THEME_VERSION, false ); wp_enqueue_script( 'beautiful-script' );
or simply
wp_enqueue_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array( 'jquery' ), CHILD_THEME_VERSION, false );
Again,
this works good but we should to first register and then enqueue the script to use full control over the file. It is recommended. So, how we can do it? We will use the same above method. Here how it should be
//* Register and Enqueue Script add_action( 'wp_enqueue_scripts', 'enqueue_beautiful_script' ); function enqueue_beautiful_script() { wp_register_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array ( 'jquery' ), '1.0.0' ); wp_enqueue_script( 'beautiful-script' ); }
Register and Enqueue Both Stylesheet and Script
We can simply use the same function to register and enqueue it.
//* Register and Enqueue Stylesheet and Script Both add_action( 'wp_enqueue_scripts', 'enqueue_beautiful_style_script' ); function enqueue_beautiful_style_script() { wp_register_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css', false, '1.0.0' ); wp_register_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array ( 'jquery' ), '1.0.0' ); wp_enqueue_style( 'beautiful-css' ); wp_enqueue_script( 'beautiful-script' ); }
Conditional Tag:-
We can simply be using conditional tags to show it on specific single post or pages. Here is snippet for the single post.
//* Register and Enqueue Stylesheet and Script Both on single 'Post' add_action( 'wp_enqueue_scripts', 'enqueue_beautiful_style_script' ); function enqueue_beautiful_style_script() { if ( is_singular('post') ) { wp_enqueue_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css', false, '1.0.0' ); wp_enqueue_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array ( 'jquery' ) ); } }
Reference:-
Enqueue Styles
Enqueue Scripts
More