{"id":117927,"date":"2014-07-03T09:47:10","date_gmt":"2014-07-03T07:47:10","guid":{"rendered":"http:\/\/designmodo.com\/?p=117927"},"modified":"2025-11-11T10:13:28","modified_gmt":"2025-11-11T10:13:28","slug":"wordpress-custom-login","status":"publish","type":"post","link":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/","title":{"rendered":"Building a Custom WordPress Login Form with Flat UI"},"content":{"rendered":"

WordPress is the most populous and one of the best content management systems in the world. It powers over 60 percent<\/strong> of websites in the world.<\/p>\n

By default, the Login form<\/strong> in WordPress is only visible when trying to access the administration dashboard. But you may prefer a custom login page<\/strong> that integrates visually with your website design instead of using the WordPress default login.<\/p>\n

In this tutorial, I will teach you how to build a custom login form that can be embedded in a post or page using a shortcode and in a specific theme location using template tag.<\/p>\n

\"StrictThemes\"<\/p>\n

The Flat UI<\/a> form component — with a great aesthetic — will be used for the login form in this tutorial.<\/p>\n

Below is a screenshot of the custom login form.<\/p>\n

\"WordPress<\/p>\n

Custom WordPress Login Form Development<\/h2>\n

Without further fussing, let’s get started.<\/p>\n

First, create a folder called “plugin directory” where all of the plugin files will be stored.<\/p>\n

Include the plugin file header as follows:<\/p>\n

[php]
\n&lt;?php<\/p>\n

\/*
\n Plugin Name: Designmodo Login Form
\n Plugin URI: https:\/\/designmodo.com
\n Description: Simple Login form plugin that just work
\n Version: 1.0
\n Author: Agbonghama Collins
\n Author URI:
\n *\/
\n[\/php]<\/p>\n

Remember we are using the form component in Flat UI and need to include it to our plugin folder. Download the Flat UI<\/a>, extract the files and copy the bootstrap<\/code>, css<\/code> and font<\/code> folder to our plugin folder.<\/p>\n

The PHP function dlf_form()<\/code> below contains the Login HTML form code.<\/p>\n

[php] function dlf_form() {<\/p>\n

?><\/p>\n

<form method="post" action="<?php echo $_SERVER[‘REQUEST_URI’]; ?>">
\n\t<div class="login-form">
\n\t\t<div class="form-group">
\n\t\t\t<input name="login_name" type="text" class="form-control login-field" value="" placeholder="Username" id="login-name" \/>
\n\t\t\t<label class="login-field-icon fui-user" for="login-name"><\/label>
\n\t\t<\/div><\/p>\n

\t\t<div class="form-group">
\n\t\t\t<input name="login_password" type="password" class="form-control login-field" value="" placeholder="Password" id="login-pass" \/>
\n\t\t\t<label class="login-field-icon fui-lock" for="login-pass"><\/label>
\n\t\t<\/div>
\n\t\t<input class="btn btn-primary btn-lg btn-block" type="submit" name="dlf_submit" value="Log in" \/>
\n<\/form><closeform><\/closeform>
\n<\/div>
\n<?php
\n}
\n[\/php]<\/p>\n

We need to authenticate the username and password that will be entered to the login form. The dlf_auth()<\/code> below handles that.<\/p>\n

[php]
\nfunction dlf_auth( $username, $password ) {
\nglobal $user;
\n$creds = array();
\n$creds[‘user_login’] = $username;
\n$creds[‘user_password’] = $password;
\n$creds[‘remember’] = true;
\n$user = wp_signon( $creds, false );
\nif ( is_wp_error($user) ) {
\necho $user-&gt;get_error_message();
\n}
\nif ( !is_wp_error($user) ) {
\nwp_redirect(home_url(‘wp-admin’));
\n}
\n}
\n[\/php]<\/p>\n

When an invalid username or password is entered, an error message informing the user that data supplied is invalid will be displayed with a link to the Lost your password<\/strong> page, assuming the user forgot his or her password.<\/p>\n

\"WordPress<\/p>\n

The dlf_process()<\/code> function below display the login form to WordPress front-end, check if the login form has been submitted and then call the dlf_auth()<\/code> function to authenticate the username and password. If the login credentials are deemed valid, the user will be redirected to WordPress admin dashboard.<\/p>\n

Below is the code for the dlf_process()<\/code> function:<\/p>\n

[php]
\nfunction dlf_process() {
\nif (isset($_POST[‘dlf_submit’])) {
\n\tdlf_auth($_POST[‘login_name’], $_POST[‘login_password’]);
\n}<\/p>\n

dlf_form();
\n}
\n[\/php]<\/p>\n

To give our plugin the awesome look powered by Flat UI<\/a>, we need to append the Bootstrap and Flat UI css stylesheet to WordPress header using WP enqueue function as shown below.<\/p>\n

[php]
\nfunction flat_ui_kit() {
\nwp_enqueue_style(‘bootstrap-css’, plugins_url(‘bootstrap\/css\/bootstrap.css’, __FILE__));
\nwp_enqueue_style(‘flat-ui-kit’, plugins_url(‘css\/flat-ui.css’, __FILE__));<\/p>\n

}<\/p>\n

add_action(‘wp_enqueue_scripts’, ‘flat_ui_kit’);
\n[\/php]<\/p>\n

To be able to easily embed this custom login form to a WordPress page, it has to be done via shortcode. The codes below provide a [dm_login_form]<\/strong> shortcode which when inserted to a post or page, the login form will be embedded.<\/p>\n

[php]
\nfunction dlf_shortcode() {
\nob_start();
\ndlf_process();
\nreturn ob_get_clean();
\n}<\/p>\n

add_shortcode(‘dm_login_form’, ‘dlf_shortcode’);
\n[\/php]<\/p>\n

Voila! we have completed the coding of our custom WordPress login form plugin.<\/p>\n

Using the Login Form Plugin<\/h3>\n

First, get the plugin installed and activated in your WordPress blog.<\/p>\n

To embed the custom login form in a post or page, use the shortcode [dm_login_form]<\/code>. To include it a specific location in your theme, use the template tag below.<\/p>\n

[php]
\n<?php echo do_shortcode(‘[dm_login_form]’); ?>
\n[\/php]<\/p>\n

Summary<\/h3>\n

I know a lot of us would love to have a customized login form on a WordPress-powered website. This tutorial should help you achieve it.<\/p>\n

[emaillocker]
\nHere is the link to the plugin file<\/a> to use in your WordPress site; you can also study the code to learn how it works.
\n[\/emaillocker]<\/p>\n

If you have any questions, let me know in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"

WordPress is the most populous and one of the best content management systems in the world. It powers over 60 percent of websites in the world. By default, the Login form in WordPress is only visible when trying to access the administration dashboard. But you may prefer a custom login page that integrates visually with […]<\/p>\n","protected":false},"author":1,"featured_media":118550,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-117927","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"blocksy_meta":[],"yoast_head":"\nBuilding a Custom WordPress Login Form with Flat UI - WordPress Guides<\/title>\n<meta name=\"description\" content=\"By default, the Login form in WordPress is only visible when trying to access the administration dashboard. But you may prefer a custom login page that integrates visually with your website design instead of using the WordPress default login.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Custom WordPress Login Form with Flat UI - WordPress Guides\" \/>\n<meta property=\"og:description\" content=\"By default, the Login form in WordPress is only visible when trying to access the administration dashboard. But you may prefer a custom login page that integrates visually with your website design instead of using the WordPress default login.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/\" \/>\n<meta property=\"og:site_name\" content=\"WordPress Guides\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-03T07:47:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-11T10:13:28+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3\"},\"headline\":\"Building a Custom WordPress Login Form with Flat UI\",\"datePublished\":\"2014-07-03T07:47:10+00:00\",\"dateModified\":\"2025-11-11T10:13:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/\"},\"wordCount\":866,\"commentCount\":21,\"publisher\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/\",\"url\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/\",\"name\":\"Building a Custom WordPress Login Form with Flat UI - WordPress Guides\",\"isPartOf\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2014-07-03T07:47:10+00:00\",\"dateModified\":\"2025-11-11T10:13:28+00:00\",\"description\":\"By default, the Login form in WordPress is only visible when trying to access the administration dashboard. But you may prefer a custom login page that integrates visually with your website design instead of using the WordPress default login.\",\"breadcrumb\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/strictthemes.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Custom WordPress Login Form with Flat UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#website\",\"url\":\"https:\/\/strictthemes.com\/articles\/\",\"name\":\"WordPress Guides\",\"description\":\"Create WordPress websites for begginers.\",\"publisher\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/strictthemes.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#organization\",\"name\":\"WordPress Guides\",\"url\":\"https:\/\/strictthemes.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2021\/02\/logo.png\",\"contentUrl\":\"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2021\/02\/logo.png\",\"width\":500,\"height\":500,\"caption\":\"WordPress Guides\"},\"image\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/strictthemes.com\/articles\"],\"url\":\"https:\/\/strictthemes.com\/articles\/author\/andrian\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a Custom WordPress Login Form with Flat UI - WordPress Guides","description":"By default, the Login form in WordPress is only visible when trying to access the administration dashboard. But you may prefer a custom login page that integrates visually with your website design instead of using the WordPress default login.","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:\/\/strictthemes.com\/articles\/wordpress-custom-login\/","og_locale":"en_US","og_type":"article","og_title":"Building a Custom WordPress Login Form with Flat UI - WordPress Guides","og_description":"By default, the Login form in WordPress is only visible when trying to access the administration dashboard. But you may prefer a custom login page that integrates visually with your website design instead of using the WordPress default login.","og_url":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/","og_site_name":"WordPress Guides","article_published_time":"2014-07-03T07:47:10+00:00","article_modified_time":"2025-11-11T10:13:28+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#article","isPartOf":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/"},"author":{"name":"admin","@id":"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3"},"headline":"Building a Custom WordPress Login Form with Flat UI","datePublished":"2014-07-03T07:47:10+00:00","dateModified":"2025-11-11T10:13:28+00:00","mainEntityOfPage":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/"},"wordCount":866,"commentCount":21,"publisher":{"@id":"https:\/\/strictthemes.com\/articles\/#organization"},"image":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#primaryimage"},"thumbnailUrl":"","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/","url":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/","name":"Building a Custom WordPress Login Form with Flat UI - WordPress Guides","isPartOf":{"@id":"https:\/\/strictthemes.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#primaryimage"},"image":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#primaryimage"},"thumbnailUrl":"","datePublished":"2014-07-03T07:47:10+00:00","dateModified":"2025-11-11T10:13:28+00:00","description":"By default, the Login form in WordPress is only visible when trying to access the administration dashboard. But you may prefer a custom login page that integrates visually with your website design instead of using the WordPress default login.","breadcrumb":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/strictthemes.com\/articles\/wordpress-custom-login\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/strictthemes.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Building a Custom WordPress Login Form with Flat UI"}]},{"@type":"WebSite","@id":"https:\/\/strictthemes.com\/articles\/#website","url":"https:\/\/strictthemes.com\/articles\/","name":"WordPress Guides","description":"Create WordPress websites for begginers.","publisher":{"@id":"https:\/\/strictthemes.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/strictthemes.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/strictthemes.com\/articles\/#organization","name":"WordPress Guides","url":"https:\/\/strictthemes.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/strictthemes.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2021\/02\/logo.png","contentUrl":"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2021\/02\/logo.png","width":500,"height":500,"caption":"WordPress Guides"},"image":{"@id":"https:\/\/strictthemes.com\/articles\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/strictthemes.com\/articles"],"url":"https:\/\/strictthemes.com\/articles\/author\/andrian\/"}]}},"_links":{"self":[{"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts\/117927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/comments?post=117927"}],"version-history":[{"count":2,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts\/117927\/revisions"}],"predecessor-version":[{"id":690252,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts\/117927\/revisions\/690252"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/media?parent=117927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/categories?post=117927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/tags?post=117927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}