WordPress Plugin Development Tutorial Using Ajax

the plugin is the best way to add more featured to WordPress and on theme change the feature will not be gone. In this tutorial, we are going to develop a WordPress login registration plugin with the shortcode. Now start step by step,

you can use the shortcode for the plugin

[CMWP_LOGIN redirect=<page page id after login> login_page_id=<your login page id>] for login form page
[CMWP_RESTRICTED login_page_id=<your login page id>] for restricted page
[CMWP_REGISTRATION user_type=<user role>] for getting the logout link
[CMWP_RESTRICTED login_page_id=<your login page id>] for restricted page

First Step:

Create a folder inside your plugin folder and try to make that unique as another plugin of WordPress do not conflict with the plugin

Example: codemystery_login

Second Step:

Create a PHP file as the same name as the folder created, here you can use the index.php also but it is good to create according to the folder name

Example: codemystery_login.php

Third Step:

Now open codemystery_login.php file in a text or code editor and describe the plugin under commenting, remember to give the name of the plugin unique as it also should not be same as any other plugin of WordPress, the plugin URI is the location of the plugin in server, the description is to describe the plugin, the version is to define the version number of the plugin, author is to define the author name of the plugin and author URI is the website or link of the author of the WordPress plugin.

Example:

<?php
/*
* Plugin Name: CodeMystery's WP Login
* Plugin URI: https://www.codemystery.com/
* Description: Its a sample wordpress Frontend login plugin with shortcode.
* Version: 0.1
* Author: Code Mystery
* Author URI: https://www.codemystery.com/
*/
?>

Fourth Step:

Its the part for coding and arrange to start code

    • 1. here I have created another folder to separate the code inside my codemystery_login (plugin folder) and given name include
    • 2. create 4 PHP file in include folder (you can create more or less) and give the name to them as
      • a. login_form.php to make the login form with shortcode,
      • b. registration_form.php to make the registration form with shortcode,
      • c. logout_url.php to get the logout URL using shortcode
      • d. and restricted_page.php to make the pages cannot be reached without login
    • 3. Now open the codemystery_login.php file and define as global some variable
        • a. First, define the WordPress user as global using global $user_login;
        • b. login redirect URL, login page URL, the directory path and will use them if not
          sent from the WordPress shortcode the defining codes are

          			   <?php
          			   global $user_login
          			   DEFINE("CMWP_LOGIN_REDIRECT", home_url( '/wp-admin/' ));
          			   DEFINE("CMWP_LOGIN_URL", home_url( '' ));
          			   DEFINE("DIR_PATH", plugin_dir_path( __FILE__ ).'/');
          			   ?>

       

    • 4. Now include the files you have created in the include folder
      The code is:

      		<?php
      		include_once( DIR_PATH . 'include/login_form.php' );
      		include_once( DIR_PATH . 'include/registration_form.php' );
      		include_once( DIR_PATH . 'include/logout_url.php' );
      		include_once( DIR_PATH . 'include/restricted_page.php' );
      		?>

Fifth Step:

