WordPress.org

Ready to get started?Download WordPress

Forums

Simple custom login plugin (31 posts)

  1. 5ngua
    Member
    Posted 7 months ago #

    Hi there,

    First of all, sorry for my bad WP plugin knowledge. I just want to create a simple custom login following this guide because I do not want to add the code whenever the theme is updated. This is the first time I try to create a WP plugin. I already created a file called plugin.php with it's header. And I do not know what to do next.
    Could you tell me what code I have to add to plugin.php to make it work like described in the codex document?

    Many thanks,

  2. Tara
    Member
    Posted 6 months ago #

    There are many plugins.

    Just check them out and see which one will work for you.

    http://wordpress.org/plugins/search.php?q=custom+login&sort=

  3. bcworkz
    Member
    Posted 6 months ago #

    If your ultimate goal is to change the login, finding a plugin as Tara suggests is your best bet.

    If your goal is learning to customize WordPress, studying other plugins is a good experience. Of course you will want to develop your own code. Start with Writing a Plugin. Be sure your plugin file is in either the plugins folder or its own folder under that. As soon as you have some minimal code, activate your plugin to test it. There's usually no need to deactivate and reactivate after that. Any code you see in tutorials where it's suggested to place it in your theme's functions.php would invariably work just as well on your plugin page.

    What actual code you use depends on what you want to change. Any example code that adds a filter or action would be a likely candidate for your plugin.

  4. 5ngua
    Member
    Posted 6 months ago #

    Hi,
    Thank you for the response. I already read the writing a plugin document and know how to create a plugin. But because of my poor coding skill, I do not know how to do.

    I just want to get things done like in the "custom login tutorial" but instead of adding the code to theme's functions.php, I want to create a plugin for that.

    I want to learn myself. For start, I just want to change the WordPress logo and it's link. Can you help me with the coding?

    Thanks,

  5. Tara
    Member
    Posted 6 months ago #

    you mean WP logo on the login page?
    Yes? Then add this snippet to your child theme's functions.php:

    function custom_login_logo() {
        echo '<style type="text/css">
            h1 a { background-image:url('.get_bloginfo('stylesheet_directory').'/images/login_logo.png) !important; }
        </style>';
    }
    add_action('login_head', 'custom_login_logo');

    To remove title "Powered by WordPress" when the mouse hovers on, add this snippet to your child theme's functions.php:

    function my_login_logo_url() {
        return get_bloginfo( 'url' );
    }
    add_filter( 'login_headerurl', 'my_login_logo_url' );
  6. bcworkz
    Member
    Posted 6 months ago #

    I am willing to help you, but you may not like my style of help ;) I'm not going to just give you the answers, part of coding is working things out for yourself and figuring out what you did wrong when things do not work. Trust me, you will continually be writing code that does not work, you cannot always have someone telling you where you went wrong.

    Don't be afraid to try things. The worst that can happen is your site displays the "White Screen of Death". Despite the ominous name, it just means you made a mistake. Big deal :) If you set WP_DEBUG to true in wp-config.php, PHP will tell you what and where your mistake was instead of a blank white screen. Important: You do need to know how to edit your plugin files locally on your computer and then upload them to your server via FTP. If you do not, learn this before proceeding.

    Do not rely on the WP resident plugin editor! First of all, you cannot access it if an innocent error crashes your site. Second, it does not keep version backups, it's not possible to revert to older versions. Finally, there are much better syntax highlighting programmer's editors available that you will like working with much more than the resident editor.

    Your goal of changing the logo can be achieved by simply copying the example code (the function and add_action() call) in "Change the Login Logo" into your plugin file. The example omits the initial <?php tag, but your's should still be in effect after the plugin header comment. Be sure to follow the instructions exactly (except where to place the code), the replacement image must reside in your active theme's /images/ folder. Also note the current logo image is a different size than that noted in the tutorial, it is now 80x80.

    Do keep in mind when using the tutorial, like many things about WP on the Internet, that certain details may be out of date. WP has an aggressive update cycle and is constantly changing. It's unreasonable to expect all documentation (maintained by volunteers) to keep up in every single detail. I have made a note to update this page, so expect some changes in the near future.

    Of course, it makes no sense for plugin resources to reside in a theme folder. You will want to modify the logo code so your custom logo can live with the rest of your plugin. Take a look at Determining Plugin and Content Directories.

    As for changing the link target, copying the provided code into your plugin page should work without any change at all, though you will probably like to change the 'Your Site Name and Info' return string. This can be nearly anything you like.

    Go ahead and try these things. If things go badly, either revert to a known working version or rename your plugin folder via FTP to deactivate the plugin completely. When you restore the folder name, you will need to reactivate your plugin. If you get really stuck and cannot figure out what the problem is, post your best coding effort here and I will try to point you in the right direction.

    Good luck and have fun!

  7. 5ngua
    Member
    Posted 6 months ago #

    @ Tara: yes, child theme does work. Thank you for recalling me about child theme. I haven't thought about this solution when trying to simplize the development of my site.
    @ bcworkz thanks for your time and great support. I have read your advices. Now I would like to know how to tell wordpress to add a code itself to theme's functions.php (or any other file) using a plugin.

    Thanks,

  8. bcworkz
    Member
    Posted 6 months ago #

    If you are making a plugin, there is no need to alter the theme's functions.php. (That would be considered very bad practice as well) Any code you would want to enter in functions.php will be just as effective entered on your plugin's code page.

  9. 5ngua
    Member
    Posted 6 months ago #

    Thank you,

    I will still go with the plugin solution instead of editing theme's functions.php. The reason is that I use WP Multisite and the plugin helps me to apply the modification to all themes and all child sites with just 1 click!

    I will update more about my work here.

    Many thanks,

  10. 5ngua
    Member
    Posted 6 months ago #

    To change the wordpress logo, this is the code provided in the guide:

    function my_login_logo() { ?>
    <style type="text/css">
    body.login div#login h1 a {
    background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/images/site-login-logo.png);
    padding-bottom: 30px;
    }
    </style>
    <?php }
    add_action( 'login_enqueue_scripts', 'my_login_logo' );

    This is the code suggested by Tara:

    function custom_login_logo() {
    echo '<style type="text/css">
    h1 a { background-image:url('.get_bloginfo('stylesheet_directory').'/images/login_logo.png) !important; }
    </style>';
    }
    add_action('login_head', 'custom_login_logo');

    But I use this code, because this is what wp-admin.css in WordPress 3.8 is using:

    function my_login_logo() { ?>
    <style type="text/css">
    .login h1 a {
    background-image: url(url);
    background-size: 320px 121px;
    height: 121px;
    width: 320px;
    }
    body.login {background: #ffffff;}
    </style>
    <?php }

    Could you tell me what is the best practice?

  11. 5ngua
    Member
    Posted 6 months ago #

    I have highlighted the main different code.

  12. bcworkz
    Member
    Posted 6 months ago #

    A major point of the guide is that providing more specific selectors is what ensures your style is used instead of the default. From that standpoint, the guide's suggested code is best.

    But such code is more susceptible to failing after an update should any of the factors in the selector chain change. From a future proof standpoint, Tara's suggested code is best.

    But there is a problem with being too generic as well. The change could have unintended side effects to other elements that you do not wish to be affected. So actually, using the same selector as the default CSS has some validity, except then which style is applied is dependent on which order the stylesheets are loaded, which is not that easy to manage in WP.

    I doubt it would be considered best, but I usually use the same selectors as the default to ensure the style is only applied to the correct elements. I then add the !important modifier to ensure my style is the one used. Admittedly, this doesn't always work.

    I can't claim to be any kind of CSS expert. My understanding of the application of more explicit selectors rule did not include specifying additional outer containers as the guide indicated. I do manage to learn a few things here and there even though I'm usually the one giving out the information :)

  13. 5ngua
    Member
    Posted 6 months ago #

    @bcworkz from your provided information, I would go with the guide's suggested code. The simple reason is that the code does work and as you said, is the best one. If after an update it fails to work, I am sure people will update it so we don't have to worry. From the future proof standpoint, the guide's code is pretty OK due to this reason :) .

    So what is your choice, bcworkz?

  14. bcworkz
    Member
    Posted 6 months ago #

    None of the above! :)

    I think I would actually use the selectors #login h1 a in place of the default .login h1 a. Since a # id selector is more specific than the dot class selector, my style would be used as priority over the default style regardless of what order the styles end up on the page. It's enough to do the job and nothing more.

    The guide's code is also fine, it's just my opinion that it goes a bit too far with additional specificity. Perhaps it was to make a stronger point of the more specific = more priority concept. I don't know.

    I wouldn't be so sure that updates that break your plugin would break so many others that the applicable code would be patched, if that is your logic. I'm not sure I really am following your logic, sorry.

    While the core developers are very cognizant of avoiding code changes that could break plugins, they will do so if there's good reason. Plugin authors are expected to take the responsibility to confirm their code remains functional before every update and to push any required plugin updates out along with the core update.

    There's plenty of examples of plugins that were published and then forgotten. Neglect your plugin for too long and it will be removed from the repository.

    FYI, I just noticed the guide code does not quite work for child themes. With the bloginfo data, the image must remain in the parent theme's images folder. People using child themes would rather the image were in their child's folder, just like you would rather the image were in your own plugin's folder.

    I edited the guide's code to use get_stylesheet_directory_uri() so it would work with either main themes or child themes. Of course, plugins would need an even different code, but that's beyond the scope of the guide and something you will probably need to figure out eventually :)

  15. 5ngua
    Member
    Posted 6 months ago #

    Hi bcworkz, I plan to use the plugin on my sites only since it's too simple and not deserved to be submitted to the repository. In my case, I will replace <?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png with direct logo url (something like http://domain.com/media/logo.png ). That is more clear and simple.
    But do you think get_stylesheet_directory_uri will still work when people are trying to using CSS files instead of embedded style sheet?

  16. bcworkz
    Member
    Posted 6 months ago #

    get_stylesheet_directory_uri() simply returns the URI to the active theme's style.css folder. There's a different function that returns the actual style.css path including the CSS file. Thus get_stylesheet_directory_uri() is a good base for any file related to the active theme.

    Embedded styles, such as what is seen in a pages's <head> section between <style> tags are introduced with 'wp_enqueue_styles' action and have nothing to do with files. The style.css file is always a theme's primary stylesheet. It's a WP theme requirement. Many themes also include additional stylesheets. By convention, they are usually in a /css/ subfolder, but can reside anywhere really, even a different site.

    Even if your code is not destined for the repository, I believe it's good practice to strive to write code in a professional manner even for one's own personal project. I admit I have failed to do so on occasion and succumbed to quick and dirty coding, but it's still something to strive for.

    So hard coding an image path for personal use is OK, but there are similar path functions for plugins to use as there are for themes. What if in the future you want to use this plugin on a different site? Going back through and finding all the hardcoded references is far less than ideal. Better to do things right the first time. We never know what the future will bring.

  17. 5ngua
    Member
    Posted 6 months ago #

    I use this plugin on a multisite install. So get_stylesheet_directory_uri() seems to require me to put a logo copy for each installed theme. So I think using image path has some validity. Currently my solution is creating a "media" directory and place the logo file in it. Then I use this file's path for all existing sites.

    My style is perfectionism and sometime I want to dissect a problem like this. So I really like your support. Thank you very much.

  18. bcworkz
    Member
    Posted 6 months ago #

    I'm pleased you find my help useful, you're most welcome.
    Dissecting little problems and learning exactly how everything works is a great way to learn and ensures you will find a solution, or at least know for sure a solution is not possible :)

    Good point about the need to modify all available themes in multisite, and in which case the graphic residing in the theme folder would make no sense. However, since you are actually doing this with a plugin, all the sites would be using the same plugin resource, so the graphic residing relative to the plugin folder would work well.

    But as you pointed out, such an approach may make sense if you were distributing the plugin to others. But since you are not, this is for your own use, it does make sense to keep the graphic where all of your other related files are. FYI, just like there are functions for theme and plugin paths, there are functions for content paths as well.

    I don't know where your media folder lies relative to all of this, but you may be interested to know it's possible to move the /wp-content/ folder structure somewhere else on your server, it does not need to be one level below the installation folder, nor named wp-content. This can be done because no paths in WP are hardcoded. By hardcoding paths, you lock yourself into that particular state and changing things later on gets more complicated as time passes.

    It's OK to hardcode the location for your particular situation, but it would be a good exercise to reference graphics dynamically just the same :)

  19. 5ngua
    Member
    Posted 6 months ago #

    Thanks bcworkz, An other question is the use of /** Text */ , sometime it is /** Text **/, sometime it is

    /**
    * Text 1
    * Text 2
    */

    Sometime there is 2 stars, sometime 3 stars...What is the meaning of the cases?
    -------------------------------------------

    My logo size is different from the WP defaut logo. This is how I make the changes:

    background-image: url(abc.com/image.png);
    background-size: 320px 121px;
    height: 121px;
    width: 320px;

    Is this Ok?
    -----------------------------------------------
    I have an other question related to changing wp-content too. I would be very grateful if you could give me some advices.

  20. bcworkz
    Member
    Posted 6 months ago #

    Yep, lots of stars! Beyond the required /* */ it's all a matter of preferred style. WP developers try to follow the inline documentation Docblock standard. Probably the only important factor is what ever style you choose, you use it consistently. This makes it easier to quickly reacquaint yourself with long forgotten code when you suddenly need to update it to remain compatible with some API or something.

    Sure, changing CSS like that is just fine. It might change the page flow a bit, but if you don't like the result, you adjust. Whatever you like should be OK if it works. Your site, your rules :)

    I did see your other question, I'll reply here if you don't mind. I'm hoping a lack of response on that thread might encourage someone else to join in on the conversation. Note that in your title you mention wp-content, which can be moved, as I mentioned previously. But in the text you ask about moving wp-admin. I don't know why one would move wp-admin, I don't think it's even possible, but I don't know this for sure. I'm going to assume you meant wp-content all along.

    I think moving wp-content is fine if you have reason. If not, you could be asking for trouble if your theme or plugins are not using the proper functions to access wp-content resources. If everyone is following the rules, then you will not have any serious problems. Unless you've hardcoded paths in your own code :) All code should be using path functions that get information from the constants WP_CONTENT_DIR and WP_CONTENT_URL.

    All the paths in post content can be a big issue. A different wp-content folder is best done on a fresh site. If not, you could let wp-content remain, and just start using a different content location. You are then only moving themes and plugins, not images and other resources. O you could create a rewrite rule to correct any requests for the old location. Or you can globally edit your DB to bring all the old paths up to date. Because some paths could be stored in serialized arrays, you should not do this unless you really know what you're doing. Fortunately, there is a tool meant for moving data to a new site that can be used to do this somewhat safely. Of course you backup everything before doing anything to your DB.

    I'm unsure just how far you can move the folder, I believe anywhere on your server that's publicly accessible will work. I have moved the folder on one of my installations, but it's still at the same level, so any errant relative references will still work. There shouldn't be relative references though. So I've really only renamed the folder, not effectively moved it. There remains a wp-content folder that is not used.

    Why? Probably the main reason the folder gets moved for anyone and possibly the reason moving was allowed in the first place. For Subversion version management. I can leave wp-content exactly as it is on the subversion server and still customize my installation. As far as Subversion is concerned, I haven't changed a thing. As far as the WordPress installation is concerned, it's highly customized.

    But unless you want to run a bleeding edge installation matched to the core trunk files, the rationale to move diminishes quickly. Some people move or rename it to obfuscate the fact their site is based on WordPress, usually in a misguided attempt to deter hackers and spammers. A form of security by obscurity (an oxymoron).

    Perhaps someone had an existing site and converted it to WordPress. They didn't want to alter their existing file structure and wanted WP to use some of the existing resources. That is a valid, though somewhat rare situation.

    I'm not really thinking of any other reasons, valid or not, except for those in the "because I can" category. What's your reasoning? Or is this just a question from curiosity?

  21. 5ngua
    Member
    Posted 6 months ago #

    So standard Docblock should be:

    /**
    * Text 1
    * Text 2
    */

    But sometime I also see // ** Text ** // , /** Text */... I am confused.

    ----------------------------------------------
    The reason I want to change wp-content:

    (1) Most of big wordpress sites do that. Big sites should have right reasons for that.
    (2) I only can do that easily when my site is still small.

    If someday my site becomes big, I will consider (1) => I will want to have wp-content folder renamed, but because of (2), I want to change it for now.

  22. bcworkz
    Member
    Posted 6 months ago #

    Docblock is a suggested standard. There's no penalty for not using it. Some people prefer a different style. There's lots of people. Therefor you see lots of different styles. It's no different than different colors in clothing, cars, houses, etc. Some communities try to manage what color people's houses are, but there's always deviants that try to do what they want.

    I've never been inclined to do anything just because the big guys do it. I'm not convinced they always know the right reasons. I'd prefer to make my own decisions. Sure, I've made bad decisions. I'm the only one to blame for that. I'm OK with that.

    I suspect the reason big sites move content is either because they converted to WordPress and wished to maintain a certain data structure or some misguided concept of increased security. Don't get me wrong, moving content will deter a bunch of script kiddies. But it's not a real security measure. Serious hackers aren't going to be fooled by such a simple misdirection.

    It sounds like you're keen to do this. That's fine. You may run into issues with poorly written plugins or themes. In a way it's a good thing because you learn who is writing poor code.

  23. 5ngua
    Member
    Posted 6 months ago #

    Eur├ęka, I 've discovered "Block Comment" which has more advantages. I do not understand why people would use "DocBlock". "Block Comment" requires only 1 asterisk at the top, which can help us to save the time, and to read more easily!

    Update: I think the only reason is that phpDocumentor doesn't parse Block Comment. Too bad.

    -------------------------------------------

    I think renaming wp-content will misguide bots, not human. Hackers will use bots to find their targeted sites.

  24. 5ngua
    Member
    Posted 6 months ago #

    Update: I think changing only Uploads folder is more safe to try. Do you think so?

  25. bcworkz
    Member
    Posted 6 months ago #

    I don't think so. Moving the wp-content folder is a built in feature of WP. It's an intentional option and is easy to do. AFAIK not so with just the uploads folder.

    I know there's a plugin that is supposed to do this. It apparently intercepts all file request traffic to/from the original uploads folder and patches the path to reflect the new location. While this may work, it strikes me as plugging a leaking dam with your fingers. You may have things under control for this release, but things could change with any update. You do have unlimited "fingers", but chasing after new leaks could become tiresome at some point.

    My recommendation is to move the entire wp-content structure if you like, or leave the whole thing alone.

  26. 5ngua
    Member
    Posted 6 months ago #

    Could you explain why changing the uploads folder is not as easy as changing wp-content? It's also a built in feature of WP that can be done by modifying wp-config.php

    By moving only the uploads folder to outside of wp-content, I hope I will not affect any plugin installed on my site. And importantly, in the future I can change wp-content folder to whatever I want but not have to worry about broken image links just because they have no relative to wp-content path now.

  27. bcworkz
    Member
    Posted 6 months ago #

    I cannot explain because I was confused :(
    I retract my previous statement. See below *

    Based on equal ease, in theory, neither method should be risky. The theory being all plugins are well written. Since that does not always happen, you are right, there is less risk because you reduce the number of files that could be misdirected.

    You should not have broken image links because the attachments store the full URL references. You should be able to repeatedly designate a new uploads folder and the old images will remain where they were uploaded, and the full URL references will therefor be able to find the images. What you cannot do is move the old images into the new reference.

    For peace of mind, you should do some testing. Change the uploads folder, upload some images. Make a new post that contains images from both old and new folders. Move the folder yet again. Not only should that test post still properly reference its images, you should be able to edit it and even add an image from the third location, and all images should display fine.

    If that is not the case, then this would all be a bad idea. AFAIK all should be fine.

    * How I got confused.
    This is anecdotal, you can stop reading if you like, though I hope you will find it amusing and a lesson in what not to do. As you could easily deduce, I've never moved the uploads folder alone. My only experience is moving the entire wp-contents. (And I've never moved it again later, so the whole safely moving concept is all theoretical for me) I wasn't even sure it could be done.

    I knew how to move wp-contents, so I looked in default-constants.php where 'WP_CONTENT_DIR' is defined if not overridden and saw nothing similar for the uploads folder.

    I then did a Codex search and saw no reference to moving uploads except for this one plugin that allowed you to relocate the uploads folder. First mistake. Not everything is in the Codex. I looked at the plugin source and saw all the various "holes" it was trying to plug. This struck me a quite fragile and the main reason for my initial objection. Examining plugin code can be a good lesson in how things are done. Second mistake. Just because a plugin exists does not mean a super simple coding alternative does not exist, nor does it mean the plugin is even using a good approach.

    Finally, I looked at the core source code for wp_upload_dir(). I saw a bunch of references to 'WP_CONTENT_DIR' and none to any other constant. Plus I saw hardcoded references to '/uploads', as in $dir = WP_CONTENT_DIR . '/uploads'; This does not look like the sort of code that allows moving of only the uploads folder! Third mistake. Need to examine code more carefully. There was another constant used farther down. ( UPLOADS! completely missed the one important bit of information!) And the use of the uploads path only applied under certain conditions, a sort of path of last resort. All sorts of ways something else could have been used. Somehow I missed all of that :(

    Simply following a proper investigative path is not enough, one needs to look closely at the evidence presented and not jump to conclusions until all possible evidence has been collected.

    We all learn by our mistakes, hopefully you learned something from mine that would help you in the future.

  28. 5ngua
    Member
    Posted 6 months ago #

    Finally, I will not change anything. Just leave it and free my mind! :).

    BTW, here is my plugin code for anyone who want to do like me. Just grab the code and put it into your plugin file:

    (many thanks to bcworks and tara)

    /**
     * Custom Login
     * Change the login logo
     * Change the background color to #ffffff
     */
    function my_login_logo() { ?>
        <style type="text/css">
            body.login div#login h1 a {
                background-image: url(domain.com/logo.png);
                background-size: 500px 49px;
                height: 49px;
                width: 500px;
                margin-left:-120px; /*You can replace -120 with your number. If your logo width is less than 320 px then you can remove this line*/
            }
            body.login {background: #ffffff;}
        </style>
    <?php }
    add_action( 'login_enqueue_scripts', 'my_login_logo' );
    /**
     * Change the login logo title
     */
    function my_login_logo_url() {
        return get_bloginfo( 'url' );
    }
    add_filter( 'login_headerurl', 'my_login_logo_url' );
    
    function my_login_logo_url_title() {
        return 'Title';
    }
    add_filter( 'login_headertitle', 'my_login_logo_url_title' );
  29. bcworkz
    Member
    Posted 6 months ago #

    I'm answering your question about placing wp-content on another server here to encourage others to join in on your new topic.

    I'm pretty sure all WP resources must all reside on the same server. Having been recently wrong about this sort of thing, I'm reluctant to say it absolutely cannot be done :)

    Internally WP makes use of absolute server paths. There might be a way to still use a different server if it's on the same LAN by using UNC references for absolute paths. I'm not sure if this is possible, I'm not really strong on network configurations. You certainly cannot use a remote server and rely on HTTP for communication.

  30. 5ngua
    Member
    Posted 6 months ago #

    Thank you. So finally I will not do anything on wp-content. Just leave it as it is. :)

Reply »

You must log in to post.

About this Topic

Tags

No tags yet.