search

roryashfordbentley / Wordpress-Bem-Menu

Better menu implementation for Wordpress using BEM syntax
139 stars 23 forks source link

Custom css #9

Closed roryashfordbentley closed 8 years ago

roryashfordbentley commented 8 years ago

In response to #8 I have modified the menu output so that custom css classes set in WordPress admin/menus are added to the list item with markup as below:

<ul class="main-menu">
    <li class="main-menu__item  main-menu__item--1  main-menu__item--my-awesome-class">
        <a href="http://localhost/e3/">Home</a>
    </li>
    <li class="main-menu__item  main-menu__item--parent  main-menu__item--2">
        <a href="http://localhost/e3/our-story/">Our Story</a>
    <ul class="main-menu__sub-menu  main-menu__sub-menu--1">
            <li class="main-menu__sub-menu__item main-menu__sub-menu--1__item  main-menu__item--3  main-menu__item--my-sub-menu-class">
                <a href="http://localhost/e3/our-story/">Our Story</a>
            </li>
            <li class="main-menu__sub-menu__item main-menu__sub-menu--1__item  main-menu__item--4  main-menu__item--my-other-sub-menu-class">
                <a href="http://localhost/e3/our-team/">Our Team</a>
             </li>
        </ul>
    </li>
</ul>

In the above example I added classes to a few of the menu items in WordPress admin. my-awesome-class my-sub-menu-class my-other-sub-menu-class. Each of them is added to their respoective menu items and adheres to the strict BEM naming conventions.