TL;DR
In order to create WordPress pages with hierarchy, you need to order them (your pages) using the Parent relationship builder; it is a feature available in WordPress and there's no need creating a custom one unless you really have a good reason for that.
Below, a walk through the process as a mean to illustrate how you can achieve that.
What we want to achieve on our website at www.example.com is to structure our site content following the sitemap below:
Home (www.example.com)
About Us (www.example.com/about-us/)
|----- Mission and Vision (www.example.com/about-us/mission-and-vision)
|----- Portfolio (www.example.com/about-us/portfolio)
|----- Services (www.example.com/about-us/services)
Blog (www.example.com/blog)
Events (www.example.com/events)
Contact Us (www.example.com/contact-us)
Here, our focus is on the "About Us" section.
Let's assume we've created successfully all our "About Us" section pages, namely: About Us, Mission and Vision, Portfolio, and Services; they will all be at the same level as seen on the sitemap below (incomplete, showing the About Us section only):
About Us (www.example.com/about-us/)
Mission and Vision (www.example.com/mission-and-vision)
Portfolio (www.example.com/portfolio)
Services (www.example.com/services)
Our next step will be to edit the "Mission and Vision", "Portfolio", and "Services" pages such that they have the "About Us" page as Parent attribute.
There are two (2) main ways you can effect that:
using the "Quick Edit" action link available on page listing hover,
Click on the "Pages" menu available from your Dashboard to have a full page list view.
or
clicking on the "Edit" page action link available next before the previous above (Quick Edit) so as to edit with a full page content view.
Using the first option, "Quick Edit" (1):
- Click on the Quick Edit action link.
- On the resulting screen displayed, select "About Us" as the Parent page for the page subjected to this edit (in the attached screenshot, Mission and Vision page).
- Remember to click on the "Update" button at your right-hand side so as to effect your modification.
A screenshot of the above process for option one (selecting the About Us page as Parent page);
Using the second option, "Edit" (2):
- Click on the Edit action link.
- On the resulting screen displayed, look at your right-hand side (below the "Update" button); you will see a box labeled "Page Attributes". There, select "About Us" from the Parent drop down list for the page subjected to this edit (in the attached screenshot, Mission and Vision page).
- Remember to click on the "Update" button at your right-hand side so as to effect your modification.
A screenshot of the above process for option two (taken at the completion of the steps described);
Repeat the process above for the other pages the need to be nested under the "About Us" page for either (1) or (2), based on your choice for such a purpose.
You will then have the pages nested under the "About Us" page and visible as seen is the screenshot below:
We have then achieve our purpose as captured in the first sitemap above for the "About Us" section pages as in:
About Us (www.example.com/about-us/)
|----- Mission and Vision (www.example.com/about-us/mission-and-vision)
|----- Portfolio (www.example.com/about-us/portfolio)
|----- Services (www.example.com/about-us/services)
For the purpose of the walk through above, it is assumed you already have your Permalinks defined other than Plain (under the Settings menu, accessible from your WordPress Dashboard).