WordPress Plugin Development from Scratch, Part 1/4: Basic Structure


I assume that you are a freelance designer or someone who work full time as a designer for a web design agency. Most of web designers are used work with static website design.

Now the question is: do you have a future as a static website designer?

The answer would probably be no since most clients and companies are planning to convert their websites to work with a CMS like WordPress, Joomla or Drupal.

WordPress is becoming the new static web site.

WordPress integration is simple enough that almost anyone can setup a WordPress site with an auto installer program. Unless you are familiar in working with a CMS like WordPress, you will definitely face issues moving further as a freelance designer. And you will seriously speed up your website development process, read exactly how in this article.

WordPress Plugin Development Course for Designers – What to Expect

Being a designer, your main focus should be to learn WordPress theme design and development. But clients are never going to be satisfied, even if you build their websites with professional theme and design. They will ask you for more and more features as they know that it’s easier to build things with WordPress.

WordPress plugins are a quick and easy solution to wrap your site with additional functionality such as social integration, breadcrumbs, Google Maps, etc. If you are not familiar with using and customizing plugins, you will have to need the support of a developer to keep clients from going from you and go looking for another developer who is capable of providing both design and development tasks.

Hiring a developer and creating the custom functionality can be costly for you as a freelance designer. So you should be thinking about learning the skills of plugin development.

What Can You Expect From Us?

So often we see tutorials for learning WordPress plugin development focused on developers. Here we are going to approach it differently by looking at WordPress plugins development from designers perspective. So everything will be created and explained from scratch.

Initial part of this tutorial series will consist of four parts, where we will learn WordPress Plugin Development from scratch. Throughout the series we will be developing a WordPress plugin to integrate your favorite jQuery Slider. Final output will be a complete slider plugin for WordPress, which you use in any part of the CMS.

Let’s take a look at the 4 parts of the series.

  1. Understanding WordPress Plugin Structure
  2. Basics for Creating WordPress Plugin Template
  3. Integrating Your Favorite Slider into WordPress
  4. Enhancing WordPress Plugins with Add On Features

Today we are going take on the first part on the tutorial series. So Let’s get started.

Understanding WordPress Plugin Structure

WordPress plugins lets us create additional functionality without affecting the core system. As designers, our main focus should be to develop quality front-end plugins with awesome designs rather than developing highly technical back-end plugins to provide complex functionality. So it’s important to know the basic structure,initial components and functions of a plugin to get things started.

What are the prerequisites?

Throughout this series you will have to work with technologies like PHP, JavaScript, and MySql. It’s ideal to have basic knowledge of those technologies, although it’s not mandatory. As designers, I don’t expect you to have knowledge on working with server side technologies and databases. But basics of JavaScript will be handy and I assume you have the basic idea.

Should You Create Plugins from Scratch?

I think the answer should be no, in situations where you can find a free plugin to implement the required features. WordPress plugin repository is full of plugins with wide range of capabilities. It’s much easier to find a plugin from the repository rather than creating from scratch.

Even though the repository contains around 20,000 plugins, there is no guarantee that there will be plugins to suit each and every requirement in your projects. In such cases you will have to either modify an existing plugin or write your own plugin from scratch.

Components of WordPress Plugin

We will be focusing on creating web design related plugins throughout this series. So these plugins will have some kind output to the browser using combination of HTML, CSS and JavaScript. This will be considered as the front-end component of the plugin.

Usually we need to change the design components with dynamic data. Therefore we have to create a custom section inside WordPress Admin panel to enter dynamic data and options. This data creation section can be considered as the back-end component of the plugin.

Let’s take a look at the back-end and front-end of a premium slider plugin from Themeforest.

Frond-end of the Plugin


Back-end of the Plugin


You can see how these components are used effectively in professional plugins. Simplest plugins will not require a back-end component. Here we will be creating a slider with both front-end and back-end components.

Creating Your First Plugin

