Jump to content

Proof of Concept: ProcessWire Admin Theme Switcher


Recommended Posts

Here's a proof of concept PW Admin Theme Switcher (video and write-up). It shows how versatile PW is.

Since everything in the PW tree is a page, including Admin this was easy to do. I think on the roadmap PW will eventually allow switching between Admin Themes? Anyway, here's how I did it (verbosity below is intentional :P ).

This is not a module but can easily be converted into one. Currently, I don't plan to do so since I suspect it will be overtaken by events (roadmap). Instead, I used the excellent Admin Custom Pages (ACP) module
On load, PW will first check if there is an admin template at /site/templates-admin. If there is none, it will check in /wire/templates-admin/. The file it looks for first is /site/templates-admin/default.php

1. I copied the contents of /wire/templates-admin/ to /site-templates-admin/

2. I modified the contents of default.php as shown below in order to use it as a controller file 

$theme = $pages->get(1424)->theme_selector;//id of admin theme switcher page (the child page)

include($config->paths->adminTemplates . "{$theme->name}/default.php");

3. In order to use ACP in PW 2.3, you have to create a parent and child page. The child page will be rendered in the Admin. 

4. I created pages under Admin as follows:

Admin Theme Switcher

Admin Themes (id#1424)



Moderna, etc.

5. Admin Theme Switcher has nothing of interest. It just enables me to render its child page in PW Admin. Admin Themes has a single Page Reference Field from which only its children can be selected. This field is called theme_selector. Its reference value is the ID of whatever child page of Admin Themes is selected. 

6. Default, Teflon, etc., have various fields to hold data about the themes - author, version, description, screenshot, etc. I populated these as needed.

7. In the above code (#3), 2nd line, I am telling PW where the default.php is. I am appending the name of the selected child page of Admin Themes. Hence, if the current selected page is Minimalist Blue, its PW name, minimalist-blue is included as part of the path. This means I need to create a corresponding folder at that path.

8. I grabbed all my themes in their respective folders including all their files and copied them to /site/templates-admin/. This ensured that there would be no conflict having multiple themes in /site/templates-admin/ folder. I also copied the default PW theme with all its files into a folder called default. I ended up with a structure like this:






9. Of course since the themes were now in sub-folders, paths in their respective default.php would be wrong. I needed to change this, e.g.  in /sites/templates-admin/teflon/default.php, I changed the paths as follows:

$config->styles->append($config->urls->adminTemplates . "teflon/styles/ui.css?v=2");
$config->scripts->append($config->urls->adminTemplates . "teflon/scripts/inputfields.js");
$config->scripts->append($config->urls->adminTemplates . "teflon/scripts/main.js?v=2");
$config->styles->append($config->urls->adminTemplates . "teflon/styles/droppy.css")

<?php include($config->paths->adminTemplates . "teflon/topnav.inc"); ?>

10. Now that all is set up, there's two ways to change the current Admin theme:

a. The template file of Admin Themes has a foreach that loops through its child pages (the theme pages) and outputs the meta data in a I column Grid. Each item has a radio input field to select the theme. On save, jQuery Ajax sends the single value (ID of selected theme) to a simple processor file. The processor file updates the value of the single Page Reference Field (theme_selector) using PW API. Via JSON, the processor then tells jQuery if update was successful and page is reloaded.

b. Alternatively, the theme can be changed by editing the Admin Themes page, selecting a child page (theme) using the single Page Reference Field (theme_selector) and saving. PW will auto-reload the page, applying the new theme.

As you can see, there is no rocket science here.....just an amazing CMS  O0

  • Like 8
Link to comment
Share on other sites

Im not sure I can follow, but did you know you can switch themes with ModulesManager? :-)

Aah, no I didn't know that! I have just checked but and I can see the themes but nothing to click to install. I'll check MM's docs. 

What can't you follow?

Btw, the above is just that...a proof of concept + to show the versatility of PW :)

Link to comment
Share on other sites


I'll post this in MM's thread. I'm experiencing strange behaviour. In version 1.0.7 I see not download button ;). In older installs, I see the download button.

Btw, does MM allow you to switch themes on the fly? This is what this proof of concept allows you to do. It does not install the themes for you.

Link to comment
Share on other sites

No problem, I just commited an fix update regarding openssl check which was a faulty if/then check introduced by a pull request... But has nothing to do with your issue. Sorry to hijack you thread :D

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...