How to create a page>child page sidebar menu and page templates?

On this website we have various parent pages that have child pages.

I want each page (including the parent itself) to have a sidebar with a menu that shows all the child pages as well as the parent page itself at the top. And then the page content itself in the main area.

| parent page | content… |
| child page | content… |
| child page | content… |
| child page | content… |

The active page would have special style.

It seems to me that this could be some kind of template because all these pages will have the same sidebar menu with the content on the right. But since these are not archive pages, they are just regular pages, how do I “template” that? Or do I have to literally put the sidebar and things onto every page directly?

I know I could use something like a global template and insert that into each page, but I don’t want the client to have to fuss with the sidebar, I only want them editing the main content area and not have to worry about columns and accidentally messing with the sidebar etc. It also means if they want to create a new page, they would have to clone a previous one to make sure all the layout and sidebar and such is copied. I want to simplify that.

How would you go about this?

And another question, how would you create the menu itself? Can I make it so that it’s fully dynamic and can work when added to any page that may or may not have child pages? I was trying to make the menu using the Nav Nestable menu with a query loop, but the query loop needs me to select a specific parent ID, and further, the parent itself would be excluded in this case, but I always want the parent itself to be the top of the menu.

I can do all this pretty “manually”, but right now it seems like I have to do the colums and sidebar content physically on each page, and then each parent page needs its own sidebar menu setup so that I can set the right parent ID and make sure the parent itself is added to the top of the menu explicitly.
I want this to be more automatic and dynamic if possible.

Ideally it would work like in this sentence: “For any given page, if it has children, or it IS a child of another page, it should be shown with a sidebar that has a menu with all the child/sister pages and the parent page at the top.”

This feels like a template, but can I make a template that only shows for pages that happen to have child pages or belong to a parent page? And then make it so that the Bricks content for the page itself only handles the main content area and not the sidebar and layout columns?

What’s the best way to do this?

2 Likes

Hey @vigilante. This is exactly what I want to do. Did you find a solution to this?

Not in the way I wanted!

I ended up having to design the sidebar structure into every page as normal sections and columns. It’s not bad in my case since this site doesn’t add pages almost ever. But if they do, we’ll just duplicate them.

The menu itself I saved as its own template which had to be designed specific to the parent it was going to be used with. So the parent link itself was in it’s own elements, followed by custom code for the children. Like this:

UL  
  -> LI
    -> Text link for the parent e.g. "About"
  -> Custom Code block

The custom code element is rendered without a wrapper. It uses wp_list_pages() to output the child pages as LIs.

I also add a class to the LI so it matches the LIs output by list_pages; “.page-item-123”.

It works alright, becoming a normal ul->li structure for the menu, with classes for which link is currently selected etc.

It’s a bummer because I can’t really template a “page with sidebar” and instead the page content needs the sidebar to be in it. And also the menu is done explicitly per parent item and isn’t dynamic either.

I could probably make the menu dynamic by going full PHP rather than Bricks elements, but I didn’t in this case.

Since Bricks templates don’t work like, say, Oxygen, I don’t know how to do this kind of inner page templating so that the sidebar is part of the template and the user is only editing the “main area”. It only does header, footer, and main area.

Thank you for your reply @vigilante .

It is good that you got it sorted even in this “manual” way.

In case someone finds this thread, it is good to leave a tutorial written by Sridhar (Brickslabs) that may help.

Cheers!

That’s a paywalled site so not that helpful.
If there are open tutorials or YouTube walkthroughs, that’s better.

I have searched extensively for a free Youtube video or tutorial but unfortunately I couldn’t find anything. I will try a bit on my own (together with Claude) and I will update this post.

If I can’t make it work, I will buy the yearly subscription to Bricklabs. It is not that cheap but on the other hand, it has a lot of other useful tutorials and how-to’s.

Well, to summarize, the WordPress PHP function wp_list_pages() will list all the children of a given parent. Then you just have to style the output into whatever kind of structure/look you want.

In my case, since I also want the parent link itself to be part of the menu, that is added manually since wp_list_pages() doesn’t include the parent as one of the links.