Function to load correct CSS for Template not working

Question

I have three templates I want to be able to use (Index Page, Main Template, and Default). I was able to add a "if/else" statement into a function to get the correct CSS file to load depending on which template was being used between two templates (Index and Default).

However, when I try to use "elseif" so I can add in another option for Main Template, it doesn't work. Instead the page that uses Main Template loads the Index Page CSS.

This is the code in question:

    if ( is_page() && ! is_page_template( 'page-templates/index_page.php' ) ) {
        wp_enqueue_style( 'authorLuncheon-layout-style1', get_template_directory_uri().'/layouts/index_page.css' );
    } elseif ( is_page() && ! is_page_template( 'page-templates/main_template.php' ) ) {
        wp_enqueue_style( 'authorLuncheon-layout-style2', get_template_directory_uri().'/layouts/main_template.css' );
    } else {
        wp_enqueue_style( 'authorLuncheon-layout-style3', get_template_directory_uri().'/layouts/content-sidebar.css' );
    }

Here's the whole function:

function authorluncheon_scripts() {
    wp_enqueue_style( 'authorluncheon-style', get_stylesheet_uri() );

    if ( is_page() && ! is_page_template('page-templates/index_page.php' ) ) {
        wp_enqueue_style( 'authorLuncheon-layout-style1', get_template_directory_uri().'/layouts/index_page.css' );
    } elseif ( is_page() && ! is_page_template( 'page-templates/main_template.php' ) ) {
        wp_enqueue_style( 'authorLuncheon-layout-style2', get_template_directory_uri().'/layouts/main_template.css' );
    } else {
        wp_enqueue_style( 'authorLuncheon-layout-style3', get_template_directory_uri().'/layouts/content-sidebar.css' );
    }

    wp_enqueue_script( 'authorluncheon-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

    wp_enqueue_script( 'authorluncheon-skip-link-focus-fix', get_template_directory_uri().'/js/skip-link-focus-fix.js', array(), '20130115', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'authorluncheon_scripts' );

Answer 1

I think your big problem here is your use of underscores (_) in your page template names. According to the Handbook of Coding Standards

Files should be named descriptively using lowercase letters. Hyphens should separate words.

• my-plugin-name.php

Also, for best practices you should call your custom page templates page-whatever.php

So for instance, index_page.php should be renamed to page-index.php and index_page.css should be renamed to something like index-style.css

NOTE: Just one think to remember, if you are talking about your homepage which uses index.php or a blog page that uses index.php or home.php, you should use is_home() instead of is_page() && !is_page_template('page-templates/index_page.php'). If you have set a static front page, you should use is_front_page() instead of is_page() && !is_page_template('page-templates/index_page.php'). Your front page should also be named front-page.php for good practice, although you can use other names as set out here

I would think that this will solve your problem. If not, let me know

EDIT

 if (is_page() && !is_page_template('page-templates/index_page.php')) {
        wp_enqueue_style('authorLuncheon-layout-style1', get_template_directory_uri() . '/layouts/index_page.css');
    } elseif (is_page() && !is_page_template('page-templates/main_template.php')) {
        wp_enqueue_style('authorLuncheon-layout-style2', get_template_directory_uri() . '/layouts/main_template.css');
    } else {
        wp_enqueue_style('authorLuncheon-layout-style3', get_template_directory_uri() . '/layouts/content-sidebar.css');
    }

Read your code above in normal English

if( a page is displayed and the template is NOT page-templates/index_page.php) {

enqueue my style authorLuncheon-layout-style1

} else if( a page is displayed and the template is NOT page-templates/main_template.php) {

enqueue my style authorLuncheon-layout-style2

} else {

when the template displayed IS page-templates/main_template.php or page-templates/index_page.php {

enqueue my style authorLuncheon-layout-style3

}

So this is basically a wrong use of operators. Remember ! means the opposite of the conditional it is attached to. So you should rearrange your code completely for this to work. This is just a rough draught

if ( is_page() && is_page_template( 'page-templates/index_page.php' ) ) {
        //enqueue whatever style you want to use ON THIS SPECIFIC PAGE 
    } elseif ( is_page() && is_page_template( 'page-templates/main_template.php' ) ) {
       //enqueue whatever style you want to use ON THIS SPECIFIC PAGE
    } else {
       //enqueue whatever style you want to use ON ANY OTHER PAGE
    }

EDIT 2

You can also try this. I would also not use the is_page()

if ( !is_page_template( 'page-templates/index_page.php' ) && !is_page_template( 'page-templates/main_template.php' ) ) {
       //enqueue whatever style you want to use ON ANY OTHER PAGE THAN THIS TWO
    } elseif ( is_page_template( 'page-templates/index_page.php' ) ) {
        //enqueue whatever style you want to use ON THIS SPECIFIC PAGE 
    } elseif ( is_page_template( 'page-templates/main_template.php' ) ) {
       //enqueue whatever style you want to use ON THIS SPECIFIC PAGE
    }