First we have to know where to create plugins inside the WordPress installation. WordPress consists of 3 main folders called wp-content, wp-admin and wp-includes. The following screenshots previews the files and folders available inside WordPress installation. Our focus will be on the highlighted wp-content folder, where we install our themes and plugins.


Inside wp-content, you will find another folder called plugins. Now switch to plugins folder and you will see few default plugin folders created by the WordPress installation. This will be the place where we create our own plugins. Following screen shows the list of folders available inside wp-content folder.


We can directly create a plugin inside the plugins folder by including the plugin file. But the recommended method is to create each plugin in a separate folder inside the plugins folder.

So let’s name our plugin as 1WD Slider and create a folder called 1wd-slider. It’s important to know that there is no restriction on naming the plugin folder. I prefer using the plugin name as the folder name for keeping consistency. The following image shows our plugin folder inside the plugins.


Creating Plugin File

Plugins can contain any number of files as you want. For the purpose of this tutorial, I am going to create the plugin as a single PHP file. So create a file called 1wd_slider.php inside your plugin folder. Once again there are no restrictions in naming plugin files. Having created plugin folder and file, let’s see how it displays on WordPress plugins list.

Login to your WordPress account as admin and click on Plugins tab on the left to get a list of available plugins.


Surprisingly, the plugin list does not show our plugin. What is the reason?

Even though we created both plugin folder and file, we did not inform WordPress to consider it as a plugin. We have to add a PHP comment in predefined format on top of the file to make it a WordPress plugin. Open the 1wd_slider.php file and insert the following PHP comment.

/* Plugin Name: 1WD Slider
Plugin URI: http://1stwebdesigner.com/
Description: Slider Component for WordPress
Version: 1.0
Author: Rakhitha Nimesh
Author URI: http://1stwebdesigner.com/
License: GPLv2 or later

As a designer you might not be familiar with PHP codes, hence I’ll explain the code in detail. Tags <?php and ?> is used respectively for opening and closing PHP codes. This is similar to script tags in JavaScript. Anything you place between these tags will be executed as PHP codes.

Then we have a multiple line comment which is similar to comment syntax in JavaScript. We can use /* */ for multiple line comments and // for single line comments.

Inside the comment we have defined plugin details in key value structure. Basically Plugin Name will be the most important and mandatory parameter. Once you set the Plugin Name, WordPress will identify your file as a plugin to display in the plugin list. Following screen contains our plugin with complete details.


Now let’s go through the remainder of parameters by comparing with the screen.

  • Plugin URI – is used to let users know about the details of the plugin and available download options. This isn’t mandatory and you can keep it blank, if you don’t have an intention of making the plugin publicly available.
  • Description – is used to provide a summary of functionality of the plugin.
  • Version – is used to define the version and you can use any numbering format as you wish. Plugins need be upgraded with each WordPress version upgrade. Therefore it’s good to have proper version numbering even though it’s not mandatory.
  • Author and Author URI – is used to provide details about the developer of the plugin.
  • License – is used to define the conditions for using this plugin. We can include standard licence such as GPL2 or just mention something we prefer such as Free to use.

We don’t need to consider about the parameters other than plugin name, in case we are not making the plugin publicly available for use.

Now we have our first WordPress plugin, even though it doesn’t do anything at the moment. We can activate or deactivate plugins from the plugin list.

Let’s discuss more on plugin activation.

WordPress Plugin Activation and Deactivation

Plugins will be on inactive status by default. We can click on the activate link under the plugin name to activate the plugin. Once the plugin is successfully activated, its features will get effected to your website.

Also you should be able to see deactivate link instead of activate link after a successful activation. Clicking the deactivate link will revert the status of the plugin to its original inactive status.


What Can We Do on Activation/Deactivation

Think about a real world scenario where you activate premium membership of a club or library. Obviously you will get added benefits on activation and you will lose those benefits on deactivation. Similarly we can execute some tasks on plugin activation and deactivation.

WordPress provides a concept called hooks, where you can trigger certain tasks to add new behavior or modify existing behavior. So let’s look into the code for activation and deactivation hooks.

