{"id":313,"date":"2013-09-04T20:08:15","date_gmt":"2013-09-04T20:08:15","guid":{"rendered":"https:\/\/reviewsignal.com\/blog\/?p=313"},"modified":"2013-09-04T20:08:15","modified_gmt":"2013-09-04T20:08:15","slug":"adding-custom-css-to-menus-in-wordpress","status":"publish","type":"post","link":"https:\/\/reviewsignal.com\/blog\/2013\/09\/04\/adding-custom-css-to-menus-in-wordpress\/","title":{"rendered":"Adding Custom CSS to Menus in WordPress"},"content":{"rendered":"

It's WordPress Wednesday!<\/p>\n

The easiest things to talk about are the things you experience yourself. Since I use WordPress for this blog, this was an issue I faced. Review Signal has a consistent theme, but WordPress runs very separate from the rest of the site. So in the Menus here I needed to highlight that you were on the blog and have it always be selected.<\/p>\n

I created a CSS class called menuselected and then I needed to figure out how to make only that menu item have the CSS. I didn't want to hardcode it into a theme because that would mean extra work every time I wanted to change something. But it wasn't immediately obvious how I could add custom CSS to a menu. WordPress seems to hide a lot of functionality away from the user, but I found it.<\/p>\n

Instructions<\/strong><\/p>\n

1. Go to wp-admin\/nav-menus.php to edit your menus.<\/p>\n

\"appearance-menus-default\"<\/a><\/p>\n

2. Click Screen Options and Check CSS Classes.<\/p>\n

\"appearance-menus-screen_options\"<\/a><\/p>\n

3. Click on the menu item and type in your desired CSS class.<\/p>\n

\"appearance-menus_css_classes\"<\/a><\/p>\n

 <\/p>\n

That's it, your menu will now have your custom css class. \u00a0Happy Hacking \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

It’s WordPress Wednesday! The easiest things to talk about are the things you experience yourself. Since I use WordPress for this blog, this was an issue I faced. Review Signal has a consistent theme, but WordPress runs very separate from the rest of the site. So in the Menus here I needed to highlight that […]<\/p>\n","protected":false},"author":1,"featured_media":207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[78,79,48],"class_list":["post-313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-wednesday","tag-css","tag-menus","tag-wordpress"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t