1

I've created a menu that, instead of plain text, needs to have icons. Unfortunately the "CSS Classes" option provided by WP adds the class to the li rather than the a so the icon won't be clickable if added there. Also, if I add a menu item without a title (because my menus should be nothing but icons) the menu item disappears completely when saving the menu.

To solve this I've simply set the "Navigation Label" to <span class="icon-facebook" title="Facebook"></span>. This works fine and I've done it this way for ages.

What I noticed today however is that if the user administrating the menu is not an admin, he is unable to save a menu item with HTML in its label. This results in the HTML being stripped, the "Navigation Label" being empty and thus WP removing that menu item completely upon saving the menu.

Non-admins usually do not have access to the Menu Admin screen, but I've given Editors that capability using:

$editorRole = get_role('editor');

if (!$editorRole->has_cap('edit_theme_options')) {
    $editorRole->add_cap('edit_theme_options');
}

Why does WP strip the HTML and how can I prevent it from doing so?

enter image description here

Improve this question
2

1 Answer 1

Reset to default
1

If you want to add the icon as content in a pseudoelement I would select the a by specifiyng the class you inserted in the WP menu editor (so in the li):

    /*hide the menu text*/
    li.your-class a {
        visibility: hidden;
     }

     /*create the icon and make it visible*/
     li.your-class a::before {
       content: "icon code";
       visibility: visible;
     }
Improve this answer
1
  • While that's doable, that would mean that every time my client decides to use a new icon I would need to update the code. The icon CSS that I'm using only affects the element the class is applied to - not its children. I suppose I could extend my icon CSS to have something like .icon-search--child which would then affect the child instead, but it would double the amount of CSS for icons. I'd rather just the HTML stayed in place even when none admins saved the menu.
    – powerbuoy
    Dec 30, 2016 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.