Wordpress Mark Parent Pages Plugin
This plugin uses DOM to add a class (current_page_ancestor) to the li tag of each page that is an ancestor of the current one. With a little CSS, you can have nice collapsing menus. This code assumes that your pages are listed using the usual wp_list_pages function, and that they are in an element with the id of nav.
#nav ul li.current_page_item ul,
#nav ul li.current_page_ancestor ul {
display:block;
}
#nav ul li.current_page_item ul ul {
display:none;
}
I wanted collapsing menus in Wordpress, not Javascript based, but something that would display only top level pages AND pages that are either children of the current page or children of the ancestors of the current page. It may sound confusing, but it’s really quite logical. Take a look:
Given a page structure like this:
Web Programming > Wordpress > > Themes > > > CSS > > > JavaScript > > > PHP > > Plugins > > Functions > CubeCart > Gallery Templates > Free Designs Portfolio > Sites About Contact
On the main page, I’d like to display all the top level pages: Web Programming, Templates, Portfolio, About, Contact
On page ‘Web Programming’ I would like to display:
Web Programming > Wordpress > CubeCart > Gallery Templates Portfolio About Contact
On page ‘Wordpress’ I would like to display:
Web Programming > Wordpress > > Themes > > Plugins > > Functions > CubeCart > Gallery Templates Portfolio About Contact
On page ‘Themes’ I would like to display:
Web Programming > Wordpress > > Themes > > > CSS > > > JavaScript > > > PHP > > Plugins > > Functions > CubeCart > Gallery Templates Portfolio About Contact
The problem was that to display the pages like that, I really needed to know all ancestors of the current page. Now that this plugin classes those, I can do exactly what I wanted.
Related Posts