Now open the file login_form.php and start to write the code

  • a. <?php add_shortcode("CMWP_LOGIN", "cm_login_form"); ?> here CMWP_LOGIN is the shortcode and cm_login_form is the function to be called for the shortcode
  • b. now make the function cm_login_form
    		<?php
    		<?php add_shortcode("CMWP_LOGIN", "cm_login_form"); ?>
    		function cm_login_form($page_ids){
    			$page_ids=shortcode_atts(array(
    						    "redirect" => CMWP_LOGIN_REDIRECT,
    						    "login_page_id" => CMWP_LOGIN_URL        
    						  ), $page_ids);
    
    			$output_login_form = cm_login_form_perform($page_ids);
    			//send back text to replace shortcode in post
    			return $output_login_form;
    		}
    		?>
    

    from the function we are calling another function and passing the shortcode variables values and here redirect is the shortcode variable and login_page_id also the shortcode and the values of the variable is passing through the function and if there are not any values then it will get the defined values.

  • c. now make the cm_login_form_perform function and you have done the login form
    	<?php
    	function cm_login_form_perform($get_page_ids){
    		//hetting the redirent page id
    		$redirect_uri_id = $get_page_ids["redirect"];
    
    		//getting the redirect page url
    		$redirect_uri = get_page_link($redirect_uri_id );
    
    
    		//getting the login page id
    		$login_page_uri_id = $get_page_ids["login_page_id"];
    
    		//getting the login page url
    		$login_page_uri = get_page_link($login_page_uri_id );
    		
    		if ( isset( $_GET['login'] ) && $_GET['login'] == 'failed' ) : ?>
    	    	    <div class="CMWP_error">
    	    		    <p><?php _e( 'FAILED: Try again!', 'CMWP' ); ?></p>
    	    	    </div>
    	    <?php 
    	    endif;
    	        
    	    // If user is already logged in.
    	    if ( is_user_logged_in() ) : ?>
    			<div class="CMWP_logout"> 
    	            <?php 
    	                _e( 'Hello', 'CMWP' ); 
    	                echo $user_login; 
    	            ?>
    	            </br>
    	            <?php _e( 'You are already logged in.', 'CMWP' ); ?>
    			</div>
    			<a id="wp-submit" href="<?php echo wp_logout_url( $login_page_uri ); ?>" title="Logout">
    	            <?php _e( 'Logout', 'CMWP' ); ?>
    	        </a><br/>
    	        or        
    			<br/><a id="wp-submit" href="<?php echo $redirect_uri; ?>" title="Logout">
    	            <?php _e( 'Go to Options page', 'CMWP' ); ?>
    	        </a>
    		<?php 
    	    // If user is not logged in.
    	    else: 
    	        //home_url( '/wp-admin/' ),   //default redirect url
    	        // Login form arguments.
    	        $args = array(
    	                    'echo'           => true,
    	                    'redirect'       => $redirect_uri, 
    	                    'form_id'        => 'loginform',
    	                    'label_username' => __( 'Username' ),
    	                    'label_password' => __( 'Password' ),
    	                    'label_remember' => __( 'Remember Me' ),
    	                    'label_log_in'   => __( 'Log In' ),
    	                    'id_username'    => 'user_login',
    	                    'id_password'    => 'user_pass',
    	                    'id_remember'    => 'rememberme',
    	                    'id_submit'      => 'wp-submit',
    	                    'remember'       => true,
    	                    'value_username' => NULL,
    	                    'value_remember' => true
    	                ); 
    	                
    	                // Calling the login form.
    	        wp_login_form( $args );
    	    endif;
    	}
    	?>
    

Sixth Step:

Open the registration_form.php file and write the code and the calling the shortcode and its related function and getting the shortcode variables and its values are the same as making login form located above.

<?php add_shortcode("CMWP_REGISTRATION", "cm_reg_form"); ?>
<?php
function cm_reg_form($page_ids){
	$page_ids=shortcode_atts(array(
				    "user_type" => CMWP_LOGIN_REDIRECT      
				  ), $page_ids);

	$output_login_form = cm_reg_form_perform($page_ids);
	//send back text to replace shortcode in post
	return $output_login_form;
}
?>

<?php
function cm_reg_form_perform($get_page_ids){
	//hetting the redirent page id
	$user_type = $get_page_ids["user_type"]; // example subscriber or administrator
	if (isset($_POST['submit']) && $_POST['submit']!='') {
		$pass = $_POST['upassword'];
		$cpass = $_POST['cupassword'];
		if($pass == $cpass){
			$user = $_POST['uusername'];
			$email = $_POST['uemail'];
			$user_url = $_POST['uwebsite'];
			$first_name = $_POST['ufirst_name'];
			$last_name = $_POST['ulast_name'];
			$description = $_POST['udesc'];
			
			if( !username_exists( $user )  && !email_exists( $email ) ){
				$user_id = wp_create_user( $user, $pass, $email );
				$user = new WP_User( $user_id );
				$user->set_role( $user_type );
				$user_id = wp_update_user( array( 'ID' => $user_id, 'user_url' => $user_url, 'first_name' => $first_name, 'last_name' => $last_name, 'description' => $description ) );
					
				if ( is_wp_error( $user_id ) ) {
					$message = '<span style="color:orange;">User created please login</span>';
                } else {
					$message = '<span style="color:green;">User created succesfully please login</span>';
				}
			}else{
				$message = '<span style="color:red;">Username or email alrady exist</span>';
			}
		}else{
			$message = '<span style="color:red;">Both Password not matched</span>';
		}
	} 
?>
<?php if ( is_user_logged_in() ) : ?>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 name-col">
            <div class="form-group">
                <label>
                    <?php 
                        _e( 'Hello', 'CMWP' ); 
                        echo ' ' . $user_login; 
                    ?>
                    </br>
                    <?php _e( 'You are already logged in as.', 'CMWP' ); ?>
                    </br>
                    <?php
                    $current_user = wp_get_current_user();
                    echo 'Username: ' . $current_user->user_login . '<br />';
                    echo 'User email: ' . $current_user->user_email . '<br />';
                    echo 'User first name: ' . $current_user->user_firstname . '<br />';
                    echo 'User last name: ' . $current_user->user_lastname . '<br />';
                    echo 'User display name: ' . $current_user->display_name . '<br />';
                    //echo 'User ID: ' . $current_user->ID . '<br />';
                    echo 'Website: ' . $current_user->user_url . '<br />';
                    echo 'Description: ' . $current_user->description . '<br />';
                    ?>
                    <br/>
                    <a id="wp-submit" href="<?php echo wp_logout_url(esc_url(home_url('/'))); ?>" title="Logout">
                        <?php _e( 'Logout', 'CMWP' ); ?>
                    </a>
                </label>
            </div>
        </div>
    </div>
    <?php 
    // If user is not logged in.
    else: 
    ?>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 name-col">
            <div class="form-group">
                <label>
                    <?php echo $message; ?>
                </label>
            </div>
        </div>
    </div>
    <form class="register-form" method="post" action="">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 name-col">
                <div class="form-group">
                    <input type="text" name="ufirst_name" class="form-control" placeholder="First Name" required="" value="<?php echo @$_POST['ufirst_name']; ?>" />
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 surname-col">
                <div class="form-group">
                    <input type="text" name="ulast_name" class="form-control" placeholder="Last Name" required="required" value="<?php echo @$_POST['ulast_name']; ?>" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <input type="text" name="uusername" class="form-control" placeholder="Username" required="required" value="<?php echo @$_POST['uusername']; ?>" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <input type="email" name="uemail" class="form-control" placeholder="Email (email will be the login username)" required="required" value="<?php echo @$_POST['uemail']; ?>" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <input type="text" name="udesc" class="form-control" placeholder="Little Description" value="<?php echo @$_POST['udesc']; ?>"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <input type="password" name="upassword" class="form-control" placeholder="Password" required="required" value="<?php echo @$_POST['upassword']; ?>" />
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <input type="password" name="cupassword" class="form-control" placeholder="Confirm Password" required="required" value="<?php echo @$_POST['cupassword']; ?>" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <input type="text" name="uwebsite" class="form-control" placeholder="Social Profile Link with https://" value="<?php echo @$_POST['uwebsite']; ?>" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label>
                        <input type="checkbox" value="" name="" required="required" checked="checked"> I accept the terms and conditions.</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <input type="submit" name="submit" id="join" value="Join Now" />
                </div>
            </div>
        </div>
        </div>
    </form>
    <?php endif; ?>
<?php
}
?>

