Do you find the default way WordPress displays your pages boring? Well. So do most of us, today we are going to learn how to create and manage a drag and drop page tree in WordPress.

Most of us are familiar with the ability to sort and move content around by dragging and dropping.  Right?

Sometimes we wished we could do the same in our WordPress site, however, WordPress does not allow us to do that natively.

By default we have something like this.

Wordpress default pages list

With plugins we can customize our content, create a tree page view and many more ways to our liking just to make our lives easier while managing our websites.

To create our tree page view we shall use a plugin called Nested Pages.  A tool that allows you manage your pages or just about any content type using a drag and drop interface.

Nested Pages

nested pages main

Installing nested pages.

Install Nested pages

Install Nested Pages which every way you prefer.

Once it is installed and activated, by default the plugin will create a tree page view of your pages.

Just head to your pages, and take a look for yourself.

nested pages

By just installing and enabling Nested Pages we have dramatically transformed the default look of our pages.

If we want to do more, say create a tree page view for our posts or any other content types in our WordPress website then follow along.

Let us go to the settings of Nested Pages

Nested Pages settings can be found on the left menu.  Go to Settings, and then click Nested Pages.

The alternative route is going to plugins look for Nested Pages from the page and then click Settings as seen in the image above.

nested pages - settings

We have the General settings and Post Types.

From the general settings you can: change the default Menu Name that comes with the plugin.

nested pages -settings inside

Post Types

nested pages - post types

As we noted earlier, when you install Nested Pages, it only creates a tree page view for the Pages.

It is from the Post Types in Nested Pages Settings that you can choose to create tree page view for other content types on your website.

Check the check box besides the Post type you want to enable. On the right of the post type, Click Settings:

Nested pages - Page settings

Check all the areas that apply to you.

  • To replace the default menu.
  • Remove or hide the Default Pages Link – the Default pages link as you will see later links to the default view of your pages without the tree or nested pages.
    back to default pages
  • Disable sorting – Nested Pages allow us to sort our pages by dragging and dropping them – you can disable that from here.
  • Disable Nesting
  • .Assign Page for Listing
  • Configure sorting by Authors.

You can explore this if the default options don’t work for you.

Okay now that we know how to change and modify settings, let us explore our newly nested pages.

Sorting pages

To sort pages, hover over the three lines next to the page name you want to move.

nested pages - sub page

When you drag it up, the page will be moved up,

Drag it to the right to create a nested page – this is where the tree page view name comes from.

From the image above you can see we are nesting the Contact page to the About us page.

One thing to note, if you are going to use the Nested Pages menu, how you arrange your pages here will be the same hierarchal structure the menu items will take. The nested pages will become the sub menu items.

If you want to take it one step back, just drag it back to the left.

On the right of each page are more options;

Nested pages -options beside page

The three dots, when clicked will bring a drop down with more tools you can perform with the page;

Nested pages - dotted options

From here you can Add a child link, add a child page or choose placement.

The last option – Clone, allows you to clone or make a copy of that page. This is a pretty decent not so much talked of feature of the Nested Pages plugin, I can’t remember how many times I am building a website that I need to create a new page with the similar page structure as an existing one. With this you can duplicate any page without need of any extra plugin.

Quick Edit

Nested pages - quick edit link

When you click Quick Edit, a popup screen appears that will look like this.

Nested pages - add pages

As you can see, the options are the same as the old quick edit; however, this one is enhanced with a few more options are added to this.

Hide Nested Pages,

hide nested pages

Check this option if you want to Hide the page from the pages view. You can always view it from the Pages menu > view Hidden Pages.

From here, you can also choose to add or not add the page to the Menu.

menu options hide nav

Click Menu Options > Hide in Nav Menu – if you do not want the page to show in the Main Menu.

nested page - view edit

The last two item are View and delete the page.

How to add a menu or modify a menu with Nested Pages

As you have seen so far, Nested Pages does more than just allow us to create tree page view of the different content types on our WordPress website.

With this plugin you can manage how your websites navigation will appear right within your pages. Cool isn’t it.

To View the menu, Go to Appearances, then Menus.

From the drop down box, choose Menu name you set earlier, in my case I left the default Nested Pages.

Nested pages - Menu

You will notice that by default the Menu is empty.

empty menu

Don’t panic, go back to your pages, and on the Top right Corner, you will see Sync Menu, Click it to sync.

sync menu

Then go back to the Menu’s to confirm that our menu items have been populated.

after sync menu

There you go From the Menu settings now you can assign your Menu.

One last thing that you can do with Nested Pages is create multiple pages in one go.

Nested page - Add multiple

I think this is a decent feature if you are setting up a new website.

Being able to change the default way WordPress works is great for creating a working environment we love.

With Nested Pages we can shake up the default looks with a tree page view of your WordPress page structure.