We are building a theme on WordPress 3.5.1 and we created two custom menus - one for the header and one for the footer. In the footer the titles are not linkable, therefore we created custom links with href "#" and then changed the href to "". The result are empty links with <a>
. I know it's possible to change the cursor of these empty links with CSS:
.footer-content #sitemap ul.menu > li.menu-item > a {
cursor: text;
}
and I also found out a way to remove these empty links with JavaScript and jQuery:
$('.footer-content #sitemap ul.menu > li.menu-item > a').each(function() {
// If href is empty, remove <a> element.
var href = $(this).attr('href');
var href_length = 0;
if (!(typeof href === 'undefined')) {
var href_length = href.length;
}
if (href_length === 0) {
var contents = $(this).contents();
$(this).replaceWith(contents);
}
});
(the footer menu is inside the .footer-content #sitemap
elements:
<div class="footer-content">
<div id="sitemap" class="not_mobile">
)
but is it possible to remove the empty <a>
elements from the HTML without using JavaScript? The function that creates the footer menu is:
<?php wp_nav_menu( array( 'theme_location' => 'footer_menu' ) ); ?>
Thanks, Uri @ Initech.