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:
You can activate it and deactivate it all you want. The status will change but it does absolutely nothing.
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
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.
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"> <label for="user_login">Username<input type="text" name="log" id="user_login" class="input" value=" size=" 20="" /></label> <label for="user_pass">Password<input type="password" name="pwd" id="user_pass" class="input" value=" size=" 20="" /></label> <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"><label for="user_login">Username <input type="text" name="log" id="user_login" class="input" value=" size=" 20="" /></label> <label for="user_pass">Password <input type="password" name="pwd" id="user_pass" class="input" value=" size=" 20="" /></label> <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 <<
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"> <label for="user_login"> <input type="text" name="log" id="user_login" class="input" value=" size=" 20="" />Username</label> <label for="user_pass"><input type="password" name="pwd" id="user_pass" class="input" value=" size=" 20="" />Password</label> <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.
0 Comments