{"id":42294,"date":"2015-01-15T19:49:23","date_gmt":"2015-01-15T14:19:23","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=42294"},"modified":"2026-10-08T19:07:11","modified_gmt":"2026-10-08T13:37:11","slug":"change-wordpress-login-screen-logo-background","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/","title":{"rendered":"How to Customize the WordPress Login Page Logo and CSS (No Plugin)"},"content":{"rendered":"<p>Every WordPress site has the same login page, with the WordPress logo and a plain grey background. You can customize the WordPress login page logo and CSS in a few minutes, so it carries your own logo, colours and link instead. It looks more professional for clients, team members and authors who log in every day, and it reinforces your brand. Here&#8217;s the code we use, updated for current WordPress versions, plus a no-code plugin option.<\/p>\n<p><strong>Quick answer:<\/strong> Add a function to your child theme&#8217;s <code>functions.php<\/code> hooked to <code>login_enqueue_scripts<\/code> that prints CSS to replace the logo (<code>#login h1 a<\/code>) and change the background. Then use the <code>login_headerurl<\/code> and <code>login_headertext<\/code> filters so the logo links to your site. Or install a plugin like LoginPress for a visual editor.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ad169794e055\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ad169794e055\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#The_default_WordPress_login_page\" >The default WordPress login page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#How_to_customize_the_WordPress_login_page_logo_and_CSS\" >How to customize the WordPress login page logo and CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#Link_the_logo_to_your_site\" >Link the logo to your site<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#Use_a_separate_stylesheet_optional\" >Use a separate stylesheet (optional)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#No-code_option_use_a_plugin\" >No-code option: use a plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#Dont_edit_WordPress_core_files\" >Don&#8217;t edit WordPress core files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#Make_the_login_page_secure_too\" >Make the login page secure too<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#Will_my_custom_login_page_survive_WordPress_updates\" >Will my custom login page survive WordPress updates?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#What_size_should_my_login_logo_be\" >What size should my login logo be?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/change-wordpress-login-screen-logo-background\/#Can_I_change_the_login_page_URL\" >Can I change the login page URL?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"The_default_WordPress_login_page\"><\/span>The default WordPress login page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>By default, the WordPress login screen at <code>\/wp-login.php<\/code> (or <code>\/wp-admin\/<\/code>) looks the same on every site:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-42295\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/qot-login-old.png\" alt=\"Default WordPress login page\" width=\"500\" height=\"478\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/qot-login-old.png 500w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/qot-login-old-150x143.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/qot-login-old-300x287.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>And here&#8217;s our customized WordPress login page:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-42296\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/qot-login-new.png\" alt=\"Customized WordPress login page logo and CSS\" width=\"500\" height=\"446\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/qot-login-new.png 500w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/qot-login-new-150x134.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/qot-login-new-300x268.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>We simply replaced the WordPress logo with our site logo and changed the light grey background to black. It&#8217;s a small change, but it makes a big difference to branding.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_customize_the_WordPress_login_page_logo_and_CSS\"><\/span>How to customize the WordPress login page logo and CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Add this code to your <strong>child theme&#8217;s<\/strong> <code>functions.php<\/code> file, or to a code snippets plugin. Back up the file first: a typo in functions.php can take your site offline, and you&#8217;d need FTP or your host&#8217;s file manager to fix it.<\/p>\n<pre><code>function qot_login_styles() { ?&gt;\r\n  &lt;style&gt;\r\n    #login h1 a, .login h1 a {\r\n      background-image: url( \"&lt;?php echo esc_url( get_stylesheet_directory_uri() ); ?&gt;\/images\/logo.png\" );\r\n      width: 200px;\r\n      height: 30px;\r\n      background-size: 200px auto;\r\n      background-repeat: no-repeat;\r\n    }\r\n    body.login { background: #000; }\r\n    .login form { background: #333; border: 0; }\r\n    .login label { color: #fff; }\r\n    .login #nav a, .login #backtoblog a { color: #ccc; }\r\n  &lt;\/style&gt;\r\n&lt;?php }\r\nadd_action( 'login_enqueue_scripts', 'qot_login_styles' );<\/code><\/pre>\n<p>What it does:<\/p>\n<ol>\n<li><strong>Replaces the logo:<\/strong> the first rule swaps the WordPress logo for your own image, stored in your theme&#8217;s <code>images<\/code> folder. Set the width and height to your logo&#8217;s size. Upload a logo at twice that size so it looks <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/dispay-sharper-logo-on-high-resolution-screens\/\">sharp on retina and 4K screens<\/a>, or use an SVG.<\/li>\n<li><strong>Changes the colours:<\/strong> the rest sets a black background, a dark grey login box, and lighter text and links so everything stays readable. Pick colours that match your brand.<\/li>\n<\/ol>\n<p>WordPress recommends the <code>login_enqueue_scripts<\/code> hook for login page styles. The older <code>login_head<\/code> hook, which we used when we first wrote this post, still works, but <code>login_enqueue_scripts<\/code> is the documented way.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Link_the_logo_to_your_site\"><\/span>Link the logo to your site<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>By default, the login logo links to WordPress.org. Point it at your homepage instead:<\/p>\n<pre><code>add_filter( 'login_headerurl', function() { return home_url(); } );\r\nadd_filter( 'login_headertext', function() { return get_bloginfo( 'name' ); } );<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Use_a_separate_stylesheet_optional\"><\/span>Use a separate stylesheet (optional)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For larger designs, put your CSS in a file such as <code>login.css<\/code> in your child theme and load it properly:<\/p>\n<pre><code>add_action( 'login_enqueue_scripts', function() {\r\n    wp_enqueue_style( 'qot-login', get_stylesheet_directory_uri() . '\/login.css' );\r\n} );<\/code><\/pre>\n<p>This is also the cleanest way if you already use <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/\">custom CSS for the WordPress editor<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"No-code_option_use_a_plugin\"><\/span>No-code option: use a plugin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you&#8217;d rather not edit code, plugins like <a href=\"https:\/\/wordpress.org\/plugins\/loginpress\/\" target=\"_blank\" rel=\"noopener\">LoginPress<\/a> let you change the logo, background, colours and form style visually in the Customizer. Some themes, such as Kadence and Astra, also include login page options.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dont_edit_WordPress_core_files\"><\/span>Don&#8217;t edit WordPress core files<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Years ago, a quick trick was to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/06\/how-to-change-wordpress-login-screen-logo\/\">replace the WordPress logo image via FTP<\/a> in the wp-admin folder. Avoid that today: WordPress updates overwrite core files, so your logo disappears with the next update. Use the theme code or a plugin instead.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Make_the_login_page_secure_too\"><\/span>Make the login page secure too<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>While you&#8217;re customizing the login page, protect it as well: use strong passwords, turn on two-factor authentication with a security plugin, and limit login attempts. If you ever get locked out, here&#8217;s how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2021\/09\/change-wordpress-password\/\">change a WordPress password with phpMyAdmin<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Will_my_custom_login_page_survive_WordPress_updates\"><\/span>Will my custom login page survive WordPress updates?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, if you add the code to a child theme or plugin. Code in a parent theme&#8217;s functions.php is lost when the theme updates.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_size_should_my_login_logo_be\"><\/span>What size should my login logo be?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The default area is 84 \u00d7 84 pixels, but you can set any width and height in CSS. Around 200\u2013320 pixels wide works well, with a 2x image for sharp display.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_change_the_login_page_URL\"><\/span>Can I change the login page URL?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, with a security plugin that offers a custom login URL. It reduces bot traffic but isn&#8217;t a substitute for strong passwords and 2FA.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every WordPress site has the same login page, with the WordPress logo and a plain grey background. You can customize&#8230;<\/p>\n","protected":false},"author":4,"featured_media":42296,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49,17],"class_list":["post-42294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=42294"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42294\/revisions"}],"predecessor-version":[{"id":63658,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42294\/revisions\/63658"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/42296"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=42294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=42294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=42294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}