• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

How To register & enqueue Stylesheets and Scripts

Last Updated on August 7, 2018 Favorited: 0 times

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

  • wp_register_style()
  • wp_deregister_style()
  • wp_enqueue_style()
  • wp_dequeue_style()

Enqueue Scripts

  • wp_register_script()
  • wp_deregister_script()
  • wp_enqueue_script()
  • wp_dequeue_script()

More

  • wp_register_style
  • wp_register_script
  • wp_enqueue_style
  • wp_enqueue_script

Related Posts

  • Transparent site header and fixed header on scroll in Genesis
  • Conditional CSS in WordPress and Genesis
  • Conditional Tags to Load custom.js script
  • Conditional Tags to Load custom.css stylesheet
  • Change Genesis Child Theme StyleSheet Loading Priority

Categories: Free Content, Genesis Tutorials, WordPress Tutorials Tags: enqueue, register, script, style, Stylesheet

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service