0

I've been using site/page builders for so long in WP that I'm OOTL with the current setup of templates, stylesheets and functions in the newer WP builds.

I've got an older theme that I need to make a unique page for and am struggling to understand how to use a specific stylesheet for this page template. If the page template is referral.php and I've added the header and footer into the template (so that I can use unique elements compared to the main site), I can see that the header brings in the sytlesheet using <?php wp_head(); ?>.

What's the best way for this page to use the majority of the parent and child theme styles, but process my specific unique styles for this page ONLY?

Is it to use <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>/referral-style.css"> or is it to create a functions file in the child theme directory and use something like:

<?php

// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) {
    exit;
}

?>
<?php
function themeslug_enqueue_style() {
    if( is_page( 'referral' ) ) {   // Only add this style onto the Blog page.
        wp_enqueue_style( 'referral-style', get_stylesheet_uri() );
    }
    if ( is_child_theme() ) {
        // load parent stylesheet first if this is a child theme
    wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false );
    }
    // load active theme stylesheet in both cases
    wp_enqueue_style( 'theme-stylesheet', get_stylesheet_uri(), false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
2

The preferred way is to use add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' ); within your child theme functions.php file or directly in your referral.php template page. Either way, it's by using add_action and not by echoing into the <link> tag.

Registering your style is also a recommended practice. The one benefit I would see in your case is that you could register all your styles in your functions.php with for each file their dependencies, then you would have to enqueue only one handle in your referral page and WP would load all other files registered as dependencies of your referral-style.css.

For instance, in functions.php

function themeslug_enqueue_style() {
  wp_register_style( 'referral-style', get_stylesheet_directory_uri() . 'path/to/your/css-file', array( 'theme-stylesheet' ) );
  wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );

  // load active theme stylesheet in all cases
  wp_enqueue_style( 'theme-stylesheet' );

}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );

and in referral.php

function my_referral_enqueue_style() {

  wp_enqueue_style( 'referral-style' ); // will load theme-stylesheet automatically

}
add_action( 'wp_enqueue_scripts', 'my_referral_enqueue_style' );

of course you can omit this in referral.php and still add a conditional in your functions.php

if( is_page( 'referral' ) ) {   

  wp_enqueue_style( 'referral-style' );

}

But I wanted to show you both ways

1

If you don't need to use often some scripts or styles, it's better to register them before enqueue. It's kind of informing WordPress that "Please register those scripts and style, I'm gonna need them later."-

<?php

// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) {
    exit;
}

?>
<?php
function themeslug_enqueue_style() {
    wp_register_style( 'referral-style', get_stylesheet_uri() );
    wp_register_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false  );
    if( is_page( 'referral' ) ) {   // Only add this style onto the Blog page.
        wp_enqueue_style( 'referral-style' );
    }
    if ( is_child_theme() ) {
        // load parent stylesheet first if this is a child theme
        wp_enqueue_style( 'parent-stylesheet' );
    }
    // load active theme stylesheet in both cases
    wp_enqueue_style( 'theme-stylesheet', get_stylesheet_uri(), false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.