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.
Related
I am creating a wordpress menu as follows:
<?php wp_nav_menu(
array(
'theme_location' =>'main_nav',
'walker' => new Walker_Nav_Primary()
)
); ?>
It generates the menu with exact structured way as I expect. i.e:
<ul id="menu-primary" class="menu">
<li class="dropdown">
Mega
<ul class="dropdown-menu">
<li>sub 1</li>
<li>sub2</li>
</ul>
</li>
</ul>
But hover effect is stop working. When I replace wp_nav_menu() with the generated html it works again. I checked all the jquery code is set at footer.php and my menu is located at header.php and get_header() is called before get_footer(). So everything should be okay if static html is okay. Strange! which wrong is going on behind the scene.
I think, your menu has some issues with closing HTML tag. Better way to debug HTML issue is:
hold the menu HTML into a variable.
Print the variable inside htmlentities function.
Now you can visually see what's wrong with your printed HTML.
Hope that would help you to solve the issue. Thanks
You may need to add this into the array:
'echo' => true,
Such as
<?php wp_nav_menu(
array(
'theme_location' =>'main_nav',
'walker' => new Walker_Nav_Primary(),
'echo' => true
)
); ?>
The official document is shown here,
php
<nav class="site-nav">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'nav-menu'
) );
?>
</nav> <!-- .site-nav -->
How can i add some of element inside the menu like layout below
<ul class="nav-menu">
<li>link_1</li>
<li>link_1</li>
...
<div class="new-element"> <!-- new element -->
<span>something</span>
<span>more</span>
</div> <!-- new element end -->
</ul>
Thanks.
Is very easy (not need enter code in your theme files). You only need go to WordPress Admin site in: Appearance --> Menus ---> Select the Menu and Add the new elements of Posts, Categories, Pages, etc...
View Image:
Just do that in the Backend.
https://codex.wordpress.org/Function_Reference/wp_nav_menu states:
Displays a navigation menu created in the Appearance → Menus panel.
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
In a custom template file I'm inserting one of my custom menus:
<?php wp_nav_menu( array('menu' => 'Internal' ));?>
However the menu fails to generate the class current-menu-item for the current li item.
I am inserting a menu in the same way for menus in other pages without any issues.
What might cause Wordpress to fail output of the current-menu-item?
Cheers
Teodor
Try to use wp_reset_query() function.
<?php
wp_reset_query();
wp_nav_menu( array('menu' => 'Internal' ));
?>
Try to use the menu function
<?php wp_nav_menu( array('theme_location' => 'primary','menu' => 'Internal' ));?>
you will get the .current-menu-item in the li and you can make the effect accordingly
I'm over 2 hours trying many functions (wp_list_pages, get_pages, wp_nav_menu) and several functions but can't resolve this thing out.
I have created pages that are THREE level deep:
PAGE level1
SUBPAGE level2
SUBPAGE level3
and I need to display a separate menu for each of them like:
MENU1 (all top-level pages)
MENU2 (all sub-pages of CURRENT top level page)
MENU3 (all sub pages of current item from MENU2)
it should not be that complicated for a CMS like Wordpress but I think I'm over-complicating possible solutions.
Do you have some suggestions on possible ways to achieve that?
Thanks.
First of all you have to define accordance between menu items and pages. I can't define this accordance from your question. What if you have two level2 subpages and two menu2 items? Which menu item belongs to which subpage?
Then the process is trivial. You can get all menu items
$menu_items = wp_get_nav_menu_items($cur_menu, array());
And check menu_item_parent field to found parent items
foreach ($menu_items as $item) {
if ($item->menu_item_parent === $parent_id) {
//this is child of $parent_id
}
}
If you are using the the WordPress Function register_nav_menus() , it should be fairly simple.
In your functions.php file you'll need to register 3 separate menu's, something like this:
<?php
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array( 'first' => 'first', 'second' => 'second', 'third' => 'third', )
);
}
?>
With the menu's now registered you just need to place them where they go in your theme files like so:
The First Menu (maybe in the header.php file)
<div id="menu">
<?php wp_nav_menu( array( 'theme_location' => 'first' ) ); ?>
</div>
The Second Menu (maybe in the sidebar.php file)
<div id="menu">
<?php wp_nav_menu( array( 'theme_location' => 'second' ) ); ?>
</div>
The Third Menu (maybe in the footer.php file)
<div id="menu">
<?php wp_nav_menu( array( 'theme_location' => 'third' ) ); ?>
</div>
The final step is to go to Appearance>Menu's and create the 3 menu's, name them and choose the pages that will go with them from within the Admin Menu Settings.