How to style sub categories

[Tim Squires]

Hi, I am using Agency Pro.

I have a number of category pages set up.

Each page will also have a number of sub categories.

Is it possible to give the sub categories a different style than the parent categories?

Many thanks

---

timsquires.com.au

http://adventure.timsquires.com.au/bhutan

[Christoph]

Hi Tim,

yes, you can create custom templates for the sub categories.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tim Squires]

Hi Christoph,

Will that allow me to achieve the same effect as on the 411 Pro theme? On that theme the "comments" tags have their own unique style and appear in the top right corner of the posts as an orange block.

http://my.studiopress.com/themes/the-411/#demo-full

I need to do a similar thing, but have the name of my respective sub categories displaying in that area.

Will custom templates allow me to do this, and if so, can you recommend any good tutorials?

Many thanks 🙂

---

timsquires.com.au

[ethangreys]

i have search about custom teamplate but there is nothing useful out there. So could you give us some guidline about this issue? Christoph?

[Christoph]

Hi,

hmm... there is no cookie-cutter answer to this.
Basically creating a custom template means you are creating a new .php file that follows the WordPress naming conventions.

If you take a look at the WordPress Hierarchy
developer.wordpress.org/themes/basics/template-hierarchy/
wphierarchy.com/

you will see that you have two naming options for categories - category-$slug.php (category-bhutan.php) or category-$id.php (category-8.php).

For child categories, I'd recommend you create templates for the category-$id.php.

If you have many different child/sub- categories that you want to style the same way, you can take advantage of the WordPress hierarchy and use category.php as the fallback for the sub-categories and create a category-#.php for the parent category.

If you want to style all the sub-categories differently, than you would just create a bunch of category-#.php.

For more on the template hierarchy see this article from the WordPress Codex: developer.wordpress.org/themes/basics/template-hierarchy/

And here are two posts from the WordPress support forum regarding sub-category templates:
wordpress.org/support/topic/different-template-for-subcategory-any-conditions
wordpress.org/support/topic/categories-sub-categories-templates

For tutorials for creating page templates in Genesis, the first page of google search results reads like a who is who 😉
carriedils.com/custom-page-template-genesis/
designsbynickthegeek.com/tutorials/creating-page-templates-in-genesis
(Caveat: Not all of Nick's tutorials are updated for HTML5 / the new Pro themes. You might have to change hook names)
billerickson.net/full-width-landing-pages-in-genesis/
wpsites.net/web-design/how-to-create-a-custom-landing-page-template-for-genesis/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tim Squires]

Hi Christoph, thanks so much for your very detailed answer. That is all very valuable information, but I fear that I may not be explaining my problem correctly.

What I need to style is the sub category meta that appears after the post snippet on my category page.

I have noticed that other themes have certain types of meta displayed as styled labels. For example, the Education Pro theme has the date meta displayed and styled in the top right corner of the post snippet.

http://my.studiopress.com/themes/education/#demo-full

I need my subcategories to display like that on the post snippets of my category pages.

This link shows a mock-up of what I would like to achieve:

http://www.timsquires.com.au/images/bhutanlabel.jpg

At the moment the subcategory appears in the post meta at the bottom of the snippet (circled in red)

I need to display this meta at the top (see arrow) in a bold, clear label so that users can easily see the different styles of trips available, ie: cultural tours, trekking tours and adventure tours.

I hope that makes sense, it's very difficult to explain clearly 🙁

Thanks again for your help.

---

timsquires.com.au

[Tim Squires]

. . . a link to the development site, I have managed to get the meta out of the footer to below the header, but need to get the subcategory meta right to the top as a label:

http://adventure.timsquires.com.au/category/bhutan/

---

timsquires.com.au

[Christoph]

Hi Tim,

yes... that's a bit different from what I was talking about 😉

This css feels a bit hacky but follows education pro:

.entry-header .entry-meta {
        float: right;
	background-color: #e44a3c;
	color: #fff;
        display: inline-block;
	margin: -92px auto;
	padding: 7px;
	width: 100%;
}

The padding from .entry prevents .entry-meta from being "full width".

If you only want that on category pages you can put .category as first class.

You will have to adjust the code in the media queries.

If you want to remove the "filed under: " you can try this tutorial (just in case you didn't know about it 😉 ) :
http://www.basicwp.com/edit-filed-under-tagged-with-text-studiopress/ to remove the Filed under:

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tim Squires]

Thanks Christoph, my apologies for taking you off track in the beginning. That code works really well - I can't believe how many hours I've put into researching a solution to this problem, thanks so much.

Just one thing: is there a way to have only the text "Bhutan Cultural Tours" (the subcategory) showing? ie; hide the rest of the meta?

I tried the tutorial at basicwp and it worked, but only for the words "filed under" on the post - it still remained on the category page.

Many thanks again 🙂

---

timsquires.com.au

[Christoph]

Hi Tim,

no worries. 🙂

That´s interesting. You could contact Davinder and ask him about it.

If all else fails, and you don't want to show the filed under anywhere on your site, you can use the fact that Genesis is translatable, and that "Filed Under: " is a translatable string, to your advantage.
(I use this a lot to change Woocommerce button texts)

This will replace "Filed Under:" with an empty string.

add_filter('gettext', 'translate_text');
add_filter('ngettext', 'translate_text');

function translate_text($translated) {
$translated = str_ireplace('Filed Under:', '', $translated);
return $translated;
}

I took this code from here:
https://support.woothemes.com/hc/en-us/articles/203105817-Quickly-Translate-Or-Replace-WordPress-Localized-Site-Text

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tim Squires]

Thanks again, Christoph - that certainly looks worthwhile.

Another possibility that I am exploring is using the Advanced Custom Fields plugin, and maybe trying to add a specific content area to where I need it that I could customize appropriately. Do you think that's a good idea? I don't know much about it, but the articles and videos that I have watched have me interested in its potential.

---

timsquires.com.au

[Christoph]

Hi Tim,

hard to tell if you need ACF for that content area.
But ACF is a very powerful tool with great documentation.

It´s certainly good to get familiar with it.
The paid pro version has some great additional features.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tim Squires]

Thanks Christoph, I'll look into that. Thanks again for your help 🙂

---

timsquires.com.au

[Author]

Posts