menus - Grey out nav buttons unless is_user_logged_in()

I'd like to show my users some features I offer if they register in a special nav bar. I've created this for a logged in version and a logged out version:

if ( is_user_logged_in() ) {
    $menu = wp_nav_menu( array(
        'theme_location' => 'logged-in-menu',
        'container'      => '0',
        'fallback_cb'    => 'wp_page_menu',
        'echo'           => '0',
    ) );
    echo $menu;
} else {
    $menu = wp_nav_menu( array(
        'theme_location' => 'main-menu',
        'container'      => '0',
        'fallback_cb'    => 'wp_page_menu',
        'echo'           => '0',
    ) );
    ?>
    <style>#menu-item-1046{opacity : 0.4; filter: alpha(opacity=40);}</style>
    <?php
    echo $menu;
}

I'm trying to grey out (disable but leave visible) nav buttons by ID. Obviously my CSS in there works but doesn't disable the button...

I tried <script>$('#menu-item-1046').button('disable');</script> But I've barely dabbled in jQuery as of now.

I'd like to show my users some features I offer if they register in a special nav bar. I've created this for a logged in version and a logged out version:

if ( is_user_logged_in() ) {
    $menu = wp_nav_menu( array(
        'theme_location' => 'logged-in-menu',
        'container'      => '0',
        'fallback_cb'    => 'wp_page_menu',
        'echo'           => '0',
    ) );
    echo $menu;
} else {
    $menu = wp_nav_menu( array(
        'theme_location' => 'main-menu',
        'container'      => '0',
        'fallback_cb'    => 'wp_page_menu',
        'echo'           => '0',
    ) );
    ?>
    <style>#menu-item-1046{opacity : 0.4; filter: alpha(opacity=40);}</style>
    <?php
    echo $menu;
}

I'm trying to grey out (disable but leave visible) nav buttons by ID. Obviously my CSS in there works but doesn't disable the button...

I tried <script>$('#menu-item-1046').button('disable');</script> But I've barely dabbled in jQuery as of now.

• menus
• css
• navigation

Share Improve this question edited Feb 5, 2019 at 2:19 phatskat 3,17411 gold badge1818 silver badges2626 bronze badges asked Mar 11, 2013 at 2:55 Ben RacicotBen Racicot 1,44633 gold badges1818 silver badges2727 bronze badges 6

• 1 Pure CSS or Javascript questions are off topic per the faq, and that seems to be what you are looking for. A pure CSS or Javascript solution would provide no real security anyway. Anyone wishing access could undo anything you can do with CSS or Javascript. Rather than "grey out" the links you need to actually remove them at the PHP level before the page prints. Also, since it would involve filters and walkers, that would not be off-topic. – s_ha_dum Commented Mar 11, 2013 at 4:17
• This have already been answered: stackoverflow/a/577558/1329669 – Frederick Andersen Commented Mar 11, 2013 at 7:36
• I don't understand why this one was close voted. Disabling shouldn't be done via CSS and there is a possible solution via wp_nav_menu(). – kaiser Commented Mar 11, 2013 at 13:18
• What is that solution @kaiser, I also didn't specify that it needed to be CSS or JS. Tried to show what I've attempted first, then ask the community. I just needed a solution, PHP preferred. Thanks! – Ben Racicot Commented Mar 11, 2013 at 13:26
• A custom walker for example. There're plenty of answers here filed under walker. Just search through and update your question. – kaiser Commented Mar 11, 2013 at 13:28

 |  Show 1 more comment

2 Answers 2

Sorted by: Reset to default 1

When you look at the possible arguments, then you'll see that there's as well the option to add a custom nav menu walker class.

$defaults = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
);
wp_nav_menu( $defaults );

The walker would be implemented like this:

$walker = new WPSE90265_Nav_Menu_Walker();

wp_nav_menu( array( 
    # ...
    'walker' => $walker
    # ...
) );

It should extend the default nav menu walker so you only need to overwrite those methods that you need to redefine:

class WPSE90265_Nav_Menu_Walker extends Walker_Nav_Menu
{
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        if ( ! is_user_logged_in() )
            $output = str_replace( 
                 'class="'
                ,'disabled class="'
                ,$output
            );

        parent::start_el( $output, $item, $depth, $args, $id );
    }
}

Note, that the disabled argument will only work for specific HTML elements/tags. Please do a search on which it works and alter your walker according to it. You could as well try to add an onClick="return false;" inside the walker if it's not possible to use such tags.

Because the menu item is not button so you can't use .button(disable); function, combine this code with your above css:

jQuery(document).ready(function() {    
     $('#menu-item-1046').click(function(){return false;});
});