Title: Help adding  elements to custom menu
Last modified: August 21, 2016

---

# Help adding elements to custom menu

 *  [agustealo](https://wordpress.org/support/users/agustealo/)
 * (@agustealo)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/help-adding-elements-to-custom-menu/)
 * Hello WP.C. i’m trying to style my menu in my BlankSlate theme, but my html was
   written as below, and I want to interpret this into my WordPress header menu.
   I want to recreate the same structure including the “<i aria-hidden=”true” class
   =”icon-home”>” and “<span class=”icon”>”.
 * HTML:
 *     ```
       <nav id="menu" class="fluid navigation nav">			
   
       <ul>
       <li>
       <a href="#">
       <span class="icon">
       <i aria-hidden="true" class="icon-home"></i>
       </span>
       <span>Home</span>
       </a>
       </li>
       <li>...
       </li>
       </ul>
       </nav>
       ```
   
 * Within my theme’s (BlankSlate) header it’s:
 * `<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>`
 * and render as:
 *     ```
       <nav id="menu" class="fluid navigation nav">
       <button id="menutoggle" class="navtoogle" aria-hidden="true" type="button"> … </button>
       <div class="menu-categories-container">
       <ul id="menu-categories" class="menu">
       <li id="menu-item-848" class="icon-home menu-item menu-item-type-taxonomy menu-item-object-category menu-item-848">
       <a href="http://mysite.com/wordpress/category/post-formats/"> … </a>
       ```
   
 * I want to include icons styling using the html structure, please help.

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [tidythemes](https://wordpress.org/support/users/tidythemes/)
 * (@tidythemes)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/help-adding-elements-to-custom-menu/#post-4047494)
 * Please us the official support forum:
 * [http://tidythemes.com/forum/](http://tidythemes.com/forum/)
 *  Thread Starter [agustealo](https://wordpress.org/support/users/agustealo/)
 * (@agustealo)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/help-adding-elements-to-custom-menu/#post-4047562)
 * Thanks for your fast reply, but although I’m using a TidyTheme what I’m trying
   to accomplish isn’t necessarily BlankSlate specific.
 * I guess I would like to know how to have a better control of styling the Menu
   Item in WordPress not only for BlankSlate. I’m just happen to be using BlankSlate.
 * If someone has the answer to this I’d rather it be posted here for others to 
   see. Your site requires registration, sorry but my inbox is filled with junk 
   mail from sites I registered to for one reason or another.
 *  [tidythemes](https://wordpress.org/support/users/tidythemes/)
 * (@tidythemes)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/help-adding-elements-to-custom-menu/#post-4047565)
 * We answer these kinds of questions all the time as a courtesy. We value our users
   and like to help them when and where we can while using something we created 
   for them, even if it’s not 100% theme-specific.
 * We’ve even written something up for those learning CSS:
 * [http://tidythemes.com/want-to-learn-css/](http://tidythemes.com/want-to-learn-css/)
 * We’d just prefer to help at “home”. Up to you, just so you know, the option is
   there.
 * Thanks
 *  Thread Starter [agustealo](https://wordpress.org/support/users/agustealo/)
 * (@agustealo)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/help-adding-elements-to-custom-menu/#post-4047661)
 * Ok so after going through the WP Codex I found this simple solution.
 * Here it is for anyone else facing the same scenario.
 * The original call for menu is
 * `<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>`
 * and it outpost
 *     ```
       <div class="">
       <ul id="" class="">
         <li id="" class="">
           <a href="#">Page Name</a>
             </div>
       ```
   
 * I add a few lines to wp_nav_menu array to achieve a little more styling freedom
   of my menu.
 * `<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'link_before' => '
   <span class="icon"><i aria-hidden="true" class="icon-home"></i></span><span class
   ="MenuName">', 'link_after' => '</span>' ) ); ?>`
 * Outputs
 *     ```
       <div class="">
         <ul id="" class="">
            <li class="">
              <a href="#">
                <span class=""> … </span>
                  <span class="">Page Name</span>
               </a>
               </div>
       ```
   
 * To get even more customization and control of your menu’s html output, look into
   WP Walker Class inside the Codex.
 * I’m a designer and just getting familiar with WordPress so not sure if this is
   the absolute best way to do this but it worked for and I hope it’ll help someone
   else.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Help adding elements to custom menu’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [styling menu](https://wordpress.org/support/topic-tag/styling-menu/)

 * 4 replies
 * 2 participants
 * Last reply from: [agustealo](https://wordpress.org/support/users/agustealo/)
 * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/help-adding-elements-to-custom-menu/#post-4047661)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics