Create An Image Slide Plugin Part 1: Intro

Create An Image Slide Plugin Part 1: Intro

This is the first post from a series of tutorials in which we’ll create a WordPress plugin for displaying image slides. This first part is an introduction to creating WordPress plugins.

Plugins, alongside themes, have been a driving force for the huge success of  WordPress’ which now powers some 30% of the websites on the internet.

I first started working with WordPress by modifying themes to make them look the way I wanted. Later, when I needed to introduce new functionality in a website I started to tackle the inner workings of plugins.

Off the bat, I can tell you it was a bit daunting at the beginning but eventually I got the hang of it. If you want to learn how to create WordPress plugins you just have to stick with the process.

Putting in the time, that’s the key to success 🙂

You can add new functions to WordPress either by using a theme or a plugin. One of the reasons to create a plugin for the functionality you need is the separation of concerns. This principle means that themes should be used for styling purposes while functionality should be added with plugins.

Using a plugin keeps our functionality available no matter what theme we use and we can even make it available on another website that needs the same functionality.

Introduction To Creating WordPress Plugins

The internet is abounding with useful resources for learning how to create WordPress plugins. The thing I wish someone had told me when I started my learning process was to begin with the official docs: The WordPress Plugin Handbook.

According to the handbook, plugins are packages of code that extend the core functionality of WordPress. It provides a great starting point with respect to best practices but it doesn’t enforce any standards, that’s why, even today, creating plugins brings with it a sense of uncertainty.

When I first started to create WordPress plugins I was copy-pasting code from the Codex or from other developers’ blogs. They were one-file plugins that worked as expected but that lacked a certain quality of the code I was writing, especially if the file grew in the number of lines of code.

If that’s what you’re doing it’s OK, for now 🙂

Creating A Basic Plugin

From here on you’ll need a working WordPress installation to follow along.

I’m assuming that you’re comfortable working with the WordPress environment for such things as selecting and installing WordPress plugins and themes. Also, understanding of PHP programming language will make it easier.

So, let’s get to it. Let’s create a basic WordPress plugin.

In WordPress, the normal plugins have their place in the /wp-content/plugins folder.

Go into this location and create a new folder for our test plugin. Let’s call it /testing123. Inside this new folder create a file and name it testing123.php. Alternatively, you can create the folder and file structure anywhere, on your computer, archive it as a .zip file and install it through the WordPress admin.

You can read more about getting started with creating a plugin, here.

In order for WordPress to see this new file as a plugin we’ll need to add a plugin header comment. This is a piece of metadata written as a PHP comment that contains various information about our plugin.

The header must contain at least the plugin name, like so:

<?php
/*
Plugin Name: Testing 123
*/

Only one file in the plugin’s folder should contain this header comment.

With the code above in the newly created testing123.php file, our testing plugin is ready to be displayed in the WordPress admin. Even though this is a working plugin file there’s not much here to give it a sense of identity 🙂

Let’s add some more info to the plugin header so that we can get to know it better. A complete plugin header might look like this:

<?php
/*
Plugin Name:  Testing 123
Plugin URI:   https://www.mikeinmonospace.com
Description:  A basic plugin for testing purposes
Version:      1.0
Author:       Mike In Monospace
Author URI:   https://www.mikeinmonospace.com
License:      GPL2
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  monospace-test
Domain Path:  /languages
*/

You can find out more about the header requirements in the plugin handbook.

Now that we’ve added a bit more information about our basic plugin, let’s activate it if you haven’t already. Upon activation, your screen should look the image below. You can see an entry for our plugin with all the information from the header comment we created above.

Create An Image Slide Plugin Part 1- basic plugin activation

Now let’s add some functionality to our plugin so that it actually does something. Further down in the testing123.php file, after the plugin header comment, add the following code:

function mnsp_testing_content($content) { 
 return '<p>Testing 123.</p>' . $content;
}
 
add_filter( 'the_content', 'mnsp_testing_content' );

In the code above we’re creating a function which prepends a testing phrase to the content of every page we’ll be viewing. In order to tell WordPress to use this function when it displays content we’re using a filter, which is a built in WordPress function used to pass data through. Filters allow us to modify the default behavior of specific WordPress functions, in our case the_content.

Now, if you visit your website you’ll see the text “Testing 123.” on every page, like in the image below which is actually taken from the contact page of my website while I was testing this plugin.

Create An Image Slide Plugin Part 1 plugin result

So, here it is, your introduction to creating WordPress plugins. You now have created a plugin with some basic functionality. See below for the complete contents of the testing123.php file.

<?php
/*
Plugin Name:  Testing 123
Plugin URI:   https://www.mikeinmonospace.com
Description:  A basic plugin for testing purposes
Version:      1.0
Author:       Mike In Monospace
Author URI:   https://www.mikeinmonospace.com
License:      GPL2
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  monospace-test
Domain Path:  /languages
*/

function mnsp_testing_content($content) { 
 return '<p>Testing 123.</p>' . $content;
}
 
add_filter( 'the_content', 'mnsp_testing_content' );

WordPress Image Plugins

In this tutorial series we’ll work with image slides.

We can think of these slides as more than just simple images. we can see a slide as a media object that can contain images, titles and subtitles, descriptions and call-to-action instructions.

The landscape of WordPress images and slides plugins is very “colorful”, so to speak. There are a dime a dozen of these plugins, each more appropriate than the next, depending on what you need.

For creating our image slide plugin we’ll be using the WordPress Plugin Boilerplate. It is a standardized way of writing plugins that provides an object oriented foundation and a high quality start for extending WordPress with new functionality.

Depending on what you need to do, the boilerplate can be appropriate for more complex functionality while being an overkill for things that require only a few lines of code. We’re using it here because our plugin will introduce a lot of functionality and we need a way to keep the code from becoming overwhelming as well as keeping up with best practices.

By the end of this series we’ll be able to create the media object described above, display it wherever we want in a WordPress site as well as display multiple slides in a slider. Ultimately, we’ll be able to use this functionality on any number of sites because we’ll have created a plugin.

At The End

Stay tuned for the next post in this series in which we’ll set up and discuss the structure of our image slides plugin.

Please feel free to share your thoughts and feedback, things we might have missed or plugin basics topics you’d like to be covered in more depth.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.