So you want to build a plugin? It is really easy. You can learn all about it here (if your a developer): https://developer.wordpress.org/plugins/ but I think it is much simpler than that. In this tutorial, we’re going to create a plugin to place a login form on any page using a shortcode.

Headers

The simplest plugin I can think of looks like this (I guess you could use a shorter name):

<?php /* Plugin Name: The Simplest Plugin */ ?>

That is simply a header that will tell WordPress what the plugin’s name is. Take this snippet and save it in a file called simplestplugin.php. Using FTP upload it to your site in the folder /wp-content/plugins/. Go to your plugin page and you should find:
Image of plugin in plugins list.
You can activate it and deactivate it all you want. The status will change but it does absolutely nothing.
Image of plugin in plugins list activated.
There are a bunch of other headers you can use. A list can be found [HERE] but these are my favorites:

  • Description: use 140 characters to describe your plugin and what it does
  • Author: this is where my name goes to last in infamy
  • Author URI: this is where my website goes
  • Version: this is the version number of the plugin because you’re always going to want to add something new
Visual directions to open the plugin editor for a plugin.

Visual directions to open the plugin editor for a plugin.

Go ahead and add any other headers you like and you’ll see how they update the attributes in the plugin listing. My favorite way to do this is on a simple plugin like this without a development environment is to use the WordPress plugin editor. Go there now. Click editor in the sidebar and select our new plugin in the drop down list:

Add a new header, or a few. Save it and check out the appearance on the plugin list page. Here’s an example, I added a few headers and used a multi-line format for readability:

<?php
/**
* Plugin Name: The Simplest Plugin
* Author: Brian Seim
* Author URI: https://www.evodynamic.com
* Version: 0.0.1
**/
?>

Now you can see my name and it is a link to my URI and includes the version. But still does nothing.

Simplest Plugin with More Headers

Remember we are making a simple login plugin. Lets modify the headers to match:

<?php
/**
* Plugin Name: EvoD Simple Login Shortcode
* Author: Brian Seim
* Author URI: https://www.evodynamic.com
* Version: 0.0.1
**/
?>

Make It Do Something

What good is a plugin if it doesn’t do anything. Notice I added “EvoD” to the front of the plugin name that helps connect the identity of my company to the plugin when it gets out into the wild. I’m also going to use a prefix on all the functions I write to help insure that I don’t have a function that is used by another plugin or WordPress itself. I need a function to return the html I want to place on the screen that contains the login form. Add the function evod_loginform_shortcode() which will return a login form table:

<form name="loginform" id="loginform" action="/wp-login.php" method="post">
	<p>
		<label for="user_login">Username<br>
		<input type="text" name="log" id="user_login" class="input" value="" size="20" ></label>
	</p>
	<p>
		<label for="user_pass">Password<br>
		<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" ></label>
	</p>
	<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p>
	<p class="submit">
		<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In">
		<input type="hidden" name="redirect_to" value="/wp-admin/">
		<input type="hidden" name="testcookie" value="1">
	</p>
</form>

I took this form from the normal WordPress login form found here /wp-login.php. I highlighted line 13 because you may want to change the value. This is where WordPress will take the user after a successful login. Now lets put this into our code:

<?php
/**
* Plugin Name: EvoD Simple Login Shortcode
* Author: Brian Seim
* Author URI: https://www.evodynamic.com
* Version: 0.0.1
**/

function evod_loginform_shortcode(){
     $loginform = <<<DOC
          <form name="loginform" id="loginform" action="/wp-login.php" method="post">
               <p>
		    <label for="user_login">Username<br>
		    <input type="text" name="log" id="user_login" class="input" value="" size="20" ></label>
               </p>
               <p>
		    <label for="user_pass">Password<br>
		    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" ></label>
               </p>
               <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p>
               <p class="submit">
		    <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In">
		    <input type="hidden" name="redirect_to" value="/">
		    <input type="hidden" name="testcookie" value="1">
               </p>
         </form>
     DOC;
     return $loginform;
}
?>

Notice that I used heredoc notation to wrap a bunch of HTML in the PHP to assign the entire string to a variable. The block opens with <<<DOC and ends with DOC; on a line of its own. I like to do that when I need to pass along a block of HTML in PHP so I don’t need to concern myself with the quotes. You don’t need to use DOC but can substitute any unique naming for the block.
But, we still have a do nothing plugin. This only make the function available to WordPress. We have one step left to do, we need to register the shortcode when WordPress starts. We do that like this:

function evod_loginform_register_shortcode() {
    add_shortcode( 'evod-loginform', 'evod_loginform_shortcode' );
}
 
add_action( 'init', 'evod_loginform_register_shortcode' );

The function actually does the registration by using the WordPress add_shortcode function. But we can’t just use that because WordPress may not be ready yet. So finally, we add a hook, specifically an action hook with the add_action WordPress function. This hook instructs WordPress at initialization, ‘init’, to run the function evod_loginform_register_shortcode. With that registered, WordPress will run the evod_loginform_shortcode whenever it encounters the shortcode “evod-loginform” in posts and pages. Here’s the first draft of our working WordPress plugin:

<?php
/**
* Plugin Name: EvoD Simple Login Shortcode
* Author: Brian Seim
* Author URI: https://www.evodynamic.com
* Version: 0.0.1
**/

function evod_loginform_shortcode(){
     $loginform = <<<DOC
          <form name="loginform" id="loginform" action="/wp-login.php" method="post">
               <p>
		    <label for="user_login">Username<br>
		    <input type="text" name="log" id="user_login" class="input" value="" size="20" ></label>
               </p>
               <p>
		    <label for="user_pass">Password<br>
		    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" ></label>
               </p>
               <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p>
               <p class="submit">
		    <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In">
		    <input type="hidden" name="redirect_to" value="/">
		    <input type="hidden" name="testcookie" value="1">
               </p>
         </form>
DOC;
     return $loginform;
}

function evod_loginform_register_shortcode() {
    add_shortcode( 'evod-loginform', 'evod_loginform_shortcode' );
}
 
add_action( 'init', 'evod_loginform_register_shortcode' );
?>

Here’s what the form looks like when implemented.

Conclusion

There it is you created a simple shortcode plugin that you can use on any WordPress site. You should understand that a plugin is simply a header, function, and hook in it’s simplest form. This is just cracking the surface of the possibilities. You can integrate data and databases, users and private areas, or even create a store front, invoice tracker, forum and more.

Although it is functional it has a lot to be desired. It shows even if the user is logged in. It has some pretty poor styling. Stay tuned and we’ll address these issues in a future post.

Share This