Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Creating dynamic submenu for category navigation (Wordpress) WordPress

  • SOLVED

I'm struggling with figuring this one out. I would like to show child categories in a nav menu based on the parent selected. Basically, I want to do this for categories:

http://www.darrenhoyt.com/2008/02/12/creating-two-tiered-conditional-navigation-in-wordpress/

Answers (4)

2011-07-21

Jerson Baguio answers:

Try this one
PHP CODE


<ul id="nav">
<?php wp_list_categories('title_li=&depth=1'); ?>
</ul>

<?php if($post->post_parent)
$children = wp_list_categories("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_categories("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>


CSS CODE

* {
margin:0;
padding:0
}

#nav {
background:#577da2;
border-bottom:1px solid #FFF;
height:32px;
}

#nav li {
margin-right:25px;
}

#nav li, #subnav li {
float:left;
list-style:none
}

#nav a, #nav a:visited {
color:#FFF;
text-decoration:none;
font-weight:bold
}

#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
{
background:#295887
}

#subnav {
background:#e6eef7;
border-top:2px solid #577da2;
border-bottom:2px solid #cad8e6;
height:28px;
}

#subnav li {
border-right:1px solid #295887;
padding:0 7px;
}

#subnav a, #subnav a:visited {
color:#295887;
text-decoration:none;
font-weight:bold
}

#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
text-decoration:underline
}



Sean Callahan comments:

This didn't work...it just shows every single category.


Jerson Baguio comments:

Try to replace the code in themes/thesis_182/lib/functions/nav_menu.php

i think its in line 56

with this one


if ($thesis_site->nav['categories']){
if($post->post_parent)
$children = wp_list_categories("title_li=&child_of=".$post->post_parent."&echo=0");
else
$children = wp_list_categories("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>



<?php echo $children; ?>


<?php
}

}


and replace the #nav to #menu from css i pasted above


Sean Callahan comments:

Is there a way to do it without hacking up the core?


Jerson Baguio comments:

I will try check what i can do without hacking the core


Jerson Baguio comments:

rename custom-sample folder to custom and the code below in your custom_functions.php found in /thesis_182/custom

<?php
/* By taking advantage of hooks, filters, and the Custom Loop API, you can make Thesis
* do ANYTHING you want. For more information, please see the following articles from
* the Thesis User’s Guide or visit the members-only Thesis Support Forums:
*
* Hooks: http://diythemes.com/thesis/rtfm/customizing-with-hooks/
* Filters: http://diythemes.com/thesis/rtfm/customizing-with-filters/
* Custom Loop API: http://diythemes.com/thesis/rtfm/custom-loop-api/

---:[ place your custom code below this line ]:---*/
remove_action('thesis_hook_before_header' ,'thesis_nav_menu');

function custom_nav_menu() {
global $thesis_site, $thesis_data, $wp_query; #wp
$current['id'] = (!is_archive()) ? $wp_query->queried_object_id : false; #wp
$home_text = $thesis_data->o_texturize(thesis_home_link_text(), true);
$home_nofollow = ($thesis_site->nav['home']['nofollow']) ? ' rel="nofollow"' : '';

if ($current['id'] && $wp_query->post->ancestors)
$current['ancestors'] = $wp_query->post->ancestors;

echo "<ul class=\"menu\">\n";
thesis_hook_first_nav_item(); #hook

if ($thesis_site->nav['home']['show'] || $_GET['template']) { #wp
if (is_front_page()) { #wp
$current_page = get_query_var('paged'); #wp
$is_current = ($current_page <= 1) ? ' current' : '';
}
else
$is_current = (is_home() && is_front_page()) ? ' current' : ''; #wp

echo "<li class=\"tab tab-home$is_current\"><a href=\"" . get_bloginfo('url') . "\"$home_nofollow>$home_text</a></li>\n"; #wp
}

if ($thesis_site->nav['pages']) {
foreach ($thesis_site->nav['pages'] as $id => $nav_page) {
if ($nav_page['show']) {
$nav_items[] = $id;
$page_data[$id] = get_page($id); #wp
$parents[$id] = ($page_data[$id]->post_parent != 0) ? $page_data[$id]->post_parent : 0;
}
}

if (is_array($nav_items)) {
foreach ($nav_items as $id) {
if (!$parents[$id])
$nav_array[] = thesis_nav_array($id, $nav_items, $current);
}
}

if (is_array($nav_array))
thesis_output_nav($nav_array, $page_data);
}

if ($thesis_site->nav['categories']){
if($post->post_parent)
$children = wp_list_categories("title_li=&child_of=".$post->post_parent."&echo=0");
else
$children = wp_list_categories("title_li=&child_of=".$post->ID."&echo=0");

if ($children) {
echo $children;
}

}
if ($thesis_site->nav['links']) {
$nav_links = get_bookmarks('category=' . $thesis_site->nav['links']); #wp

foreach ($nav_links as $nav_link) {
if ($nav_link->link_description)
$title = ' title="' . $nav_link->link_description . '"';
if ($nav_link->link_rel)
$rel = ' rel="' . $nav_link->link_rel . '"';
if ($nav_link->link_target)
$target = ' target="' . $nav_link->link_target . '"';

echo '<li><a href="' . $nav_link->link_url . '"' . $title . $rel . $target . '>' . $nav_link->link_name . "</a></li>\n";
}
}

if ($thesis_site->nav['feed']['show'] || $_GET['template']) { #wp
$feed_title = get_bloginfo('name') . ' RSS Feed'; #wp
$feed_nofollow = ($thesis_site->nav['feed']['nofollow']) ? ' rel="nofollow"' : '';

echo "<li class=\"rss\"><a href=\"" . thesis_feed_url() . "\" title=\"$feed_title\"$feed_nofollow>" . $thesis_data->o_texturize(thesis_feed_link_text(), true) . "</a></li>\n";
}

thesis_hook_last_nav_item(); #hook
echo "</ul>\n";
}
add_action('thesis_hook_before_header','custom_nav_menu');



