3 Replies - 588 Views - Last Post: 03 June 2016 - 06:44 AM Rate Topic: -----

#1 HayleyB  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 03-June 16

Calling an style for an active menu item

Posted 03 June 2016 - 05:57 AM

Hi, im new to the forum as well as PHP. So please excuse me if I have posted in the wrong place etc.

I'm currently working on a wordpress theme and would like a menu item to styled differently when the page is active. (ie different background colour) so if i'm on the homepage the 'home' link will have a different background colour.

In all honestly i'm struggling to know where to begin with this. I'm unsure how to check the item is active and where to call to the code.

Let me share my current menu with you, and I hope you can send any advice.

 #my-menu-active
  {
    background: #ffffff;
  }

<?php

        $defaults = array(
                    'theme_location'  => 'main-menu',
                    'menu'            => 'div',
                    'container'       => 'ul',
                    'container_class' => 'container',
                    'menu_class'      => 'my-menu',
                    'menu_id'         => '',
                    'echo'            => true,
                    'fallback_cb'     => 'show_top_menu',
                    'before'          => '',
                    'after'           => '',
                    'link_before'     => '',
                    'link_after'      => '',
                    'items_wrap'      => '<ul class="%2$s">%3$s</ul>',
                    'depth'           => 0,
                    'walker'          => new description_walker
                        );

         $athers = array(
                    'theme_location'  => 'top-menu',
                    'menu'            => 'div',
                    'container'       => 'ul',
                    'container_class' => 'container',
                    'menu_class'      => 'my-menu',
                    'menu_id'         => '',
                    'echo'            => true,
                    'fallback_cb'     => 'show_top_menu',
                    'before'          => '',
                    'after'           => '',
                    'link_before'     => '',
                    'link_after'      => '',
                    'items_wrap'      => '<ul  class="%2$s">%3$s</ul>',
                    'depth'           => 0,
                    'walker'          => '',
                        );
        

                       if(has_nav_menu('main-menu')) {
                        wp_nav_menu( $defaults );
}
          else if(has_nav_menu('top-menu')){
            wp_nav_menu( $athers );
          }
          else {
            echo '<p class="menuoff">No menu assigned!</p>';
          }
                        ?> 

          
        </div>


Is This A Good Question/Topic? 0
  • +

Replies To: Calling an style for an active menu item

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4191
  • View blog
  • Posts: 13,240
  • Joined: 08-June 10

Re: Calling an style for an active menu item

Posted 03 June 2016 - 06:21 AM

this isn't a too trivial issue. essentially it depends on how you build the menu because you need to figure out if the link to print would result in the request uri you're currently receiving. once you figure that out it's merely a switch of the link template (add a css class, remove the <a>)

an example of what I use (uses Symfony, Twig, and Bootstrap):
the code checks not the URIs itself but their symfony route name
// bootstrap navbar
<ul class="nav navbar-nav navbar-left">
  // this is the top level link, this will add the active class here for every route name beginning with 'foo-'
  // and since <a> is an inline element, the colour change must be applied to the list element
  // this macro does the hard work matching the current uri/route against the link's uri/route (for the class)
  <li {{ setClasses('foo-', 'dropdown') }}>
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Foo <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li {{ setClasses('foo-bar') }}>
        // this macro does the hard work matching the current uri/route against the link's uri/route (for the href)
        {{ link('foo-bar', 'Foo-Bar') }}
      </li>


the used Twig macros:
(the logic is the same, only the output and parameters differ)
{#
    creates a hyperlink from a route name. Either the link text or the link 
    icon must be set.

    @param (string) name Route name.
    @param (string) text The text content of the link.
    @param (string) icon The Font Awesome class name of the icon.
    @param (array)  additional URL parameters
#}
{% macro link(name, text, icon, params) %}
    {% if icon %}
        {% set icon %}
            <span class="fa fa-{{ icon }} fa-fw"></span>
        {% endset %}
    {% endif %}
    {% if params and app.request.getUri() == url(name, params) %}
        <a>{{ icon|default('') }}{{ text|trans }}</a>
    {% elseif not params and name in app.request.attributes.get('_route') %}
        <a>{{ icon|default('') }}{{ text|trans }}</a>
    {% else %}
        <a href="{{ path(name, params|default({})) }}">{{ icon|default('') }}{{ text|trans }}</a>
    {% endif %}
{% endmacro %}

{#
    adds a class attribute optionally with the "active" class if the name 
    (partly) matches the route

    @param (string) name    Full or partial match to the route name.
    @param (string) classes Space separated CSS class names to always set.
    @param (array)  additional URL parameters
#}
{% macro setClasses(name, classes, params) %}
    {% if params and app.request.getUri() == url(name, params) %}
        class="active {{ classes|default('') }}"
    {% elseif not params and name in app.request.attributes.get('_route') %}
        class="active {{ classes|default('') }}"
    {% elseif classes %}
        class="{{ classes }}"
    {% endif %}
{% endmacro %}


Was This Post Helpful? 0
  • +
  • -

#3 HayleyB  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 03-June 16

Re: Calling an style for an active menu item

Posted 03 June 2016 - 06:37 AM

Thanks for this, although, It seems like a long way around and not suited to the way my menu is built.
I was thinking more along the lines of the below, but obviously require some help because i'm a little unsure of the exact solution

  <?php
        //get page id
        $page_id = get_the_ID ();
        $active = 'my-menu-active';
      ?>  

<?php if($page_id == current){echo $active;} ?>


Unsure how to fit it all together though. Any help is appreciated
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4191
  • View blog
  • Posts: 13,240
  • Joined: 08-June 10

Re: Calling an style for an active menu item

Posted 03 June 2016 - 06:44 AM

Quote

It seems like a long way around and not suited to the way my menu is built.

that's because I also colour the parent link in the dropdown, so I immediately see which section I'm in. but yes, there is no general way that works for every menu.

Quote

Unsure how to fit it all together though.

it strongly depends on how you build the menu in the first place because that code provides you the hooks you can work with. (in my case I had to go with 1) the used template engine 2) how bootstrap menus work and 3) what my router component offers).

This post has been edited by Dormilich: 03 June 2016 - 06:45 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1