CODEWITHSUNDEEP
phphtmlcsswordpress
Alex Kiersnowski
Alex Kiersnowski

Reputation: 3

How to create custom page in Wordpress with new stylesheet?

New to wordpress so struggling a little bit here.

Basically I've got 4 custom page templates that I need to create: Home, Portfolio, About, Contact.

For each of these new pages I need a new CSS file. I've enqueued my script portfolio.css as such:

function my_custom_styles() {

wp_register_style( 'portfolio', 
get_template_directory_uri().'/portfolio.css' );

if ( is_portfolio ) {

wp_enqueue_style( 'portfolio' );
}
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

This works great - my only problem is that my main stylesheet style.css is clashing with this and overwriting a lot of the styles. Basically both style.css and portfolio.css are loading at the same time.

How do I get it so that only style.css loads on my Homepage, portfolio.css loads on my Portfolio page, about.css only loads on my about page etc.

I can't seem to find any help online for this!

Cheers guys!

Upvotes: 0

Views: 50

Answers (1)

Xhynk
Xhynk

Reputation: 13840

Ideally, portfolio.css, about.css, etc. would extend style.css, where most of the core styles (font size, weight, padding, accent declarations, etc.) would be defined in style, but portfolio would add some additional styles not used elsewhere.

If you truly want them to be mutually exclusive, you'll have to dequeue the style.css file.

View your page source and search for /YOURACTIVETHEME/style.css. Note the id="some-style-id" in the <link> tag. That's the "handle" for the stylesheet, and you can use wp_deregister_style() or wp_dequeue_style() to remove it.

Also, clean up your code, it's going to get hard to maintain with those inconsistent indentations. Going through your code, are you sure your if statement is working? is_portfolio is being as a constant right now… You're probably intending it to be passed using something like the is_page() or is_page_template() functions.

add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
function my_custom_styles() {
    wp_register_style( 'portfolio', get_template_directory_uri().'/portfolio.css' );

    if( is_page('portfolio') ){ // Use Page Title, Page Slug, or Page ID here
        wp_enqueue_style( 'portfolio' );
        wp_dequeue_style( 'YOUR-ID-FROM-EARLIER' );
    }
}

All of this said, if you have custom page templates, you could just use put

wp_enqueue_style( 'portfolio', get_template_directory_uri().'/portfolio.css' );
wp_dequeue_style( 'YOUR-ID-FROM-EARLIER' );

in the page template files.

Another thing to consider is that you're using get_template_directory_uri() which will pull from the parent theme. If you want the active child theme that uses a template (ala Genesis) you'll need to use get_stylesheet_directory_uri() instead.

Upvotes: 2

Related Questions