Build first WordPress Plugin

WordPress plugins are small bits of codes that are used to extend the functionality of WordPress. Plugins can be very useful in creating new features in WordPress or extending existing features to make them easier to use. I would like to illustrate in this tutorial how plugins work and by building a plugin from scratch. Recently, I outlined how to build and membership site in a tutorial – Building a Membership site in WordPress. In this tutorial I highlighted the different features of a good membership site. I would like to revisit one of these features and build a plugin based on this feature. I will be building a WordPress login form plugin that enables members of your site to login from a page. I want this plugin to achieve the following goals:

Make it easy for administrator to create login page using a shortcode

Allow login forms to be added to any WordPress page easily

Successfully create the login form system for members

For you to understand how WordPress login functions work, I would recommend you read my previous detailed tutorial on creating a custom WordPress login page – Creating Custom WordPress login page with Brand Identity. Let us now get started with building our first WordPress plugin.

Register WordPress Plugin

The first step when building a WordPress plugin is to register the plugin‘s name, plugin URL, plugin description, plugin version, author name and the author URL. This is the most important step since this file tells WordPress that this is a plugin when it is uploaded in the folder wp-content/plugins.

You can substitute these values with your own, for this tutorial I have named the plugin ‘ Tuts Login Form’ You should be careful when naming plugins since if you use existing names there is a possibly you can end up with plugin conflicts, see my detailed tutorial – Causes and Solutions of Plugins Conflicts

Create a Plugin Folder

The second step is to create a folder with the plugin’s name and save the main plugin file inside that folder and name it tuts-login-form.php. You should also create another folder inside this plugin folder and name it CSS and another folder named includes. See the image below:

Get Started with WordPress Plugins – Build Your First Plugin

Register Includes Folder in the Main File

Now we need to create the definitive path for our plugins include file where we will place all additional files that we need to be called to our main file. We create a Php function defining includes’ folder path as follows:

Enqueue Stylesheet and JavaScript Files

Here we now need to enqueue our CSS and JavaScript; this is the process of how stylesheet and JavaScript are added in WordPress. You can learn more on how to enqueue scripts in WordPress from – wp_enqueue_script()

Create Shortcode Function to Add Login to Pages and Posts

Now let’s create the shortcode that we will be using for publishing the login form in our pages. The following is the code that will add shortcode to our plugin. We have defined the name of the shortcode as [tuts-login-form] this is the shortcode we will use later in our pages to create the login form.

Create Function for the Login Shortcode and Login Form

We need to create a function to test our login shortcode and also use an If statement to test various conditions the most important – if the user is logged in. Here is a simplified breakdown:

Redirecting Logged Users to Homepage

This function tests if the user is logged in, if true the user is redirected to the home page.

          Creating the Login Form

This section creates the login form that we will be styling later to make it more appealing to the users.

Complete Code for Testing Shortcode and Creating Login Form

The complete code that includes the shortcode function, the login form and the login status test should be as follows:

Failed Login Redirect to Homepage

We need to have a way of redirecting those failed logins to the front end. This can be achieved by creating a hook for failed login. This code should look something like:

Complete Code for Main Plugin File

Here is the full code that should be saved in a main filed and named as tuts-login-form.php

     Styling the Login Form

After building this login form and its shortcode; now it is time to style it so that it looks good. We will be styling the HTML elements that were added to the section above to create the form. Here is the full code for styling this login form.

Remember to save this stylesheet as front-style.css and place it in includes folder we create earlier on in this tutorial.

Testing 'Tuts Login Form Plugin'

After completing building this plugin, it is now time to see how it works and possibly debug if there are any errors. Add the plugin to your plugins directory wp-content/plugins or install the plugins just like any other plugin and activate it.

Get Started with WordPress Plugins – Build Your First Plugin

Create Login Page with Shortcode

Now we need to go to the Add page in WordPress and create a page that has our shortcode in the text area. The shortcode we created is [tuts-login-form], add this shortcode and create the login page.

Get Started with WordPress Plugins – Build Your First Plugin

Test Frontend Login Form

After creating this login page, you should now visit the page and ensure you are logged out before visiting this page. If you followed every step correctly, you should see the login as shown below:

Get Started with WordPress Plugins – Build Your First Plugin

Test the login form by logging in with your username and password. You should login successfully. This plugin now allows us to create the login form in any WordPress page or post a feature that is great for a membership site. It is important you note that I am running the demo site using the Evolve theme which is one of our FREE themes you can download and use.

Conclusion

This tutorial has illustrated how you can use a plugin to achieve an objective like creating login form using a shortcode in WordPress pages. This is the role that all plugins play, which is simply extension of WordPress functionality to make it more robust and useful as a content management system. I hope you have followed this tutorial and successfully create the Tuts Login Form Plugin or your own version. If you have additional comments, compliments or want to seek some clarification, please leave me a comment.