add background image to wp-login.php file help

Does anyone know how to upload an image to the wp-login.php file? Both theme my login and bm custom login do not have options to upload a background image.
Thanks.

  • mavellino

    Hi Chris,
    I had to disable wp registration because of the membership plugin. I want the link to be to the membership plugin registration page. Thanks for showing me where it is in the file. I just want to confirm what "register" I point it to. It can't be the regular wp register, it needs to be the actual "registration" page that the membership plugin creates.....Any ideas....
    Phil, any ideas regarding the membership plugin??

  • Philip John

    Replace
    <p id="backtoblog">/" title="<?php esc_attr_e('Are you lost?') ?>"><?php printf(__('? Back to %s'), get_bloginfo('title', 'display' )); ?></p>
    with
    Register
    in wp-login.php on line 27.

    DO NOT DO THAT! Chris, please do not recommend edits to WP core, it's highly inadvisable.

    If that plugin doesn't allow you to adjust that page, try Register Plus Redux (although as I type it seems to have been removed from WP.org).

    Phil

  • Jonathan

    I have the membership plugin it turns of the "register" option on the login screen or box. Is there any way to ad this to the custom html code in the plugin??

    I managed to solve a similiar issue to this the other day
    issue: https://premium.wpmudev.org/forums/topic/membership-login-and-registration-questions#post-118804
    solution: https://premium.wpmudev.org/forums/topic/membership-login-and-registration-questions#post-119174

    function my_custom_login_footer() {
        ?>
        <style type="text/css" media="screen">
    	.custom_registration_link {
    	font: normal normal normal 25px/35px Arial, Verdana, sans-serif;
    	text-align: center;
    	width: 400px;
    	margin: auto;
    	border: 8px solid #f1faff;
    	padding: 20px;
    	background: #d2e6f2;
    	color: #597787; }
    	 }
    	</style>
    <div class="custom_registration_link">
    <a href="<?php bloginfo('url'); ?>/register/" title="Create An Account">Do You Need An Account</a>
    </div>
    <?php
    }
    add_action('login_footer', 'my_custom_login_footer');

    Here attached is an image of the above code in action. You can style it anyway you want. This is demo only :slight_smile:
    I also left the default registration button active so you can get an idea of relative position.
    This is the best approach I could come up with at the time and as Phil says "never edit wp core files"
    So this is an almost perfect solution

  • mavellino

    HI Jonathan,
    I am a novice at this. 2 questions I have, does the registration link go to the "registration" page that is created by the membership plugin, not the wp register....and here is the code I put in and I get a white screen??? Am I missing something?? Thanks :slight_smile:

    function my_custom_login_footer() {
    ?>
    <style type="text/css" media="screen">
    .custom_registration_link {
    font: normal normal normal 25px/35px Arial, Verdana, sans-serif;
    text-align: center;
    width: 400px;
    margin: auto;
    border: 8px solid #f1faff;
    padding: 20px;
    background: #d2e6f2;
    color: #597787; }
    }
    </style>
    <div class="http://changingurworld.com/wp2/register">
    /register/" title="Create An Account">Register Now
    </div>
    <?php
    }
    add_action('login_footer', 'my_custom_login_footer');

  • Jonathan

    @mavellino,

    1) Where did you add the code?

    2) Can I have a link to your wp-login.php page

    3) The white screen can be (a) you put code in wrong place or (b) there is a conflict with something else on your site - like another plugin.

    4) What is your membership registration page. You created a page and named it something and then inserted [subscriptionform] - what page is that?

    That should be enough for now :wink:

  • Jonathan

    @mavellino,

    Great thanks for the info.

    I added the code to the BP-Social functions .php file on line# 717 with a blank space above and a bland space below.

    I haven't got access to this file so I can't check to make sure it isn't breaking something :slight_frown:

    But if you are fimiliar with editing and working with your themes functions.php file

    Could you add this

    function cuw_custom_login_footer() {
        ?>
    <div class="cuw_registration_link">
    <a href="http://changingurworld.com/wp2/registration/" title="Create An Account">Do You Need An Account</a>
    </div>
    <?php
    }
    add_action('login_footer', 'cuw_custom_login_footer');

    I took out the styling stuff. You can add the styling stuff to your themes css. What should show a plain text link that says "Do you need an account"

    You can change the text in code above to suite your needs.
    The register link looks like this. You will notice I have added your registration link already.
    <a href="http://changingurworld.com/wp2/registration/" title="Create An Account">Do You Need An Account</a>

    3)Not sure if the membership plugin could be causing the conflict???

    No, it could be another plugin - probably the plugin that you are using to make your wp-login.php screen look so good :wink:
    I've changed the function name to cuw_custom_login_footer just in case there was another function called the same name.

    I've just tested it on my system and it works, so, crossing fingers that it works this time on yours.

    Jonathan

  • Jonathan

    @mavellino,

    New topic - Sounds good.
    Theme developer might ask you to check error logs (they will tell you what is causing the error). The white screen is an error. But it just isn't showing it - this is good, as you don't want your errors shown to the public. But the logs will have those errors.

    Sorry i can't help - I don't have access to working copy of the theme. So I can't say where the issue could be.
    I wouldn't rule out the possibility that it might be a plugin. But the theme developers will be able to figure it out :wink:

    Jonathan

  • mavellino

    I don't think I have MS in subdirectory. I have not unstalled a mulitsite at all???? How would I know? I am only using WP and BP and as a single site....Please explain what I need to check??? AND most of all please tell me how I can simply get a "registration" option on the wp-login.php file since your membership plugin blocks the WP registration. I just want a simple link to the membership "registration" page on the the wp-login.php screen so I can have that as the only landing public page to my site which is for members only!!!! The membership plugin should enable this as an option on the login screen. Please help me fix this!!! :slight_smile:

  • Jonathan

    Phil,

    I've written the code but @mavellino is having issues putting it into studio themes functions.php (apparently this has been a long time issue) that any code put in functions.php triggers an error.

    The code I have provided doesn't trigger any errors. Tripple checked it. But I have a feeling it might be a the plugin that is being used to alter the wp-login.php default style.

    I know the code I wrote isn't the prettiest. But what @mavellino is asking simply cannot be done without hacking wp core files. I found after a long time searching that I could add custom code to 'login_footer'
    thereby avoiding editing wp-login.php (so it is a bit of a hack) but, unless, someone has a better idea - shrugs. I can't for the life of me think of any other way :wink:

  • mavellino

    @Jonathan, thanks for trying to help. @Phil, I am using theme-my-login per your suggestion. There is no where to add the register link in the plugin. This is really an issue for the membership plugin. It removes the WP register link, creates a new register page. And the there is no where to put the link for the register page on the login box. Please help me figure out how to make this work. I want to have one landing page for all registration and login. There should be a way to do this. Please let me know if you all at WPMU Dev can figure out how to do this. I just want a simple link to the membership register page on the login page......
    Thanks :slight_smile:

  • Jonathan

    @mavellino,

    Do you know how to check your error logs?
    https://premium.wpmudev.org/blog/your-complete-guide-to-troubleshooting-wordpress/

    If we can find out what is causing the error we can have this fixed in no time. Hell, I can even write it up as a plugin for you so you don't have to touch the functions.php file.

    I'm downloading the theme now. So will check the functions.php

    Jonathan

    Edit: Wow, that is a monster functions.php file - and on line# 717 (you mentioned earlier) puts you bang in the middle. Personally right at the end is a good place to insert new code

    //here
    
    ?>

    But, again the error logs would steer us in the right direction.

    Also, I have a hunch that you aren't using a child theme, but are editing the parent theme. The child theme doesn't even have a functions.php so you would have to create it.

  • mavellino

    HI Jonathan,
    I have created a child theme and I made a copy of the functions.php file, but it white screens when I make any changes. I then have to delete it so the parent file functions in order for my site to work. I think the theme developer should tell us what to do....
    @Phil, Any ideas yet on how to fix this???? Theme-my-login does not allow you to add a register link and has made a beautiful login page for me. The register link is removed by the Membership plugin. WPMU Dev Guys, this is a problem between your theme and your plugin.
    PLEASE HELP ME!!!!!!!
    :slight_smile:

  • Jonathan

    Okay, I'm seeing light at the end of the tunnel.

    You don't need to copy the parent themes functions.php file. That is the beauty of child themes. The child theme still uses the parents functions.php.

    That explains the white screen. You need to create a functions.php not copy it in your child theme. So it should look something like this.
    Any code you tried to add to the child functions.php file in the past goes into this one at the bottom. And any future code goes below that.

    <?php
    /**
     * The functions file is used to initialize everything in the theme.  It controls how the theme is loaded and
     * sets up the supported features, default actions, and default filters.  If making customizations, users
     * should create a child theme and make changes to its own functions.php file.  Friends don't let
     * friends modify parent theme files. ;)
     *
     */
    
    /* Load the custom registration link on wp-login.php file. */
    
    function cuw_custom_login_footer() {
        ?>
    <div class="cuw_registration_link">
    <a href="http://changingurworld.com/wp2/registration/" title="Create An Account">Do You Need An Account</a>
    </div>
    <?php
    }
    add_action('login_footer', 'cuw_custom_login_footer');
    
    /*  Add new custom code below this line */
    
    ?>

    To clarify - The reason you are having function.php file errors - is because you are using the same code twice and that triggers an error. The child theme still uses all the files from the parent (the functions.php), so by copying that file to the child theme, you are in fact using duplicate code and that gives a lot of errors.

    I believe you will have a fully working theme and membership site shortly :wink:

    WPDEV STAFF. Surely a nice empty functions.php file should be added to the child theme on your side, so when user downloads the theme - and unzips it - it is already there - this will avoid issues like this.

  • Chris

    I have been very intrigued by this topic: specifically the changing the actual text and link of the current text in the login form, rather than adding a div below.

    As far as I see, there's no hook in the code to be able to parse those links, they are hard coded in - there's one for before and after, but not to actually change the hardcoded text.

    If you change your css to:

    .login #backtoblog a {
    visibility: hidden;
    }

    And then use the functions above to add in below:

    <p id="backtoblogvisible"><a href="***register***" title="Register"Register an account...</a></p>

    That would achieve exactly that, even if its not the prettiest solution. Anyone got a better way?

  • Jonathan

    @bigonroad,

    You won't believe how long it took me to figure out I could use login_footer - I mean, there is isn't much info on it. Yeah, I tried hooking into those links, tried everything, but the solution I came up with is the best - for the time being. Yeah, I thought the same, (hiding links / building new ones) but am just trying to get it to work on @mavellino setup.

    Anyways, I am sure we got this sorted. Just came down to duplicate code (two identical function.php files) - waiting to see if my hunch is correct.

  • mavellino

    @Jonathan - You are brilliant!!!! It worked! Now i know how to make all my changes in the function file. I can't tell you how much I appreciate you taking all this time to help me figure this out! And yes, WPMU DEV STAFF, please makes sure you either set up the child theme to have the new function.php file or explain how to do it!!! This will save lots of time for others.....
    Oh, Jonathan, one more thing, I am quite a novice, and I would like to have the link in the center instead of on the left. Can you tell me what code to add on what line to your above code to move the link to the center, and I promise, I will not bother you again about this topic!!
    Mindi :grinning:slight_smile:)

  • Jonathan

    @mavellino,

    Great Stuff! Woot!

    Okay now that we got it working, now we can start thinking about styling.

    The question is where would you like to add the styling. I know you are using a plugin to style the wp-login.php screen. How did you make it look so good? What I am asking is where did you insert the css styles ?

    I think it was in this stylesheet custom-login.css
    wp-content / plugins / custom-login / library / css / custom-login.css

  • mavellino

    @Jonathan, one last thing, I promise, too.....
    I also don't want to the "back to (url)" link. Do you know how to remove that in this child function file so that it does not appear and will not re-appear if I upgrade the parent theme? I actually would like the "register" link in that location if possible, or somewhere close underneath! Then the login screen will be perfect!!!
    Thanks again.
    M :grinning:slight_smile:)))))

  • Jonathan

    Okay:
    In order to style it you have to add some css style code to
    wp-content / plugins / custom-login / library / css / custom-login.css

    So in your custom-login.css
    To hide the back to (url)

    .login #backtoblog a {
    visibility: hidden;
    }

    To center new registration link: This is a little more difficult. As the registration link doesn't form part of the other links. We can center it, we can style it, but there is a limit to how high up we can take it unless you use some pretty advanced styling which you will need a designer for. You probably will need a designer anyways as its almost impossible for me to design via a forum.

    But lets try and get the code centered.

    .custom_registration_link {
    text-align: center;
    width: 400px;
    margin: auto;
    }

    See how that works?

  • mavellino

    Okay, I went into style.css in the child theme and added the code at the very bottom and no change. Is there somewhere else I should be adding it? Here is the file with your code added:

    /*
    Theme Name: BuddyPress Social Child
    Theme URI: https://premium.wpmudev.org/
    Description: A Social BuddyPress Theme that connect people, friends and family. Compatible with WordPress with or without BuddyPress, WordPress MU with or without BuddyPress and WP/WPMU installation with BuddyPress 1.2+ only.
    Version: 1.2.7
    Author: Richie KS - WPMU DEV - WordPress Experts
    Author URI: https://premium.wpmudev.org/
    License: GPL
    License URI: http://www.opensource.org/licenses/gpl-license.php
    Template: bp-social
    WDP ID: 116
    Tags: buddypress,white,blue,three-columns,two-columns,right-sidebar,fixed-width,custom-colors,custom-header,theme-options,threaded-comments

    Copyright 2007-2011 Incsub (http://incsub.com)
    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php

    changelog
    check parent theme style.css for changelog.
    */

    /* loading wp parent css */
    @import url(../bp-social/_inc/css/base.css);

    /* Load the bp parent css */
    @import url(../bp-social/_inc/css/bp-default.css);
    @import url(../bp-social/_inc/css/bp-css.css);

    /* Load the child adminbar styles */
    @import url(_inc/css/adminbar.css );

    /* Load the custom base styles - uncomment below to use custom.css */
    /* @import url(../bp-social/_inc/css/custom.css); */

    /* loading child theme css - uncomment below to suer child-style.css */
    /* @import url(_inc/css/child-style.css); */

    .login .custom_registration_link {
    text-align: center;
    width: 400px;
    margin: auto;
    }

  • Jonathan

    @mavellino,

    Just woke up :slight_smile: And logged in a few min ago and saw you gave me a generous amount of rep points - wow - thank you. I really appreciate the recognition - and it makes me feel all warm and fuzzy inside :wink:

    As for your register link.
    1) Could I put in in the header on the right?

    I can't really answer that off hand. I think there is another hook login_header [hook - a function that we can add code too, currently we are using on in the footer login_footer], but I think the login_header might be too high?
    I'm going to have to look around a bit.

    2) Is it possible to style it to be bigger like a button or atleast a box with color and a larger text font?
    Thanks!!! :slight_smile:

    This is something I was hoping you would want to do. If you look at the original image I uploaded
    edit: tried linking to image, but this topic I think is running to long and won't let me edit / save sometimes. Will attach on new topic
    you would notice the big colored box. But we could turn it into a button or something.

    So the last part is doable as we can change the code from a link to a button, or style the link to look like a button. That isn't a problem. Let me try to find another place to hook it into the header.
    I'll get back to ya with what I find :slight_smile:

  • Jonathan

    Okay, if you want the sign up here to be up at the top - I couldn't find anything that we could hook into, but I did figure that we could use the #login h1 css style.
    You currently have it display:none.
    This was the wordpress logo - on default wp-login.php you can see wordpress logo which links to wordpress
    I see you've changed the url (using the plugin) to link to your site - you could change that url to link to the register page then all you have to do is add a sign up button image and you have a sign up button linking to your register page.
    Its so basic, never thought of it before. lol.
    Anyways here is what it looks like on my test environment.

    Let me know if this is something you want to pursue???

  • Jonathan

    @bigonroad

    Still think there should be a hook for the text from earlier - how does WPML parse the text?

    "Should be" doesn't help us - lol - but if you know how to hook in - please share - I'm all ears.

    WPML - Changing text is easy. But changing core code to be/do something else is the problem.

    There are a number of ways I can do it - but you got to remember that mavellino has to make these changes and I don't want to create something overly complicated (something that I would use isn't something that mavellino can use - our skill sets are on slightly different levels) Need something basic, something less intimidating. And something that isn't going to break too easily if and when wordpress does changes to the wp-login.php page / or when mavellino upgrades. Using K.I.S.S - Trying to Keep It Simple Stupid :wink: Understand?

    But I'm more than happy to play tag if you have a better solution :slight_smile:

  • Chris

    But I'm more than happy to play tag if you have a better solution :slight_smile:

    I've really been enjoying thinking about this one. An obvious option, which I just realised, which bypasses hardcoding, and would thus survive updates - write a new page with a login form, call it whatever you want, and use .htaccess to direct people away from site.com/login.php to it.

    I'm working on a second option, still using login.php.

  • Chris

    And I worked out my second one:

    function custom_login_text() {
        echo '<style type="text/css">
            #backtoblog {display:none;}
    	#login2 {width:320px;margin:-7em auto 0 auto;}
    	#backtoblog2 {padding:12px 16px 0;}
        </style>';
    }
    add_action('login_head', 'custom_login_text');
    
    function custom_login_link() {
        ?>
    <div id="login2"><p id="backtoblog2">
    <a href="registration_link" title="Need an account?">You don't have an account? Click here to register...</a></p>
    </div>
    <?php
    }
    add_action('login_footer', 'custom_login_link');

  • Chris

    @Jonathan - my third and final method! Using jquery:

    function custom_login_text() {
    	?>
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function() {
    		$('#backtoblog').replaceWith('<p id="backtoblog"><a href="registration_link" title="Need an account?">You dont have an account? Click here to register...</a></p>');
      		});
    	</script>
    	<?php
    }
    add_action('login_head', 'custom_login_text');

    Man, I've enjoyed really coming at the from different angles. Any improvements you can suggest? Sadly, none of them are quite as neat as if there was a proper hook - but I think no 2 probably does it best.

  • Jonathan

    @mavellino,

    Glad that suits you :wink:

    Okay are you ready for the most simple option in the world :slight_smile: (HUGE GRIN)
    First attached image is the signup-button image (not the correct size, but I'm sure you want to use your own unique image) upload it like you did the background image etc
    Great.
    Now using the "wp-custom-login-page" plugin - the plugin you are using to customize the login enter these options [see second attached image] - make sure to include the correct url to the signup-button.gif image. Or any image you want to use for the signup button.

    And - you have your fully functional wp-login.php page. Told you it's so basic that it never crossed my mind before.

    signup-button.gif This isn't the right size, but I figured you would want to use your own button anyways.

    The Options

    Hope you find this simple, straightforward, and most important functional.

    Sidenote:
    If you want, I actually wrote a plugin that does exactly the same, but it can't be edited in the wordpress dashboard settings. you activated it and forget about it. If you want, I can upload that here ( I wouldn't recommend using it as the solution above is the better one) but if you want the code for future sake, you can have it at your disposal. Let me know if you want the code?

  • Jonathan

    Glad to see you were excited about the points, hope it gave you free membership now! It was my pleasure to pass them on for all you have been helping me with! :slight_smile:

    Nearly choked on my coffee this morning - lol.
    As for free membership - not yet - I think I have to ask for it or something, don't know exactly how that works. But if and when it happens, all that means is that I get to hang around here some more - lol.

    It was a pleasure helping you out. I am so sorry i didn't see the above solution before hand. But, at least by us walking down the road we did we got to solve you functions.php file issue - now you can add custom code to that :wink:

    I really feel that the above solution is the best. Because it doesn't require additional code. Because it isn't reliant on yet another person for upkeep. Because you are protected by the developer of the plugin against future wordpress updates (which is my main concern).

    Thanks again for the points. And please *bump* this topic when you go live - would love to see the final result :slight_smile:

  • mavellino

    Hi Jonathan,
    I agree that your solution is the best for all the reasons you mentioned. I definitely want something fool proof of updates and upgrades!.
    I was testing out your instructions and used your button just for a test, but for some reason the background image does not fill the page. The footer is blank. I only have the custom code for the removing the "back to url". I removed the registration link code from the child functions file and left the functions file with just the original info you had me set it up with no customizations... Before I contact the plugin developer, I wanted to ask you if you might know why it is not formatting properly. I am using a very large file for the background, bigger than the px maximum and the footer is blank, Any ideas???
    Thanks :slight_smile:

  • Jonathan

    @mavelliono,

    The sign me up link does go to register page using the options I inserted above.
    Login logo image link = http://changingurworld.com/register/
    check that you have insterted the url correctly :wink:
    If, as you say it isn't working for you then there must be something a little off on your side. Best to contact plugin developer as he will know better than me to find the issue. But it does work for me :wink: So it can't be anything too serious.

    As for the image not touching the bottom. This is caused by height. Because we added extra code at the bottom we filled the page. But now the bottom of the page is empty. The happens with any page :wink: Ask the developer how best to change the pages height. You want to force it to be a certain size or allow it to stretch out to its maximum. I like dynamic so use %

    html, body {
    	height: 100%;
    }

    The above makes the page a 100% no matter how big or small the page is. But check with the developer as this I'm sure is a common issue and he has the correct fix for it :slight_smile:

  • Chris

    @mavellino - it's great to see it finally working, been a long process!

    @Jonathan - I agree, an updating plugin is the best solution. I didn't include a screenshot, because they all look the same hehe - you can see the jquery one live at http://allaboutchris.org/test/wp-login.php

    Ultimately, I like the CSS one best because it won't break if JS is turned off and doesn't require the loading of a whole JS library just to do one tiny thing.

    I'm not great shakes at jquery, but I'll explain this one to ya - its pretty self explanatory:

    Loads jquery from jquery.com - should be stored in users browser cache somewhere since so many people link from there, making it faster and more efficient than a local copy
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    The instant page has loaded, run the following function:
    $(document).ready(function() {
    Select the id "backtoblog", and replace the entire thing with our new <p>

    $('#backtoblog').replaceWith('<p id="backtoblog"><a href="registration_link" title="Need an account?">You dont have an account? Click here to register...</a></p>');
    });
    </script>

    Very easy trick to use for this sort of thing. Usually jquery will already be included, so you can skip that step...

  • Jonathan

    @bigonroad,

    I Will say - that based on what we were originally trying to do - your two latest solutions would have nailed it on the head :wink:

    I mean, you managed to put the link right into the login nav on both accounts even when one wasn't ( only looked like it was ), which is prettly bloody good. Hence, I say your css, and jquery are better than mine - lol.

    Yeah, I can read script, just not very good at writing it - lol - thanks for the walkthrough though. And considering that jquery is being loaded - makes it a pretty good fix for the issue :wink:

    Sidenote: check your post on payment error and marketpress - I'm keen to see if my hunch is right :wink: