Home Add-ons Creating Custom Admin Pages and Sub-pages using WP Ultimo: Admin Page Creator

Creating Custom Admin Pages and Sub-pages using WP Ultimo: Admin Page Creator

Last updated on Oct 16, 2023

While WordPress makes it really easy to add content to the front end of sites, creating pages and sub-pages on the admin side requires some basic coding skills. WP Ultimo: Admin Page Creator aims to bring that same ease of use of the front end to the back end of your network sites.

Why use Admin Page Creator?

Maybe you want to offer a custom page on your clients’ admin panel with tutorials, maybe you want to add a custom page with FAQs and a contact widget. The possibilities are endless with Admin Page Creator, and that’s what we will explore in today’s tutorial.

Creating a Tutorials Page with an embedded YouTube playlist is now possible!

Here’s the final result on the user’s Dashboard Panel

Creating your first Custom Admin Page

After installing and activating WP Ultimo: Admin Page Creator, head to your network admin menu and go to Admin Pages.

Custom Admin Pages list on the Network Admin

You will see a list of all the admin pages you have created so far (as this is your first visit, the list will be empty). Go ahead and click Add new Admin Page. You’ll be redirected to the Admin Page editor.

The elements of a Custom Admin Page

On the Admin Page editor, you’ll have a number of different options to customize your page.

Page Title

This is the title that will be displayed at the top of the page, not the admin menu label.

Enter a Page Title

Content Type Selector

WP Ultimo: Admin Page Creator gives you two options when it comes to the content of the page: you can either use the default WordPress WYSIWYG editor or switch to an HTML editor.

If you are not familiar with HTML, stick to the default WordPress editor. You’ll be able to edit the contents of the page just like you would with a normal Post or Page.

Using the default WordPress WYSIWYG editor

Using the HTML editor option, with syntax highlight and error alerts

Menu Options

Over on the side, on the General Options meta-box, you’ll be able to configure the menu type, label, and much more.

Menu Types

Your new custom admin page can have two different menu types: top-level menu and submenu.

A top-level menu page, as the name suggests, will add your newly created page to the admin menu alongside the default WordPress pages.

If you select the top-level option, you’ll be able to select the menu order and a menu icon as well.

If you want to make this page a sub-menu page, you’ll be able to select a parent page to attach this page to. You can add your custom page to default WordPress pages or to your top-level custom admin pages.

Completely customize the menu item for this Custom Page

You can also add this page as a sub-menu of other menu pages, including your own custom top-level ones.

Advanced Options

You should be able to add all sorts of content to your custom admin pages. That includes CSS rules and files, JavaScript, and external libraries as well. You can do that using the Advanced Options Tab.

Custom CSS

On the CSS tab, you can add your own custom CSS code, as well as import CSS files from remote sites (like CDNs, Google Fonts, etc).

Custom CSS is also supported. You can also include external style files!

Custom JavaScript

The same is valid for JavaScript. You can add external libraries to use on your custom JavaScript code.

Add your own JavaScript code!

Permissions

Also in the Advanced Options, you’ll be able to select which sub-sites will have access to this page. This is useful if you are planning to serve different exclusive content to different plan tiers, for example.

You have total control over where this page is going to show up

Important: Both conditions must be met for the page to be displayed. That means that if the user is a client of a given plan, but does not have one of the selected roles (or vice-versa) the page won’t appear on their panel.

Active

If you want to disable a custom admin page without deleting it or messing with the permissions, just uncheck the Active option.

Deactivating a top-level page will automatically deactivate all the sub-pages attached to that parent page.

The final result on the user panel!