Archived topic
Conditional secondary navigation in specific pages
10 replies · Started by Alvaro on September 27, 2017
Hi,
I have this local club website that I'm trying to port to GeneratePress. The current version is this: http://clac.pt/
It has a top menu, which I'm dropping, and a primary menu just below the logo. In the new version, the primary menu will be floating right, with the logo on the left.
When I go into one of the sports, it has a secondary menu, on top of the content area. This menu changes within different sports: http://clac.pt/seccoes/atletismo/
How can I achieve this in GPP with the minimum code, taking in consideration:
- I don't want this secondary menu to turn into mobile menu, it should be some kind of styled list in mobile;
- I'm assigning this conditional menu both to pages and posts, sharing the same category (I've enabled categories in pages).
Thanks.
Hi there,
- https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/
- Not sure what you mean?
Hi Leo,
Thank you for your reply.
I believe you're not sure about this:
When I go into one of the sports, it has a secondary menu, on top of the content area. This menu changes within different sports: http://clac.pt/seccoes/atletismo/
[…]
I’m assigning this conditional menu both to pages and posts, sharing the same category (I’ve enabled categories in pages).
I need to have a secondary menu on top of the content area of specific pages, not all the pages or archive pages. This secondary menu should be enabled through conditions, like page/post category.
So, if I have a page from the Sport1 category, I'll show the Sport1 menu on top of the content, etc.
My question is what is the best way to achieve this with GPP.
Thanks.
Hmm, tough one!
When you go into one of those sports, is it a category archive or a static page?
It can be both. The first sport page you get is an archive for that category posts. But the sports menu (secondary nav) should also be in static pages of that category, things like Schedules, Team rules, etc.
In the current site I have this template part with the submenu, with conditionals (not the most elegant but, hey, I'm no developer myself…):
<?php if (function_exists('has_nav_menu') && has_nav_menu('submenu')) { ?>
<div class="nav left nav_submenu">
<div class="wrapper">
<nav>
<div class="top-border-menu-for-responsive"></div>
<?php
if ( is_page() ) {
$nav_menu = array('title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => get_post_meta( $post->ID, 'my_meta_box_select', true));
wp_nav_menu($nav_menu);
} elseif ( in_category( 'tenis' )) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'tenis' );
wp_nav_menu($nav_menu);
} elseif ( in_category( 'atletismo' )) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'atletismo' );
wp_nav_menu($nav_menu);
} elseif ( in_category( 'trilhos' )) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'trilhos' );
wp_nav_menu($nav_menu);
} elseif ( in_category( 'ginastica' )) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'ginastica' );
wp_nav_menu($nav_menu);
} elseif ( in_category( 'natacao' )) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'natacao' );
wp_nav_menu($nav_menu);
} elseif ( in_category( 'orientacao' )) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'orientacao' );
wp_nav_menu($nav_menu);
} elseif ( in_category( 'pedestrianismo' )) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'pedestrianismo' );
wp_nav_menu($nav_menu);
} elseif ( in_category( 'outros' )) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'outros' );
wp_nav_menu($nav_menu);
} else {
// & c.
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'submenu' );
wp_nav_menu($nav_menu);
}
?>
</nav>
</div><!--/wrapper-->
</div><!--/nav-->
<?php } // if there is no navigation?>
So, the first one, if it's a page, looks for a custom field with a select for the right menu. I'm wondering if we can do this with a category, since we've extended it to pages? (I must have tried it in the past since the categories are there in the current site pages.)
The others just define the menu according to the category.
At worst, we could have the same approach but using GPP. How could this be achieved?
Thanks.
Álvaro
Sort of like Apple's navigation menu?
That actually looks like a good solution - what about it isn't working for you?
You could likely clean it up quite a bit:
<?php if (function_exists('has_nav_menu') && has_nav_menu('submenu')) { ?>
<div class="nav left nav_submenu">
<div class="wrapper">
<nav>
<div class="top-border-menu-for-responsive"></div>
<?php
if ( is_page() ) {
$nav_menu = array('title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => get_post_meta( $post->ID, 'my_meta_box_select', true));
wp_nav_menu($nav_menu);
} elseif ( is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
if ( $cat ) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => $cat->slug );
wp_nav_menu($nav_menu);
}
} else {
// & c.
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'submenu' );
wp_nav_menu($nav_menu);
}
?>
</nav>
</div><!--/wrapper-->
</div><!--/nav-->
<?php } // if there is no navigation?>
Nice. Now I only need to know how to put it in the right place ;)
I'm guessing this in my functions.php?
add_action( 'generate_inside_container','clac_category_submenu' );
function clac_category_submenu() { ?>
<?php if (function_exists('has_nav_menu') && has_nav_menu('submenu')) { ?>
<div class="nav left nav_submenu">
<div class="wrapper">
<nav>
<div class="top-border-menu-for-responsive"></div>
<?php
if ( is_page() ) {
$nav_menu = array('title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => get_post_meta( $post->ID, 'my_meta_box_select', true));
wp_nav_menu($nav_menu);
} elseif ( is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
if ( $cat ) {
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => $cat->slug );
wp_nav_menu($nav_menu);
}
} else {
// & c.
$nav_menu = array( 'title_li' => '', 'theme_location' => 'submenu', 'menu_class' => 'sf-menu', 'menu' => 'submenu' );
wp_nav_menu($nav_menu);
}
?>
</nav>
</div><!--/wrapper-->
</div><!--/nav-->
<?php } // if there is no navigation?>.
<?php }
If you are using a child theme then yes, if not try this: https://docs.generatepress.com/article/adding-php/#code-snippets
I'm using a child theme, I know better Leo… ;)
Thanks.
Let me know if it works or not :)