I'm currently trying to figure out, how I can add a class to the wp_nav_menu links <a>. I can always found question and tutorials how I can change the <li> or <ul> class of the generator, but nothing about the link <a> classes.
This is my little piece of code:
<div class="navbar">
<ul>
<li><a class="add-class-here" href="#">Menu 1</a></li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
As you can see, I want to add a class to the <a> (link) element. How the hack can I do this?
Found my answer. Maybe I was a bit to fast asking a new one:
add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 3 );
function nav_menu_link_class( $atts, $item, $args ) {
$class = 'has-ripple';
$atts['class'] = $class;
return $atts;
}
So this is how I've added a ripple class to all of my link object. Looks cool now!
Related
I would appreciate if you help me, the problem is that I have a menu and it has a submenu, and this submenu has a class by default - sub-menu, how can I change this class to submenu and how can I add to my first li - tag -
HTML:
<ul class="cf">
<li class="sub-menu">managers<i class="fa fa-angle-down fa-1g" aria-hidden="true"></i>
<ul class="submenu">
<li>page one</li>
<li><a href="shareholder.html">page two/a></li>
</ul>
</li>
</ul>
PHP:
<?php wp_nav_menu(array('theme_location'=>'menu', 'container'=>'false', 'menu_class'=>'cf', 'depth' => 2)); ?>
I don't know exaclty what you are trying to do. But you can find the submenu output in the file "wp-includes\class-walker-nav-menu.php".
The menu is build dynamically on the sub-menu class. So i don't know if the menu generator is still working if you change this class. Maybe it is better to add an additional class.
Try this code :
$(document).ready(function () {
$('ul.cf').find(".sub-menu").addClass("submenu").removeClass("sub-menu");
});
May be this will work for wordpress. Write this in your theme function.php
function change_submenu_class($menu) {
$menu = preg_replace('/ class="sub-menu"/','/ class="submenu" /',$menu);
return $menu;
}
add_filter('wp_nav_menu','change_submenu_class');
I have a WordPress template I'm trying to build and I can't seem to figure out how to hook into the menu that WordPress outputs and add a custom attribute to that menu's <li> tags. The current menu outputs like this:
<ul id="menu-main-menu-1" class="top-bar-menu right">
<li class="divider"></li>
<li class="menu-item ">Home</li>
<li class="divider"></li>
<li class="menu-item">About</li>
<li class="divider"></li>
<li class="menu-item">My Work</li>
<li class="divider"></li>
<li class="menu-item">Contact</li>
</ul>
(Those links are just there for sample)
I need WordPress to automatically add the following attribute to the <li> tags: data-magellan-arrival="[target]".
[Target] needs to automatically be populated by the page_ID that the menu item corresponds to. So for example, let's say that first's <li>[PAGE]</li> link is Home and Home's page_ID is "21" (example). I would need data-magellan-arrival="[target]" inside of <li> to be set to data-magellan-arrival="21".
So it would look like: <li class="menu-item" data-magellan-arrival="21">[PAGE]</li>
I'll be honest with you, I'm not that great at PHP just yet and WordPress filters/hooks much less. Hoping someone can point me in the right direction or show me how to do it.
Thanks!
This should work:
//add to functions.php
add_filter('nav_menu_link_attributes', 'magellanlinkfilter');
function magellanlinkfilter($val)
{
$postid = url_to_postid( $val['href'] );
$val['data-magellan-arrival'] = $postid;
return $val;
}
Here's the complete list of hooks: http://adambrown.info/p/wp_hooks
I am trying to display something from my database on a bootstrap bar and I have no idea how to combine or implement the two. Ive made my bootstrap html's file a .php, was that the correct thing to do? Here's my code (ignore the filler words)
<ul class="nav nav-list well">
<li class="nav-header"></li>
<li class="active">HIT INFO</li>
<li>Linky link</li>
<li class="divider"></li>
<li>ANOTHER HIT INFO</li>
<li>ANOTHER LINKY LINK</li>
<li class="divider"></li>
<li>YET ANOTHER HIT</li>
<li>AAAAAnd another link</li>
</ul>
and this is the php i want to include (the code to making what i want to display is in the file)
<?php include 'one.php'; ?>
where "linky link" is, i want to display this but it didnt seem to work when i put that php right there. Another thing i want to do is when a link from the database gets displayed, it displays as a bootstrap button. i tried and am just not sure how to implement php code in my bootstrap code.
Print " <td>".$row['link'] . "</td></tr> ";
How would i add this bootstrap code to that so when a link from my database gets displayed, it gets displayed as this button
<i class="icon-heart icon-white"></i>Do this HIT!
Your code seems right to me except to your "<td> and <tr>" tag. You're not using it right.
Try this approach
In one.php
<?php
$links = array( 0 => array("url"=>"http://google.com","text"=>"Google") );
?>
In Menu
<?php include('one.php')?>
<ul>
<li>Menu one</li>
<?php foreach( $links as $link){ ?>
<li><a href="<?php print $link['url']?>"><?php print $link['text']?></li>
<?php } ?>
</ul>
I seem to run into this problem frequently and can never find a solution. I have a Wordpress site with a top navigation. Since this is in my header.php, and used on all pages, I cannot hardcode my active menu state for each page.
How can I dynamically set the activate state to work for each page?
Here is my current nav code:
<nav id="main-menu" class="padbot">
<ul id="ce">
<li class="cemenu">About</li>
<li class="cemenu">Consulting</li>
<li class="cemenu">Intelligence</li>
<li class="cemenu">Academy</li>
<li class="cemenu">Blog</li>
<li class="cemenu">Contact</li>
</ul>
I've already setup a CSS class called "active" that has my active state properties. Ideally, what I'm looking for is when your on the "About" page (or any of the other pages), the class I created for the active state will be appended to the current li classes's.
Example:
<li class="cemenu active">About</li>
Thanks!
you could try something along the lines of
<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>">About</li>
You can do this way:
This will add the active class to the <a> which contains the page from the url.
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('.cemenu a[href*="'+page+'"]').addClass('active');
});
and if you want to add class to its parent li the replace the last line to this and css class should be like this:
.active a{
css
properties
for active li's a
}
// using closest
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active');
or
// using parent
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active');
just tryout the fiddle here
First, there is a css pseudo class prepared for styling 'active' links :
a:active {css}
For your situation, you would have to add this class to your styling :
.active a, a:active {css}
But your needs seems more on the PHP side than the CSS, perhaps someone else will help you with that part. There would be a javascript solution with jQuery, finding the actual location then inject a css selector to the proper element.
Check this article and this other one about wordpress. It will help you.
Stack Overflow references :
How do I target each menu different items on active state in Wordpress
How to add Active states and icons in wordpress wp_nav_menu()
Loosing Nav Active State in Wordpress Dynamic Menu
google search
try something like this:
<?php $pages = array('about' => 'About Us', 'blog' => 'blog') ?>
<ul>
<?php foreach($pages as $url => $page): ?>
<?php $isActive = $_SERVER["REQUEST_URI"] == $url ?>
<li<?php echo $isActive ? ' class="active"' : '' ?>>
<?php echo $page ?>
</li>
<?php endforeach ?>
</ul>
It may be worth looking into using wordpres functions such as get_page_link which would be nicer than using the Server super global as that's not nice. This would also fail if you have wordpress in a folder and not the document root, it's just a simple example to get you started :)
You can try like this
<li class="<?php
if($this_page=='Home'){
echo 'active';
}
?>">
Home
</li>
<li class="<?php
if($this_page=='Contact'){
echo 'active';
}
?>">
Contact
</li>
And then in your home page
$this_page='Home';
And in your contact page
$this_page='Contact';
You could use preg_replace() to add class="active" like this:
ob_start();
echo '<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>';
$output = ob_get_clean();
$pattern = '~<li><a href="'.$url.'">~';
$replacement = '<li class="active"><a href="'.$url.'">';
echo preg_replace($pattern, $replacement, $output);
I'm having a hard time trying to figure out the dynamic sidebar without hacking the php file. I'm rebuilding an old web site and I need to use custom HTML code instead of the generate code that's given in wp-includes/nav-menu-template.php.
In a nutshell, I need to go from:
<div>
<ul>
<li>LINK NAME</li>
<li>LINK NAME</li>
<li>LINK NAME</li>
<li>LINK NAME</li>
</ul>
</div>
To this code:
<div>
LINK NAME
LINK NAME
LINK NAME
LINK NAME
</div>
For what you want you can create custom menu in admin as you did. Than in page where you want this paste this code:
<div>
<?php
$items = wp_get_nav_menu_items("custommenu");
foreach($items as $item):
?>
<?php echo $item->title; ?>
<?php endforeach; ?>
</div>
Replace custommenu with your menu name.