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="https://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)

  • Please us the official support forum:

    https://tidythemes.com/forum/

    Thread Starter agustealo

    (@agustealo)

    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.

    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:

    https://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

    (@agustealo)

    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.