Events page and the current-menu-item CSS class
For a reason that is unclear to me, an Events page that uses the archive-event.php page template AND is manually added to the menu using the WordPress Appearance > Menus admin page is NOT automatically assigned either the .current-menu-item or the .current_page_item CSS class by WordPress.
This was causing CSS menu styling headaches on several sites where that menu styling made a difference due to the themes I was using.
A couple days ago I stumbled on a work-around quite by accident. Just for kicks I used the “Add an ‘events’ link to the navigation menu:” option found in the Events Organiser General settings tab to add the Events link to the menu, and WordPress assigned it the correct CSS classes. Excellent!
I had avoided this option in the past because of the warning next to it that reads “(This may not work with some themes):”, and because I prefer to manually add menu items to the menu.
What I noticed on the Appearance > Menus admin page for that menu was that the new Events menu item (added by the plugin) is designated as “Custom” instead of as “Page”.
I haven’t dug into this to see why this is happening, but for now it’s good to know that there is a way to make the CSS work properly.
For the record, this was a Genesis theme that I was using.
Maybe I should remove that warning? It should only not work on themes that are not utilising the menu properly.
For a reason that is unclear to me, an Events page that uses the archive-event.php page template AND is manually added to the menu using the WordPress
This is a ‘problem’ with WordPress. A brief explanation of menu links: they come in three types:
- Custom – manually enter the url
- ‘post_type’ (page, post, event) – for links to a single page/post/event etc
- ‘taxonomy’ for links to taxonomy archive pages
Note there is no ‘post_type_archive’ for links to post type archive (hence by default you can’t have menu links to post type archives – and manually added ones are not highlighted as ‘current’). To remedy that I created this plug-in: http://wordpress.org/support/plugin/post-type-archive-links based on this article (in which I explain a bit more) http://wp.tutsplus.com/tutorials/theme-development/add-post-type-archive-links-to-your-menu/.
Now ‘post_type_archive’ isn’t recognised by WordPress which is why its assigned ‘custom’ in the admin UI.
Through the use of filters the plug-in checks if the post type archive is being viewed and adds the appropriate css classes. (I’ve used the ‘default’ ones – but themes can completely over-ride that, hence it *might* not work with all themes).
Event Organiser essentially does exactly the same thing but for only events. Perhaps the option should be moved to the Appearance > Menu page – but essentially all that drop down does is programaticaly add / remove an ‘events’ link from the selected menu.
Perhaps remove that warning or add more information to it?
Thanks for the explanation on menu links.
For what it’s worth, I’ve written a “Sermons” plugin that creates sermons as custom post types and displays the main list of sermons on a page that uses a template file called page-sermons.php, and another file called archive-sermons.php that handles all the taxonomy archives.
I’m using that sermon plugin on four active church websites and some development sites, and on all those sites I added the “Sermons” page as normal in Appearance > Menus and WordPress correctly adds the current-menu-item CSS selector to that menu item when that page is active.
If I get some time I might look into this a little deeper.
The difference is that you are using a page (as in the post type) with the
page-sermons.phptemplate. The ‘events’ page is not a ‘page’ in that sense. For instance, if you deleted your sermons page then you although you couldn’t add a ‘sermons’ link to the menu, there would still be a sermons archive.
- The topic ‘Events page and the current-menu-item CSS class’ is closed to new replies.