I'm trying to make the login-page prettier, but there are several things that makes it difficult (read: impossible).

I know that there are a bazillion plugins that can do some of the things, - but they're all just 'painting over' WordPress' standard login screen. And I would like to make it clean, - instead of converting my login into some patchwork-project.

Can I write my own markup for the login screen, without modifying the core code-base?

---

What I want to change

Here's a list of most of the things that I'm trying to do. Some of which I have found ways to make. And most of them are quite terrible...

1. Logo: The logo on the login-screen links to #. I want it to link to the main login-screen (so it can be pressed from the 'Forgotten login'-page.

2. Username-text: Be able to change 'Username or Email' to 'Email' without having to use the gettext-hook and write a whole function for that small change.

3. Better code for input-fields: Here's what the code looks like for the labels/input-fields:

<p>
    <label for="user_login">Email<br>
    <input type="text" name="log" id="user_login" class="input" value="" size="20" autocapitalize="off"></label>
  </p>

... I want to add a class-name to the paragraph, remove the <br>, add a span around 'Email'. And maybe even leave the label blank, and moving the 'Email'-text outside the`-tag (for custom styling).

4. Better return-text on forgotten password-page: On the 'Forgotten password'-page, in the bottom, then this link here links back the main login-page:

<p id="nav">
    <a href=".php">Log in</a>
</p>

... It should either be 'Back to login' or 'Return to login-screen' or something that makes more sense.

5. Be able to changing the order of things: I want to have the option of moving the 'Forgotten password'-link up above the 'Log in'-button.

I'm trying to make the login-page prettier, but there are several things that makes it difficult (read: impossible).

I know that there are a bazillion plugins that can do some of the things, - but they're all just 'painting over' WordPress' standard login screen. And I would like to make it clean, - instead of converting my login into some patchwork-project.

Can I write my own markup for the login screen, without modifying the core code-base?

---

What I want to change

Here's a list of most of the things that I'm trying to do. Some of which I have found ways to make. And most of them are quite terrible...

1. Logo: The logo on the login-screen links to #. I want it to link to the main login-screen (so it can be pressed from the 'Forgotten login'-page.

2. Username-text: Be able to change 'Username or Email' to 'Email' without having to use the gettext-hook and write a whole function for that small change.

3. Better code for input-fields: Here's what the code looks like for the labels/input-fields:

<p>
    <label for="user_login">Email<br>
    <input type="text" name="log" id="user_login" class="input" value="" size="20" autocapitalize="off"></label>
  </p>

... I want to add a class-name to the paragraph, remove the <br>, add a span around 'Email'. And maybe even leave the label blank, and moving the 'Email'-text outside the`-tag (for custom styling).

4. Better return-text on forgotten password-page: On the 'Forgotten password'-page, in the bottom, then this link here links back the main login-page:

<p id="nav">
    <a href="https://example/wp-login.php">Log in</a>
</p>

... It should either be 'Back to login' or 'Return to login-screen' or something that makes more sense.

5. Be able to changing the order of things: I want to have the option of moving the 'Forgotten password'-link up above the 'Log in'-button.

• login
• wp-login-form

Share Improve this question asked Aug 4, 2019 at 15:21 ZethZeth 92822 gold badges1313 silver badges4343 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Wordpress has a Codex page on this exact subject: https://codex.wordpress/Customizing_the_Login_Form

The Codex is always a good place to start!