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.

    https://www.ads-software.com/extend/plugins/event-organiser/

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi John,

    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: https://www.ads-software.com/support/plugin/post-type-archive-links based on this article (in which I explain a bit more) https://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.

    Thread Starter John Sundberg

    (@bhwebworks)

    Hi Stephen,

    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.

    John

    Hi John,

    The difference is that you are using a page (as in the post type) with the page-sermons.php template. 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Events page and the current-menu-item CSS class’ is closed to new replies.