Skip to content

Instantly share code, notes, and snippets.

@michaeldozark
Last active July 29, 2016 19:37
Show Gist options
  • Save michaeldozark/0e99184527f0ced712d7 to your computer and use it in GitHub Desktop.
Save michaeldozark/0e99184527f0ced712d7 to your computer and use it in GitHub Desktop.
Style the login screen. Make sure to read my comment below as well.
<?php
/**
* Login Functions
*
* Functions and filters that run only on the WordPress login screen.
*
* @package Slimline
* @subpackage Login
*/
if ( ! defined( 'ABSPATH' ) ) exit; // exit if accessed directly
add_action( 'login_head', 'slimline_login_logo' ); // replace the default login logo with the uploaded custom header | inc/login.php
add_filter( 'login_headertitle', 'slimline_login_headertitle' ); // replace login logo title with site name | inc/login.php
add_filter( 'login_headerurl', 'slimline_login_headerurl' ); // replace login logo url with home url | inc/login.php
/**
* slimline_login_headertitle function
*
* Replaces the default WordPress login logo title attribute with the site name.
*
* @return string Site name
* @uses get_bloginfo() to return the blog `name` property
* @uses esc_attr_x() to sanitize the name for inclusion in an html attribute and allow for translation
* @since 0.1.0
*/
function slimline_login_headertitle() {
return esc_attr_x( get_bloginfo( 'name' ), 'link title', 'slimline' );
}
/**
* slimline_login_headerurl function
*
* Replaces the default WordPress login logo href attribute with the home url.
*
* @return string Home url
* @uses home_url() to return the root URL for the site
* @uses esc_url() to sanitize the url
* @since 0.1.0
*/
function slimline_login_headerurl() {
return esc_url( home_url( '/' ) );
}
/**
* slimline_login_logo function
*
* Outputs CSS that styles the logo based on the uploaded header image.
*
* @return string CSS for styling the logo
* @since 0.1.0
*/
function slimline_login_logo() {
echo "
<style>
.login h1 a {
background-image: url( '" . trailingslashit( get_stylesheet_directory_uri() ) . "images/logo.png' );
background-size: 100%;
height: 116px;
left: 50%;
margin-left: -137px;
padding-bottom: 28px;
position: relative;
top: 0;
width: 273px;
}
</style>
";
}
@michaeldozark
Copy link
Author

michaeldozark commented Sep 1, 2014

When using this, pay special attention to the slimline_login_logo function (the last function). You will need to edit the CSS properties like so:

  • background-image folder and file name should be changed from "images/logo.png" to whatever you are using.
  • width and height should match the width and height of the image you are using.
  • margin-left should be half the width of the image.
  • padding-bottom should be adjusted to whatever looks best with the image.

If your theme uses a custom logo function, you can make the function use the user-selected logo. For example, if you are using the default WordPress custom header functionality, you can edit the function to read as so:

/**
 * slimline_login_logo function
 *
 * Outputs CSS that styles the logo based on the uploaded header image.
 *
 * @return string CSS for styling the logo
 * @uses get_custom_header() to retrieve header image info
 * @since 0.1.0
 */
function slimline_login_logo() {

    $logo = get_custom_header();

    if ( empty( $logo ) )
        return; // stop processing if there is no custom header to use

    $margin_left = ceil( $logo->width / 2 );

    $padding_bottom = ceil ( $logo->height / 2 );

    echo "
        <style>
            .login h1 a {
                background-image: url( '{$logo->url}' );
                background-size: 100%;
                height: {$logo->height}px;
                left: 50%;
                margin-left: -{$margin_left}px;
                padding-bottom: {$padding_bottom}px;
                position: relative;
                top: 0;
                width: {$logo->width}px;
            }
        </style>
    ";

}

If you are using an Elegant Theme, this will probably work (make sure to replace vertex_logo with the correct option for the specific theme):

/**
 * slimline_login_logo function
 *
 * Outputs CSS that styles the logo based on the uploaded header image.
 *
 * @return string CSS for styling the logo
 * @uses et_get_option() to retrieve header image url
 * @uses getimagesize() to retrieve header image width and height
 * @since 0.1.0
 */
function slimline_login_logo() {

    $logo_src = et_get_option( 'vertex_logo' );

    if ( empty( $logo_src ) )
        return; // stop processing if there is no custom header to use

    if ( 0 === strpos( $logo, '//' ) ) {
                $logo = ( is_ssl() ? 'https:' : 'http:' ) . $logo;
    } // if ( 0 === strpos( $logo, '//' ) )

    $logo_size = getimagesize( esc_url( $logo ) );

    $margin_left = ceil( $logo_size[ 0 ] / 2 );

    $margin_bottom = ceil ( $logo_size[ 1 ] / 2 );

    echo "
        <style>
            .login h1 {
                height: {$logo_size[ 1 ]}px;
                left: 50%;
                margin-left: -{$margin_left}px;
                margin-bottom: {$margin_bottom}px;
                position: relative;
                top: 0;
                width: {$logo_size[ 0 ]}px;
            }
            .login h1 a {
                background-image: url( '{$logo_src}' );
                background-size: 100%;
                height: {$logo_size[ 1 ]}px;
                width: {$logo_size[ 0 ]}px;
            }
        </style>
    ";

}

...and so on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment