WordPress navigation – add custom menu classes

Lately, I develop WordPress themes. The thing is, I don’t like the WordPress default css style names – I prefer BEM naming convention. If you’ve tried to style a WordPress theme, you know, that by default WordPress apply some classes to the menu items – like  page_item, page-item-$ and current_page_item for the current active menu. I wanted to remove all other classes, and go with navigation__item and navigation__item-active for the current selected menu. Like almost everything in wordpress, you can change this using filters. Filter function takes as arguments hook ( think about the hook as event ) , function that will modify the output, priority and number of arguments that the function will accept. So here is the snippet:

function add_custom_classes($classes){
	
	$newClasses[] = "navigation__item";

	if( in_array('current_page_item', $classes) ){
		array_push($newClasses, "navigation__item-active");
	}

    return $newClasses;
}

add_filter('nav_menu_css_class', 'add_custom_classes', 100, 1);
add_filter('nav_menu_item_id', 'add_custom_classes', 100, 1);
add_filter('page_css_class', 'add_custom_classes', 100, 1);

Add it to your functions.php file and you have navigation__item class set to the list items, and navigation__item-active class added to the current menu item.

Set and get objects from/to LocalStorage

Recently, I use localStorage a lot. The HTML5 Storage API is supported in all major browsers, as well as JSON’s parse and stringify  methods. With this in mind, it is actually quite easy to save, edit and get javascript objects from user’s machines.

Here is the snippet I use to save objects to localStorage:

function saveToStorage(_name, _obj) {
    //console.log("saved to storage", _name, _obj);
    localStorage.setItem(_name, JSON.stringify(_obj));
}

Just pass a name, and a javascript object. Later, we can get the object:

function getFromStorage(_name) {
    var storageData = localStorage.getItem(_name);
    var storageObj = JSON.parse(storageData);

    if (!storageObj) {
        storageObj = {};
        saveToStorage(_name, storageObj);
    }
    return storageObj;
}

Just pass a name of the object you want to get. If such a object doesn’t exist, the function will return new, empty javascript object.