In this article, we will build WordPress Custom Registration and Login Pages With Shortcodes.
Table of Contents
When it comes to building a successful website, providing a seamless user experience is paramount. One crucial aspect of this experience is the registration and login process. Fortunately, WordPress offers a flexible and powerful platform that allows you to create wordpress custom registration and login pages tailored to your website’s branding and functionality.
Elevate your website’s user experience effortlessly with the magic of WordPress Custom Registration and Login Pages, brought to life using convenient shortcodes.
We’ll explore the concept of wordpress custom registration and login pages using shortcodes, highlighting their benefits and providing step-by-step instructions to implement them on your own website.
Why Need WordPress Custom Registration and Login Pages?
WordPress provides default registration and login pages, but they may not always align with your website’s design or functionality requirements. By creating WordPress Custom Registration and Login Pages, you have full control over the user experience, ensuring a seamless and branded journey for your visitors. Shortcodes play a significant role in this process by simplifying the implementation and management of these pages.
Creating a seamless user experience on your website is made easy with WordPress Custom Registration and Login Pages using shortcodes.
Benefits of Using Shortcodes for WordPress Custom Registration and Login Pages:
- Design Flexibility: With shortcodes, you can design wordpress custom registration and login pages that match your website’s aesthetics seamlessly. Customize the layout, color scheme, and typography to create a cohesive user experience.
- Brand Consistency: WordPress Custom Registration and Login Pages with your branding elements, such as logos and colors, strengthen brand recognition and trust among your users. Consistency across all touchpoints enhances your website’s professionalism.
- Seamless Integration: Shortcodes enable easy integration of wordpress custom registration and login pages on your website. This flexibility empowers you to place these forms strategically to maximize user engagement.
Implementing WordPress Custom Registration and Login Pages
You need to add a code snippet in the functions.php file of your child theme to create a shortcode. see below
1). First, we’ll create a login page shortcode. add following code into the functions.php file of your child theme :
function phptutorialpoints_login_form() {
if(!is_user_logged_in()) {
global $phptutorialpoints_load_css;
// set this to true so the CSS is loaded
$phptutorialpoints_load_css = true;
$output = phptutorialpoints_login_form_fields();
} else {
$output = __('<p class="login_msg">You are already logged in.</p>');
}
return $output;
}
add_shortcode('login_form', 'phptutorialpoints_login_form');
/* Login form fields start */
function phptutorialpoints_login_form_fields() {
ob_start(); ?>
<?php
// show any error messages after form submission
phptutorialpoints_show_error_messages(); ?>
<form id="phptutorialpoints_login_form" class="phptutorialpoints_form form" action="" method="post">
<div class="form-group">
<input name="phptutorialpoints_user_login" id="phptutorialpoints_user_login" placeholder="Username or Email Address" class="required" type="text"/>
</div>
<div class="form-group">
<input name="phptutorialpoints_user_pass" id="phptutorialpoints_user_pass" placeholder="Password" class="required" type="password"/>
</div>
<div class="form-group">
<a class="forgotp" href="<?php echo wp_lostpassword_url();?>"> Forgot your password? </a>
</div>
<divclass="form-group">
<input type="hidden" name="phptutorialpoints_login_nonce" value="<?php echo wp_create_nonce('pippin-login-nonce'); ?>"/>
<input id="phptutorialpoints_login_submit" type="submit" value="Login"/>
</div>
<divclass="form-group">
<a href="<?php the_permalink(76);?>" class="darkpink darkblue" >Don't have account? Sign up</a>
</div>
</form>
<?php
return ob_get_clean();
}
/* Login form fields end */
/* Logs a member in after submitting a form start */
function phptutorialpoints_login_member() {
if(isset($_POST['phptutorialpoints_login_nonce']) && wp_verify_nonce($_POST['phptutorialpoints_login_nonce'], 'pippin-login-nonce')) {
// this returns the user ID and other info from the user name
$user = get_user_by('login', $_POST['phptutorialpoints_user_login']);
if(!$user) {
// if the user name doesn't exist
phptutorialpoints_errors()->add('empty_username', __('Invalid username'));
}
if(!isset($_POST['phptutorialpoints_user_pass']) || $_POST['phptutorialpoints_user_pass'] == '') {
// if no password was entered
phptutorialpoints_errors()->add('empty_password', __('Please enter a password'));
}
// check the user's login with their password
if(!empty($user) && !wp_check_password($_POST['phptutorialpoints_user_pass'], $user->data->user_pass, $user->ID)) {
// if the password is incorrect for the specified user
phptutorialpoints_errors()->add('empty_password', __('Incorrect password'));
}
// retrieve all error messages
$errors = phptutorialpoints_errors()->get_error_messages();
// only log the user in if there are no errors
if(empty($errors)) {
wp_set_auth_cookie ( $user->ID );
wp_set_current_user($user->ID, $_POST['phptutorialpoints_user_login']);
do_action('wp_login', $_POST['phptutorialpoints_user_login']);
wp_redirect(get_permalink(2)); exit;
}
}
}
add_action('init', 'phptutorialpoints_login_member');
/* Logs a member in after submitting a form end */
2). Once you add the above code, you can use a shortcode in pages to create a login page. now, let’s add the following code into the functions.php file of your child theme to create a register form shortcode:
Also, to work below code, make sure the registration function is enabled for your WordPress website. Head to Settings > General Settings. Here, enable the “Anyone can register” option. Also, choose a default role for new users. Preferably, you should set it as Subscriber. Save the changes when you’re done.
/* Register a new user start */
function phptutorialpoints_add_new_member() {
if (isset( $_POST["phptutorialpoints_register_nonce"] ) && wp_verify_nonce($_POST['phptutorialpoints_register_nonce'], 'pippin-register-nonce')) {
$user_login = isset($_POST['phptutorialpoints_user_login']) ? $_POST['phptutorialpoints_user_login'] : '';
$user_email = isset($_POST['phptutorialpoints_user_email']) ? $_POST['phptutorialpoints_user_email'] : '';
$user_first = isset($_POST['phptutorialpoints_user_first']) ? $_POST['phptutorialpoints_user_first'] : '';
$user_last = isset($_POST['phptutorialpoints_user_last']) ? $_POST['phptutorialpoints_user_last'] : '';
$user_pass = isset($_POST['phptutorialpoints_user_pass']) ? $_POST['phptutorialpoints_user_pass'] : '';
$user_address = isset($_POST['phptutorialpoints_user_address']) ? $_POST['phptutorialpoints_user_address'] : '';
$user_city = isset($_POST['phptutorialpoints_user_city']) ? $_POST['phptutorialpoints_user_city'] : '';
$user_province = isset($_POST['province']) ? $_POST['province'] : '';
$user_zipcode = isset($_POST['phptutorialpoints_user_zipcode']) ? $_POST['phptutorialpoints_user_zipcode'] : '';
$personal_account = isset($_POST['personal_account']) ? $_POST['personal_account'] : '';
$organization_account = isset($_POST['organization_account']) ? $_POST['organization_account'] : '';
// this is required for username checks
// require_once(ABSPATH . WPINC . '/registration.php');
if($user_login != '' && username_exists($user_login)) {
// Username already registered
phptutorialpoints_errors()->add('username_unavailable', __('Username already taken'));
}
if($user_login != '' && !validate_username($user_login)) {
// invalid username
phptutorialpoints_errors()->add('username_invalid', __('Invalid username'));
}
if($user_login == '') {
// empty username
phptutorialpoints_errors()->add('username_empty', __('Please enter a username'));
}
if(!is_email($user_email)) {
//invalid email
phptutorialpoints_errors()->add('email_invalid', __('Invalid email'));
}
if(email_exists($user_email)) {
//Email address already registered
phptutorialpoints_errors()->add('email_used', __('Email already registered'));
}
if($user_pass == '') {
// passwords do not match
phptutorialpoints_errors()->add('password_empty', __('Please enter a password'));
}
$errors = phptutorialpoints_errors()->get_error_messages();
// only create the user in if there are no errors
if(empty($errors)) {
$new_user_id = wp_insert_user(array(
'user_login' => $user_login,
'user_pass' => $user_pass,
'user_email' => $user_email,
'first_name' => $user_first,
'last_name' => $user_last,
'user_registered' => date('Y-m-d H:i:s'),
'role' => 'subscriber'
)
);
if($new_user_id) {
$current_ip = $_SERVER['REMOTE_ADDR'];
add_user_meta( $new_user_id, 'user_address', $user_address);
add_user_meta( $new_user_id, 'user_city', $user_city);
add_user_meta( $new_user_id, 'user_zipcode', $user_zipcode);
add_user_meta( $new_user_id, 'user_ip', $current_ip);
add_user_meta( $new_user_id, 'personal_account', $personal_account);
add_user_meta( $new_user_id, 'organization_account', $organization_account);
// send an email to the admin alerting them of the registration
wp_new_user_notification($new_user_id);
// log the new user in
wp_set_auth_cookie ( $new_user_id );
wp_set_current_user($new_user_id, $user_login);
do_action('wp_login', $user_login);
// send the newly created user to the home page after logging them in
wp_redirect(get_permalink(2)); exit;
}
}
}
}
add_action('init', 'phptutorialpoints_add_new_member');
/* Register a new user end */
/* Used for tracking error messages end */
function phptutorialpoints_errors(){
static $wp_error; // Will hold global variable safely
return isset($wp_error) ? $wp_error : ($wp_error = new WP_Error(null, null, null));
}
/* Used for tracking error messages end */
/* Displays error messages from form submissions start */
function phptutorialpoints_show_error_messages() {
if($codes = phptutorialpoints_errors()->get_error_codes()) {
echo '<div class="phptutorialpoints_errors">';
// Loop error codes and display errors
foreach($codes as $code){
$message = phptutorialpoints_errors()->get_error_message($code);
echo '<span class="error"><strong>' . __('Error') . '</strong>: ' . $message . '</span>';
}
echo '</div>';
}
}
/* Displays error messages from form submissions end */
/* User registration login form */
function phptutorialpoints_registration_form() {
// only show the registration form to non-logged-in members
if(!is_user_logged_in()) {
global $phptutorialpoints_load_css;
// set this to true so the CSS is loaded
$phptutorialpoints_load_css = true;
// check to make sure user registration is enabled
$registration_enabled = get_option('users_can_register');
// only show the registration form if allowed
$output = phptutorialpoints_registration_form_fields();
} else {
$output = __('<p class="login_msg">You are already logged in.</p>');
}
return $output;
}
add_shortcode('register_form', 'phptutorialpoints_registration_form');
/* Registration form fields */
function phptutorialpoints_registration_form_fields() {
ob_start(); ?>
<?php
// show any error messages after form submission
phptutorialpoints_show_error_messages(); ?>
<form id="phptutorialpoints_registration_form" class="row signup_form phptutorialpoints_form" action="" method="POST">
<div class="col-sm-6 form-group">
<input name="phptutorialpoints_user_first" placeholder="First Name" id="phptutorialpoints_user_first" type="text"/>
</div>
<div class="col-sm-6 form-group">
<input name="phptutorialpoints_user_last" placeholder="Last Name" id="phptutorialpoints_user_last" type="text"/>
</div>
<div class="col-12 form-group">
<input name="phptutorialpoints_user_login" placeholder="Username" id="phptutorialpoints_user_login" class="required" type="text"/>
</div>
<div class="col-12 form-group">
<input name="phptutorialpoints_user_pass" placeholder="Password" id="password" class="required" type="password"/>
</div>
<div class="col-12 form-group">
<input name="phptutorialpoints_user_email" placeholder="Email address" id="phptutorialpoints_user_email" class="required" type="email"/>
</div>
<div class="col-12 form-group">
<input name="phptutorialpoints_user_address" id="phptutorialpoints_user_address" type="text" placeholder="Address">
</div>
<div class="col-12 form-group">
<input name="phptutorialpoints_user_city" id="phptutorialpoints_user_city" type="text" placeholder="City">
</div>
<div class="col-sm-6 form-group">
<input id="phptutorialpoints_user_zipcode" name="phptutorialpoints_user_zipcode" class="phptutorialpoints_user_zipcode" type="text" placeholder="Zip code">
</div>
<div class="col-12 checkbox_holder">
<div class="my_chk">
<input type="checkbox" id="personal_account" name="personal account" value="personal">
<label for="personal_account">Personal account</label>
</div>
<div class="my_chk">
<input type="checkbox" id="organization_account" name="organization account" value="organization">
<label for="organization_account">Organization account</label>
</div>
</div>
<div class="col-12 form-group">
<input type="hidden" name="phptutorialpoints_register_nonce" value="<?php echo wp_create_nonce('pippin-register-nonce'); ?>"/>
<input type="submit" class="darkblue" value="<?php _e('Create account'); ?>"/>
</div>
</form>
<?php
return ob_get_clean();
}
/* Disable Admin Bar for Subscriber start */
add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
if (current_user_can('subscriber') && !is_admin()) {
show_admin_bar(false);
}
}
/* Disable Admin Bar for Subscriber end */
/* Forgot password form start */
function phptutorialpoints_change_password_form() {
global $post;
if (is_singular()) :
$current_url = get_permalink($post->ID);
else :
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") $pageURL .= "s";
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
else $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
$current_url = $pageURL;
endif;
$redirect = $current_url;
ob_start();
// show any error messages after form submission
phptutorialpoints_show_error_messages(); ?>
<?php if(isset($_GET['password-reset']) && $_GET['password-reset'] == 'true') { ?>
<div class="phptutorialpoints_message success">
<span><?php _e('Password changed successfully', 'rcp'); ?></span>
</div>
<?php } ?>
<form id="phptutorialpoints_password_form" method="POST" action="<?php echo $current_url; ?>">
<fieldset>
<p>
<label for="phptutorialpoints_user_pass"><?php _e('New Password', 'rcp'); ?></label>
<input name="phptutorialpoints_user_pass" id="phptutorialpoints_user_pass" class="required" type="password"/>
</p>
<p>
<label for="phptutorialpoints_user_pass_confirm"><?php _e('Password Confirm', 'rcp'); ?></label>
<input name="phptutorialpoints_user_pass_confirm" id="phptutorialpoints_user_pass_confirm" class="required" type="password"/>
</p>
<p>
<input type="hidden" name="phptutorialpoints_action" value="reset-password"/>
<input type="hidden" name="phptutorialpoints_redirect" value="<?php echo $redirect; ?>"/>
<input type="hidden" name="phptutorialpoints_password_nonce" value="<?php echo wp_create_nonce('rcp-password-nonce'); ?>"/>
<input id="phptutorialpoints_password_submit" type="submit" value="<?php _e('Change Password', 'pippin'); ?>"/>
</p>
</fieldset>
</form>
<?php
return ob_get_clean();
}
3). Once you add the above code, you can create a registration form page. now, add the following code in the functions.php file to create a page with a welcome message and logout link for logged in users:
function phptutorialpoints_loginout(){
ob_start();
if(is_user_logged_in()){
$redirect = get_permalink(2);
$current_user = wp_get_current_user();
$user_id = $current_user->ID;
$user_city = get_user_meta( $user_id, 'user_city');
$city = !empty($user_city[0]) ? $user_city[0] : '';
$province = !empty($user_province[0]) ? $user_province[0] : '';
?>
<div class="user_bar">
<div class="user_img">
<?php $profile_img = get_avatar_url( $user_id);
if($profile_img){?>
<img src="<?php echo $profile_img;?>" alt="<?php echo esc_html( $current_user->user_login );?>">
<?php } ?>
<p>Hi, <?php echo esc_html( $current_user->user_login );?><span><?php echo $city?></span></p>
</div>
<div class="user_btn">
<a class="my_btn" href="<?php echo wp_logout_url($redirect); ?>">Logout</a>
</div>
</div>
<?php }
return ob_get_clean();
}
add_shortcode('phptutorialpoints_loginform', 'phptutorialpoints_loginout');
After adding all of the above codes, you can create WordPress Custom Registration and Login Pages With Shortcodes.
In the world of website development, customization and user experience go hand in hand. With WordPress, you have the power to create a wordpress custom registration and login pages that seamlessly integrate into your website’s design and functionality. By utilizing shortcodes, you can simplify the implementation process while providing a branded and user-friendly experience for your visitors. Take the time to design these pages thoughtfully, ensuring they align with your website’s overall look and feel. Remember, a seamless registration and login experience can contribute to increased user engagement and satisfaction, ultimately driving the success of your website.
I hope this article helps you to create WordPress Custom Registration and Login Pages!
