1

This may be a 'noob' question, but...

It doesn't seem possible to modify the WP-Login page via PHP (eg. add the get_header() code or new DIVs) to match the site theme. That is, without hacking the core, of course. (If there -is- a way to do this, please let me know!) And -yes- I am aware you can create a login template, but you can never get -rid- of WP-Login because it seems necessary for various core login/logout functions. (Again, if this has changed with WP4, please let me know!)

So, I've taken to simply adding the DIVs I want via jQuery(). Nothing extravagant... just a 'header' and 'footer' to match the site theme.

My question is: are there any reasons to -not- do this? ie. security concerns or other problems I haven't considered? I ask because there must be a good reason why this is the -one- place in WP where you can't use a 'template' page and that seems odd to me.

TIA

1
  • 1
    I recommend keeping it simple, add the style using CSS! You can provide a simple branded experience without chiding or breaking anything!
    – orionsweb
    Apr 28, 2018 at 0:48

2 Answers 2

0

Well, you can have custom login/logout actions without visitors seeing WP admin enviroment. So I am not answering "modify WP-login page with JS" question, but letting know there is easier solution

You can add this form anywhere to you template, and voila, the login form!

<form name="loginform" id="loginform" action="<?php echo site_url('/wp-login.php') ?>" method="post">
<table class="logtable">
<tr>
    <td class="first"><label for="user_login"><?php _e('Username:','your-theme') ?></label></td>
    <td class="second"><input type="text" name="log" id="user_login" class="input" value="" size="20"></td>
</tr>
<tr>
    <td class="first"><label for="user_pass"><?php _e('Password:','your-theme') ?></label></td>
    <td class="second"><input type="password" name="pwd" id="user_pass" class="input" value="" size="20"></td>
</tr>
<tr>
    <td class="remember" colspan="2">
        <label><input name="rememberme" type="checkbox" id="rememberme" value="forever"> <?php _e('Remember me','your-theme') ?></label>
    </td>
</tr>
<tr>
    <td class="submit" colspan="2">
        <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="<?php _e('Log in','your-theme') ?>">
        <input type="hidden" name="redirect_to" value="<?php echo home_url() ?>">
    </td>
</tr>
</table>
</form>

You want user to log in, but you don't want him to see admin enviroment. So you can "block" him from admin entirely (and redirect him to home page).

function blockDashboard() {
    $file = basename($_SERVER['PHP_SELF']);
    if (is_user_logged_in() && is_admin() && !current_user_can('administrator') && $file != 'admin-ajax.php'){
        wp_redirect( home_url() );
        exit();
    }
}
add_action('init', 'blockDashboard' );

And log out link? Easy.

<p class="logout">
<?php wp_loginout( home_url() ) ?>
</p>
1
  • Thanks, I'm aware of this. However, experienced WP users always somehow find their way to the wp-login.php URL. So I prefer to simply modify wp-login rather than creating new page. (To tighten this up, I have tried disabling wp-login via .htaccess and it breaks WP. Apparently WP needs that page to be visible?)
    – jchwebdev
    Jun 3, 2015 at 17:16
0

I'm using something like this:

<?php
add_action('login_header', function () {
    wp_dequeue_style('login');
    wp_deregister_style('login');
    ?>
    <!doctype html>
    <html <?php language_attributes();?>>
        <?php get_template_part('templates/head');?>
        <body <?php body_class();?>>
        <!--[if IE]>
            <div class="alert alert-warning">
            <?php _e('You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.', 'sage');?>
            </div>
        <![endif]-->
        <div class="container-fluid">
            <div class="row">
            <?php
    do_action('get_header');
    get_template_part('templates/header');
    ?>
            </div>
        </div>
        <div class="wrap container w-75" role="document">
            <div class="content row">
                <main class="main">
        <?php
});

add_action('login_footer', function () {
    ?>
        </main><!-- /.main -->
      </div><!-- /.content -->
    </div><!-- /.wrap -->
    <script type="text/javascript">
        jQuery("body").addClass("custom-background");
        //jQuery("#login-css").remove();
    </script>
    <?php
    do_action('get_footer');
    get_template_part('templates/footer');
    wp_footer();
    ?>
  </body>
    </html><?php
});

You can remove login.css file with uncommenting the script

jQuery("#login-css").remove();

but after that you'll need to re-style the login box.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.