Styling seems to be a thing of the past with current super advanced frameworks like Divi, Avada, Elementor and the likes but truth be told, there will always be a specific need that won’t be covered by any of those, not even WordPress. Styling pages & categories is one of them. In this tutorial I’m going to show you how to custom style a specific page in your blog and, most importantly, how to style specific categories.
WordPress is super easy for the most essential task,s but there are some things that are still reserved for those that dare to find a way. Applying a style to a whole website is one thing but, what happens when you need to apply a specific style to a specific page or category? While WordPress will allow you to do that, it’s not easy nor user-friendly. What is most shocking is that while there are plugins for styling pages, there are none that allows you to easily target a specific post based on the category.
This type of customization is very necessary if you happen to have a magazine where there are different sections styled with different colors. You may find options to style categories with colors, but you won’t find options to style specific posts based on its category.
For this tutorial, I wanted to convert my magazine into a multi-color section magazine. I wanted to have a different color for each post based on its category. Say we have a Playstation category, I wanted every post published in the Playstation category to look with a specific color, and the same thing for Hardware, Software, Xbox and PC categories. At the same time, I wanted to have each page for each section with specific colors. While I was using one of the most advanced themes for a magazine (Newspaper, by tagDiv, which comes with the tagDiv Composer page builder), this basic options are nowhere to be found. I had to hack my way in…
Styling pages can be easy or not, depending on your desire to add a new plugin into your list. The safe way to do it is by inserting code right into your custom page.
This is how you do it…
This is how a custom page looks when it’s created with the tagDiv Composer. Shocking as it is, you have no way to add custom code into the page and most Custom CSS fields in frameworks tend to not work when you need them. The same thing can be said for other frameworks. So, how do you do it?
You scroll right to the end of your page content and turn into HTML and then you add the tags <style> </style> just after the code. It doesn’t matter if the site is made with Divi, tagDiv or any other framework, adding code at the end of your page will always work providing you know how to tag the classes you need to tag to modify the current page. The good thing about this method is that it won´t affect the rest of the site, it would be for this page alone. The bad thing is that some frameworks do tend to remove additional code when you update the page. So, how do we fix this?
Introducing a nice plugin… !
Custom CSS – Whole Site and Per Post is very convenient for adding custom styles into each page, or even to a single post. It works by adding a new code box into your pages. The code you enter on this box won’t get erased if the framework updates the page, so it’s perfect for this endeavor.
On the same page we opened before you can now see the added Custom Post CSS box. The custom code entered will stay there after refresh with your favorite framework, and it’s easy to work with. With this simple plugin I was finally able to style the pages that will work as fronts for each section, like this:
This was fairly easy to do, right? But what happens when a reader clicks on a review for the Xbox section and gets dumped into the standard style? The plugin, as good as it is, won’t allow you to style a category, it will only style a specific post or page. Do you imagine yourself adding custom code for each post you want to style?… no way !
So, how do we target a category? For this we need to look deeper into how WordPress works.
Even in Spanish, you can guess we are in the Categories menu in WordPress. To tag a specific category, so all posts belonging to that category will look like we want them to look, we need to take a look at the Category ID from the URL.
Looking at the tag_ID you’ll see the number of the category you’re wanting to style, which is 29775 in this case.
The cardinal rule to style a category is to always start your css code with the category id class, like this:
.cat-29775-id .yourstyle
Replace 29775 with the id number of the category you want to style.
An easy way to style the Title Post, The Paragraph and the H1 and so on is like this:
.cat-29775-id h1.entry-title { }
.cat-29775-id p { }
.cat-29775-id h1 { }
Put whatever colors or style you want on those lines and save this code in your general style.css, preferable in your child theme.
The beauty of this technique is that you can add as many lines as you want, and style each category the way you want. This will make single posts attached to that category to show up with their custom styling!
In my case, adding lines for the main menu, the bottom line in the featured image and the titles on the sidebar was as easy as this:
.cat-19453-id .td-header-wrap .td-header-menu-wrap .sf-menu > li > a, .td-header-wrap .header-search-wrap .td-icon-search {
color: white !important;
}
.cat-19453-id.td-boxed-layout .td-header-style-3 .td-header-menu-wrap,
.cat-19453-id .td-header-style-3 .td-header-main-menucat-19453-id,
.cat-19453-id #td-header-menu,
.cat-19453-id a#td-header-search-button {
background-color: #479e1f !important;
}
.cat-19453-id .td-boxed-layout .td-header-style-3 .td-header-menu-wrap,
.cat-19453-id .td-boxed-layout .td-header-style-4 .td-header-menu-wrap,
.cat-19453-id .td-header-style-3 .td_stretch_content .td-header-menu-wrap,
.cat-19453-id .td-header-style-4 .td_stretch_content .td-header-menu-wrap {
background-color: #479e1f !important;
}
.cat-19453-id .td-full-screen-header-image-wrap {
border-bottom: 10px solid #479e1f;
}
.cat-19453-id h4.block-title { border-color: #479e1f; }
.cat-19453-id .block-title > span { background-color: #479e1f; }
As you can see, code can be very extensive and you may need to add the !important part for some styling to work, but what is predominant in all this is that I always used the .cat-number-id at the start of each sentence.
This is the result for each specific post type:
This way of targeting specific categories is not only fun, it’s super effective to drive different colors and presentations to your posts. This, combined with custom page styling, will allow you to create beautiful designs full of different styles. If you want to see how the code works in realtime you’re free to check my magazine blog here.
Creating custom style for categories is not something that WordPress allows you to do easily and you have to add code manually, but the good thing is that you now know how. I hope this tutorial will give you good ideas for your next project, you are no longer restricted by your general style. Have fun!
The post How to style pages and categories in WordPress appeared first on WordPress Theme Detector.
WordPress is super easy for the most essential task,s but there are some things that are still reserved for those that dare to find a way. Applying a style to a whole website is one thing but, what happens when you need to apply a specific style to a specific page or category? While WordPress will allow you to do that, it’s not easy nor user-friendly. What is most shocking is that while there are plugins for styling pages, there are none that allows you to easily target a specific post based on the category.
This type of customization is very necessary if you happen to have a magazine where there are different sections styled with different colors. You may find options to style categories with colors, but you won’t find options to style specific posts based on its category.
For this tutorial, I wanted to convert my magazine into a multi-color section magazine. I wanted to have a different color for each post based on its category. Say we have a Playstation category, I wanted every post published in the Playstation category to look with a specific color, and the same thing for Hardware, Software, Xbox and PC categories. At the same time, I wanted to have each page for each section with specific colors. While I was using one of the most advanced themes for a magazine (Newspaper, by tagDiv, which comes with the tagDiv Composer page builder), this basic options are nowhere to be found. I had to hack my way in…
How to style pages
Styling pages can be easy or not, depending on your desire to add a new plugin into your list. The safe way to do it is by inserting code right into your custom page.
This is how you do it…
This is how a custom page looks when it’s created with the tagDiv Composer. Shocking as it is, you have no way to add custom code into the page and most Custom CSS fields in frameworks tend to not work when you need them. The same thing can be said for other frameworks. So, how do you do it?
You scroll right to the end of your page content and turn into HTML and then you add the tags <style> </style> just after the code. It doesn’t matter if the site is made with Divi, tagDiv or any other framework, adding code at the end of your page will always work providing you know how to tag the classes you need to tag to modify the current page. The good thing about this method is that it won´t affect the rest of the site, it would be for this page alone. The bad thing is that some frameworks do tend to remove additional code when you update the page. So, how do we fix this?
Introducing a nice plugin… !
Custom CSS – Whole Site and Per Post is very convenient for adding custom styles into each page, or even to a single post. It works by adding a new code box into your pages. The code you enter on this box won’t get erased if the framework updates the page, so it’s perfect for this endeavor.
On the same page we opened before you can now see the added Custom Post CSS box. The custom code entered will stay there after refresh with your favorite framework, and it’s easy to work with. With this simple plugin I was finally able to style the pages that will work as fronts for each section, like this:
This was fairly easy to do, right? But what happens when a reader clicks on a review for the Xbox section and gets dumped into the standard style? The plugin, as good as it is, won’t allow you to style a category, it will only style a specific post or page. Do you imagine yourself adding custom code for each post you want to style?… no way !
So, how do we target a category? For this we need to look deeper into how WordPress works.
Even in Spanish, you can guess we are in the Categories menu in WordPress. To tag a specific category, so all posts belonging to that category will look like we want them to look, we need to take a look at the Category ID from the URL.
Looking at the tag_ID you’ll see the number of the category you’re wanting to style, which is 29775 in this case.
The cardinal rule to style a category is to always start your css code with the category id class, like this:
.cat-29775-id .yourstyle
Replace 29775 with the id number of the category you want to style.
An easy way to style the Title Post, The Paragraph and the H1 and so on is like this:
.cat-29775-id h1.entry-title { }
.cat-29775-id p { }
.cat-29775-id h1 { }
Put whatever colors or style you want on those lines and save this code in your general style.css, preferable in your child theme.
The beauty of this technique is that you can add as many lines as you want, and style each category the way you want. This will make single posts attached to that category to show up with their custom styling!
In my case, adding lines for the main menu, the bottom line in the featured image and the titles on the sidebar was as easy as this:
.cat-19453-id .td-header-wrap .td-header-menu-wrap .sf-menu > li > a, .td-header-wrap .header-search-wrap .td-icon-search {
color: white !important;
}
.cat-19453-id.td-boxed-layout .td-header-style-3 .td-header-menu-wrap,
.cat-19453-id .td-header-style-3 .td-header-main-menucat-19453-id,
.cat-19453-id #td-header-menu,
.cat-19453-id a#td-header-search-button {
background-color: #479e1f !important;
}
.cat-19453-id .td-boxed-layout .td-header-style-3 .td-header-menu-wrap,
.cat-19453-id .td-boxed-layout .td-header-style-4 .td-header-menu-wrap,
.cat-19453-id .td-header-style-3 .td_stretch_content .td-header-menu-wrap,
.cat-19453-id .td-header-style-4 .td_stretch_content .td-header-menu-wrap {
background-color: #479e1f !important;
}
.cat-19453-id .td-full-screen-header-image-wrap {
border-bottom: 10px solid #479e1f;
}
.cat-19453-id h4.block-title { border-color: #479e1f; }
.cat-19453-id .block-title > span { background-color: #479e1f; }
As you can see, code can be very extensive and you may need to add the !important part for some styling to work, but what is predominant in all this is that I always used the .cat-number-id at the start of each sentence.
This is the result for each specific post type:
This way of targeting specific categories is not only fun, it’s super effective to drive different colors and presentations to your posts. This, combined with custom page styling, will allow you to create beautiful designs full of different styles. If you want to see how the code works in realtime you’re free to check my magazine blog here.
Creating custom style for categories is not something that WordPress allows you to do easily and you have to add code manually, but the good thing is that you now know how. I hope this tutorial will give you good ideas for your next project, you are no longer restricted by your general style. Have fun!
The post How to style pages and categories in WordPress appeared first on WordPress Theme Detector.