how can i set different menus on different pages in wordpress? - wordpress

I am trying to setup diffrent menu for diffrent page like.
In Home Page I need to main menu link like this
<a href='#home'>Home</a>
<a href='http://example.com/product'>Product</a>
<a href='#services'>Services</a>
<a href='#conact'>Contact Us</a>
In product Page
<a href='http://example.com/#home'>Home</a>
<a href='http://example.com/product'>Product</a>
<a href='http://example.com/#services'>Services</a>
<a href='http://example.com/#conact'>Contact Us</a>
I am using one page theme so please help me for this logic development.
Thanks

It is impossible to answer this question without seeing more code, but in an abstract sense this can be achieved quite easily. As Yatendra pointed out, you need to register two menus as so in your functions.php file:
function register_my_menus() {
register_nav_menus(
array(
'home-menu' => __( 'Header Menu' ),
'product-menu' => __( 'Product Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
Then, you will want to embed something similar into your header.php where you navigation should like usding the is_page_template() and wp_nav_menu() functions.
<?php
if (is_page_template( 'products.php' )) // change this to the name of the file
{
// load the product-menu
wp_nav_menu( array( 'theme_location' => 'product-menu' ) );
}
else
{
// load the header-menu
wp_nav_menu( array( 'theme_location' => 'header-menu' ) );
}
?>
However, for a one-page theme, something like a parallax theme you are better not putting in a conditional and wrapping them in <div> tags and show and hiding them with jQuery. However, we would really need to see more code.
Codex References:
is_page_template()
Registering a Menu

Related

How to display custom links in WordPress with wp_nav_menu?

I'm creating an one-page custom theme. I'm struggling with a custom menu, because I want to display custom links.
I've registered menu in functions.php file
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
)
);
}
add_action( 'init', 'register_my_menus' );
Then, I've displayed in header.php file like this:
<?php wp_nav_menu( array(
'theme_location' => 'top-menu',
'container' => 'ul',
'menu_class'=> 'd-flex main-menu'
) );
?>
I've added custom classes for ul tag, and that is okay. Navigation works but just for pages. When I create a page, a link for that page shows up in navigation. However, after creating custom links they don't appear in navigation.
I'm searching the Stachoverflow for some quiet time, but without success. How to resolve a described issue? Do you have an idea?
Thank you for your time.
You have register header menu with header-menu key and trying to get it by key of top-menu which is not possible. You have to use the header-menu key to add and get a header menu. we have updated the code. you can use this code.
<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'container' => 'ul',
'menu_class'=> 'd-flex main-menu'
) );
?>

How to add styles to wordpress default menu

