Docs

[RickyWolff]

Hi Support!

Just a brief question, I’m currently implementing Google Tag Manager onto my site. I would like to track how many users click on my navigation items.

Therefore, I need to assign classes to my menu links in order to track this.

My question is, where in the theme files do I need to add the custom class to the tag?

<nav class="x-nav-wrap desktop" role="navigation">
  <ul id="menu-about-me-menu" class="x-nav">
<li id="menu-item-583" class="tst menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-498 current_page_item menu-item-583">
<a <strong><em>class="google-tag-class"</em></strong>< href="http://rickywolff.com/">
<span>Home</span></a><
/li>

As in the html snippet above, I would like to add the class “google-tag-class” to the tag.

I hope I explained this well. Looking forward to your reply!

Ricky

[RickyWolff]

Excuse me, the above html got messed up. Here is the correct Snippet

<nav class="x-nav-wrap desktop" role="navigation">
  <ul id="menu-about-me-menu" class="x-nav"><li id="menu-item-583" class="tst menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-498 current_page_item menu-item-583"><a class="google-tag-class" href="http://rickywolff.com/"><span>Home</span></a></li>

[RickyWolff]

I found a solution. You can mark this threat as solved 🙂

The answer is adding the below code to your functions.php file.

function add_menuclass($ulclass) {
   return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');

If you have code to enrich this code snippet I’d love to hear.

Regards,

Ricky

[Friech]

Hi Ricky,

Thanks for writing in and I’m glad you sorted things out. However, WordPress has a native option for you to assign a class to your menu items.

If you don’t see this class field on your end. Press the Screen Options on the upper-right corner and enable the CSS Classes.

Hope it helps, Cheers!

[RickyWolff]

Hmm the above code removes the ability to use the search function in the navbar. Any ideas on how to fix this?

[RickyWolff]

Hi Friech,

I have tried that, but the css classes didn’t seem to appear in my menu. Like the settings aren’t broadcasting to the website. Do you know why?

-edit: The optional CSS classes do show in WordPress as you displayed, but they don’t appear in the source code of my live website.

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[RickyWolff]

Excuse my delayed reply, my website url is http://rickywolff.com

[Christopher]

Hi there,

The class name added successfully, please see the attachment.

Thanks.

[RickyWolff]

Edit: I am trying to get the class onto the < a> tag, not on the < li> tag. Is this possible? The code I provided above worked, but that broke my search button in my nav menu

[RickyWolff]

It’s finally solved. Adding this to my functions.php did the trick:

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    $classes     = implode(' ', $item->classes);
    $item_output = preg_replace('/<a /', '<a class="'.$classes.'"', $item_output, 1);
    return $item_output;
 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);

Thanks for your efforts support!

Kind regards,

Ricky

[Friech]

Glad you sorted things out. Should you require any further assistance with X|THEME and Cornerstone, please feel free to get in touch with us.

Cheers!

[Author]

Posts