enqueue
scripts | style

/ SprUng, CODING, Quick-Notes, wordpress - more cheats / 12 minutes of reading

Enqueue Priority

de-enqueue the offending plugin css – then reenque it before yours?

 

 

 

 

As you suggest, the most elegant approach is when your CSS overrides are loaded after the CSS injected by the plugins. This is quite easy to achieve – you just need to make sure that your header.php calls wp_head() before it references your style sheet:

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

 

The problem is that your actions are being run in the order you perceive but the styles are just being collected by WordPress and included in a random order.

The order of your add_actions will not be important. I would do this:

function add_all_stylesheets() {
  // you omitted this from your question, see below
}
add_action('wp_enqueue_scripts', 'add_all_stylesheets');

Now – if you'd like your scripts to be included in order you'll need to have them "depend" on each other so they cascade.

function add_all_stylesheets() {
  wp_enqueue_style( 'stylesheet-one', get_template_directory_uri() . '/css/stylesheet-one.css' );
  wp_enqueue_style( 'stylesheet-two', get_template_directory_uri() . '/css/stylesheet-two.css', array( 'stylesheet-one' ) );
  wp_enqueue_style( 'stylesheet-three', get_template_directory_uri() . '/css/stylesheet-three.css', array( 'stylesheet-two' ) );
}
add_action('wp_enqueue_scripts', 'add_all_stylesheets');

Now your "stylesheet-two" depends on "stylesheet-one" and "three" depends on "two. This should be the effect you want.

https://diveinwp.com/how-to-enqueue-script-style-in-wordpress-admin-login/

Enqueue Scripts & Style in WordPress Admin for All Pages

To enqueue any scripts and styles in admin, WordPress provides a hook admin_enequeue_scripts. This hook will be the same for both scripts and style.

Add this code to functions.php file to add scripts and styles in WordPress admin for all pages. Don’t forget to change the script and style handle name and path to the file.

function enqueuing_admin_scripts(){
 
    wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
    wp_enqueue_script('admin-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
 
}
 
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );

Enqueue Scripts & Style in WordPress Admin for Posts | Pages | Custom Post Types

To enqueue scripts & style in posts, pages and custom post types page, code snippets are given below. You can use these snippets as per your needs, all you need to set post type.

Don’t forget to change the script and style handle name and path to the file.

For All Listing Page

function enqueuing_admin_scripts(){
 
// Global Admin Variable, It tells which page is on now.
global $pagenow; 
 
// Global Admin Variable, It tells which post type is on now.
global $post_type;
 
if(($pagenow == 'edit.php') && ($post_type ==  'post_type_name')){
    wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
    wp_enqueue_script('admin-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
}
 
}
 
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );

For Add New Page

function enqueuing_admin_scripts(){
 
// Global Admin Variable, It tells which page is on now.
global $pagenow; 
 
// Global Admin Variable, It tells which post type is on now.
global $post_type;
 
if(($pagenow == 'post-new.php') && ($post_type == 'post_type_name')){
    wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
    wp_enqueue_script('admin-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
}
 
}
 
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );

Enqueue Scripts & Style in WordPress Admin for Specific Page

To enqueue scripts and styles in admin for specific pages, all you need to find the slug for that page as shown in the image below.

enqueue-scripts-styles-in-wordpress-specific-page

So in this case, I want to enqueue scripts in Settings > General Page. To do that, I will just use the slug of this page options-general.php in my code to check current page.

Don’t forget to change the script and style handle name and path to the file.

function enqueuing_admin_scripts(){
 
// Global Admin Variable, It tells which page is on now.
global $pagenow; 
 
if($pagenow == 'options-general.php'){
    wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
    wp_enqueue_script('admin-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
}
 
}
 
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );

Enqueue Scripts & Style in WordPress Login Page

To enqueue scripts & style in the login page, WordPress provides a hook login_enqueue_scripts. This hook will add the scripts & styles in the login page.

Don’t forget to change the script and style handle name and path to the file.

function enqueuing_admin_scripts(){
 
// Global Admin Variable, It tells which page is on now.
global $pagenow; 
 
if($pagenow == 'options-general.php'){
    wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
    wp_enqueue_script('admin-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
}
 
}
 
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );

Share it to the Community!

https://webdesign.tutsplus.com/tutorials/how-to-add-custom-css-to-your-wordpress-site–cms-34367

Loading CSS Into WordPress With Enqueue Style

by Barış Ünver23 Jan 2021

Difficulty:BeginnerLength:MediumLanguages:EnglishDeutschEspañolItaliano

WordPressCSS

Without CSS, you have very limited choices to style your web pages. And without proper CSS inclusion inside WordPress, you can make it extremely hard for your theme's users to customize the theme's styling.

In this tutorial, we're going to have a look at the right way to enqueue CSS into WordPress with wp_enqueue_style().

