Add a login form on your Front-end & customizing login logo without plugin

Add a login form on your WordPress Theme:-

Are you using WordPress as a cms or as a community site? If yes, it can be a cool idea to display a login form in your blog sidebar or on a specific page. Here’s a simple code to do it.

Nothing hard at all. Simply paste the following code where you’d like to display your login form. (For example, on your blog sidebar, or on a page template)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php if (!(current_user_can('level_0'))){ ?> 
<h2>Login</h2>
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" />
<input type="password" name="pwd" id="pwd" size="20" />
<input type="submit" name="submit" value="Send" class="button" />
 <p>
       <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
       <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
    </p>
</form> 
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>
<?php } else { ?>
<h2>Logout</h2>
<a href="<?php echo wp_logout_url(); ?>">logout</a><br />
<a href="http://XXX/wp-admin/">admin</a>
<?php }?>

Here in above shown code , we have used some methods which description is given below.

get_option : A safe way of getting values for a named option from the options database table. If the desired option does not exist, or no value is associated with it, FALSE will be returned.

wp_specialchars : Which converts a number of special characters into their HTML entities.

wp_logout_url : This Template Tag returns the URL that allows the user to log out of the site.

Customizing WordPress Login Logo:-

WordPress login logo looks nice, but sometimes you may want to change it, for example when building a site for a client.

The only thing you have to do is to copy the following piece of code, and paste it on your functions.php file:

1
2
3
4
5
6
7

my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.jpg) !important; }
    </style>';
}
 
add_action('login_head', 'my_custom_login_logo');

Your Backend should look like this:-