function fwds_slider_activation() {
register_activation_hook(__FILE__, 'fwds_slider_activation');
function fwds_slider_deactivation() {
register_deactivation_hook(__FILE__, 'fwds_slider_deactivation');

Above code contains two functions called fwds_slider_activation and fwds_slider_deactivation. PHP function is a reusable piece of code where we can execute multiple times. Even as a designer you might have a basic idea about functions since PHP functions are similar to JavaScript functions.

Then we have the two hooks called register_activation_hook and register_deactivation_hook. Don’t worry too much about hooks as you will understand them while learning about plugin development in this series. For the moment just define these hooks with plugin specific activation and deactivation functions and execute necessary codes inside the function.

Why Do We Use Activation/Deactivation Hooks

We can create basic plugins without considering activation and deactivation functions. But advanced plugin will require these functions to provide additional features.

Following is a list of possible things we can do inside plugin activation/deactivation.

  • Create custom database tables on activation to store data and remove tables on deactivation.
  • Create custom options for plugins and activation and reset in deactivation.
  • Validate other dependent plugin on activation.
  • Any other necessary task you need to execute in activation.

Now we have discussed the importance of WordPress plugins for designers and its structure. From next part onwards we will be digging into the technical aspects of WordPress plugins.

Don’t be afraid of complex PHP or JavaScript codes since I will be covering all the necessary details about those codes in a simplified manner to suit web designers.

Time to Take the Poll

I mentioned that we will be covering the theories of WordPress Plugin Development for designers, by creating a complete plugin to integrate a jQuery slider. This tutorial series is meant for you and hence I want to know about your preferred slider instead of going with my favorite.

So make sure to vote for your favorite slider plugin as I’ll be using the most voted plugin for the development to this tutorial. ( Vote for Rhino Slider as it’s my favorite :))

Vote for Your Favorite Slider

Following is the list of sliders available for voting with preview images.

nivo slider

Rhino Slider

rhino slider

flex slider


Coming Up

In the next part we will be digging into the actual code to learn the necessary functionality for creating a plugin. WordPress core functions needed to implement plugins will be discussed in detail from designers perspective. Throughout the next part we will be building a template for creating design based plugins. Until then I suggest that you read the following resources and get an ideas about plugin development.

You can grab a copy of the plugin here. The plugin does not include any functionality yet. So you can only see how it activates and deactivates using WordPress admin.

I have made my explanations in a simplified manner to suit web designers. Still I know that it can be difficult for designers who basically concentrate on HTML, CSS without considering JavaScript.

So let me know anything you didn’t understand through the comment section and I’ll get back to you with much more simplified explanations. Also let me know what is your preferred slider and why you voted for it.

Looking forward to hearing from you.



  1. Flex Slider As its Responsive Feature…
    I am also a Web Designer but have some basic knowledge of PHP and SQL. The Way you have explained everything in the article is wonderfull.
    Bookmarked Waiting Eagerly for the next Part… :-)

  2. My vote is or flex slider. Not only I it a clean slider just like nivo slider but it is also responsive. That comes in handy when building those kind of WordPress themes.

    Great explanations! Making me wanna go build plugins now.
    Keep up the good work!

    • Hi Will

      Thanks for the vote and the reasons for choosing Flex slider. Let’s see which slider gets selected through final results.

      Sure you will be able to create wordpress plugins after completing this series. Looking forward to your suggestions on second part.

  3. Very nice tutorial. But when we will get the second part of this tutorial? By the way thankx man, providing such a valuable tutorial.

    Sandeep pattanaik

  4. Hichamsamar

    Thank you so much for this tutorial it does help a lot. I am a little lacking in my PHP skills but I am still working on it.

  5. thx for sharing this now i can make my own personal or public plugins these days wordpress is hudge now we can get fame through this by simply developing an plugin.

  6. Sherry-Ann

    Great introduction Rakhitha, very simple to follow, nicely explained.
    I am looking forward to this series, I am prepped and ready to go! I am voting for the Nivo slider.

    I have basic knowledge of both PHP and javascript. I haven’t read the other comments so not sure if anyone suggested this, but a series on Javascript and PHP from basics to advance will be greatly appreciated.

    Bring on the series!

    • Hi Sherry

      Thank you very much for your suggestions and voting for Nivo Slider.

      Is there anything I need to improve in my explanations?

      Next part is coming soon and looking forward to hear your suggestion in there as well.

      Definitely have to agree with your suggestion on creating a series in PHP and JavaScript. Currently we are focusing on CSS,HTML and WordPress. I’ll definitely forward your idea to management and editors of 1stWD. You might get to see a series on near future.

  7. I like the simplicity of your article. I am fairly new to web development and have never cared much for WordPress. I am excited about this series of articles.

    Thanks so much for your contribution1

    • Hi John

      Thank you very much for the interest in my tutorial.

      This series was intended for beginners of WordPress and web designers. So I had to keep things simple. Next part is coming soon and looking forward to hear your suggestion in there as well.

  8. Arif

    To day I am new here. I want to regular visitor of your site. It may be very useful for me, by the way article was very brilliant & I am waiting for more .

    • Hi Arif

      Thank you for the suggestions and interest in my tutorial.

      Make to sure to subscribe to our newsletter to get the latest updates.

      What do you expect to see more on 1stWebdesigner?

  9. Ben

    Now the popularity of CMS site rising and rising as well as anyone can easily use it. I am using wordpress also plugin do something very easy i think consequently.

    • Hi Ben

      Indeed WordPress is becoming the top CMS and everyone is trying to convert their sites into WordPress.

      Thanks for your suggestions and looking forward to your ideas on the next part as well.

  10. Peg

    Thank you so much. This article is so clear. I always wanted to learn how to create my own plugins, and here is a great article showing me how to create one. I love this site. My website is a WordPress platform. I know some basic PHP tags but don’t know how to create a basic WordPress Plugins. Thanks to IWD and the article writer Rathitha Nimesh. Nice tutorials.


    • Hello Peg

      I am glad that you found my tutorial useful. Here in 1stWD we always want to provide what readers expect from us.
      That’s why I decided to let you choose the slider for this tutorial series.

      Did you vote for your favourite Slider?

      Is there anything difficult to understand as a designer? or anything that need to be improved in future tutorials?

      Let me know.

      Thank you.

  11. Thanks for this!
    I have yet to learn WordPress (it is something I have been wanting to learn so need to do it soon) so I have bookmarked this page for when I am ready to create a plugin.

    • Hello Mike

      Thanks for taking time to provide feedback.

      Next part will be coming soon. So you can get ready to learn plugin development.

      Did you vote for your favourite Slider?

      Is there anything difficult to understand as a designer? or anything that need to be improved in future tutorials?

      Let me know.

  12. Prakash Bhusal

    I am a fresher in this field and so eger to learn more….when are you posting the Part-2.
    Great Article.

    • hello Prakash

      Thanks for taking time to comment.

      Next part is almost done. Since I need to use the slider in the second part, I have to wait till the voting is completed. It will be published soon.

      By the way Did you vote for your favourite Slider?

  13. Nizam Kazi

    Nice way to explain. I already followed this steps and very eagerly waiting for your next post.
    As I mostly work with WordPress I have basic knowledge of PHP, many time I wished to create plugin I am in need of, so now this easy tutorial will help me do that. :)

    Thanks a lot for posting 1 phase of tutorial, would like to see next asap.

    Nizam Kazi
    Owner/ Web Front End Developer

    • Hello Nizam

      Thanks for taking time to provide your valuable feedback.

      Next part is coming soon and just waiting for the voting to be completed.

      Did you vote for your favourite Slider?

      As a developer with basic knowledge in PHP, did you find anything difficult in this tutorial? Can you suggest any improvements for future tutorials?

      Let me know.

    • Hello

      I am glad that you enjoyed the tutorial.

      Next part is coming soon and you can expect in detail explanations on plugin development.

      By the way Did you vote for your favourite Slider?

      Thank you.

  14. Mona

    I’ve been using child themes for awhile, but I have never touched the plugins. I’m definitely looking forward to this training to broaden my understanding of how WP actually works.

    My vote is for the Slidesjs slider.

    • Hello Mona

      Thank you very much for taking time to share your thoughts.

      Since you are already working with Child themes, it will not be very difficult to learn plugin development. Next part is coming soon and looking forward to your suggestions.

      Is there any specific types of WordPress plugins you want us to create in future tutorials?

      Thanks for voting. Is there any special reasons for choosing Slidesjs?

      Let me know.

  15. Hossain Raj

    i am new in here. but i want to become daily visitor.
    brilliant article! i am newbie in webdesign i hope your article will help me very much. go forward.

    • Hello Hossain

      Thanks a lot for your interest in my tutorial.

      You can sign upto 1stWD newsletter so that you don’t miss anything important.

      As a newbie in web design what did you find hard to understand in this tutorial?

      By the way Did you vote for your favourite Slider?

      Let me know.

  16. Tracer_Tracy

    Great article, and look forward to the next tutorial. I have been wanting to learn about PHP and JavaScript, and you explain it very well. I really like the Nivo Slider.

    • Hello Tracer_Tracy

      Thank you very much for your interest. It really helps to motivate myslef to provide better tutorials.

      Let’s see the which slider wins the voting. Hope you have voted for your favourite Nivo Slider.

      I would like to know whether you are a Web Designer and What did you find difficult to understand in this tutorial?

      • Tracer_Tracy

        I am a web designer, and I did not find anything in your tutorial that was difficult to understand. I really appreciate tutorials like yours, there is a lot of information on the web that is not useful.

        • Hi Tracer_Tracy

          Thanks a lot for your kind words. It really helps us to motivate ourselves as writers.

          Looking forward to know you ideas on the second part once it is published.

  17. Looks like this could be a brilliant intro to WP Plugin development. I’m a bit of a newbie on php, so that’ll be a nice challenge!

    Let’s go with Rhino!

    • Hi Paul

      Thank you very much for your ideas.

      Rhino is my favourite too. Let’s see which one wins.

      Did you find anything difficult to understand?

      Is anything I could have improved further ?

  18. John Kofi Mbir

    Nice tutorials though…actually dont know were to start from. Any help? Thank you for your understanding…

    • Hi John

      No worries I am here to help everyone.

      First thing you have to do is setup WordPress on web server where we can run php files. Following tutorial by spencer will help you to understand the background information you need.


      If it is still confusing, you may have to setup a webserver by asking someone to help. From there onwards I can guide you how to install and start plugin development.

      Let me know on further concerns.


    • Hello Zulhilmi

      He he completely agreed. I haven’t seen anyone else who works on Ubuntu for design tasks :).

      My core skills are on open source web development and linux Os like Ubuntu and Fedora is the preferred choice. I don’t do graphic design. So there is not much problem doing web design on Ubuntu as it only requires web browsers.

      Are you a designer? Did you find anything hard to understand in this tutorial?

      Let me know.

      Thank you very much.

  19. Victor Valencia

    Very nice article! waiting for the second part ! still need some knowledge of php but can handle the basic functions.

    • Hi Victor

      Thank you very much.

      Second part is coming soon.

      What did you find difficult to understand? Second part contains lots of coding. So it’s better to clear things up in this stage.

      Is there any way I can improve this tutorial series?

      Let me know.

      • Victor Valencia

        now I think the article is pretty clear may be important to note that you need knowledge of PHP programming to learn about creating plugins, if you can touch the implementation of short codes in the next tutorial would be nice

        • Hi Victor

          Thank you very much for your suggestions.

          Its ideal if you have a basic knowledge of PHP as a designer. First few phases is not going to be easy without PHP. I think designers should look to follow the instruction and see how they can change this plugin with minor modifications without focusing much on PHP.

          Once you keep reading and doing this stuff, you will automatically learn the necessary PHP for WordPress.

          Looking forward to your suggestions on the second part, once it’s published.