[Solved] WordPress – Pages/Sub Pages Menu Question

[elcid]

Hello,
After watching Chris’ excellent 3 part screencast to develop and customise a WordPress site I have offered to re-develop a site for a friend in order to test my newly learnt skills and all is going pretty well so far.

However, I have an issue regarding the building of a static pages menu. The site has a number of static pages split into categories and sub-categories. Using "wp_list_pages" to generate the list works fine, but the list is way too long for the page with all parent and child pages listed. What I would like to do is display all the parent pages and any child pages for the current page, but all I can get is this…

Where page 2 is the active page.

Code:

Page 1
Page 2
Page 3
Page 4
Child 2.1
Child 2.2

What I would like to see is…

Code:

Page 1
Page 2
Child 2.1
Child 2.2
Page 3
Page 4

I was looking for a way to use "wp_list_pages" to get the page ids as a list, loop through the list, checking for the active page and then building the child links list if required. But, I have run into a brick wall on this. Does anyone have any ideas on how I might achieve this?

[elcid]

Thanks for the advise, but that is the page I have been trying to use for a while now to help me. The List Sub Pages example does not give me anything like what I am looking for. On the home page I get no menu at all and if I manaully go to a static page I only get he children of that page.

Maybe my example of what I am trying to achieve was a little ambigious.

On my home page, I am looking to produce a list of main level pages, with no child pages displayed.

Code:

Static Page 1
Static Page 2
Static Page 3
Static Page 4
Static Page 5

When I select an option (say Static Page 2), I want to display all main level pages, with the child pages for the selected static page as follows:

Code:

Static Page 1
Static Page 2
Child Page 2.1
Child Page 2.2
Child Page 2.3
Static Page 3
Static Page 4
Static Page 5

And if I selected Child Page 2.1, the same menu would be displayed.

If I then select a different top level static page, for example option 4, the menu would change accordingly…

Code:

Static Page 1
Static Page 2
Static Page 3
Static Page 4
Child Page 4.1
Child Page 4.2
Static Page 5

[TeMc]

Sounds like the second code snippet under "List subpages even if on a subpage" here:

http://codex.wordpress.org/Template_Tag … _a_subpage

[TeMc]

Oh, you want the childpages to appear within the menu.

In that case I’d make a php to :

* first define whether we’re on a parent, child or grandchild.
* If on a parent or child, go depth=2.
* if on a grandchild, go depth=0 or depth=3 (depth=0 is all depths, depth=3 is grandchilds – so depends on whether you’ve got sub-sub-sub-sub pages or not)

Then use CSS to hide all the subpages-menus and use CSS to show (unhide) the subpage-menu of the current active one.
ie.

Code:

ul.mymenu li ul {display:none;}
ul.mymenu li.current_page_item ul,
ul.mymenu li.current_page_parent ul,
ul.mymenu li.current_page_ancestor ul { display: block; }

So in the code you’ve NOT only outputted the childpage you wanted, instead spit them all out.
Then use CSS to hide the others. Why do it the hard way, I think this’ll do just fine.

—
TeMc

[elcid]

"TeMc" wrote:

Oh, you want the childpages to appear within the menu.

Yes thats is just what I want to do. :)

Using very basic php code:

Code:

My original CSS (based on Chris’ webcast example) was:

Code:

#main-nav { list-style: none; padding: 25px 0 40px 0; }
#main-nav li { font: 20px Georgia, serif; }
#main-nav li a { color: #060; display: block; padding: 3px 0; }
#main-nav li a:hover{ color: #FFF; }
#main-nav li.current_page_item a { background: #01a710; background: rgba(1,167,16,1); margin: 0 0 0 -20px; text-indent: 20px; color: #FFF; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-radius: 20px; }

I have now added from TeMc’s example:

Code:

#main-nav li ul { display:none;}
#main-nav li.current_page_item ul,
#main-nav li.current_page_parent ul,
#main-nav li.current_page_ancestor ul { display: block; }

The menu text is now 100% correct, but formatting is not right and here I struggle. The child items are displayed within the list item of their parent and I do not see whete I can apply css to these sub-levels of the menu.

For example:

Code:

• Headquarters
  • New Members
  • Trophies
• Database

Any ideas how I apply different css to the child pages of the selected parent?

[elcid]

Thanks to everyone who helped. Finally got to the required solution, but I doubt I would have got here without your help.

The final CSS solution which works needed apostrophe’s tweaking slightly with the addition of an extra line to clear to formatting applied to the parent if the active page.

Code:

#main-nav li.current_page_item ul li a { whatever }
#main-nav li ul li.current_page_item a { whatever }

Thanks again for all your assiatnce :) :)

[Author]

Posts