{"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":[],"categories":[47],"tags":[78,79,48],"_links":{"self":[{"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/posts\/313"}],"collection":[{"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":3,"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":319,"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions\/319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/media\/207"}],"wp:attachment":[{"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reviewsignal.com\/blog\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}