Style your signup page

Style your signup page





Ron and I had a quick idea and a mini challenge for the day. The result is this quick and nifty plugin that left me wondering why nobody had done it yet.

[download#13]

This plugin add the css styling needed for the wp-signup page so the form looks a bit better. It should work on any theme, barring any funky styling. I tested it on four themes and only one looked wonky (because they used display:inline on #content). But even that looked better than nothing.

This way, you can fiddle around with themes on the main blog without worrying about future theme upgrades or manually adding in css to the theme.

I also included the default css that is hardcoded in wp-signup should you wish to edit the plugin and override it.

Added bonus: this will only add itself to the signup page. It won't be added to any other page on the site. You can put it in the mu-plugins folder, or the plugins folder. It'll still work.

10 Comments
  • John Turner
    Posted at 18:43h, 23 September Reply

    That’s cool, I do the exact same thing to modify the sign up page. I use jQuery to change the text and layout as well. Example

    //wp-signup.php
    if(location.pathname == ‘/wp-signup.php’) {
    jQuery(“label[for=’password’] ~ p:first”).css(“visibility”,”hidden”);
    jQuery(“label[for=’password’]”).before(“”);
    jQuery(“label[for=’password’]”).css(“display”,”inline”);
    jQuery(“label[for=’blogname’]”).html(“Website Domain:”);
    jQuery(“label[for=’blog_title’]”).html(“Band Name:”);
    jQuery(“#blogname”).css(“width”,”400px”);
    jQuery(“#blogname”).css(“text-align”,”right”);
    jQuery(“label[for=’blog_public_on’] “).css(“visibility”,”hidden”);
    jQuery(“label[for=’blog_public_off’] “).css(“visibility”,”hidden”);
    jQuery(“label[for=’blog_title’] ~ p:first”).css(“display”,”none”);
    jQuery(“.suffix_address ~ strong:first”).css(“display”,”none”);
    }

  • Ted Mann
    Posted at 22:22h, 23 September Reply

    Are there any good plugins you know of that make it easy to change the core functionality of registering for a WPMU site? Specifically, I’m looking to figure out how to add an option where you specify which MU blogs you want to be added to.

    • venug
      Posted at 23:45h, 21 July Reply

      I w’d like to have the same option. Did you get any solution?

  • kunal
    Posted at 08:14h, 26 September Reply

    Does this work with Buddypress too?

    Do you have any examples of really great registration pages?

    Thanks!

    • andrea
      Posted at 09:45h, 22 July Reply

      BuddyPress has its own registration page that pulls from the theme itself.

  • Opmaak toevoegen aan je WordPress MU signup pagina : WordPress Dimensie
    Posted at 15:52h, 28 September Reply

    […] informatie vind je in hun blogpost Style your signup page. De plugin kan in zowel de mu-plugins folder als in de reguliere plugin folder ge├»nstalleerd […]

  • Scott Webb
    Posted at 13:17h, 16 November Reply

    Nice job! Very very nice.

  • Kobby Owusu
    Posted at 09:56h, 01 November Reply

    Hi guys,

    Love this but I need help with a tweak.

    I am trying to use jquery to add a class to the submit button on the register page, so it is better styled.

    The plain buttons for my theme is horrible….

    Added a script block after the Style block you have and added this;

    jquery(‘input[“name=”submit”]’).addClass(‘button’);

    Didn’t work. Any thoughts?

    • andrea
      Posted at 10:33h, 01 November Reply

      I’d just add the extra css to the plugin itself.

      • Kobby Owusu
        Posted at 11:40h, 01 November Reply

        That was my initial approach but realised the CSS to produce the button effects spans a lot of lines and some classes come from a CSS framework file..

        It still makes sense to use this approach, add the CSS to the plugin itself, so I will keep at it.

        Thanks for the quick response.

Post A Comment