I am currently going through Wordpress tutorials.
The pages that I have created here are all in Capatalized case (e.g. About us). During run-time I want them to automatically convert to upper-case (i.e. ABOUT US) instead of changing the page titles through the dashboard.
I am aware about the php's strtoupper() method however not sure where to apply this so that it dynamically changes the page titles to upper-case in the nav menu.
CODE in header.php:
<!-- Nav Menu -->
<nav class="site-nav clearfix">
<?php
$args = array(
'theme_location' => 'primary'
);
wp_nav_menu( $args ); enter code here
?>
</nav>
This code in the stylesheet should work:
nav.site-nav li {
text-transform: uppercase;
}
Related
I created custom menu into my Wordpress site. I registered the new menu into functions.php file using this code:
// Add new Footer menu
function register_my_menu() {
register_nav_menu('new-menu',__( 'New Footer Menu' ));
}
add_action( 'init', 'register_my_menu' );
and after that inserted this line into footer.php file from current theme:
<?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' =>
'new_menu_class' ) ); ?>
and menu is showing into footer, but its showing into list view, and I want to show vertically inline in footer, of course centered is possible. I used CSS to add inline styling like this:
.new_menu_class {
display:inline-flex;
}
But seems do not many any changes to menu in footer. Any help here?
You're applying styles to the container of the wp_nav_menu function where the structure of the returned html is
<div class="new_menu_class"> <ul> <li>...
'container_class'
(string) Class that is applied to the container. Default 'menu-{menu slug}->container'.
https://developer.wordpress.org/reference/functions/wp_nav_menu/
For your CSS to be applied on the list items (I'm assuming you wish to have the horizontally). you will need to add this class under the arguments for 'menu_class'
'menu_class'
(string) CSS class to use for the ul element which forms the menu. Default 'menu'.
If you applied the same class in your question to the menu_class you could apply the following:
.new_menu_class {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 80%;
margin: 0 auto;
padding: 0;
}
Looking at your site I can see you have a set width container with media queries, I would suggest the same when applying this so as your UI is clear when viewing on smaller devices.
The whole project can be found here Github.
I added a dynamic menu on my navigation bar placed in the header. For some reason I can't figure out how to link the dynamic menu with either a class or an ID defined in my style.css file.
For some reason, neither the 'menu_class' or the 'menu_id' seem to work.
Here the menu in the header.php file:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--Container of my link that are on the far right, they collapse with a small screen-->
<ul class="nav navbar-nav navbar-right">
<!--This code inject the dynamic menu inside thge av bar-->
<!-- The Dynamic menu is managed in the admin section of word press-->
<?php
wp_nav_menu(
array(
/*must have this link to function.php
*In function.php we defined this menu 'alphamenu'*/
'theme_location' => 'top-right-menu',
/*this line of code removes the default menu appearence*/
'container' => false,
/*this line makes the menu with the same layout specified above
*(same as link 1 and 2)*/
'items_wrap' => '%3$s',
/*CSS class applied to the menu*/
'menu_class' => 'nav navbar-nav custom-head-foot',
'menu_id' => 'custom-dynamic-menu'
)
);
?>
</ul> <!--dynamic menu unordered list-->
</div> <!--dynamic menu div-->
The function.php file:
/*Function to register a custom menu for the admin section
*This resurces was taken from the wordpress codex*/
function custom_theme_setup() {
/*Registered a custom primary navigation menu*/
register_nav_menus (
array( 'alphamenu', __( 'Primary Menu 123') )
);
/*Add theme support for title tag*/
add_theme_support( 'title-tag' );
}
/*Hooking in the function "custom_theme_setup()" after the theme is setup
*surce: wordpress plugin api hooks*/
add_action( 'after_setup_theme', 'custom_theme_setup');
If the render method is screwed up you can always use .nav > div with or without pseudo-class like :nth-of-type(1) or there's second way: .nav:nth-child(1) as query for first child inside div.nav?
If you want to add class, try to add it within wp_nav_menu() you wrote like this:
wp_nav_menu(
array(
/*must have this link to function.php
*In function.php we defined this menu 'alphamenu'*/
'theme_location' => 'top-right-menu',
/*this line of code removes the default menu appearence*/
'container' => false,
/*this line makes the menu with the same layout specified above
*(same as link 1 and 2)*/
'items_wrap' => '%3$s',
/*CSS class applied to the menu*/
'menu_class' => 'nav navbar-nav custom-head-foot **add_your_class_within_single_quotes**',
'menu_id' => 'custom-dynamic-menu'
)
);
or you can apply selectors I wrote in first answer to your CSS.
I am stuck and trying to figure out the Problem... in WordPress site
al-hussain
now the Problem is that,
i found a menu appearing on the home, i changed my menu..but when i clicked on pages just #
was the URL of All Pages but the page Contact-us has actual link, and the menu winch i created now appears in actual position..means when i goes to contact-us page and than my created menu is activated else,the default or static menu is appearing... even though i delete all my created menu but on loading site it shows menu...
default Menu is
and after clicking on contact us the menu is
here is header.php main_nav_menu
<!-- Begin main nav -->
<div id="nav_wrapper">
<div class="nav_wrapper_inner">
<div id="menu_border_wrapper">
<?php
if ( has_nav_menu( 'primary-menu' ) )
{
//Get page nav
wp_nav_menu(
array(
'menu_id' => 'main_menu',
'menu_class' => 'nav',
'theme_location' => 'primary-menu',
)
);
}
else
{
echo '<div class="notice">Please setup "Main Menu" using Wordpress Dashboard > Appearance > Menus</div>';
}
?>
</div>
</div>
</div>
any one can figure out ! please
Did you check your header.php file? I believe you have static menu there.
Here is the syntax to create a menu that you have created at the backend
<?php wp_nav_menu( array('menu' => 'main_menu', 'container' => '') ); ?>
Replace your static menu with the code above with the name changed in the 'menu' parameter
i sloved the Problem by Deleting the Cache, here i found directory
wp-content/cache/supercache/
thanks
Hi im a web dev an im trying to get word press to use a 2nd navigation for my blog section. i have the main site all set up but what i want is when i hit the blog in my top nav to show a differnt navigation for the blog section. i have tried using the following code in the header.php
<?php
if (is_single('blog')){
wp_nav_menu(array('menu'=>'secondary' ));
}
?>
but this code does not seem to work even though the theme supports 2 navigations.
<nav class="Seo-nav">
<div class="Seo-nav-inner">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'Seo-hmenu'
)
);
get_sidebar('nav');
?>
the above code is the code i use to call my navigation. is there any way to get a specific page or pages to show the one menu? any help on this would be great. never had to make certain pages have different navigation before so this is a new one on me.
Like was said in comments earlier, you'll need Conditional Tags. Probably for you specifically, the is_page() conditional.
<?php
if (is_page('blog')) {
// Echo this menu on the blog slug page
wp_nav_menu(array(
'theme_location' => '[name_of_menu]'
));
} else {
// Otherwise, echo this one
wp_nav_menu(array(
'theme_location' => '[name_of_main_menu]'
));
}
See the codex for the wp_nav_menu attributes. Can print out the menu other ways, that's just the one I recommend.
Depending how you blog is set up, is_page('blog') may need to be is_home(), 'blog' == get_post_type(), or some other variation.
I think you can go here two ways.
One is to only show children of current page on the second like
function show_different_nav(){
global $post;
$sec_nav=wp_list_pages("child_of=".$post->ID);
return $sec_nav;
}
now call show_different_nav() in your template.
The other way would be to write an own filter. I modified the http://wordpress.org/plugins/get-different-menus/ in this case.
add_filter( 'wp_nav_menu_items', 'get_different_custom_menu_item_according_to_page_slug', 10, 2 );
function get_different_custom_menu_item_according_to_page_slug ( $items, $args ) {
$current_id=(int)$GLOBALS['post']->ID;
$current_slug=$GLOBALS['post']->slug;
$the_nmo = wp_get_nav_menu_object($current_slug);
if ($the_nmo==""){}else{
$menu_id=$the_nmo->term_id;
$items_2 = wp_get_nav_menu_items($menu_id);
$items="";
if ($args->theme_location == 'secondary') {
foreach ($items_2 as $item){
$link_page_id = (int)($item->object_id);
if ($current_id == $link_page_id){$cur=" current-menu-item current_page_item";}else{$cur="";
}
$items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page'.$cur.'">'.$item->title.'</li>';
}
}
}
return $items;
}
In my opinion you need a menu for this called exactly the same as the page slug.
this is my code for navigation ----->
$main = array( 'theme_location' => 'header-menu' , 'link_before' => '<span>',
'link_after' => '</span>','container' => '',
'items_wrap' => '%3$s',
);
wp_nav_menu( $main );
i am applying span tag to style li items . what i actually want to do is that span tag should only be applied to main menu (depth = 1 in hierarchy ) and not to its sub menus(in drop down)
html ouptut is something like
<ul class=main>
<li><span>Testimonials</span></li> >
<li><span>Testimonials</span></li> >
<ul class ="sub=menu" >
<li><span>Testimonials</span></li> >
</ul>
<li><span>Testimonials</span></li> >
</ul>
i dont want span tag in sub-menu class li items, is there a way to do this .?
If you want to style the sub-menu differently, the identifier you should be using is .sub-menu but depending on the theme you are using, the author for the theme might have styled either the UL, LI, or A of the menu. Find that out from style.css and write your code for the same identifier.
eg. if style.css contains something like this
.menu li a { background: #fff; }
then you'll need to write this line:
.sub-menu { background: #888; }
It's also a good practice to use background if the theme's style used 'background', and 'background-color' if the theme's style used background-color.