In this post, you'll learn the right way to load an entire CSS stylesheet into your theme. If you just want to add some CSS to your WordPress site without coding, check out our post on How to Add Custom CSS to Your WordPress Site.

  • img

    WORDPRESS

    How to Add Custom CSS to Your WordPress Site

    Anna Monus

The Wrong Way to Load CSS in WordPress

https://webdesign.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way–cms-20402

Over the years, WordPress has grown its code in order to make it more and more flexible, and enqueueing CSS and JavaScript was a move in that direction. Our bad habits remained for a while, though. While knowing that WordPress introduced CSS and JavaScript enqueueing, we continued to add this code into our header.php files:

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Or we added the code below into our functions.php files, thinking it was better:

function add_stylesheet_to_head() {
    echo "<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";
}
 
add_action( 'wp_head', 'add_stylesheet_to_head' );

In the cases above, WordPress can't determine whether the CSS files are loaded in the page or not. That might be an awful mistake!

If another plugin uses the same CSS file, it wouldn't be able to check if the CSS file has already been included in the page. Then the plugin loads the same file for a second time, resulting in duplicate code.

Luckily, WordPress has a pretty easy solution to problems like this: registering and enqueueing stylesheets.

The Right Way to Load CSS in WordPress

As we said earlier, WordPress has grown a lot over the years, and we have to think about every single WordPress user in the world.

In addition to them, we also have to take thousands of WordPress plugins into account. But don't let these big numbers scare you: WordPress has pretty useful functions for us to properly load CSS styles into WordPress.

Let's have a look.

Registering the CSS Files

If you're going to load CSS stylesheets, you should register them first with the function:

wp_register_style( $handle, $src, $deps, $ver, $media );
  • $handle (string, required) is a unique name for your stylesheet. Other functions will use this "handle" to enqueue and print your stylesheet.
  • $src (string, required) refers to the URL of the stylesheet. You can use functions like get_template_directory_uri() to get the style files inside your theme's directory. Don't ever think about hard-coding it!
  • $deps (array, optional) handles names for dependent styles. If your stylesheet won't work if some other style file is missing, use this parameter to set the "dependencies".
  • $ver (string or boolean, optional) is the version number. You can use your theme's version number or make one up if you want. If you don't want to use a version number, set it to null. It defaults to false, which makes WordPress add its own version number.
  • $media (string, optional) is the CSS media types like "screen", "handheld", or "print". If you're not sure you need to use this, don't use it. It defaults to "all".

Here's an example of the wp_register_style() function:

// wp_register_style() example
wp_register_style(
    'my-bootstrap-extension', // handle name
    get_template_directory_uri() . '/css/my-bootstrap-extension.css', // the URL of the stylesheet
    array( 'bootstrap-main' ), // an array of dependent styles
    '1.2', // version number
    'screen', // CSS media type
);

Registering styles is kind of "optional" in WordPress. If you don't think your style is going to be used by any plugin or you're not going to use any code to load it again, you're free to enqueue the style without registering it. See how it's done below.

Enqueueing the CSS Files

After registering our style file, we need to "enqueue" it to make it ready to load in our theme's <head> section.

We do this with the function:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

The parameters are exactly the same with the wp_register_style() function, so there's no need to repeat them.

But as we said that the wp_register_style() function isn't mandatory, I should tell you that you can use wp_enqueue_style() in two different ways:

// if we registered the style before:
wp_enqueue_style( 'my-bootstrap-extension' );
 
// if we didn't register it, we HAVE to set the $src parameter!
wp_enqueue_style(
    'my-bootstrap-extension',
    get_template_directory_uri() . '/css/my-bootstrap-extension.css',
    array( 'bootstrap-main' ),
    null, // example of no version number...
    // ...and no CSS media type
);

Keep in mind that if a plugin will need to find your stylesheet or you intend to load it in various parts in your theme, you should definitely register it first.

Loading the Styles Into Our Website

We can't just use the wp_enqueue_style() function anywhere in our theme—we need to use "actions". There are three actions we can use for various purposes:

  • for loading scripts and styles in the front-end of our website
  • for loading scripts and styles in the pages of our administration panel
  • for loading scripts and styles in the WordPress login page

Here are the examples for these three actions:

// load css into the website's front-end
function mytheme_enqueue_style() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
 
// load css into the admin pages
function mytheme_enqueue_options_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); 
}
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );
 
// load css into the login page
function mytheme_enqueue_login_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); 
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );

Some Extra Functions

There are some very useful functions about CSS in WordPress: They allow us to print inline styles, check the enqueue state of our style files, add metadata for our style files, and deregister styles.

Let's have a look.

Adding Dynamic Inline Styles:

If your theme has options to customize the styling of the theme, you can use inline styling to print them with the wp_add_inline_style() function:

