This tutorial will demonstrate different strategies to edit the ProcessWire admin theme, or create your own.
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.
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.
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.
Creating New Admin Themes
To create your own theme I would recommend one of two approaches:
- duplicate and edit an existing admin theme module
- create a new module theme extending PW’s
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
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:
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.
Within this overview we’ve looked at different ways to create custom ProcessWire admins or starting points to create your own.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post