I just installed my theme to newly installed wordpress site. I didn't create any menu from appearence>menus, so by default wordpress showing "home" * "sample page" to the header as a default menu (I don't know the correct name, maybe callback menu?)
the problem is they are not getting any style from my stylesheet, I know if I create my custom menu, they ll get the styles from css. but I want this default wordpress menu to get the css as well. so the theme doesn't look odd when first install. how to do it?
The default styling of the WP menu looks like this:
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-2">
Sample Page
</li>
</ul>
</div>
</nav>
You should be able to style the elements of the menu on your page using the appropriate classes in your style.css file.
create a menu by name "primary" in apperance -> menus, and assign menus under it and u can refer
http://codex.wordpress.org/Function_Reference/wp_nav_menu
or else use this in header.php:
<?php wp_nav_menu( array( 'theme_location' => 'primary'))?>
First, creat new menu area in your theme.
For this, once (if you didn't set it) allow menus in your theme with this function:
add_theme_support( 'nav-menus' );
After this, add new menu your theme with this function:
register_nav_menu('primary', 'Our first menu');
And add your header.php lastly for print your custom menu:
if ( has_nav_menu( 'primary' ) ) { $menu = wp_nav_menu( array( 'container' => '', 'echo' => '0', 'theme_location' => 'primary' ) ); $menuOutput = preg_replace( array( '#^<ul[^>]*>#', '#</ul>$#' ), '', $menu ); echo $menuOutput; } else { }
This output is same as:
<li class="menu-item some-class">
<a>Sample page</a>
</li>
Use
And CSS it!
ul.your-class{}
ul.your-class li{list-style:square}
ul.your-class li a{ color:red }
Normally the default menu is called in the header.php with the function wp_nav_menu(). You can add CSS classes as arguments to wp_nav_menu(). If you are unaware of that the please refer to: http://codex.wordpress.org/Function_Reference/wp_nav_menu.

Wordpress custom theme - menu not showing when called in footer.php

I'm trying to create custom website theme for Wordpress and I ran into a bit of a problem. I use two absolutely same menus in my header and footer part of website.
Calling
wp_nav_menu(array('theme_location' => 'header'));
in header.php works well, the menu prints out without any problem, but if I do the same in my footer.php file, the menu doesn't print and var_dump(wp_nav_menu(array('theme_location' => 'header'))); prints false.
I've tried some workarounds that I found on Google with modifying the functions.php file, but none of them helped me resolve that problem. My functions.php file now consists of only one line
register_nav_menus( array( 'header' => 'Header menu', 'footer' => 'Footer menu' ) );
and yes, I tried to use
wp_nav_menu(array('theme_location' => 'footer'))
as well, with same result. If I call the same function from header.php
wp_nav_menu(array('theme_location' => 'footer'))
the menu works good.
You have registered you two nav menus correctly. I always do that within my initial theme setup hook that gets hooked to the after_setup_theme hook. So I would do something like this in your functions.php:
function pietergoosen_theme_setup() {
register_nav_menus( array(
'header' => 'Header menu',
'footer' => 'Footer menu'
) );
}
add_action( 'after_setup_theme', 'pietergoosen_theme_setup' );
Keep in mind, you don't have to do it this way. The following also works
register_nav_menus( array(
'header' => 'Header menu',
'footer' => 'Footer menu'
) );
You should now see the two menus in the backend under "Appearance > Menus > Manage Locations" (Only if a menu exist)
For the sake of the footer menu, add the following code in your footer where you need to display the menu:
<nav id="footer-navigation" class="site-navigation footer-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'footer', 'menu_class' => 'nav-menu', 'fallback_cb' => false ) ); ?>
</nav>
At this stage nothing will be displayed, and I think this is where you also get stuck at. The reason for this is that there aren't any items assigned to the menu, and if there are nothing assigned to a menu, then nothing will be displayed. So we have to insert something to be displayed.
In the backend, go to "Appearance > Menus > Edit Menus". In the "Menu Name" field, enter a name for your menu and click "Create Menu". You will now be able to add the menu in the menu screen.
You can now choose items from the left hand side to insert into your menu. You can also set the location of the menu, in this case in the footer. I've selected to display the categories in the footer. Click "Save Menu" when done.
You should now see your nav menu in the front end.
You just have to add styling to your nav bar now. You will do exactly the same for the header nav menu, accept you will add the call to the menu in the header.php. I hope you find this usefull.
So I’m producing my second WP theme and I’ve struck a problem. As well as the standard Nav menu at the top of my pages, the Footer element contains three individual sub-menus that can be loaded with individual entries. These are broken into three areas: Product Range, Industry Type and Services. The source code on footer.php is thus:
<div class="col-sm-3" style="float:left">
<h3>Product Range</h3>
<?php wp_nav_menu( array( 'footer' => 'product-range', 'container_class' => 'footer-menu' ) ); ?>
</div>
<div class="col-sm-3" style="float:left">
<h3>Industry Type</h3>
<?php wp_nav_menu( array( 'footer' => 'industry-type', 'container_class' => 'footer-menu' ) ); ?>
</div>
<div class="col-sm-3" style="float:left">
<h3>Services</h3>
<?php wp_nav_menu( array( 'footer' => 'services', 'container_class' => 'footer-menu' ) ); ?>
</div>
In functions.php I have included:
*Add footer Menus
*/
function register_my_menus() {
register_nav_menus(
array(
'product-range' => __( 'Product Range' ),
'industry-types' => __( 'Industry Types' ),
'services' => __( 'Services' )
)
);
}
add_action( 'init', 'register_my_menus' );
The output to all three menus is identical, and it is not what I want:
Product Range
COVID19 Policy
Latest and Greatest
About Us
Contact us1
Customer Service
Our Guarantee
Industry Type
COVID19 Policy
Latest and Greatest
About Us
Contact us1
Customer Service
Our Guarantee
Services
COVID19 Policy
Latest and Greatest
About Us
Contact us1
Customer Service
Our Guarantee
The top two items I added in the CMS, the remainder are automatically generated form somewhere else?
What gives?

Attach a specific menu to a specific page

In my Wordpress website:
I have two pages, one is in Deutsch and one is in English.
I have two menus, same deal.
I would like to display the english menu when browsing the page in English and display the deutsch menu when browsing the page in Deutsch.
I cannot use any multilingual pluging unfortunately.
Is there any way to achieve this with a basic wordpress installation?
Why can't you use a multi-language plugin?
Assuming you're right about the idea of not being able to use such a plugin, two solutions come to mind:
Use custom fields and conditional logic to display one menu or another
Use page templates to display different menus
You can override the layout of a page by creating a file called page-{slug}.php or page-{id}.php, in which {slug} and {id} should be substituted for the slug or id of the page you wish to make a template for. In this page template you could copy the original layout, but alter the wp_nav_menu command to select a different menu.
There are a few other ways to do it, but those two seem like sensible options to me.
Try this one:
Put this code in header.php while calling navigation menu:
<?php if (is_front_page()) { ?>
<div id='frontPageBanner'>
<?php wp_nav_menu( array( 'container_class' => 'menu-header-1', 'theme_location' => 'primary' ) ); ?>
</div>
<?php } elseif (is_archive()) { ?>
<div id='archiveBanner'>
<?php wp_nav_menu( array( 'container_class' => 'menu-header-2', 'theme_location' => 'primary' ) ); ?>
</div>
<?php } elseif ( is_page($pageID)) { ?>
<div id='pageIdBanner'>
<?php wp_nav_menu( array( 'container_class' => 'menu-header-1', 'theme_location' => 'primary' ) ); ?>
</div>
<?php } ?>
Thanks.

wp_nav_menu not working on category pages on wordpress

I created a couple of custom menus on wordpress using the appearance menu.
I want to display the right menu according to the page that I'm viewing. I wrote the script below in the header.php file in the seems to be working fine. It's pulling the correct menu according to the page that I'm visiting with the exception of the category pages.
When I'm on a category page, the wp_nav_menu function falls back to the fallback function, indicating that the menu doesn't exist?!
I was looking around and the solution that kept coming up was adding the following code but it doesnt seem to work.
<?php
wp_nav_menu('container_class=menu-header&theme_location=primary');
?>
Here is the full code that I added to the header.php file:
<?php
switch( $master_page ) {
case 'about':
wp_nav_menu(array(
'menu' => 'about',
'fallback_cb' => 'get_cat',
));
break;
case 'offer':
wp_nav_menu(array(
'menu' => 'offer',
'fallback_cb' => 'get_cat',
));
break;
}
?>
I'm really frustrated at this point. Any ideas?
I don't see where you are assigning a value to $master_page, so at this point it is just an empty variable.
You need to look into the is_page() and is_category() functions in WordPress and use if statements rather than a switch.
<?php
if( is_page( 'about' ) ) {
wp_nav_menu(array(
'menu' => 'about',
'fallback_cb' => 'get_cat',
));
} else {
...
}
?>

Resources