I'm converting an html site to wordpress and am having an issue with the menus. I have created the separate menu locations with the php code in the templates
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
);
wp_nav_menu($args);
?>
</div>
<div class="footerNav">
<h3>Services</h3>
<?php
$args = array(
'theme-location' => 'footerServ',
);
wp_nav_menu($args);
?>
</div>
And the functions.php has this code
function register_my_menus() {
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footerServ' => __('Footer Services'),
'footerWork' => __('Footer Our Work'),
'footerLegal' => __('Footer Legal'),
'footerInc' => __('Footer Inc'),
));
}
add_action( 'init', 'register_my_menus' );
main menu config looks like this -
Main Menu Wordpress Config
footer menu config looks like this -
FooterMenu Wordpress Config
The resulting html looks like this for the main menu
<nav role="navigation" id="MainNav" class="group">
...
<div id="NavItems">
<div class="menu-footer-services-container">
<ul id="menu-footer-services" class="menu">
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95">
Mold Manufacturing
</li>
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96">
Injection Molding
</li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94">
Thermoforming
</li>
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93">
Plastic Fabrication
</li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91">
Custom Design
</li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92">
Assembly
</li>
</ul>
</div>
</div>
...
The footer menu has the same class and ul.
I have done everything I can think of, and am almost certain the configuration is correct inside of wordpress, and haven't found any issues with my code.
In summary, My main menu is being overwritten by the footer menu, despite having different locations set, and names. The wordpress dashboard has the correct configuration for what I want. However the result shows my main menu having the footer menu class and instead of 'home'... it shows 'mold manufacuring'....
I was following this video (in comments) to set up my navigation, and followed his actions exactly.
It's almost as if wordpress is only allowing me to show 1 menu, despite allowing me to configure several.
Thank you in advance for any help.
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
);
wp_nav_menu($args);
?>
</div>
Looks like the issues lies in the 'theme-location', seems to work if changed to 'theme_location' instead. However I will stay with my word-around because it would take more time to change it back for equal functionality.
If anyone is interested, the workaround looks like this
<div id="NavItems">
<ul>
<?php
$servMenu = wp_get_nav_menu_items('(wordpress number for your menu');
foreach ($servMenu as $item) {
$pages = get_pages();
$class = "";
foreach ($pages as $page) {
if ($page->post_title == $item->title) {
if (is_page($page->ID)) {
$class = "current-menu-item";
}
break;
}
} ?>
<li class="<?php echo $class; ?>">
<a href="<?php echo $item->url; ?>">
<?php echo $item->title; ?>
</a>
</li>
<?php }
?>
</ul>
</div>
Use menu_class in args like this it will take as ul class of menu.
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
'menu_class' => 'primary-class',
);
wp_nav_menu($args);
?>
</div>
<div class="footerNav">
<h3>Services</h3>
<?php
$args = array(
'theme-location' => 'footerServ',
'menu_class' => 'footer-class',
);
wp_nav_menu($args);
?>
</div>
Related
I am new in Wordpress so I hope I will be very explicit in the following description. Right now I`m trying to create something like https://getbootstrap.com/docs/5.1/components/navs-tabs/ but in Wordpress using bootstrap 5. In the tabs title I want to show the title of the post and in the tab content will be the_content().Thanks in advance !
The ul needs to be outside of the while loop so that you only have a single navigation component. Right now it is creating a separate navigation for every oracion. Try the following:
<div class="col-md-9">
<?php
$wpb_all_query = new WP_Query(array(
'post_type' => 'post',
'category_name' => 'orar',
'post_status' => 'publish',
)); ?>
<?php if ($wpb_all_query->have_posts()) : ?>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<?php while ($wpb_all_query->have_posts()) :
$wpb_all_query->the_post(); ?>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false"><?php $wpb_all_query->the_title(); ?></button>
</li>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"><?php $wpb_all_query->the_content(); ?></div>
</div>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php
else : ?>
<p><?php ('Sorry, no posts matched your criteria.'); ?></p>
<?php
endif; ?>
</div>
Here is my menu structure, how I build a mega menu walker, how I do this ?
<nav>
<ul class="main-nav navbar-right">
<li class="active dropdown">Home
<div class="sub-menu">
<ul class="home">
<li>Home</li>
<li><a class="last" href="index-2.html">Home2</a></li>
</ul>
</div>
</li>
<li class="dropdown">Pages
<div class="mega-menu pages">
<span class="mega-menu-list">
Blog1
Blog2
Blog3
</span>
<span class="mega-menu-list">
Single Blog 1
Single Blog 2
Single Blog 3
Single Blog 4
</span>
<span class="mega-menu-list">
404 Page
Contact Us
</span>
</div>
</li>
<li class="dropdown">Sport</li>
<li>Travel</li>
<li>Lifestyle</li>
<li>Tech</li>
<li><a href=">Contact Us</a></li>
</ul>
</nav>
You can put Your menu structure HTML in this code.
/* Drop Down Menu */
class ik_walker extends Walker_Nav_Menu{
function start_lvl(&$output, $depth) {
if($depth == 0){
$output .= 'HTML Start Here for Parent Menu
';
}
if($depth == 1){
$output .= '<ul class="sub-child"> Start Here for child Menu';
}
}
function end_lvl(&$output, $depth) {
if($depth == 0){
$output .= 'End For Parent Menu
';
}
if($depth == 1){
$output .= '</ul> End for child';
}
}
}
and Use this function in Menu Like this.
if ( has_nav_menu( 'primary' ) ) :
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'horizontal_links navigations',
'container' => '',
'depth' => 3,
'walker' => new ik_walker()
) );
endif;
I have a problem to set two ul in wp_nav_menu.
i have set like following code in html. i want to set in wp_nav_menu.
my code is.
<div class="collapse navbar-collapse menu-header-menu-container" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Athletes</li>
<li>Coach</li>
<li>Colleges</li>
<li>Contact Us</li>
</ul>
<ul class="user-action hidden-xs">
<li>Seach</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
So anyone can help me how to set two ul in wp_nav_menu.
First thing you need to do is register the 2 menus in the functions.php file.
function register_menus() {
register_nav_menus(
array(
'menu-1' => __('Primary Menu'),
'menu-2' => __('Secondary Menu')
)
);
}
add_action('init', 'register_menus');
Then in the WordPress dashboard under Appearance > Menus create the menus.
Be sure to set the theme locations to 'Primary Menu' and 'Secondary Menu'.
Place the following code where you want the menus to display (most likely header.php).
<?php wp_nav_menu(array('menu' => 'menu-1', 'container' => '<ul>', 'menu_class' => 'nav navbar-nav')); ?>
<?php wp_nav_menu(array('menu' => 'menu-2', 'container' => '<ul>', 'menu_class' => 'user-action hidden-xs')); ?>
If someone else has issues to fetch the right menu, you can try to exchange 'menu' to 'theme_location'.
<?php wp_nav_menu(array('theme_location' => 'menu-1', 'container' => '<ul>', 'menu_class' => 'marquee__inner')); ?>
I know this is going to be simple but I can't work it out.
I want to create a nav in the footer listing each page and it's child pages.
It will look something like this
<ul>
<li>Parent</li>
<li>Child One</li>
<li>Child Two</li>
<li>Child Three</li>
</ul>
I'm using this code to do it.
<div id="footerLinks">
<?php
$args = array(
'sort_column' => 'menu_order',
'parent' => 0,
);
$pages = get_pages($args);
foreach($pages as $page){
?>
<ul>
<li>
<?php echo $page->post_title;?>
</li>
<?php
wp_list_pages('title_li=&depth=1&child_of='.$page->ID.'');
?>
</ul>
<?php
}
?>
</div>
My problem is getting the permalink to the parent page.
<?php echo $page->post_title;?>
How do I get the permalink in this situation?
Maybe you can do something like this:
<? echo get_permalink($page->post_parent); ?>
I've been trying to do this all weekend, I'm going round in circles now.
I want to list all pages and their children in separate ul's
The page setup is like this
HOME ABOUT CONTACT
Who we are Where we are
What we do How to find us
How we do it
I want to output it like this
<ul>
<li>Home</li>
</ul>
<ul>
<li>About</li>
<li>Who we are</li>
<li>What we do</li>
<li>How we do it</li>
</ul>
<ul>
<li>Contact</li>
<li>Where we are</li>
<li>How to find us</li>
</ul>
This code below will give me the top pages in separate ul's
<?php
$args = array(
'sort_column' => 'menu_order',
'parent' => 0,
);
$pages = get_pages($args);
foreach($pages as $page){
?>
<ul>
<li>
<?php
echo $page->post_title;
?>
</li>
</ul>
<?php
}
?>
I'm now trying to add the child pages to the same ul
I'm thinking something like this but this gives me all the pages in each ul
<?php
$args = array(
'sort_column' => 'menu_order',
'parent' => 0,
);
$pages = get_pages($args);
foreach($pages as $page){
?>
<ul>
<li>
<?php
echo $page->post_title;
wp_list_pages('title_li=&depth=0&child_of'.$page->ID.'');
?>
</li>
</ul>
<?php
}
?>
Is there a way to say all children of this page.
Any help would be greatly appreciated.
wp_list_pages('title_li=&depth=0&child_of'.$page->ID.'');
you'r missing the "=" after "child_of"
wp_list_pages('title_li=&depth=0&child_of='.$page->ID.'');
The nicer way to do this is to create a custom walker, but this is more complicated
http://codex.wordpress.org/Function_Reference/Walker_Class