function mytheme_custom_styles() {
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
    $bold_headlines = get_theme_mod( 'headline-font-weight' ); // let's say its value is "bold"
    $custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
    wp_add_inline_style( 'custom-style', $custom_inline_style );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

Quick and easy. Remember, though: You have to use the same handle name with the stylesheet you want to add inline styling after.

Checking the Enqueue State of the Stylesheet:

In some cases, we might need the information on a style's state: Is it registered, is it enqueued, is it printed or waiting to be printed? You can determine it with the wp_style_is() function:

/*
 * wp_style_is( $handle, $state );
 * $handle - name of the stylesheet
 * $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'
 */
 
// wp_style_is() example
function bootstrap_styles() {
 
    if( wp_style_is( 'bootstrap-main' ) {
     
        // enqueue the bootstrap theme if bootstrap is already enqueued
        wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );
         
    }
     
}
add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );

Adding Metadata to the Stylesheet: wp_style_add_data()

Here's an awesome function called wp_style_add_data() which allows you to add metadata to your style, including conditional comments, RTL support, and more!

Check it out:

/*
 * wp_style_add_data( $handle, $key, $value );
 * Possible values for $key and $value:
 * 'conditional' string      Comments for IE 6, lte IE 7 etc.
 * 'rtl'         bool|string To declare an RTL stylesheet.
 * 'suffix'      string      Optional suffix, used in combination with RTL.
 * 'alt'         bool        For rel="alternate stylesheet".
 * 'title'       string      For preferred/alternate stylesheets.
 */
 
// wp_style_add_data() example
function mytheme_extra_styles() {
    wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );
    wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
    /*
     * alternate usage:
     * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
     * wp_style_add_data() is cleaner, though.
     */
}
 
add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );

Awesome, isn't it?

If I'm not mistaken, this is the first tutorial ever written about this little—but useful—function.

Deregister Style Files With

If you ever need to "deregister" a stylesheet (in order to re-register it with a modified version, for example), you can do it with wp_deregister_style().

Let's see an example:

function mytheme_load_modified_bootstrap() {
    // if bootstrap is registered before...
    if( wp_script_is( 'bootstrap-main', 'registered' ) ) {
        // ...deregister it first...
        wp_deregister_style( 'bootstrap-main' );
        // ...and re-register it with our own, modified bootstrap-main.css...
        wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );
        // ...and enqueue it!
        wp_enqueue_style( 'bootstrap-main' );
    }
}
 
add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );

Although it's not required, you should always re-register another style if you deregister one—you might break something if you don't.

There's also a similar function called wp_dequeue_style(), which removes the enqueued stylesheets, as its name suggests.

Loading CSS Only on Specific Pages

WordPress relies on multiple plugins to add different kinds of functionality to a website. The CSS and JavaScript needed by those plugins is usually required on specific pages. This means that loading the same unused CSS on every page results in unnecessary bloat.

In this section, we will learn how to only load CSS into WordPress on those pages where it is actually required.

In the following code snippet, we register the scripts and styles for the Chart.js library when the init hook is fired. After that, we enqueue these files conditionally when the wp_enqueue_scripts hook is fired.

The is_page() function is used to determine if we are enqueuing the script and stylesheet on the right page. You can pass individual strings and numbers or their arrays to check for multiple pages at once. In our case, the Chart.js files will be enqueued on pages that show sales and quarterly results.

add_action('init', 'register_custom_styles_scripts');
 
function register_custom_styles_scripts() {
    wp_register_style( 'chartjs_css', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css' );
    wp_register_script( 'chartjs_js', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js', '', null, true);
}
 
 
add_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );
 
function conditionally_enqueue_styles_scripts() {
 
    if ( is_page(array('sales', 'quarterly-results')) ) {
        wp_enqueue_script( 'chartjs_js' );
        wp_enqueue_style( 'chartjs_css' );
    }
}

Another way to improve the page load speed for users is to only load critical CSS in the head and load everything else in the footer.

The last parameter in the wp_enqueue_script() function allows us to load our scripts in the footer. Unfortunately, the corresponding wp_enqueue_style() function does not have this parameter. The best way to ensure that the stylesheet is added to the footer is to use the wp_footer action hook. It is used to output scripts or other data before the closing body tag.

function footer_add_chart_style() {
    wp_enqueue_style('chartjs_css', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css');
};
add_action( 'get_footer', 'footer_add_chart_style' );

Wrapping Everything Up

Congratulations, now you know everything about including CSS in WordPress correctly! Hope you enjoyed the tutorial.

Do you have any tips or experiences you want to share? Comment below and share your knowledge with us! And if you liked this article, don't forget to share it with your friends!

If you want to learn how to add CSS to your WordPress site without coding, check out our post on How to Add Custom CSS to Your WordPress Site.

 

Scroll to Top