WordPress: Create a Sidebar List of Parent/Child Pages

Recently, I wanted to create a list of pages for a custom WordPress sidebar.

Specifically, I had a “parent” page, sqlworkbooks.com/free-sql-server-quizzes. Under this page, I had more than 30 individual quiz “child” pages, each with a URL like this: sqlworkbooks.com/free-sql-server-quizzes/quiz-batch-mode-in-sql-server

I wanted:

• A sidebar list of selected child pages (clickable URLS)
• The ability to show the sidebar page links only on the parent and child pages (not on the whole site)
• The ability to group the links and change the names
• The ability to add / remove links from the sidebar without having to un-publish or delete the page

In the past, I’ve used the PageMash plugin for this

Long ago, in a WordPress install far away, I used the PageMash plugin for organizing and managing lists of page links like this. But PageMash is one of those plugins that hasn’t been updated in (checks watch) nine years.

I thought about it a little and realized that I could do what I wanted quite easily with built-in WordPress features at this point.

Ingredient 1: Custom menu

Click for a larger image

I tend to think of menus as navigation bars at the top of your site, but they can be much more than that. A menu can be shown in a widget in your sidebar!

Here’s what I did:

1. In WordPress, under Appearance -> Menus, I created a new menu named “Quizzes”
2. I added all the “child” quiz pages to the menu
3. I went through each item and used the down button to expand each item and rename it when I wanted
4. I dragged items around to create groups, and then alphabetized the groups

The dragging was a little bit clunky, but no more clunky than I used to find the PageMash plugin with a bunch of links.

Ingredient 2: Widget controlling visibility

Click for a larger image

I had my menu, but it wasn’t displaying anywhere. (This menu is NOT set as my primary, secondary, or handheld menu.)

I wanted this to show in the sidebar, but only on the “parent” quizzes page and its child pages.

This was very quick to set up:

1. In WordPress, under Appearance -> Widgets, I added a “Navigation Menu” widget to my sidebar
2. I gave it the title I wanted to display
3. I selected the “Quizzes” menu from the dropdown
4. I expanded “Visibility” and configured the widget to only show on my “parent” quizzes page, and checked off the “Include children” box

I tested things out, corrected a few typos on my part and…

Extra credit: changing the icon

I use the WooCommerce Storefront theme. By default, this showed a little “page” icon for each link in the list.

Storefront has Font Awesome configured by default, and I used this guide to add a little custom CSS to change the icon on my menu to a little “lightbulb” icon.

For this example the CSS ended up being:

.widget_nav_menu ul li::before {
    content: "f0eb";
}

That resulted in the screenshot below.

I then decided that I didn’t want an icon, and removed the icon and left padding with:

.widget_nav_menu ul li::before {
    content: none;
}
 .widget_nav_menu ul li, .widget_layered_nav ul li, .widget_layered_nav_filters ul li {
    padding-left: 0em;
}

By the way, my CSS skills are somewhere around “Laborador Retriever with a Keyboard”.

Screenshot of the sidebar widget/navigation menu (with lightbulb icon)

That was it!

I assumed I’d need a plugin or some custom PHP for this — and there’s plenty code samples out there for ways to do this with WordPress functions, but doing things like grouping the links and renaming page titles gets super messy if you go that route.

I was quite impressed at how quick and simple it was to do this with a simple menu + widget setup instead… with a little optional CSS if you wanna dress it up a bit.