WordPress custom menus and modifications to remove unwanted CSS

Source: Internet
Author: User

Here is mainly used for template production, the general front-end has been written, we just use the front-end content to apply WordPress backstage.

So we need to customize the WordPress menu during the template making process.

In the functions.php file, add

if (function_exists(' Register_nav_menus ')) {Register_nav_menus(' Header-menu ' + __ (' Navigation custom menu '), ' Footer-menu ' + __ (' Page Corner custom menu '), ' Sider-menu ' + __ (' sidebar menu '));}

We can customize the menu in the WordPress background appearance.

Then we'll come out in the front desk menu.

<?php Wp_nav_menu (Array(' theme_location ' and ' = '//Specifies the navigation name to display and, if not set, the first' Menu ' = ' header-menu ', ' container ' = ' nav ',//outermost container label name' Container_class ' = ' primary ',//outermost container class name' container_id ' = ',//outermost container ID value' Menu_class ' = ' sf-menu ',//UL Label class' menu_id ' = ' Topnav ',//ul tag ID' echo ' =true,//whether to print, which is true by default and set to False if you want to use the navigation code as an assignment' FALLBACK_CB ' = ' wp_page_menu ',//Alternate navigation menu function to invoke when navigation is not set in the background' Before ' = ',//Show before navigation a label' After ' = ',//Show after navigation a label' Link_before ' = ',//appears after the navigation link name' Link_after ' = ',//appears before the navigation link name' Items_wrap ' = ' <ul id= '%1 $ s >%3$s</ul> ', ' depth ' + 0,////Display the number of menu layers, the default 0,0 is to show all layers' Walker ' = '////Call an object definition to display the navigation menu)); ?>

The array inside is wp_nav_menu default and can be modified according to our needs.

General WordPress default menu, which is shown in the foreground

class= "Menu-header-container" >    class= "Menu" >        class= "Current-menu-item "><a href=" http://www.xxx.com/"> University home </a></li>        <li><a href=" http://www.xxx.com/ Category/news ">wordpress News </a></li>    </ul></div>

We need to modify the ID and class to look like the front-end engineer has set it up.

So we need to modify the default content in Wp_nav_menu.

But if we need to remove the ID and class of the LI tag

class class class= "Menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8" ><a href= "/http/ Www.xxxx.com/themes ">wordpress Theme </a></li>

You need to use the following code, add this code to the functions.php file, you can remove the redundant CSS selector.

/**/add_filter (' nav_menu_css_class ', ' My_css_attributes_filter ', 1); add_ Filter (' nav_menu_item_id ', ' My_css_attributes_filter ', 1); Add_filter (' page_css_class ', ' My_css_ Attributes_filter ', 1); function my_css_attributes_filter ($var) {    returnis_array( $var Array (): ';}

WordPress custom menus and modifications to remove unwanted CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.