Skip to content

Instantly share code, notes, and snippets.

@BODA82
Last active July 15, 2020 17:42
Show Gist options
  • Save BODA82/09f297be103c215715ce7ecda5870080 to your computer and use it in GitHub Desktop.
Save BODA82/09f297be103c215715ce7ecda5870080 to your computer and use it in GitHub Desktop.
Custom WordPress Login Page
<?php
/********************************************************************************************
Example for customizing the WordPress login screen using your theme's functions.php file.
For @halo-diehard on wordpress.org forum:
https://wordpress.org/support/topic/codex-unclear-regarding-custom-login-page/
Relevant CODEX doc:
https://codex.wordpress.org/Customizing_the_Login_Form
*******************************************************************************************/
/**
* Change the Login Logo
*
* What this does:
* - Writes a style tag to the <head> of the login page, overriding the default styles that display
* the WordPress logo.
*
* What to edit:
* - background-image: `get_stylesheet_directory_uri` will print the URI for the (child) theme, then
* change `/images/site-login-logo.png` to the path of your custom logo file.
* - For example, if you have the logo file in `/wp-content/themes/child-theme/images/my-logo.png`,
* then `background-image` would be:
* background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/my-logo.png;
* - width: the width of your custom logo file
* - height: the height of your custom logo file
* - background-size: the width/height of your custom logo file
*
* Additional CSS rules can be added here for further modification. As the CODEX suggests, if you have
* a lot of CSS modifications, it might be easier to create a custom CSS file with all your rules, then
* enqueue it via the `login_enqueue_scripts` hook.
*/
function my_login_logo() {
?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
width: 320px;
height: 65px;
background-size: 320px 65px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'my_login_logo' );
/**
* Change the Login URL
*
* What this does:
* - Overrides the existing logo hyperlink with a URL of your chosing.
*
* What to edit:
* - If you want to use the homepage URL for the site, leave as is: return home_url();
* - If you want to link to any other address (for example's sake, Google): return 'https://google.com'
*/
function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
/**
* Change the Login Title Attribute
*
* What this does:
* - Overrides the title attribute on the logo hyperlink
*
* What to edit:
* - Change "Your Site Name and Info" to whatever you'd like the title attribute to read.
*/
function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment