How can I add a class to a menu item in UPFRONT?

Hi WPMUDEV

Just wondering how can I add a custom class to select menu items in my main navigation?
Is there a way to add HTML into the Menu items via the UF interface?

There is another plugin I have used before to add font-awesome icons ('Font Awesome 4 Menus'), this works through the traditional Wordpress Interface, however as soon as I go back into Upfront Editor, Upfront deletes/overrides any custom css added by this plugin.

Adding font-awesome icons is just one of the things I'd like to do to select menu items, there are a few other custom stylings I would like to add, so adding custom classes would be really good, if I could do this through Upfront?

Thanks in advance for any advice =D

    Majid

    Hey Ana,

    How are you doing today ?

    Regarding the matter of adding custom classes to menu items from Upfront, that's unfortunately not possible at the moment. but I can help you add font awesome icons to your menu items using another way.

    First we will need to get fontawesome included into our theme, we can do that by adding this line to the theme's functions.php (Issue theme in your case). at the bottom of themes/us-issue/functions.php add this snippet

    function font_awesome() {
        wp_enqueue_style( 'fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
    }
    add_action( 'wp_enqueue_scripts', 'font_awesome', 1 );

    now since we have FontAwesome css file included, we just need to add small css code to make the icons appears wherever we want.

    The following will be added to style.css of the same theme themes/ui-issue/style.css

    #menu-item-75 a:before {
    	content: '\f003' !important;
        font-family: FontAwesome;
        margin-right: 10px;
    }

    This code will target menu items with Id 'menu-item-75' only. you can get the menu items id by right clicking an item and then inspect element.

    The last part now is choosing the icon for each menu item.

    By navigating to http://fontawesome.io/cheatsheet/ you will be able to see all Fontawesome icons with their codes. for example the envolop icon can be retrieved by using f003 code after the slash \

    Note: the f003 is the only part that will be changed, the rest remains the same.

    The results :

    The style.css file

    Let me know if it worked for you.

    Regards,
    Majid

      Ana

      Hi Majid,
      Thank you very much for your clear and concise solution above.

      I have implemented your suggestion, and indeed this works.

      I just have the following remaining questions, if you could be so kind so answer...

      1) Adding custom CSS into my theme's style.css (in this case UF Issue) will this be overridden when there is an update?

      It's just that I have read a lot online here that is advised not to alter any UF theme files directly, as it is pulled from the database.

      In the case that these custom snippets (added into functions.php and style.css) are indeed overridden upon an update with Upfront, I do not mind copying and pasting them in again (and backing up of course), but it would provide clarity if you could please confirm that this does indeed happen?

      2) Is there a way with your above solution, to hide the text of the menu item, and just display the fontawesome icon only?

      I have tried playing around with the display none properties, as well as the visibility properties - both remove he text and the icon entirely from displaying in the browser...is there another way? I would just like a clickable home icon to display.

      Many thanks in advance!!

    Majid

    Hey Ana,

    Sure there is another way to do it, first we will need to create a mu-plugins folder (Must use Plugins), we can do that by creating a folder inside wp-content folder (check if it doesn't exists already). and past the attached php file there. this php file contains this snippet:

    // Add font awesome icons
    function font_awesome() {
        wp_enqueue_style( 'fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
    }
    add_action( 'wp_enqueue_scripts', 'font_awesome', 1 );

    and then we will add the style via upfront. this way the changes will always remain even after updates

    Open the UF builder, and click Theme settings, and then edit global css


    Save everyhting and you will see the changes made. you can delete the code we added for both functions.php and style.css files of Issue theme.

    2 - The following snippet will hide the text of any link in the menu. just make sure you give it the right ID, and remove the css for that particular menu link, because it will cause double icons displayed for the same link.

    function replace_link_with_icon() {
    ?>
    	<script type="text/javascript">
    		(function($) {
    			$(document).ready(function() {
    				$('#menu-item-134 a').html('<i class="fa fa-home fa-2x"></i>');
    			});
    		})(jQuery);
    	</script>
    <?php
    }
    add_action( 'wp_footer', 'replace_link_with_icon' );


    this was also inlcuded in file so you don't have to add it yourself. just unzip and copy/past inside the mu-plugins folder discussed above.
    Let me know if this works for you

    Cheers,
    Majid