wordpress primary and secondary navigation - wordpress

Question

The below is my landing page "Products". it will display 2 columns, in the left is the secondary navigation and the right is the content. i want that if someone click in the primary navigation "Products". In second navigation the first item will in bold and will display the content.
<?php
/*
Template Name: Product Navigation Page
*/
?>
<?php get_header(); ?>
<div class="container page-border-top">
<div id="product-navigation" class="col-md-3" style="border: 1px solid green;">
<div id="navbar" class="navbar-collapse collapse">
<?php
$args2 = array(
'menu' => 'product-menu',
'menu_class' => 'nav navbar-nav',
'theme_location' => 'product-menu',
'container' => 'false'
);
wp_nav_menu( $args2 );
?>
</div><!--/.navbar-collapse -->
</div>
<div class="col-md-9" style="border: 1px solid red;">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
</div>
<?php get_footer(); ?>

Answer 1

If your landing page "Products" has no parent, and if all products child pages of "Products", then you can use this template file for the landing page and for all child pages (products):
<?php
/*
Template Name: Product Navigation Page
*/
$redirect = false;
$parent_id = wp_get_post_parent_id( $post->ID );
if ( ! $parent_id ) {
$redirect = true;
$parent_id = $post->ID;
}
// get all child's
$all_wp_pages = $wp_query->query(array(
'post_type' => 'page',
'order' => 'ASC',
'orderby' => 'menu_order',
'post_status' => 'publish'
));
$childs = get_page_children( $parent_id, $all_wp_pages );
if ( $redirect ) {
wp_redirect( get_permalink( $childs[0]->ID ) );
exit;
}
$current_page_id = $post->ID;
?>
<?php get_header(); ?>
<div class="container page-border-top">
<div id="product-navigation" class="col-md-3" style="border: 1px solid green;">
<div id="navbar" class="navbar-collapse collapse">
<ul class="menu">
<?php foreach ( $childs as $child ): ?>
<li class="<?php if ( $current_page_id == $child->ID ): ?>current-menu-item<?php endif; ?>"><?php echo $child->post_name; ?></li>
<?php endforeach; ?>
</ul>
</div><!--/.navbar-collapse -->
</div>
<div class="col-md-9" style="border: 1px solid red;">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
</div>
<?php get_footer(); ?>
You dont't have to create a menu for the products, it just list all child pages, and you can sort the products by the Order field (Page Attributes).
Step by Step:
Create a page "Products" and select the template file above for it (Product Navigation Page)
Create some product pages as childs of "Products" and select also the template file above for it (Product Navigation Page).
The template file will automaticly create the desired secondary navigation on the left side. The current product has a css class current-menu-item, so you can style it in bold.
This part generates the second nav:
<ul class="menu">
<?php foreach ( $childs as $child ): ?>
<li class="<?php if ( $current_page_id == $child->ID ): ?>current-menu-item<?php endif; ?>"><?php echo $child->post_name; ?></li>
<?php endforeach; ?>
</ul>