CODEWITHSUNDEEP
phpcsswordpress
Chris Holmes
Chris Holmes

Reputation: 53

Custom CSS for Wordpress News Page

I currently have been customising the standard 2013 theme included with Wordpress, making the standard child theme and adding to the bottom of the style.css stylesheet.

This works fine for all of my pages, however there is a case where I need a custom stylesheet 'news.css' for the News page.

I've tried adding the following code into the header.php file, just before the closing tag, to ensure that it's not overruled by other css files.

    <?php
        if ( is_page( 'news' ) ) { ?>
            <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/news.css">

    <?php } else {
    }
?>

The news.css file is in the child theme's root directory, and the url is www.__.com/news/ however I still can't get Wordpress to load this file when on the News page.

What would I need to do to get this stylesheet to load, only for this page?

Thanks in advance.

EDIT: SOLUTION FOUND - The news page (being my posts page) had the .blog class applied to the body tag. Using .blog in the master css file, I can now specifically adjust this page's CSS! Thank goodness!

Upvotes: 0

Views: 369

Answers (1)

William Patton
William Patton

Reputation: 730

I see you've already fixed the issue by using a selector in the CSS that make the rules only apply to the page you want them to (in your case the .blog class worked good.

This is pretty much the standard way of doing things these days.

However I just wanted to put this here for reference in case anyone needs it in the future. The function below 'enqueues' the stylesheet and is the correct way of adding additional stylesheets. This function registers and enqueues 2 new stylesheets.

function load_additional_styles() {
    wp_register_style( 'second-style', get_template_directory_uri() . '/style2.css' );
    wp_enqueue_style ( 'second-style' );
    wp_register_style( 'third-style', get_template_directory_uri() . '/style3.css' );
    wp_enqueue_style ( 'third-style' );
}

add_action( 'wp_enqueue_scripts', 'load_additional_styles' );

It's also possible to use conditionals within these functions so (using the question above as the example) you could do something like this

function load_additional_styles() {
    if ( is_page( 'news' ) ) {
        wp_register_style( 'second-style', get_template_directory_uri() . '/style2.css' );
        wp_enqueue_style ( 'second-style' );
        wp_register_style( 'third-style', get_template_directory_uri() . '/style3.css' );
        wp_enqueue_style ( 'third-style' );
    }
}

add_action( 'wp_enqueue_scripts', 'load_additional_styles' );

In the above code the stylesheets will only be added when is_page('news') returns true.

Upvotes: 0

Related Questions