Different stylesheets for different templates

  • I have been following this tutorial in order to have different stylesheets for different page templates. I changed the page.php file to remove the sidebar in the default page that a lot of my plugins call when they generate pages. I have created a page template called page_prevdefault.php but I want to have it use a different stylesheet.

    I have added the following under this line in the header.php:
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>”/>
    <?php

    the following:

    <?php
    if ( is_page_template(‘page.php’)) { ?>
    <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/style.css” />
    <?php } ?>

    <?php
    if ( is_page_template(‘page_prevdefault.php’)) { ?>
    <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/page_prevdefault.css” />
    <?php } ?>

    but unfortunately it doesn’t work and the template page_prevdefault.php still uses style.css. If you could help that would help me out a lot!!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Anonymous User 7842110

    (@anonymized-7842110)

    The default style.css stylesheet is probably being ‘enqueued’ using the theme’s functions.php file.

    You should see something like this in functions.php

    function load_styles() {
	wp_enqueue_style( 'default-styles', get_stylesheet_uri() );
}

    This will load the default theme styles no matter what you use in the header.php file.

    This is where you need to apply your ‘if’ statements in order to load different stylesheets on a page-by-page basis.

    Thread Starter lfeddern

    (@lfeddern)

    thanks for your reply this is the function from the parent theme, how would I add the if statements to the child themes functions file? Am I right in thinking that the functions in functions.php in the child theme are loaded in addition to the parent theme functions, so how do I write the conditionals to override the main function in the parent file?

    function et_divi_load_scripts_styles(){
	....(load of code)....
	/*
	 * Loads the main stylesheet.
	 */
	wp_enqueue_style( 'divi-style', get_stylesheet_uri(), array(), $theme_version );
}
    Thread Starter lfeddern

    (@lfeddern)

    I really appreciate your help btw! I am very much a beginner trying to learn the ropes!

    Anonymous User 7842110

    (@anonymized-7842110)

    OK, so you can use conditionals in the function itself …

    function et_divi_load_scripts_styles() {
    if ( is_page('products') ) // using page slug
        wp_enqueue_style( 'my-style', get_template_directory_uri() . '/my-style.css' );
}

    Note: No brackets are needed for the if statement.

    You can also ‘dequeue’ styles as easy as enqueueing them.

    Take a look at: wp_dequeue_style()

    So maybe try …

    function et_divi_load_scripts_styles() {
    if ( is_page('products') ) // using page slug
        wp_dequeue_style( 'divi-style' );
        wp_enqueue_style( 'my-style', get_template_directory_uri() . '/my-style.css' );
}
    Anonymous User 7842110

    (@anonymized-7842110)

    Oh, and don’t forget to add the filter afterwards …

    add_action( 'wp_enqueue_scripts', 'et_divi_load_scripts_styles' );
    Thread Starter lfeddern

    (@lfeddern)

    Am I right in thinking by editing the functions file in the parent theme you will lose after an update? Thanks for the above though led me to search similar stuff and come up with this solution that worked!

    <?
function lander_work_script() {
if ( is_page_template('page-templates/page_prevdefault.php') ) {
wp_enqueue_style( 'lander-work-style', get_stylesheet_directory_uri() . '/prevdefault.css');
}
}

add_action('wp_enqueue_scripts', 'lander_work_script',15,0);

    Thanks for your help Jimmy, appreciate it.

    Anonymous User 7842110

    (@anonymized-7842110)

    No problem at all. Glad you got there ??

    Generally speaking, if you make changes to a template/parent theme and then update it, there is a risk of losing those changes. Child themes are a good way to prevent that and are best practice at this moment in time.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Different stylesheets for different templates’ is closed to new replies.