In this tutorial, i’ll show you how to create and add a second style.css file in your theme.
You can add the style sheet to your parent theme however its best practice to add it in your child theme.
Add Custom Style Sheet In Child Theme
1. First step is to copy this PHP code from the view raw link and paste it at the end of your child themes functions.php file:
2. Second step is to create a new file named custom.css in your child themes folder.
3. Third & final step is to paste this text at the start of the file.
All your custom CSS code can now be added below the line in your new custom.css file.
Custom Home Page Style Sheet
You can also use a second style sheet to style multiple pages or posts by adding a conditional tag to the code.
If you’re planning on making big changes to one or more pages on your site, which is different to the main style.css file, this is a good option.
You can also use a different conditional tag if using a static page as your home page.
is_front_page()Blog Page Style Sheet
Another option when using a conditional tag for your custom blog page is to use:
is_page('007')Simply replace the 007 with the page i.d for your blog page.
Category Archives Style Sheet
This code adds a second style sheet which you can use to style all category archives the same.
You can add the category name or category i.d to the conditional tag to style each archive page differently.
Here’s 2 examples:
is_category('007') or is_category('news')Differences for Parent Themes Vs Child Themes
According to Chip Bennett, references to ‘stylesheet directory’ should be reserved for child themes. In this case, you can simply change the code above according to your own beliefs.
https://twitter.com/chip_bennett/status/343394686184091648
get_bloginfo( 'stylesheet_directory' ) or get_stylesheet_directory_uri()Where To Add Second Style Sheet
To create a new style.css file, use a code editor like Notepad++ and save it as a .css file
- You can place the second style sheet in the main root directory of your child theme which is exactly the same location as the default style.css file. Remove the css/ from the code snippets above if this is your preferred method.
- You can create a new folder named css and place the file in there. This is the method i have used as evident in the code snippets above.
Adding CSS To Themes & Plugins
Learn more about how to add scripts to your themes and plugins.
The StudioPress Eleven40 child theme contains code like this to add a second style sheet for the home page.
Learn more about how to use the wp_enqueue_style function in WordPress.
Conclusion
As you can see, its simply a matter of using conditional tags to determine which pages are styled with the CSS code you add to your second style.css file.
How About You?
Have you ever used a second style sheet or wanted to but didn’t know how to go about it?
Leave a Reply
You must be logged in to post a comment.