WordPress sub pages toggle samples

In the images from below, you can see how the subpages expand only for the active parent page.

The breadcrumb plugin

First thing to do is to download the modified fold list page plugin, unzip and just copy in the WordPress plugins folder, than activate in the back-end.
The plugin itself contains some modifications in order to achieve the desired functionality so you might want to download this version and never upgrade (the development has been discontinued in 2008 anyways).

The code to call in your template files

You can integrate it in a sidebar or anywhere you want to have it displayed.

The CSS

Please read the comments that come along with the code for a better understanding:

#sidebar_subpage ul ul {margin:2px 0 2px 20px}	/*this will create some left space for the subpages links*/
		#sidebar_subpage a {text-decoration:none; color:#000} /*default link style*/
		#sidebar_subpage a:hover, #sidebar_subpage a:focus, #sidebar_subpage li.current_page_item a, #sidebar_subpage li.current_page_ancestor a {color:#00aef0;} /*hover and current page link style*/
			/*color fix for subpages - will fix CSS inheritance colors for the subpages links*/
			#sidebar_subpage li.page_item li.page_item a {color: #000}
			#sidebar_subpage li.page_item li.page_item a:hover, #sidebar_subpage li.page_item li.page_item a:focus, #sidebar_subpage li.page_item li.current_page_item a	{color:#00aef0}

WordPress version support

At this moment the page list folder plugin, which makes this functionality possible, has been tested with WordPress 2.7.1 up to WordPress 2.9.2 and it works.
It is very likely to work with the WordPress 3.0 and other future versions to come, but not guaranteed.

Questions?

If you have any questions, please use the comment form below.
Also don’t forget to check the article: how to display parent page title in wordpress.

3 Responses

  1. Hi I don’t get the same results, just the children of the current page.
    Really want to achieve what you have in the example with all top level pages and current sub pages, what was the code for that?
    Cheers!

  2. With the code from above, you should get all parent pages and the children for the active parent page.
    Try also to increase the depth number.

Comments are closed.