How to remove menu item by class/ID when subsite is created?

NBT has the setting to copy "Menus" to subsite. When the subsite is created, all menus are copied as there is no option available like in Pages and Categories. How could I remove some of them backend from the DB by their menu-item class or ID during or after the site creating process? Please advice.

  • Sajid

    Hi @Cas

    Hope you are doing good today :slight_smile:

    If I understand you correctly, then you want to delete the menu items individually. You can do this from Appearance > Menus by going to the concerned menu.

    If you want to delete it from database then WordPress stores each menu item in wp_posts table with "nav_menu_item" post type. You can search all menu items with this post type, name or CSS class/ID in phpmyAdmin and delete it there.

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

  • Code Injector

    I have 2 menus which attach to the template site that I don't want them to get copied to my customer's site. If I uncheck "Menus" in NBT template setting, all the menus won't get copied at all but I want all the menus to be replicated to my customer's site but only these two menus mentioned earlier.

    How can I delete it/them from the SQL query in a script contain in mu-plugins folder, either during or after the subsite creation?

    During the site creation: Which part in NBT plugins need modification? OR
    After the site creation: Which script should you recommend to start with?

  • Sajid

    Hi @Cas

    Hope you are doing good today :slight_smile:

    Okay so you actually want to delete the whole menu. Sorry I misunderstood.

    WordPress treats menu like a taxonomy. You can delete it by ID or Slug using following function. You can do so by adding the following code in mu-plugin and don't forget to change the text that says replace with menu ID.

    <?php
    function delete_menus_after_copying($template, $new_blog_id, $user_id){
    
     switch_to_blog( $new_blog_id );
    
    	$menu_one_id = 'Replace With first menu ID';
    	$menu_two_id = 'Replace With second menu ID';
    
    	wp_delete_term( $menu_one_id, $taxonomy = 'nav_menu' , $args );
    	wp_delete_term( $menu_two_id, $taxonomy = 'nav_menu' , $args ); 
    
     restore_current_blog();
    
    }
    add_action('blog_templates-copy-after_copying', 'delete_menus_after_copying', 10, 3);

    I have not tested it but it should work. If no the try to remove switch_to_blog( $new_blog_id ); and restore_current_blog();.

    Hope that helps :slight_smile: or feel free to post a reply if you need further assistance.

    Cheers, Sajid

  • Code Injector

    Hello Kasia,

    Well, "hiding" could do the work. I have 2 main type of menus that needed for removal: entire nav bar and menu items inside the main nav.

    WANT TO REMOVE AN ENTIRE NAV BAR

    Type#1

    <div class="container">
    	<div class="container_inner clearfix">
    		 <div class="left">
    			<div class="inner">
    				<div class="header-widget widget_nav_menu header-left-widget">
    					<div class="menu-calltoaction-left-menu-container">
    						<ul id="menu-calltoaction-left-menu" class="menu">
    							<li id="" class="menu-item menu-item-type-custom menu-item-object-custom">
    								<a href="#">MENU1</a>
    							</li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</div>
    
    		<div class="right">
    			<div class="inner">
    				<div class="header-widget widget_nav_menu header-right-widget">
    					<div class="menu-calltoaction-right-menu-container">
    						<ul id="menu-calltoaction-right-menu" class="menu">
    							<li id="" class="menu-item menu-item-type-custom menu-item-object-custom">
    								<a href="#">MENU2</a>
    							</li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

    Type#2

    <div id="top-bar">
    	<div class="container">
    		<div class="col-sm-6 tb-left">
    			<div class="tb-text">
    				<a href="#" class="call-to-action left">MENU1</a>
    			</div>
    		</div>
    
    		<div class="col-sm-6 tb-right">
    			<div class="tb-text">
    				<a href="#" class="call-to-action right">MENU2</a>
    			</div>
    		</div>
    	</div>
    </div>

    WANT TO REMOVE 2 MENU-ITEMS CONTAIN IN THE MAIN NAV

    Type#3

    <aside class="vertical_menu_area with_scroll light">
    		<nav class="vertical_menu dropdown_animation vertical_menu_toggle">
    			<ul id="menu-top_menu" class="">
    				<li><a href="#" class="">Menu which I want to keep</a></li>
    				<li><a href="#" class="">Menu which I want to keep</a></li>
    				<li><a href="#" class="">Menu which I want to keep</a></li>
    				<li id="" class="menu-item"><a href="#" class="">MENU1</span><span class="plus"></a></li>
    				<li id="" class="menu-item"><a href="#" class="">MENU2</a></li>
    			</ul>
    		</nav>
    	</div>
    </aside>

    For Type1 & Type#2, the whole nav bar is needed to be hidden/remove entirely -> .container and #top-bar respectively.
    For Type3, only the last two items are needed to be gone.

    1. Type1, Type2, Type3: only 1 event can occur between these three.
    2. I want to check whether it contains "MENU" text inside a href, then perform the hiding or removal otherwise parents wouldn't be effected by the hiding snippet.

    I appreciate your help, Kasia.

  • Rupok

    Hi Cas

    I hope you are having a wonderful day.

    I checked your Type#1, Type#2 and Type#3 menu codes and got some idea about what you are trying to hide with CSS.

    For Type#2 menu, you can simply hide the whole thing with the following custom CSS code:

    #top-bar {
        display: none;
    }

    But remember, if any other menu is using the same ID, then that will also be hidden with this code.

    And for Type#1 and Type#3, I didn't see and dedicated class or ID for those menus. So it's risky to give you code as that may hide some other menus to.

    Can you please give me the link of the page you are trying to remove menus from? And if you could attach some screenshots marked with portion you want to hide, that will be awesome. I can give you exact code after I get these two.

    I'm looking forward to get a reply back from you.

    Have a nice day. Cheers!
    Rupok

  • Code Injector

    Hello Rupok,

    For Type#2 menu, you can simply hide the whole thing with the following custom CSS code:
    But remember, if any other menu is using the same ID, then that will also be hidden with this code.

    I'd been well aware of this problem that's why I avoided using display:none directly by the ID, not the long-term solution I've been looking for.

    And for Type#1 and Type#3, I didn't see and dedicated class or ID for those menus. So it's risky to give you code as that may hide some other menus to.

    I've been thinking maybe with some lines of jQuery could help by checking whether there're some text contains the word "MENU" (or something else) inside a "li + a" which they are very unique within the page, then perform the action. I was trying to achieve with this method with no success, maybe something wrong with the code. Please advice.

  • Rupok

    Hi Cas

    You are smart :slight_smile: That's the way you should follow if you are trying to avoid hiding the menu with CSS.

    But hiding with CSS is lighter than using jQuery. I was asking the page link so that I can see the source code. I'll try to find out the class/id of parent divs. If there is anyway we can catch the "common child" of a "unique parent", we can easily catch that common child with CSS.

    If I see, there is no easy way to catch with CSS, I can help you with the code in jQuery I believe.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.