While designing Crunchify theme, we wanted to have special CSS style sheet which we wanted to apply only on Home or Index page.
WordPress by default comes with number of conditional tags. Some of most frequently used are below in list:
- is_home() – for home page check
- is_front_page() – for front page check
- is_archive() – for archive page check
- is_page() – for page check
- is_single() – for post check
- is_singular() – for post/page check
Based on the theme it will be tricky to apply CSS on home/index page. But we will try to go over steps which applies to most of the WordPress theme.
This tutorial applies if you have below questions too:
- Specific css on homepage, different one for other pages
- CSS – Style something only on the homepage
- A different CSS for front page
- How to add css for custom page template
- Change css entry-content only on homepage
- CSS homepage template
- Change CSS for Single Page
Let’s get started:
Step-1
- Visit your site home page.
- In my case:
https://crunchify.com
- In my case:
- Right click on home page and click
Inspect Element. - Check for
<body> tagand find home page CSS identifier.- I’m using WordPress Genesis Framework and in my case it’s
body classwith CSS property.home
- I’m using WordPress Genesis Framework and in my case it’s
Step-2
If you go to page or single post you will see different CSS class. Check those out in below screenshots.
Single post:
Page post:
Archive page:
Step-3
Once you identify correct CSS class just put your required CSS in your theme’s style.css file.
On my theme I’ve placed below code to apply only on home/ archive / page type.
.home .content-sidebar-wrap{ // <=== this applies to only Home page type
width: 1150px;
}
.home .content{
width: 800px;
}
.archive .content-sidebar-wrap{ // <--- this applies to only Archive page type
width: 1150px;
}
.archive .content{
width: 800px;
}
.page .content-sidebar-wrap{ // <=== this applies to only Page type
width: 1150px;
}
.page .content{
width: 800px;
}
On my other blog, as I’ve disabled 2nd sidebar on homepage, I’ve to change post width accordingly. For single page I do have 2 sidebars.
One on left and 2nd on right. So, above minor changes in CSS helped me fix the blog width issue on different types of page seamlessly.
Let me know if you face any issue setting up custom CSS on WordPress.