Admin

With the admin extension, we can easily and quickly create elegant wordpress admin pages. A few lines of code will get you up and running. It can’t get easier than this, period. Includes helpful action and filter hooks to customize it for our needs.

Overview

Dependencies

This extension requires the Form extension.

You DO NOT NEED to require the above extension(s) in your composer.json. It will automatically be loaded when you require this extension.

How to install

Make sure you have read the extension installation guide first.

You can choose to install the extension by modifying the composer.json file and using the terminal OR instead you can do a one liner in the terminal. In both cases, make sure you cd into the boots directory prior to using the terminal commands.

A. Installing the extension via composer.json and terminal.

Place the following inside the “require” block of the composer.json file.

Now run $ composer install  in your terminal. Thats it!

— OR —

B. Installing the extension via the terminal as a one liner.

Usage

Lets start off by setting up a structure of our plugin, call the admin styles and scripts, and create an empty admin page to get started.

Thats three lines (highlighted) to launch an admin page, easy right? All the heavy lifting is done by the extension, so you, as a plugin or theme developer can focus on your project seamlessly.

By now, you may be familiar with the basic plugin/theme class structure. Line 28 is required before hooking into the admin_menu hook so that scripts and styles could be setup in the background. Line 33 is the bear minimum to create an admin menu as well as an empty options page associated with it.

The first argument (menu slug) is required besides 3 optional arguments which are the 1. label of the menu, 2. page title for the menu and 3. permissions the admin user should have.

The label and page title, by default, is set to the plugin/theme nick and the permission is set to manage_options unless overridden by you.

You may be wondering what benefit will it be to have an empty options page. In a real world plugin/theme, we need at least one option an administrator could set. Lets talk about that below.

Adding a form field

To add a form field to our admin options page, we can use any of the fields available by the form extension. If those fields are not enough, we can add a callback function to display any html.

Lets add a text field as an example to see how we can achieve this.

Adding custom html

We can also add custom html to the admin options page. To do so, we just need to set the field type to ‘_’ (underscore) and pass a callback function as the second argument. The callback argument can be in any format that works for a wordpress hook.

my_custom_html should echo the html (string).

Multiple fields in a go

As an alternate, we can also add multiple fields, callbacks in a single call to the add method. Here is how,

Grid layout

As an added layout, we can display the page as a grid in a masonry fashion. This is done by the help of AwesomeGrid. The page also becomes responsive to the screen size and works quite well.

The grid is best served when we are serving many fields of different structure. Here is how to apply the grid layout,

Sections/Tabs

We can also separate the fields into sections/tabs. Doing so, does not take much effort. Lets see how we add a couple of sections to our page,

Pages

We may be also willing to separate the admin across different pages and sections in them. Lets add a couple of admin pages to our menu.

Hooks - Customization

We can avail some useful hooks, actions and filters to enhance and customize it to our needs. Lets dig into them.

Filter options

When we click the save button, the form data gets saved to the database via ajax. Prior to this, we can hook into the posted data and filter it. We may need to do so for 1. Processing some data but not wanting to save it, or 2. Validating user input.

The filter can be used as follows,

Filter ajax response

We can also opt to customize the ajax response before being sent to the browser (javascript ajax callback).

Enqueue scripts and styles

If we need to enqueue custom scripts and/or styles to our admin pages, we may as well do so by enqueuing them in an action hook for our menu slug.

enqueue_custom_stylesheet and enqueue_custom_javascript should be callback functions that enqueue styles and scripts respectively.

Custom admin template/layout

An added feature is to use our own template for our admin pages as follows,

You should return bool true only if you have rendered the template, otherwise false should be returned so that the default template may be rendered.

Khan

A die hard programmer!