WordPress.org

Ready to get started?Download WordPress

Forums

Remove the div and ul tags from wp_nav_menu() function (28 posts)

  1. Scolpy
    Member
    Posted 3 years ago #

    Hello!

    I've tried to delete the div and ul tags from the function wp_nav_menu() by defining the parameter container as none but the div anf ul tags still showing.

    This is the whole code of my wp_nav_menu() function and parameters:

    wp_nav_menu(
    array(
    'menu_class' => 'Navigation',
    'container' => 'none',
    'container_class' => 'menu-header',
    'theme_location' => 'primary'
    ));

    How can I resolve that issue?

    Thanks!

  2. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    'container' => 'none' will not work, you can use:

    <?php wp_nav_menu( array(
        'container' => ''
    )); ?>

    this will remove the container.

    Emil

  3. Scolpy
    Member
    Posted 3 years ago #

    Nope!

    It's still wrapping the Navigation(even if I use just in your code without any other parameter).

  4. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    To remove <ul></ul> you can add this in your functions.php file.

    // Removes ul class from wp_nav_menu
    function remove_ul ( $menu ){
        return preg_replace( array( '#^<ul[^>]*>#', '#</ul>$#' ), '', $menu );
    }
    add_filter( 'wp_nav_menu', 'remove_ul' );

    And just so that I understand correctly 'container' => '' was working right?

  5. Scolpy
    Member
    Posted 3 years ago #

    No, it's not removing the <ul></ul> tags.

    And no, the 'container' => '' wasn't working at all.

    Note that I'm using on theme based on TwentyTen in WordPress 3.0.4 - if that is matter.

  6. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    <?php wp_nav_menu( array( 'container_class' => false, 'theme_location' => 'primary' ) ); ?>

    Before we did 'container' => '', this time let's make this 'container_class' => false this is changed code directly from TwentyTen.

    Cheers,
    Emil

  7. Scolpy
    Member
    Posted 3 years ago #

    Doesn't working too...

    Did you check this codes on WordPress demo?

  8. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

  9. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    TwentyTen functions.php http://wordpress.pastebin.com/E7BrTA9U

    Take a look what I added in functions.php: from line 100 to 106

  10. Scolpy
    Member
    Posted 3 years ago #

    It's also doesn't working...

    And I know that it should be work by WordPress Codex, but as I see it - it don't.

    Did you tried your codes?
    Because I've checked this codes on 2 WordPress websites(on different servers) and I've got the same results.

  11. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    I can show you how I got this working on another theme while back. Both codes functions.php and header.php are located here. There are just codes, not the actual files, but you'll get what you need.

    http://wordpress.pastebin.com/sYeiZZ2G

  12. Scolpy
    Member
    Posted 3 years ago #

    It's like the theme doesn't recognize the registered menu in your condition:

    <?php if ( has_nav_menu( 'primary-menu', 'mytheme' ) ) { ?>
    	<?php wp_nav_menu( array( 'container' => false, 'menu_class' => 'menu', 'theme_location' => 'primary-menu', 'fallback_cb' => 'display_home' ) ); ?>
    
    	<?php } else { ?>
    
        <ul class="menu">
    
    	<li><a href="<?php echo home_url(); ?>/">Home</a></li>
    	<?php wp_list_pages('title_li=' ); ?>
    
        </ul><!-- end .menu -->
    
    	<?php	} ?>

    It's displayed the menu with wp_list_pages function like I don't have any registered menu.
    (I've deleted all <li>function.php
    content and put just yours to avoid conflict so there is no way that other code can make some crossing with this thing).

  13. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    Go to http://wordpress.pastebin.com and paste your current functions.php and as well as separate paste from your header.php. So whatever you have in your theme, without any of codes I previously gave you.

    In above http://wordpress.pastebin.com/sYeiZZ2G you have the codes for functions.php and also the code for your header.php. Unless there is something else going on, my codes do work for sure. Let me give you live example: http://fireflyblog.org is using what I sent you and there are no problems at all. If you take all out the TwentyTen will not even function properly, as the rest of the codes are much needed for the theme to operate :)

    BTW what's the URL to this?

  14. Scolpy
    Member
    Posted 3 years ago #

    I see now that I didn't wrote my last post right.

    I've put only your code and still it's doesn't work!(I've deleted all functions.php and header.php
    content and I pasted yours).

    your website is working with the other function;

    <ul class="menu">
    
    <li><a href="<?php echo home_url(); ?>/">Home</a></li>
    <?php wp_list_pages('title_li=' ); ?>
    
    </ul><!-- end .menu -->

    And I want to use in wp_nav_menu() and not in wp_list_pages() function.

  15. esmi
    Forum Moderator
    Posted 3 years ago #

    In the absence of a custom menu and a custom callback, wp_nav_menu falls back to wp_page_menu - not wp_list_pages. In your case, it depends upon your display_pages() callback function.

  16. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    All right so if you have support for custom menus and if you don't want to use container:

    <?php $defaults = array(
      'theme_location'  => ,
      'menu'            => ,
      'container'       => '',
      'container_class' => false,
      'container_id'    => ,
      'menu_class'      => 'menu',
      'menu_id'         => ,
      'echo'            => true,
      'fallback_cb'     => 'wp_page_menu',
      'before'          => ,
      'after'           => ,
      'link_before'     => ,
      'link_after'      => ,
      'depth'           => 0,
      'walker'          => );
    ?>

    To remove container_class use (false - as shown above)
    To remove container use ('' - and container is out)

    All this is working if theme supports custom menu and/or there are no other conflicts or issues.

    Refer to: http://codex.wordpress.org/Function_Reference/wp_nav_menu#Default_Usage

  17. zhannes
    Member
    Posted 3 years ago #

    @Scopy, I was having similar issue. WP's default container and classes were being added to my custom menu.

    Everything works now after assigning my menu to the defined location, which I am specifying in my call to wp_nav_menu(). With no menu assigned to the location I was searching for, the default fallback_cb was adding the container.

    @Emil, thanks for the code to remove the <ul> tags.

  18. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    @zhannes glad to hear that you found the code useful :)

  19. Scolpy
    Member
    Posted 3 years ago #

    @zhannes

    I've tried this but it isn't works for me.

    Can you post your code so I will able to see how it's looks like?

  20. willshouse
    Member
    Posted 3 years ago #

    Actually the container is not really the <ul>, it is the <div> that wraps the <ul>. So if you set the container to false or '' you are just getting rid of the <div> but not the <ul>.

    Emil is on the right track, but I had trouble getting the add_filter( 'wp_nav_menu', 'remove_ul' ) to actually work.

    So, I think this code will actually work for you:

    $options = array(
      'echo' => false
     ,'container' => false
    );
    
    $menu = wp_nav_menu($options);
    echo preg_replace( array( '#^<ul[^>]*>#', '#</ul>$#' ), '', $menu );

    I put a more detailed explanation on my blog: How to Remove ul from wp_nav_menu

  21. @mercime
    Volunteer Moderator
    Posted 3 years ago #

    @Emil and @willshouse Thank you. Tested both of your solutions to remove <ul> and </ul> from wp_nav_menu and both worked. Thanks to @Scolpy for starting this topic :-)

    I wanted to update a theme currently used in a live installation to implement wp_nav_menu but fall back to wp_list_pages and use existing styling I had in my theme's style.css for elements within <div id="navbar"> and <ul id="nav">

    To summarize one solution where I can easily spot what needs to be changed later on:

    In functions.php

    // register wp_nav_menu
    add_action( 'init', 'register_my_menus' );
    function register_my_menus() {
    	register_nav_menus( array(
    	'primary-menu' => __( 'Primary Menu', 'mytheme' )
    	)
    	);
    }
    
    // remove ul wp_nav_menu
    function remove_ul ( $menu ){
        return preg_replace( array( '#^<ul[^>]*>#', '#</ul>$#' ), '', $menu );
    }
    add_filter( 'wp_nav_menu', 'remove_ul' );

    In header.php

    <div id="navbar">
    	<ul id="nav">
    	<?php if ( has_nav_menu( 'primary-menu', 'mytheme' ) ) { ?>
    		<?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'primary-menu', 'fallback_cb' => 'display_home' ) ); ?>
    	<?php } else { ?>
     		<li><a href="<?php echo get_option('home'); ?>">Home</a></li>
    		<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
    	<?php	} ?>
    	</ul>
    </div>

    Found in trac - Add ability to remove ul tag from wp_nav_menu result

    Another way using second - http://wordpress.stackexchange.com/questions/7968/how-do-i-remove-ul-on-wp-nav-menu

    Cheers.

  22. Peter
    Member
    Posted 3 years ago #

    All good stuff..
    However if like myself you would like to strip both UL and LI tags and only affect one of your menus in this case my Secondry Menu located n the footer you want something like this:

    <?php $foot_nav = wp_nav_menu( array( 'container' => '', 'echo' => '0', 'theme_location' => 'secondary-menu' ) );
    	 $foot_nav2 = preg_replace( array( '#^<ul[^>]*>#', '#</ul>$#' ), '', $foot_nav );
    	 $foot_nav2 = preg_replace( array( '#<li[^>]*>#', '#</li>$#' ), '', $foot_nav2 );
    	 echo $foot_nav2;
    	  ?>

    Just paste it where you want it to appear in your theme.
    N.B:
    You will need to amend the 'theme_location' => 'secondary-menu'
    to match the menu you are using.

    Enjoy!

  23. grubbs
    Member
    Posted 3 years ago #

    I had problems when trying to remove the div container.
    I checked my menu config in the admin Appearence -> Menu and see it was not set correctly... so please forget the code 5 minutes and double-check this. ;-)

    Cheers!

  24. Zambrano Sergio
    Member
    Posted 3 years ago #

    [SOLVED]

    CONTAINER => FALSE FAILS if you are specifying a location is not found,
    e.g. when you copy the code from somewhere else and you haven't specified a menu or location yet.

    It was driving me CRAZY!!

    You can see it working fine in my website :) SocialBlogsiteWebDesign.com

  25. webdevbytes
    Member
    Posted 3 years ago #

    For any one with this issue use the extra param:

    'items_wrap' => '%3$s'

    found here:
    http://wordpress.stackexchange.com/questions/2574/remove-wrapping-div-and-ul-from-output-of-wp-nav-menu/13347#13347

  26. keyaspects
    Member
    Posted 3 years ago #

    This is what I used to produce a HORIZONTAL wp_nav_menu. (no drop downs though - see my earlier link for drop downs)

    Make sure this is in your functions.php

    if (function_exists('register_nav_menus')) {
       	register_nav_menus(
    		array(
    			'main_nav' => 'Main Navigation Menu'
    			)
    		);
    	}

    place the wp_nav_menu where you want to in your code
    <div id="information"><?php wp_nav_menu(array('menu' => 'Main Nav Menu', 'container' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>')); ?></div>

    Add CSS
    http://pastebin.com/SdpvYABV

  27. keyaspects
    Member
    Posted 3 years ago #

    One point to add: My menu in the wp admin area was called Main Nav Menu.
    NOTE: <?php wp_nav_menu(array('menu' => 'Main Nav Menu',

  28. nr2012
    Member
    Posted 2 years ago #

    At least I found out that I'm not the only one having trouble with the wp_nav_menu...

    @SergioZambrano or anyone else here;
    what do you mean by specifying a menu or a location?
    is that really important?

    To my problem; all I want is giving the wrapping ul an id called "nav".

    <?php wp_nav_menu(array('container' => 'ul', 'menu_id'=>'nav')); ?>

    I read this code-fragment in a tutorial-book about wordpress themes, so it should work. but it doesn't. My ul just doesn't get this id...

    Can somebody help me out with this? I read all the stuff here, but can't get it working...

    And about that items_wrap. Where do I have to specify the variables which get inserted at
    %1$s,%2$s,%3$s?

Topic Closed

This topic has been closed to new replies.

About this Topic