Using the customizer on wp-login.php (and similar)

[daronspence]

See related: https://core.trac.wordpress.org/ticket/28650#comment:19

I've been attempting to write a plugin to customize the wp-login.php page using the native customizer controls. So far it seems to work fine except that postMessage settings/controls do not update. I'm not sure why it doesn't work, as it appears that all of the customizer code is loading (maybe it isn't?), but something is getting messed up at runtime. The refresh setting works fine however.

Any ideas as to what might be going on? Is this something that I can help get pushed into core? Since wp-login.php is sometimes a vital part of some sites, it makes sense that it should be available to edit in the customizer. I'm no expert but it seems that this may just be a missing hook that needs to be added to the wp-login.php file?

[valendesigns]

There are plugins for this in the WP directory. Is there not one that fulfills your needs?

[daronspence]

@valendesigns I'm well aware of the various plugins and filters in core to do things with the the login page. However, there were plugins and other things in core that are now in the customizer. If the customizer can access the login page, then I think the necessary scripts should work correctly on the login page.

I'm no expert on the customizer code and debugging the complex JS needed to make it work. If someone points me in the right direction I would be happy to give it a shot though :)

[celloexpressions]

Possible duplicate, or at least related: #22139.

[celloexpressions]

#36788 was marked as a duplicate.

[celloexpressions]

I think we need to investigate why postMessage and Selective Refresh don't work on the login screen, and whether we can/should make it work in core. Sounds like it may be a matter of certain scripts not being enqueued, that could be added to the new login screen hooks and are usually on wp_head.

[westonruter]

They don't work on the login page because it doesn't trigger the wp_footer action, as far as I remember, so the scripts and the data needed for the Customizer preview aren't exported.

[marius2012]

Hey,

I have attached a plugin that replicate the bug: https://core.trac.wordpress.org/attachment/ticket/36788/wp-test-customizer.zip

As far i have seen in the source code, there are some scripts which enable the postMessage and selective refresh that are not loaded there:

wp-includes/js/customize-selective-refresh.min.js
wp-includes/js/customize-preview.min.js

[swissspidy]

wp_print_footer_scripts is already hooked to login_footer. Shouldn't that also handle the customizer JS files?

[marius2012]

Yes, but i think that wp_enqueue_scripts is not called and the scripts dont get loaded in wp-login because of this.

[swissspidy]

wp_enqueue_script( 'customize-preview' ); is being called in WP_Customize_Manager::customize_preview_init() and wp_enqueue_script( 'customize-selective-refresh' ); in WP_Customize_Selective_Refresh::enqueue_preview_scripts().

Both methods also hook into wp_footer and probably should hook into login_footer as well.

Anyway, would need to look more into it to find the actual bug.

[marius2012]

yes, you are right, but i dont think they are hooking into login_footer. i've tried to debug and added some log messages in those methods and they are not fired when loading wp-login.

[lukecavanagh]

@daronspence

What advantages would using the Customizer for being able to modify wp-login.php have over say?

​https://codex.wordpress.org/Customizing_the_Login_Form

[daronspence]

I think the biggest thing is a cohesiveness across WordPress in regards to the Customizer. Since the login page can be/is used for visitors in a large number of cases, it makes sense for that part of WordPress to be accessible via the customizer.

Currently, yes, plugins/themes can modify the login page via the hooks and filters, but things can become more user friendly and intuitive for site administrators to visually see the changes they are making live. Progressive enhancement if you will.

I imagine this could also tie into the eventual idea of launching the customizer from anywhere. I'm not sure how to tie this into that plan though. (I think that project is also pretty far away).

[swissspidy]

I think it would be worth exploring at least making it possible to load the customizer on the login screen without any errors.

Enabling customizing the login screen could be explored in a plugin after that.

[westonruter]

Looks like there's an additional complication for multisite. See #40069.

[westonruter]

#40069 was marked as a duplicate.

[clarm060]

Multi-Site Workaround

So I use this workaround for this however it will not give you a preview of the Login Screen but does make the changes when saved, so if you have your login screen open in an Incognito window you can see the changes on each save and Refresh.

so when you first launch the Customizer you are taken to URL that looks like this: ​https://WebSiteURL.com/wp-admin/customize.php?url=https://WebSiteURL.com/wp-login.php

If you remove the "?url=​https://WebSiteURL.com/wp-login.php" from that URL you will then be able to make changes to the LoginPress Section and save.

The caveat with this is it will only work for the Top level site and will not change sub site login pages. To change those you will have to Add your subsite to the link: ​https://WebSiteURL.com/*linemx*/wp-admin/customize.php

[celloexpressions]

Thinking about this again, I'm not sure if the customizer should "work" on the login screen by default. That essentially moves in the direction of customizing wp-admin screens with the customizer, which may be out of scope for core.

#29071 suggests improvements to allow the customizer to be loaded in standalone contexts and may be a better approach for the login screen.

[earthman100]

This ticket was helpful background info to help me overcome the complications presented with offering a preview of the login page in the customizer. Thanks for posting!

Here is a Solution I created that implements this, in the form of an MU Plugin lightweight login form customizer:

​https://gist.github.com/EarthmanWeb/67c158065f091c77e6a81c03ac2a8286