ProcessWire Admin Theme Strategies

This tutorial will demonstrate different strategies to edit the ProcessWire admin theme, or create your own.

ProcessWire Admin Theme Strategies

ProcessWire’s admin area allows web designers to create website page hierarchy, data fields for page templates, administer users, edit module settings and toy with a host of other site settings. For site editors, the ProcessWire (PW) admin is a one stop content creation area; where text is input, images uploaded and pages created.

Though the ProcessWire admin theme is attractive, simple and clear, it’s sometimes appropriate to edit the admin to add features or change the look and feel, say if you were white-labelling the site for a client.

ProcessWire Admin Theme Strategies

Lets look at some of the strategies and their use cases to edit the ProcessWire CMS admin for your project.

Existing Admin Themes and Their Settings

For small changes you might find that the Default and Reno themes (which ship by default with PW), as well as the new AdminThemeUiKit (currently in development) have what you’re looking for. They each use settings for changing styles and layout, such as showing user icons, altering position of navigation, field styles, colours and so on.

ProcessWire Admin Theme StrategiesProcessWire Admin Theme Strategies

It’s worth noting that admin theme’s can be set per user by editing a user’s settings in access > user > [yourusername]. This gives administrators the flexibility to change what different types of users see and have access to.

ProcessWire Admin Theme Strategies

Creating New Admin Themes

To create your own theme I would recommend one of two approaches:

  1. duplicate and edit an existing admin theme module
  2. create a new module theme extending PW’s AdminThemeFramework class

1. Duplicate Theme

Admin themes in PW are actually modules that can be installed, distributed easily and have site settings. Let’s say a client wants to white-label the admin by changing the theme colour palette and logo, we could duplicate the default theme at wire/modules/AdminTheme/AdminThemeDefault to our site modules folder site/modules/ and by changing the “follow all” to the same new name you can start using your new theme.

  • folder name
  • AdminThemeDefault.module file name
  • AdminThemeDefault.module php class name

Note: The default theme uses Sass css preprocessing. Want to add your own CSS and JS to the theme? Go to the default.php file where you’ll find the main page html.

2. New Theme Module

If you’re looking to change the style and functionality of the PW admin extensively, it might be worth creating a blank theme module by creating a new folder in site/modules and creating a .module file and class of [YourModuleName].

By extending AdminTheme or the AdminThemeFramework class and implementing both Module and ConfigurableModule, your theme class now has access to ProcessWire’s built in API functionality and you’ll be able to install it as a new admin theme module. From here you can add your own module settings, frontend code, and layouts.

Here are some useful resources on ProcessWire modules:

  • ProcessWire Admin Theme Strategies

    A Beginner’s Introduction to Writing Modules in ProcessWire

    In this tutorial we’re going to learn how to create and install ProcessWire modules, look at their requirements, and explain how to use ProcessWire hooks to…
  • ProcessWire Admin Theme Strategies

    Extending the ProcessWire Admin Using Custom Modules

    In this tutorial we’re going to look into extending ProcessWire’s admin using custom modules. With three example modules I will give you small a taste of the…

Create New Admin Using the PW API

I wouldn’t advocate this unless you had a very interesting use case, however you could create an Admin from scratch, without the help of any other classes available to you, by using the PW API (an example use case might be interacting with the admin using webVR).

By creating a new template file within your site theme site/templates/yourTempate.php and adding it to a page in PW’s admin, you can add code to the template to add login, page editing and another functionality via the PW API.

For example, in a past project I required site users to register and add content with the same site layout and styling of the rest of the site but without the bells and whistles of the PW admin. In this instance I decided to write the small amount of functionality within the templates using the PW API to login, save users and content to the database.

Conclusion

Within this overview we’ve looked at different ways to create custom ProcessWire admins or starting points to create your own.

As always, for more tutorials on ProcessWire check out our resources on Tuts+ and visit the PW forum for more topics and support.