Seventh Step:

Now open the logout_url.php file and paste the code and edit according to your need

<?php
//adding the Logout Url
add_shortcode("CMWP_LOGOUT_URL", "cm_logout_form");

function cm_logout_form($page_id){
	$page_id=shortcode_atts(array(
				    "login_page_id" => CMWP_LOGIN_URL        
				  ), $page_id);

	$output_login_form = cm_logout_link_perform($page_id);
	//send back text to replace shortcode in post
	return $output_login_form;
}

function cm_logout_link_perform($get_page_id){
	//getting the login page id
	$login_page_uri_id = $get_page_id["login_page_id"];

	//getting the login page url
	$login_page_uri = get_page_link($login_page_uri_id );

	if ( is_user_logged_in() ) : ?>
		<a id="wp-submit" class="logout-link" href="<?php echo wp_logout_url( $login_page_uri ); ?>" title="Logout">
            <?php _e( 'Logout', 'CMWP' ); ?>
        </a>
	<?php 
    endif; 
}
?>

Seventh Step:

Now open the restricted_page.php file and paste the code and edit according to your need

<?php
//create a restrected login area
add_shortcode("CMWP_RESTRICTED", "cm_restricted_page");

function cm_restricted_page($page_id){
	$page_id=shortcode_atts(array(
				    "login_page_id" => CMWP_LOGIN_URL        
				  ), $page_id);

	$output_login_form = cm_restricted_page_perform($page_id);
	//send back text to replace shortcode in post
	return $output_login_form;
}

function cm_restricted_page_perform($get_page_id){
	//getting the login page id
	$login_page_uri_id = $get_page_id["login_page_id"];

	//getting the login page url
	$login_page_uri = get_page_link($login_page_uri_id );

	$status = true;

	if ( !is_user_logged_in() ) : 
		?>
		<script type="text/javascript">
			window.location.href = '<?php echo $login_page_uri; ?>';
			die();
		</script>
		<?php
		//wp_safe_redirect( $login_page_uri, $status );
		exit;
    endif; 
}
?>

And now you have created a login registration plugin for WordPress and it can be used at any theme just install and use the shortcode

And you can use the shortcode
[CMWP_LOGIN redirect=<page page id after login> login_page_id=<your login page id>] for login form page
[CMWP_RESTRICTED login_page_id=<your login page id>] for restricted page
[CMWP_REGISTRATION user_type=<user role>] for getting the logout link
[CMWP_RESTRICTED login_page_id=<your login page id>] for restricted page

thanks for reading

Share The Post On -