Wp_enqueue_style only in front

Support
#1

Hi,

I’m using a trick I got from here to load only my custom js in the front side on the website. I didn’t want it to load when I’m editing the page with cornerstone.

I’d like to do the same with style. So, I’m using the following function but the style is loaded anyway. Am I missing something? It’s working with script with this function but not with style.

    function custom_scripts()
{
    wp_register_style('theme-styles', get_stylesheet_directory_uri() . '/style.css', array(), filemtime(get_stylesheet_directory() . '/style.css'), true);
    if (!isset($_POST['cs_preview_state']) || !$_POST['cs_preview_state'] || 'off' === $_POST['cs_preview_state']) {
        wp_enqueue_style('theme-styles');
    } else {
        wp_dequeue_style('theme-styles');
    }

    wp_register_script('custom-script', get_stylesheet_directory_uri() . '/custom.js', array(), filemtime(get_stylesheet_directory() . '/custom.js'), true);
    if (!isset($_POST['cs_preview_state']) || !$_POST['cs_preview_state'] || 'off' === $_POST['cs_preview_state']) {
        wp_enqueue_script('custom-script');
    } else {
        wp_dequeue_script('custom-script');
    }
}

add_action('wp_enqueue_scripts', 'custom_scripts', 99);

Also, I just noticed it’s loaded twice oO

<link rel='stylesheet' id='x-child-css'  href='https://coldpartner.fr/wp-content/themes/pro-child/style.css?ver=3.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='theme-styles-css'  href='https://coldpartner.fr/wp-content/themes/pro-child/style.css?ver=1572130475' type='text/css' media='1' />
#2

Hello @lijecreative,

Thanks for writing in!

The stylesheet did not get loaded twice. x-child-css is for the child theme’s style.css and theme-styles-css is supposed to be for your custom style.css file. If you used the same file, you will need to add this line in your child theme’s functions.php file:

wp_dequeue_style( 'x-child');

function custom_scripts(){
    
    // Dequeue the built-in child theme's style.css
    wp_dequeue_style( 'x-child');

    // Enqueue/Dequeue your custom stylesheet
    wp_register_style('theme-styles', get_stylesheet_directory_uri() . '/style.css', array(), filemtime(get_stylesheet_directory() . '/style.css'), true);
    if (!isset($_POST['cs_preview_state']) || !$_POST['cs_preview_state'] || 'off' === $_POST['cs_preview_state']) {
        wp_enqueue_style('theme-styles');
    } else {
        wp_dequeue_style('theme-styles');
    }

    wp_register_script('custom-script', get_stylesheet_directory_uri() . '/custom.js', array(), filemtime(get_stylesheet_directory() . '/custom.js'), true);
    if (!isset($_POST['cs_preview_state']) || !$_POST['cs_preview_state'] || 'off' === $_POST['cs_preview_state']) {
        wp_enqueue_script('custom-script');
    } else {
        wp_dequeue_script('custom-script');
    }
}

add_action('wp_enqueue_scripts', 'custom_scripts', 99);

We would love to know if this has worked for you. Thank you.

#3

Hi,

With this new “wp_dequeue_style”, my child style is not applied.

Edit : replace true with ‘all’ for the style and it’s ok.

Thanks !

#4

Hey @lijecreative,

Glad you were able to figure it out.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.