{"id":51870,"date":"2011-06-21T09:00:15","date_gmt":"2011-06-21T13:00:15","guid":{"rendered":"http:\/\/wpmu.org\/?p=51870"},"modified":"2011-06-21T01:46:53","modified_gmt":"2011-06-21T05:46:53","slug":"highlight-current-page-using-wordpress-navigation-menus","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/highlight-current-page-using-wordpress-navigation-menus\/","title":{"rendered":"How to Highlight the Current Page when Using WordPress Navigation Menus"},"content":{"rendered":"

WordPress 3.0 brought us a shiny new navigation system with drag and drop style custom menus<\/a>. This added theme feature has been quietly making everyone’s lives much easier.<\/p>\n

Today we’re going to walk through a basic styling tip for highlighting the current page. This is a helpful little CSS tweak that makes your website easier to navigate.<\/p>\n

\"Post<\/a><\/p>\n

If your theme supports WordPress menus, then you already have a built-in class to make it super easy to highlight the current page being viewed. If you’re using an older theme that does not offer support for WordPress menus, then you can easily add it in yourself by following the tutorial<\/a> in the codex.<\/p>\n

By default, WordPress menus output this class with the list item: current-menu-item<\/b><\/p>\n

You can choose to target either the list item or the link itself. This example specifies the background color and font color for the current list item<\/b>:<\/p>\n

{code type=css}
\nli.current-menu-item {
\nbackground: #3FAEA5;
\ncolor:#fff;
\n}<\/code><\/p>\n

So simple, right? Here’s how you might target the link itself:<\/p>\n

{code type=css}
\nli.current-menu-item a {
\ntext-decoration: underline;
\nbackground:#ccc;
\n}<\/code><\/p>\n

You can add colors, backgrounds, text shadows, background images, or anything you like to highlight the current page.<\/p>\n

If your theme supports the creation of multiple navigation menus, then you’ll need to be a bit more specific in your CSS if you want to have them styled differently.<\/p>\n

You can use Firebug to find the unique ID of your unordered list. It will contain the name you gave to your menu.<\/p>\n

If you have other menus with different styles on the page, then you’ll need to differentiate them in your CSS:<\/p>\n

{code type=css}
\n#menu-main-pages li.current-menu-item {
\nbackground: #3FAEA5;
\ncolor:#fff;
\n}<\/code><\/p>\n

With those simple snippets you should have the basics for highlighting current menu items.<\/p>\n

Have fun styling your custom menus and let us know if there are any more CSS tutorials you’d be interested to see on wpmu.org.<\/p>\n","protected":false},"excerpt":{"rendered":"

WordPress 3.0 brought us a shiny new navigation system with drag and drop style custom menus. This added theme feature has been quietly making everyone’s lives much easier. Today we’re going to walk through a basic styling tip for highlighting the current page. This is a helpful little CSS tweak that makes your website easier […]<\/p>\n","protected":false},"author":4099,"featured_media":182830,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[1,263],"tags":[1044,87],"tutorials_categories":[],"class_list":["post-51870","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news-community","category-tutorials","tag-css","tag-menus"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/51870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/4099"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=51870"}],"version-history":[{"count":2,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/51870\/revisions"}],"predecessor-version":[{"id":182828,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/51870\/revisions\/182828"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/182830"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=51870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=51870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=51870"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=51870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}