Almost two years ago I published an article on how to create custom WordPress menus that highlighted the current page. It’s still one of the most popular posts on this site, and for good reason: Current page highlighting is vital to ensure a good user experience for your visitors. Without current page highlighting it’s hard for the visitor to know if she is on the correct page or not. Now it’s time to upgrade that tutorial to incorporate the new custom menu functionality in WordPress 3.0 and also add some new functionality.
One of the major improvements shipped in WordPress 3.0 was the custom menu functionality. In the past menus were restricted to either simple page or category lists, hard-coded menus stored in the theme files or cumbersome 3rd party plug-ins. No such trouble any more. Custom menus are now available from right within the WordPress admin panel, found under the Appearance tab. And even if you have an older theme that doesn’t support the new menus you can still use them in your sidebar as widgets.
I’m not going to cover how to use the menus from within the admin panel. For that I recommend you read this WordPress Codex article that explains it quite well. Instead I’m going to talk about what you can do with these menus styling wise.
To see what’s possible with these new menus let’s first take a look at the code output from the stock menus. In this example I’ve created one menu with the name “My First Menu” and added it to the site using a sidebar widget. The menu has three buttons; Home pointing to the home page, About pointing to the About page and Contact pointing to the Contact page. (To make the code easier to read I’ve removed the sidebar
- and
- tags so you only see the actual menu output.)
The key information for this tutorial can be found on line 4:
The first list item has an ID attached to it and then a huge array of classes. They are: “menu-item”, “menu-item-type-custom”, “current-menu-item”, “current_page_item”, “menu-item-home” and “menu-item-37?. Of these the three that matter to us are “current-menu-item”, “current_page_item” and “menu-item-home”. Using these custom classes you can create custom styles that highlight or otherwise affect only certain elements:
.current-menu-item { } targets only the menu item the visitor pressed to get to the menu. This goes for categories as well as pages.
.current-page-item { } targets only the current menu item if that menu item is pointing to a page and the visitor is on that page.
.menu-item-home { } targets only the menu item that points to the root or home page of the site.
So, to answer the question from the original artice: How do I highlight the current page in my menu? The answer is create a custom class style with the name .current-menu-item. As a bonus this style will not only target your pages but also your category index pages and your home page. In the past you had to create separate styles for these.
But this is just the beginning. With the new WordPress menus you can create custom styles that target more than just pages and category indexes. It turns out the code output for these custom menus is highly dynamic and it interacts with all the content on your page whether you actually use the menus or not. The code output above was generated after clicking on the home page and thus resulted in the three classes listed above (notice those three classes are not present in the two other list items). But what if you went to a page that was a child of one of the menu pages? In the past that would mean the parent page would not be highlighted in the menu. But now it can.
The code below was grabbed from the same site as before after I opened a page for which the About page is the parent:
Look closely at the class array and you’ll find this new class: “current-page-ancestor”. This class is activated every time the visitor opens a page that has a parent page that is featured on the menu. That means you can use this class to highlight the parent in the menu. The easiest way to do this is by simply adding the new class to the style of the original .current-menu-item class:
.current-menu-item, current-page-ancestor { } targets either the menu item for the current page or the menu item for the parent page if a child page is visited.
It gets even more interesting when we look at category menu items. Like in the past you can create menus that point to category archives. And you can use the .current-menu-item class to highlight the current category in the menu if you’re on the category index page. But what if you want to highlight the category (or categories) of a particular post when that post is open? Again there are custom classes for this:
Here the three classes “current-post-ancestor”, “current-menu-parent” and “current-post-parent” are what matters. Either of the three will allow you to highlight the category (or categories) the current post belongs to, but they each work in different ways:
.current-post-ancestor { } targets the menu item as long as the category the menu item points at is an ancestor of the post (so regardless of whether the post is in the category or in a sub-category under the category)
.current-menu-parent { } targets the menu item if it is the parent of the menu to which the post belongs (yes, it’s confusing).
.current-post-parent { } targets the menu item only if the category is the direct parent of the post (menu item will not be highlighted if the post only belongs to a category that is a child of the category the menu item points to).
Because of how this new menu system is set up, and because it works so well you only really need to create one custom style if you want to highlight the current page, current category, page parent and category parent in your menu:
.current-menu-item,.current-page-ancestor,.current-post-ancestor { }To get more advanced you can also create separate highlighting styles depending on what type of menu item it is or what relationship it has to the page, post or index. And if you have multiple menus you can create entirely separate style sets for each of these, complete with current page, post and category highlighting. The posibilities are if not endless then at least quite extensive.
Upon first inspection the code output of the new WordPress 3.0 menu system may look quite messy but now that you see what it’s all for I think you’ll agree with me that this heralds in a whole new age of menu customization for theme developers.
If you want to see this stuff in practice head on over to the website for the 12×12 Vancovuer Photo Marathon where I’ve implemented tons of custom menu highlighting.
Niciun comentariu:
Trimiteți un comentariu