{"id":19654,"date":"2020-05-06T21:23:05","date_gmt":"2020-05-06T13:23:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19654"},"modified":"2022-10-18T20:12:00","modified_gmt":"2022-10-18T12:12:00","slug":"wordpress-custom-loginpage","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/","title":{"rendered":"How to Build A Fully Customized WordPress Login Page"},"content":{"rendered":"<p>Many of you, I believe, are familiar with the WordPress login page at <code>wp-login.php<\/code>. It looks nice, and works fine. But when it comes to creating a website for clients, you might want a more <strong>customized login page<\/strong>, so that it integrates nicely with the website design as a whole. In addition, having a customized login page could also give your clients a good impression of your skills.<\/p>\n<p>If this is something that you want to achieve on your site, here\u2019s how you can build a fully customized WordPress login page.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-conditional-tags-beginners\/\" class=\"ref-block__link\" title=\"Read More: WordPress Conditional Tags and Snippets for Beginners\" rel=\"bookmark\"><span class=\"screen-reader-text\">WordPress Conditional Tags and Snippets for Beginners<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/wordpress-conditional-tags-beginners.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-13013 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/wordpress-conditional-tags-beginners.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">WordPress Conditional Tags and Snippets for Beginners<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tOne of the best features of WordPress could be conditional tags. It allows you to tell the code...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Custom Login Page<\/h2>\n<p>First, we need to create a custom page template for the login page. To do so, you can create a new page template and name it \u2013 for example \u2013 <code>page-login.php<\/code>. Then, create a new Page from the WordPress backend and set the permalink to <code>login<\/code> so that WordPress will automatically take the <code>page-login.php<\/code> template for the page.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/login-wordpress-page-slug.jpg\" alt=\"custom page template\" width=\"750\" height=\"280\"><\/figure>\n<h2>The Login Form<\/h2>\n<p>Put the <code>wp_login_form<\/code> tag in the <code>page-login.php<\/code> page template to display the login form.<\/p>\n<pre>\r\n&lt;?php wp_login_form(); ?&gt;\r\n<\/pre>\n<p>The following is optional, but could be useful in certain cases. You can configure a few things for the login form, like specifying the redirecting of URL after the user has successfully logged in, changing the ID of the username, and the password input field.<\/p>\n<pre>\r\n&lt;?php\r\n$args = array(\r\n    'redirect' =&gt; home_url(), \r\n    'id_username' =&gt; 'user',\r\n    'id_password' =&gt; 'pass',\r\n   ) \r\n;?&gt;\r\n&lt;?php wp_login_form( $args ); ?&gt;\r\n<\/pre>\n<p>Furthermore, you can also add something aside. It could be your logo and a little description of your site, for example.<\/p>\n<pre>\r\n&lt;div class=\"login-branding\"&gt;\r\n\t&lt;a href=\"#\" class=\"login-logo\"&gt;Hongkiat.com&lt;\/a&gt;\r\n\t&lt;p class=\"login-desc\"&gt;\r\n\t\tHongkiat.com is a design weblog dedicated to designers and bloggers. We constantly publish useful tricks, tools, tutorials and inspirational artworks.\r\n\t&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"login-form\"&gt;\r\n&lt;?php\r\n$args = array(\r\n    'redirect' =&gt; home_url(), \r\n    'id_username' =&gt; 'user',\r\n    'id_password' =&gt; 'pass',\r\n   ) \r\n;?&gt;\r\n&lt;?php wp_login_form( $args ); ?&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Now, let\u2019s make the form nicer with CSS. You can make the CSS up on your own as per your site requirements. In this example, here is how my login form looks like. It has black background, with a blue button, which fits quite well with the Hongkiat.com site theme.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/css-styles.jpg\" alt=\"css styles\" width=\"500\" height=\"217\"><\/figure>\n<h2>Validation<\/h2>\n<p>At this point, the login page is already functional. We can try logging in, and if suceeded we will be redirected to the URL that we have specified in the <code>redirect<\/code> parameter above. But, there is something that we need to address.<\/p>\n<p>First, the <code>wp-login.php<\/code> page is still accessible. It would be better to redirect the <code>wp-login.php<\/code> to our new login page to deliver a unified experience to our clients.<\/p>\n<p>To do so, you can add the following codes in the <code>functions.php<\/code> of your theme.<\/p>\n<pre>\r\nfunction redirect_login_page() {\r\n\t$login_page  = home_url( '\/login\/' );\r\n\t$page_viewed = basename($_SERVER['REQUEST_URI']);\r\n\r\n\tif( $page_viewed == \"wp-login.php\" && $_SERVER['REQUEST_METHOD'] == 'GET') {\r\n\t\twp_redirect($login_page);\r\n\t\texit;\r\n\t}\r\n}\r\nadd_action('init','redirect_login_page');\r\n<\/pre>\n<p>Remember to change the <code>$login_page<\/code> variable to your own login page (thanks to Montana Flynn for <a href=\"https:\/\/montanaflynn.me\/\" rel=\"extenral nofollow\">the tip)<\/a>.<\/p>\n<p>Second, the login page can work as expected when we are successfully logged in. But if an error occurs like when submiting invalid user and password combinations, or submitting an empty field, we will also be thrown away to <code>wp-login.php<\/code>. To solve this issue, add the following functions in the <code>functions.php<\/code>.<\/p>\n<pre>\r\nfunction login_failed() {\r\n\t$login_page  = home_url( '\/login\/' );\r\n\twp_redirect( $login_page . '?login=failed' );\r\n\texit;\r\n}\r\nadd_action( 'wp_login_failed', 'login_failed' );\r\n\r\nfunction verify_username_password( $user, $username, $password ) {\r\n\t$login_page  = home_url( '\/login\/' );\r\n    if( $username == \"\" || $password == \"\" ) {\r\n        wp_redirect( $login_page . \"?login=empty\" );\r\n        exit;\r\n    }\r\n}\r\nadd_filter( 'authenticate', 'verify_username_password', 1, 3);\r\n<\/pre>\n<p>These two functions perform two tasks. They will redirect the user upon failing, and append a <code>login<\/code> query string to the URL with the value of either <code>failed<\/code> or <code>empty<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/login-query-string.jpg\" alt=\"query string\" width=\"750\" height=\"200\"><\/figure>\n<p>The last problem is we will also be redirected to <code>wp-login.php<\/code> when we have logged out from the site. So, we also need to specify the redirecting URL upon logging out, like so.<\/p>\n<pre>\r\nfunction logout_page() {\r\n\t$login_page  = home_url( '\/login\/' );\r\n\twp_redirect( $login_page . \"?login=false\" );\r\n\texit;\r\n}\r\nadd_action('wp_logout','logout_page');\r\n<\/pre>\n<h2>Error Message<\/h2>\n<p>We will display an error message, showing the user when the error occurred, and when they have logged out by using the <em>query string<\/em> that we have put in the URL. To get the value from the login query string above, we can use <code>$_GET<\/code>.<\/p>\n<p>Put this code below in the login page template.<\/p>\n<pre>\r\n$login \t= (isset($_GET['login']) ) ? $_GET['login'] : 0;\r\n<\/pre>\n<p>The above code will check whether the <code>login<\/code> variable contains value, otherwise it will set to <code>0<\/code>. Then we will display different notification messages based on the value of <code>$error<\/code>, like so.<\/p>\n<pre>\r\nif ( $login === \"failed\" ) {\r\n\techo '&lt;p class=\"login-msg\"&gt;&lt;strong&gt;ERROR:&lt;\/strong&gt; Invalid username and\/or password.&lt;\/p&gt;';\r\n} elseif ( $login === \"empty\" ) {\r\n\techo '&lt;p class=\"login-msg\"&gt;&lt;strong&gt;ERROR:&lt;\/strong&gt; Username and\/or Password is empty.&lt;\/p&gt;';\r\n} elseif ( $login === \"false\" ) {\r\n\techo '&lt;p class=\"login-msg\"&gt;&lt;strong&gt;ERROR:&lt;\/strong&gt; You are logged out.&lt;\/p&gt;';\r\n}\r\n<\/pre>\n<p>And below is what the error message looks like.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/error-message.jpg\" alt=\"error message\" width=\"500\" height=\"297\"><\/figure>\n<h2>Conclusion<\/h2>\n<p>There are several things that we could do to improve our login page such as adding <strong>Lost Password link<\/strong>, <strong>Register Link<\/strong>, and a <strong>personalized error message<\/strong>. But, at this point it is now functioning well enough for our users to login and logout, and it could also be a good start to create a more advanced login page.<\/p>\n<p>We hope that you find this tutorial useful.<\/p>","protected":false},"excerpt":{"rendered":"<p>Many of you, I believe, are familiar with the WordPress login page at wp-login.php. It looks nice, and works fine. But when it comes to creating a website for clients, you might want a more customized login page, so that it integrates nicely with the website design as a whole. In addition, having a customized&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[4663,3051,252],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Build A Fully Customized WordPress Login Page - Hongkiat<\/title>\n<meta name=\"description\" content=\"Many of you, I believe, are familiar with the WordPress login page at wp-login.php. It looks nice, and works fine. But when it comes to creating a website\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build A Fully Customized WordPress Login Page\" \/>\n<meta property=\"og:description\" content=\"Many of you, I believe, are familiar with the WordPress login page at wp-login.php. It looks nice, and works fine. But when it comes to creating a website\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-06T13:23:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-18T12:12:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/login-wordpress-page-slug.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Build A Fully Customized WordPress Login Page\",\"datePublished\":\"2020-05-06T13:23:05+00:00\",\"dateModified\":\"2022-10-18T12:12:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/\"},\"wordCount\":663,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-custom-loginpage\\\/login-wordpress-page-slug.jpg\",\"keywords\":[\"ad-divi\",\"wordpress login page\",\"WordPress Tips\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/\",\"name\":\"How to Build A Fully Customized WordPress Login Page - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-custom-loginpage\\\/login-wordpress-page-slug.jpg\",\"datePublished\":\"2020-05-06T13:23:05+00:00\",\"dateModified\":\"2022-10-18T12:12:00+00:00\",\"description\":\"Many of you, I believe, are familiar with the WordPress login page at wp-login.php. It looks nice, and works fine. But when it comes to creating a website\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-custom-loginpage\\\/login-wordpress-page-slug.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-custom-loginpage\\\/login-wordpress-page-slug.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-custom-loginpage\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build A Fully Customized WordPress Login Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build A Fully Customized WordPress Login Page - Hongkiat","description":"Many of you, I believe, are familiar with the WordPress login page at wp-login.php. It looks nice, and works fine. But when it comes to creating a website","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/","og_locale":"en_US","og_type":"article","og_title":"How to Build A Fully Customized WordPress Login Page","og_description":"Many of you, I believe, are familiar with the WordPress login page at wp-login.php. It looks nice, and works fine. But when it comes to creating a website","og_url":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-05-06T13:23:05+00:00","article_modified_time":"2022-10-18T12:12:00+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/login-wordpress-page-slug.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Build A Fully Customized WordPress Login Page","datePublished":"2020-05-06T13:23:05+00:00","dateModified":"2022-10-18T12:12:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/"},"wordCount":663,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/login-wordpress-page-slug.jpg","keywords":["ad-divi","wordpress login page","WordPress Tips"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/","url":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/","name":"How to Build A Fully Customized WordPress Login Page - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/login-wordpress-page-slug.jpg","datePublished":"2020-05-06T13:23:05+00:00","dateModified":"2022-10-18T12:12:00+00:00","description":"Many of you, I believe, are familiar with the WordPress login page at wp-login.php. It looks nice, and works fine. But when it comes to creating a website","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/login-wordpress-page-slug.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-custom-loginpage\/login-wordpress-page-slug.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-custom-loginpage\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build A Fully Customized WordPress Login Page"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-570","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19654"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19654\/revisions"}],"predecessor-version":[{"id":50177,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19654\/revisions\/50177"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19654"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}