Proof of Concept: ProcessWire Admin Theme Switcher

[kongondo]

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  ).

 
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)

Default

Teflon

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:

/site/templates-admin/default/

/site/templates-admin/teflon/

/site/templates-admin/moderna/

/site/templates-admin/appy/

etc.

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 

[Soma]

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

[kongondo]

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

[Soma]

In MM there's a "download" button on themes that have a url, just click download and voila.

[kongondo]

Soma,

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.

[Soma]

I'm not sure. It works well:

It just downloads and move or replaces the site/templates-admin/ folder.

[kongondo]

Solved the problem...I hovered on "more" (that's what I see instead of "download") and MM told me what the problem was openssl extension not loaded Sorry for wasting your time!

[Soma]

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

[kongondo]

No worries. Working now..

[ryan]

Nice job Kongondo! Some very cool things going on in that video too. 

[kongondo]

Thx Ryan. I've said it before - with PW, we are spoilt for choice!