How to Create Login page in WordPress without plugin?
Create Login page in WordPress without plugin:
Creating a custom login page in WordPress without using a plugin involves modifying your theme’s files and adding custom code. Here’s a step-by-step guide to help you create a custom login page:
1. Create a Child Theme:
- Before making any changes, it’s good practice to create a child theme to avoid losing your modifications during theme updates.
- Create a new folder in your wp-content/themes/ directory for your child’s theme.
- Inside the child theme folder, create a style.css file with the following header:
/* Theme Name: Your Child Theme Template: parent-theme-folder-name */
2. Create a Custom Login Template:
- Inside your child theme folder, create a new file named login.php.
- Copy the contents of the original wp-login.php file and paste them into your new login.php file.
3. Modify the Login Form:
- Find the HTML code for the login form in your login.php file.
- Customize the form as needed. You can change the form structure, and styling, and add custom classes.
- You might also want to add your own CSS styles by enqueuing a custom stylesheet.
4. Redirect Users to the Custom Login Page:
- To ensure users are redirected to your custom login page, add the following code to your child theme’s functions.php file:
function custom_login_page() { $login_page = home_url('/custom-login'); // Change '/custom-login' to the slug of your custom login page $page_viewed = basename($_SERVER['REQUEST_URI']); if ($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','custom_login_page');
Make sure to replace /custom-login with the actual slug of your custom login page.
5. Styling:
- Add styles to your custom login form by including them directly in the login.php file or enqueuing a separate stylesheet in your functions.php file.
function custom_login_styles() { echo '<link rel="stylesheet" type="text/css" href="' . get_stylesheet_directory_uri() . '/custom-login-styles.css" />'; } add_action('login_head', 'custom_login_styles');
- Create a custom-login-styles.css file in your child theme folder and add your custom styles.
6. Test Your Custom Login Page:
- Save all your changes and test your custom login page by visiting the URL you specified.