Enqueue stylesheets with the same name

Ok, maybe i’m thinking too difficult, but I have 2 stylesheets with the same name. One is from the parent theme folder, and one from the child theme folder.

I want to enqueue the style from the child theme folder AFTER the parent theme style has loaded, so I can overrule some classes.

Read More

This is the enqueue script from the parent theme:

// Register Styles :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
wp_register_style( 'prettyPhoto', get_template_directory_uri() . '/stylesheets/prettyPhoto.css', array(), '1.0', 'all' );
wp_register_style( 'shortcodes', get_template_directory_uri() . '/stylesheets/shortcodes.css', array(), '1.0', 'all' );
wp_register_style( 'retina', get_template_directory_uri() . '/stylesheets/retina.css', array(), '1.0', 'only screen and (-webkit-min-device-pixel-ratio: 2)' );
wp_register_style( 'responsive', get_template_directory_uri() . '/stylesheets/responsive.css', array(), '1.0', 'all' );
wp_register_style( 'rtl', get_template_directory_uri() . '/stylesheets/rtl.css', array(), '1.0', 'all' );
wp_register_style( 'fontello', get_template_directory_uri() . '/stylesheets/fontello.css', array(), '1.0', 'all' );
wp_register_style( 'fontello-ie7', get_template_directory_uri() . '/stylesheets/fontello-ie7.css', array(), '1.0', 'all' );

// Enqueue ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
wp_enqueue_style( 'shortcodes' ); 
wp_enqueue_style( 'stylesheet', get_stylesheet_uri(), array(), '1.1', 'all' );
wp_enqueue_style( 'prettyPhoto' );
wp_enqueue_style( 'fontello' ); 

I want to add another ‘shortcodes.css’ from the child theme dir, that is loaded after the shortcodes.css from the parent theme dir. How can I do this?

Related posts

3 comments

  1. Use a different handle for your stylesheet, maybe shortcodes-child and set the parent handle as dependency:

    wp_register_style( 
        'shortcodes-child', 
        get_stylesheet_directory_uri() . '/stylesheets/shortcodes.css', 
        array( 'shortcodes' ), 
        '1.0', 
        'all' 
    );
    wp_enqueue_style( 'shortcodes-child' ); 
    

    The file name of your stylesheet and the enqueue handle can be different.

  2. The file name doesn’t matter, because you assign it a custom handle.

    So:

    wp_register_style( 'shortcodes2', get_template_directory_uri() . 'child/stylesheets/shortcodes.css', array(), '1.0', 'all' );
    
    wp_enqueue_style( 'shortcodes2' ); 
    
  3. Another key here is the use of get_stylesheet_directory_uri, which calls the child theme style.css and not the parent as get_template_directory_uri does.

    wp_register_style( 'shortcodes2', get_stylesheet_directory_uri() . '/stylesheets/shortcodes.css', array(), '1.0', 'all' );
    
    wp_enqueue_style( 'shortcodes2' );
    

Comments are closed.