Jerson Baguio comments:

Hi sean,
try the custom functions i created it should do the work.


Sean Callahan comments:

I put it in there and it still doesn't work...in fact none of the categories show up with that code. I was supposed to use the CSS from above, correct?


Jerson Baguio comments:

Yes but instead of #nav use #menu like below

* {

margin:0;

padding:0

}



#menu {

background:#577da2;

border-bottom:1px solid #FFF;

height:32px;

}



#menu li {

margin-right:25px;

}



#menu li, #subnav li {

float:left;

list-style:none

}



#menu a, #menu a:visited {

color:#FFF;

text-decoration:none;

font-weight:bold

}



#menu a:hover, #menu a:active,

li.current_page_parent a,

li.current_page_parent a:visited,

#menu li.current_page_item a,

#menu li.current_page_item a:visited

{

background:#295887

}



#subnav {

background:#e6eef7;

border-top:2px solid #577da2;

border-bottom:2px solid #cad8e6;

height:28px;

}



#subnav li {

border-right:1px solid #295887;

padding:0 7px;

}



#subnav a, #subnav a:visited {

color:#295887;

text-decoration:none;

font-weight:bold

}



#subnav a:hover, #subnav a:active,

#subnav li.current_page_item a,

#subnav li.current_page_item a:visited {

text-decoration:underline

}



Jerson Baguio comments:

Yes i tested it with WP 3.0+ i guess it was 3.2 the latest one i installed a new Installation just to test the thesis_182 theme.

One issue i saw on you side it must be the CSS file.

from #nav to #menu since the Div id of thesis_182 is menu not nav..

If you want a help to set it up to your server you can create me a test account
on that site and just delete the account when the menu is done.
This task may out of time now so you can contact me via pm or in my email @ iamjerson[at]gmail[dot]com

thanks

2011-07-21

dr_killpatient answers:

Hi Sean!

You can use this code

<ul id="nav">
<?php wp_list_categories('title_li=&depth=1&hide_empty=0'); ?>
</ul>

<?php
if ($cat) {
$parentCatList = get_category_parents( $cat, true, ",");
$parentCatListArray = split(",",$parentCatList);
$children = wp_list_categories("title_li=&hide_empty=0&echo=0&show_option_none=&child_of=".$cat);
if (!$children && $wp_query->queried_object->category_parent <> 0) { $children = wp_list_categories("title_li=&hide_empty=0&echo=0&show_option_none=&child_of=".$wp_query->queried_object->category_parent); }
?>
<?php if ($children) { ?>
<ul id="subnav">

<?php echo $children; ?>

</ul>
<?php }
}
?>




And replace all 'current_page_item' strings to 'current-cat' in css.

Cheers and have a good day


dr_killpatient comments:

Hi Sean,

Please use the same css and here is the code you're looking for

<ul id="nav">
<?php wp_list_categories('title_li=&depth=1&hide_empty=0'); ?>
</ul>
<?php
$parentCatList = get_category_parents( $cat, true, ",");
$parentCatListArray = split(",",$parentCatList);
$children = wp_list_categories("title_li=&hide_empty=0&echo=0&show_option_none=&child_of=".$cat);
if (!$children && $wp_query->queried_object->category_parent <> 0) { $children = wp_list_categories("title_li=&hide_empty=0&echo=0&show_option_none=&child_of=".$wp_query->queried_object->category_parent); }
?>
<?php if ($children) { ?>
<ul id="subnav">

<?php echo $children; ?>

</ul>
<?php } ?>


Sean Callahan comments:

Doesn't work. This was one of the ones I tried before...if it makes any different, I am using Thesis Theme 1.8.2


dr_killpatient comments:


dr_killpatient comments:

Hi Sean.

Please try the upper code.

Regards Roman

2011-07-22

Tycen Klemer answers:

I've done this before, you need to move the child nav to your page template then have a page template for each parent nav item.

check out [[LINK href="http://circletarena.net/index2.php/"]][[/LINK]] as an example of this


Sean Callahan comments:

I don't have page templates...it's Thesis Theme.

2011-07-23

Dudy wp answers:

hi, just use this code:

<ul id="subnav">
<?php
wp_list_categories('orderby=id&show_count=1&use_desc_for_title=0&child_of='.$category->cat_ID.'&hide_empty=0&depth=0&hierarchical=true&title_li='.$category->name.'');
?>
</ul>


Sean Callahan comments:

This does the same thing and just lists all categories...


Sean Callahan comments:

@Jerson

Have you tested this because I tried it and no dice. It still just lists all categories...is there possibly a change to category handling with WP 3.0+?