List subcategories in category bar of arthemia theme
In the WordPress theme Arthemia theme by Michael Jubel is a wide category bar displaying 5 categories and their description.
Users of this theme having sub-categories will normally not see them on this bar. I will show you how to get sub-categories displayed if there are in different styles.
Let’s talk about the free Arthemia Magazine Style WordPress Theme first:
The category bar is displayed by a call in index.php between the line 49:
div id=”cat-…
and the line 58:
/div
The line 56 (span class=”cat_title”) displays the main category title, we leave it untouched
In line 57 the category description is echoed: “echo category_description”
The code I give you now will check if the displayed category has children (subcategories) and if there are it will list all of them. If there are no sub-categories, it will display nothing.
The code to insert below or instead of the category description and before the following /div is here:
<?php $sub_categories = wp_list_categories("echo=0&show_count=1&title_li=&show_count=0&style=none&use_desc_for_title=0&child_of=$category"); if ($sub_categories != "No categories") { ?>
<?php wp_list_categories("show_count=1&title_li=&show_count=0&style=none&use_desc_for_title=0&child_of=$category"); ?>
<?php } ?>
This code will give you links to your subcategories for each category displayed in the category bar. There is a <br /> tag inserted between each link.
To get the subcategories inserted in a list style you could use this code instead, getting -ul-li-li-ul around links:
<?php $sub_categories = wp_list_categories("echo=0&show_count=1&title_li=&show_count=0&style=none&use_desc_for_title=0&child_of=$category"); if ($sub_categories != "No categories") { ?>
<ul class="subcats"><?php wp_list_categories("show_count=1&title_li=&show_count=0&use_desc_for_title=0&child_of=$category"); ?></ul>
<?php } ?>
Using the list-stylecode you can style the way how the ul class subcats get displayed.
You could add anywhere into your style.css the following:
ul.subcats {list-style: none;}
with this entry in style.css you get the list-bullets removed from the sub-category list.
Yes, there are also users having the Arthemia Premium theme, they have to look in header.php and use this code (Premium only!! in header.php below echo category_description($cp_pC) close to the end of that file)
<?php $sub_categories = wp_list_categories("echo=0&show_count=1&title_li=&show_count=0&style=none&use_desc_for_title=0&child_of=$cp_pC"); if ($sub_categories != "No categories") { ?>
<ul class="subcats"><?php wp_list_categories("show_count=1&title_li=&show_count=0&use_desc_for_title=0&child_of=$cp_pC"); ?></ul>
<?php } ?>
Style the ul class subcats to get the desired results…
Related posts:
- list pages custom styling in arthemia category bar
Some users of of arthemia theme would like to display... - List one latest post per category on frontpage view
I will give you here a code to list only... - Category view in Arthemia optimized
Question: Can you display headline & featured block to each... - Add Adsense between some Posts in WordPress
In WordPress on the frontpage you have normally a flow... - List some pages with content in WordPress
To list pages in WordPress you normally take this: <?php...
JW ist Freelance Webdeveloper
Website Questions? Please ask in Webdesign Forum
You can follow any responses to this entry through the
RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Thanks a lot Joern, I’ve got it working perfectly now. It almost looks like it’s part of the default theme.
Does this drop down? I am thinking that if it does not than having children display just under the main would throw off the appearance if other categories did not have children. Is there a way to display the categories normally (with description) and a mouse over would bring the sub menu over top of the category? Maybe you could post example images of what the above codes look like or something. Just a thought.
Jason, this will not drop down, just list subcategories (if there are) below the description (if there is)
Any dropdown is always a question of styling the ul li classes as in a dropdown in the header navbar.
Joe is using this piece of code, I actually made it because he asked in the forum about and I thought it’s a challange.
Click on the name Joe at first comment and you will see how it could look like
Oh, you styled Victoria (Posh Spice) Beckham on your site, now she looks great even if she “had three of her credit cards declined”
What was that piece of code? Because Joe’s website no longer exists and I would love to get the info on how to turn the subcategories into drop downs.
thanks!
this code will just list subcategories and they will not drop down like a menu.
to get a dropdown style you should try to do it in a way as sidebar dropdowns do this, select option is the key for this …
select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'
I’m sorry, where does this code go? And I know this code doesn’t do drop downs, but Joern commented that he had the code provided for someone else on their page.
Thanks!
Jacob, looking at your site I can see you put in the code already. It’s in the right place and lists your subcategories for your video games category. I guess you only have subcategories for just this cat.
I think Joe used exactly one of the codes given above and was happy with this. He didn’t get another version with ‘dropdown’.
You already have an ul li list, now it’s just the style and some JavaScript to get this hidden and unfold on hover, see: http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html
Sure, is some work, but nothing else than any menubar unfolding on hover with the mouse.
Thanks man, I got them to drop down, but My next question was how to extend the green box on the site to match the size of the box in categories. I guess the example is only that videogames displays a the subcategories in a box as large as the largest word which is playstation 3, but I would like the drop down area in green to be of equal size to the videogames ul.
Thanks for all your help man!
style the ul and li,
just as sample:
ul.subcats {
font-size:20px;
left:-999em;
list-style-image:none;
list-style-type:none;
margin:5px;
padding:5px;
position:absolute;
width:130px;
}
and
ul.subcats li {
can’t guess, margin? padding? width? height? – try something ..
}
yeah, I’ve been trying width padding and height, I guess I’ll try margin. Thanks man