L D
(@enochfung)
As an aside, I had to escape the tags mentioned above. If I didn’t, it affected the output of this support page.
Moderator
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
How about adding the class regardless of mobile or desktop, and then using CSS Media Queries to target those resolutions instead?
E.g.:
<ul class="mobile-menu">
.mobile-menu {
display: block;
}
@media screen and (min-width: 768px) {
.mobile-menu {
display: none;
}
}
However it sounds like you have a question specific to the way your theme works.
L D
(@enochfung)
Hi, yes, it is specific. I tried doing the way you suggested but somehow, WordPress does something special with the dropdown-toggle class so the way above doesn’t work. I can’t find any reference in the code within the theme files that indicates how it works – I checked every single file. So my only conclusion is that it’s part of the core and is inserted by the core. Hence, my goal was to add the class directly to the <a> tag itself.
An example of how it works on someone else’s WordPress site: https://openneo.org/ . If you go to the site, switch to mobile view > click the menu button (top right corner). You will see that “About” has sub-pages. If you click on the arrow, the sub-pages are revealed. But you can also click on the “About” link as well. I did a Google search for a week and it sounds like many people have the same question: how do you get the parent (“About”) link to become actionable? Right now, by default, you can only turn the parent item into a link that leads somewhere. But if you want the functionality like the example site above, you have to remove the link. The only problem is, once it is removed, it’s “unclickable”.
I hope that makes more sense!
Moderator
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Which theme do you need help with?
L D
(@enochfung)
Moderator
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I think your queries are best asked at your theme’s support section: https://wordpress.org/support/theme/siteorigin-unwind#new-post
L D
(@enochfung)
People have asked support in the past. Their response is always that it requires a great deal of custom programming. But this isn’t limited to SiteOrigin’s themes – it’s many other themes created by different groups and people. It’s why I didn’t mention the theme at the beginning as I didn’t want to be redirected to the theme’s support when it appears to be something to do with core. =/
Moderator
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Your problem is something specific to the theme you’re using. If the theme provides no support then you need to look for another one. Your question doesn’t make sense when asked generally to all themes or to WordPress core.
L D
(@enochfung)
But why wouldn’t it? Is it not the core that generates the menu items and links? I just want to know how to add a class name to a tag that the core generates…
Hi LD, you are correct in part. Core code does generate menu items for practically any theme. However, many themes will alter the menu HTML that the core code outputs by hooking into any of the many filters and actions provided in the core function.
You’ve drastically limited possibilities for a solution by stipulating you want an easy way without coding. It then falls upon your theme or a plugin to provide an easy, non-coding way of accomplishing what you want. As was said in your theme’s forum, it requires custom coding, though I quibble with the characterization of it being a “great deal” of custom coding. It’s more than warranted in a quickie forum reply, but it’s not that involved as long as no user interface is needed. But “easy without coding” implies a user interface, which does encroach into great deal territory.
Hooking the ‘wp_nav_menu_items’ filter and adding desired attributes is what is required, but this is the coding you want to avoid.
L D
(@enochfung)
Thanks, that was the clue I needed (the wp_nav_menu_items filter). I didn’t know what I was looking for but when you pointed it out, I looked it up and realised that there is no function that can modify the class in <a>. I was looking in the wrong place as I too thought there was a hook somewhere that changed the class. But there wasn’t any in the theme. Turns out, they used a custom Jquery script to call upon the DOM and modify the tag indirectly. Thanks for helping me narrow it down!
In case anyone in the future is looking for the code I modified, this is it:
In js/unwind.js, find the following code:
$( '#mobile-navigation' ).on( 'click', '.dropdown-toggle', function( e ) {
e.preventDefault();
$( this ).next( 'ul' ).slideToggle( '300ms' );
} );
Then below that, add the following:
$( '#mobile-navigation' ).on( 'click', '.has-dropdown-button', function( e ) {
e.preventDefault();
$( this ).next().next( 'ul' ).slideToggle( '300ms' );
} );
This should in theory work with all of SiteOrigin’s themes. Definitely will work for the Unwind theme.
L D.
