I have a footer navigation inside an unordered list.
How do I link these navigation links to the pages in my WordPress site? I have tried the following code but it doesn't work.
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
The best way is to use
Pagename
This way the link stays consistent, even if the slug changes - if you want to echo home_url() or get_permalink( get_option( 'page_for_posts' ) ) for other content
Related
I have an archive events page that links to a single page that lists all previous events created in the past and can only be visited via the archive events page.
My question is, how can I highlight the archive events page url link when viewing this single page?
For example the below snippet targets a hard-coded nav link to highlight the events link when viewing the other page, however my menu is not hard-coded:
<nav class="main-navigation">
<ul>
<li>...</li>
<li>...</li>
<li>
<?php if(get_post_type() == 'event' OR is_page('past-events')) echo 'class="current-menu-item"';?>>
events
</li>
<li>...</li>
</ul>
</nav>
The tutorial I am following does not give the alternative coded way of targeting this similarly in the functions.php page, for a dynamic menu that is created via the wordpress dashboard menu.
I have tried searching for examples, but I havent found anything that has helped so far and in need of some outside help.
How can I do this?
I can see something wrong. you haven't put the php code in right place. corrected code is this. try this and let me know if it works
<nav class="main-navigation">
<ul>
<li>...</li>
<li>...</li>
<li <?php if(get_post_type() == 'event') echo 'class="current-menu-item"';?>>
</li>
<li>...</li>
</ul>
</nav>
Ok, I think I have found a solution -- being a novice -- has worked!
Hopefully someone can point out any changes/improvements I could make, but here it is:
To highlight a menu link for a different page than the one that you are on/viewing, for example in my scenario: I have an archive events page and within that page I have a link that takes you to a single page that lists all past previous events, but that has no link in the main navigation to it.
function nav_class($classes) {
// Remove "current-menu-item" class
$classes = array_diff($classes, array('current-menu-item'));
// If this is the "past-events" page, highlight the event menu item
if (in_array('menu-item-36', $classes) && is_page('past-events')) {
$classes[] = "current-menu-item";
}
return $classes;
}
add_filter('nav_menu_css_class', 'nav_class', 10, 2);
I hope this helps someone else out.
I am trying to create a navigation menu for a custom Wordpress theme using the wp_nav_menu() function. However, an when I use the function and reload the webpage, an annoying <div> html element appears and uses the class I want to style my <ul> with. Has anyone came across this issue before and how can I fix this?
The structure at the moment is like this:
<div class="nav">
<ul>
<li>Menu Item</li>
</ul>
</div>
I would like it to look like this:
<ul class="nav">
<li>Menu Item</li>
</ul>
Many thanks
According to the docs for wp_nav_menu you can use wp_nav_menu(array('container' => false)) to disable the container.
Edit: You have also have to set the theme_location option so the fallback doesn't get triggered.
If you want to remove container div then, you need to mention theme location.
wp_nav_menu( array( 'theme_location' => 'secondary-menu','container' => 'none','menu'=>'Secondary') );
I'm new to WordPress, I just converted my HTML to WP Theme, but now I'm facing a problem, I couldn't get to work the linking of pages.
The structure of my theme:
index.php
header.php
sidebar.php
footer.php
services.php <- other page in the site
Here's the sample code from index.php:
<div id="menu">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Services</li>
<li>Free Quote</li>
<li>Customers</li>
<li>About Us</li>
<li>Contact us</li>
</ul>
</div>
But whenever I try to go to services, it's giving internal server error. I don't know why it's happening.
There are two ways in wordpress for linking Pages
For Content Based pages only:
You need to create a page from wp-admin(Admin panel) and can specify the slug of the page
E.g:
<li>Services</li>
^This is called Slug
This page will always run from page.php.
For HTML Changes Pages:
You need to create a page from wp-admin(Admin panel) and create a file containing
page-slug.php, here slug will change according to the name of page.E.g:
Services page will become page-services.php, in this you can insert your own html.
This will run from page-services rather than page.php
Choose as per your requirement.
Try using:
<a href="<?php echo bloginfo("template_url")?>/services.php">
I think in this case you are just not echoing out the value of that function. Also, however you might want this instead:
<a href="<?php echo home_url() ?>/services">
The template_url goes to your theme's folder, not to your website's homepage. I assume the latter is what you're really going for.
try <php echo site_url()."/sevices.php"; ?>
I am pretty new to wordpress and am having trouble creating the primary navigation for the site.
I am using wp-nav-menu to output my dynamic menu.
The code I would like to output is the following...
<ul class="mainNav">
<li>Home</li>
<li class="dropdown">
Treatments<span></span>
<ul>
<li>Body Treatments</li>
<li>Make Up</li>
<li>Skincare</li>
</ul>
</li>
<li>Latest News</li>
<li>Aftercare</li>
<li>Contact</li>
</ul>
The code I have used to get the menu above is this...
<?php wp_nav_menu(
array(
'menu' => 'Primary Navigation',
'items_wrap' => '<ul class="mainNav">%3$s</ul>'
)
); ?>
This gets me the main menu but I do not know how to get the <li> with the class of dropdown. I would also like to place a <span> inside one of the links, as you can see in my HTML code.
Any help would be greatly appreciated!
I have figured it out and will write it here in case anyone has the same problem.
In the wordpress admin, there is a link called screen options. Open this, and tick CSS classes, you can then add individual classes to menu items.
Good day.
I am trying to modify the navigation menu layout of a drupal theme. The problem is i'm not a coder, but can follow tutorials and understand bits and peaices.
What I have is a set of menus and sub menus. At the moment the sub menus expand below their parent menus. What I want is for the sub menus to expand but live below all the parent menus so it would look like the structure below.
How it currently looks
Navigation_Menu_One
Sub_Menu_One
Sub_Menu_Two
Sub_Menu_Three
Navigation_Menu_Two
Navigation_Menu_Three
What I want it to end up looking like:
Navigation_Menu_One
Navigation_Menu_Two
Navigation_Menu_Three
Sub_Menu_One
Sub_Menu_Two
Sub_Menu_Three
What I have figured out is that the menu system is built from the following class's
<ul class="menu">
<li class="first collapsed"></li>
<li class="first collapsed"></li>
<li class="collapsed"></li>
<li class="expanded active-trail"> (The expanded Menu)
<ul class="menu"></ul> (the sub menu I want to relocate)
</li>
<li class="collapsed"></li>
<li class="collapsed"></li>
<li class="collapsed"></li>
<li class="last collapsed"></li>
</ul>
So what I want to do is be able to add something to the page that would capture the
<ul class="menu"></ul>
that appears below the
<li class="expanded active-trail">
and relocate it to below the last class or another div.
I understand I will need to do this using PHP from one of the template files with in the theme. Would any one have any idea how I would go about doing this. The theme I am using is the Corolla theme if that helps at all, but I guess it would be the same for any theme.
Hi and welcome to StackOverflow.
It seems to me from your description that you should be able to achieve this without writing any code. Simply navigate to site building > menus > navigation and use the drag handles to move the sub menus so that they are underneath the desired menu item.