How to change WordPress Login background, logo, and link URL using functions and custom CSS
Creating your own custom wordpress login page is a lot easier than you may think. First you will need to open the functions.php file for the theme you are going to be using.
This should be located at
~/public_html/wp-content/themes/yourtheme/functions.php
You will also need to add the CSS below to your theme’s style.css file, this should be located at
~/public_html/wp-content/themes/yourtheme/style.css
Replace yourtheme with the theme you will be using.
Example Preview
You will need to add the following lines of code to the bottom of your functions.php file:
Full Code
|
1 2 3 4 5 |
function the_url( $url ) { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'the_url' ); |
Also add the following CSS to your theme’s style.css file, and customize to use your image, image size, etc..
|
1 2 3 4 5 6 7 8 9 10 |
body.login #login h1 a { background: url('http://smyl.es/logo.png') no-repeat top transparent; height: 128px; width: 427px; } body.login { background-image: url('http://smyl.es/background.png'); background-size: 100%; background-attachment: fixed; } |
Breakdown
Create a function to return a URL
First we will create the function that will return the URL we want the link to use.
|
1 2 3 |
function the_url( $url ) { return get_bloginfo( 'url' ); } |
The code above will use the default URL configured in WordPress settings. If you want to use a custom URL then use this code instead:
|
1 2 3 |
function the_url( $url ) { return "http://my-custom-url.com"; } |
Add filter to change the URL for the link
Next we will use add_filter (WordPress Codex) to add a filter that will change the link URL for the image on the login page by calling the function we created above that will return the URL.
|
1 |
add_filter( 'login_headerurl', 'the_url' ); |
Add CSS to modify image and background
Finally we will add the CSS to our theme’s style.css file, which we can customize to use our own image, or styling.
|
1 2 3 4 5 6 7 8 9 10 |
body.login #login h1 a { background: url('http://smyl.es/logo.png') no-repeat top transparent; height: 128px; width: 427px; } body.login { background-image: url('http://smyl.es/background.png'); background-size: 100%; background-attachment: fixed; } |
TIP: Make sure you don’t accidentally put this code at the VERY bottom of the page because it still need to be included inside the standard PHP tags. This means the very last characters in the functions file should be ?> which is the closing tag for a PHP script. This must be at the very bottom or you will have problems.
Related Posts
-
Sam sandy
-
AppActuator.com
-
Mobiers.com
-
Myles
-
-
Wahooka