How can i change menu link when page content empty?

by

It’s hard to know if a link leads to an empty page without querying the database for each link in your menu first. That would certainly slow down your page loads.

You could try the following method though.

  1. Add some text to the link, like “(empty)”.
  2. Use Javascript/jQuery to look for parent links.
  3. Check if the parent link has the text “(empty)”.
  4. If it does, remove the text “(empty)” and set the href attribute to #

Here is my proof of concept: http://jsfiddle.net/epilektric/mBjF3/1/

The HTML:

<div class="nav-menu">
    <ul>
        <li class="page_item"><a href="http://www.example.com/page-1/">Page 1 (empty)</a>
            <ul>
                <li class="page_item"><a href="http://www.example.com/page-2/">Page 2</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

The jQuery:

jQuery(document).ready(function($){
    $('.nav-menu ul .page_item').each(function() {
        var link = $(this).children('a');
        var str = link.text();
        if (str.toLowerCase().indexOf("(empty)") >= 0) {
            var link_text = str.replace('(empty)','');
            link.attr('href','#').text(link_text);
        }
    });
});

Leave a Comment