Adding class or id to wp_nav_menu using php
-
Hello! I am working on a website where I have had to hack the wp_nav_menu a bit striping out all containers…
This is all beacause I am applying some jquery effects to the nav that do not like the extra containers.
What I need help with is adding a class to the link(a tag)of my wp_nav_menu. I’ve been trying to do it with the following php code in the function file, with no success, most likely due to my lack of experience in php:
// Filtering out some HTML and Code from the Nav function wp_nav_menu_remove_attributes( $menu ){ $patterns = array('/ id=\"(.*)\" class=\"(.*)\"/iU', '/<li>/iU'); return $menu = preg_replace($patterns, '', $menu ); } function add_menuclass($aclass) { return preg_replace('/<a>/', '<a id="nav" class="something-classy">', $aclass, 1); } add_filter( 'wp_nav_menu', 'wp_nav_menu_remove_attributes', 'add_menuclass' );
This is the HTML I have:
<a href="http://www.mywebsite.com/about/">About</a> <a href="http://www.mywebsites.com/products/">Products</a> <a href="http://www.mywebsite.com/gallery/">Gallery</a> <a href="http://www.mywebsite.com/contact/">Contact</a>
And this is the end result I am looking for…
<a id="nav" class="something-classy" href="http://www.mywebsite.com/about/">About</a> <a id="nav" class="something-classy" href="http://www.mywebsites.com/products/">Products</a> <a id="nav" class="something-classy" href="http://www.mywebsite.com/gallery/">Gallery</a> <a id="nav" class="something-classy" href="http://www.mywebsite.com/contact/">Contact</a>
Can someone more experienced pick out what I am doing wrong? Help would be so appreciated… I’ve spent hours trying to figure this out.
-
Anyone?
Well, to not make this forum useless, I thought I’d post solution I used to my problem. Using the preg_replace php function I successfully added a class to the link.
Add this to your functions.php file to add a class to your link navigation.
function add_nav_class($output) { $output= preg_replace('/<a/', '<a class="your-class"', $output, 1); return $output; } add_filter('wp_nav_menu', 'add_nav_class');
You can find more information on the preg_replace php function here.
Paesano,
I just stumbled on this and found it super useful! I had one question that maybe you could help me with. Is there a way to auto generate a # after each class name. Example:
<a class="nav1">link</a> <a class="nav2">link</a>
etc.
Wasn’t sure if you knew anyway to dynamically generate this with another PHP command on this tag in the functions.php file.
Or even a way to pull the page / post id on the anchor tag.
Anyone? Still not getting anywhere with this.
I’d like to find a solution to this as well. Currently this function only adds a class to the first nav element.
Hi,
The way you do it is by changing the number after $output to the number of times you want the function to happen (-1 for unlimited); so if you want the function to do it for every menu item it looks like this:
function add_nav_class($output) {
$output= preg_replace(‘/<a/’, ‘<a class=”your-class”‘, $output, -1);
return $output;
}
add_filter(‘wp_nav_menu’, ‘add_nav_class’);hi edmarno
your function to happen (-1 for unlimited) is really helped me thanks a lot…thanks once again
Ishak
- The topic ‘Adding class or id to wp_nav_menu using php’ is closed to new replies.