1. Code
  2. WordPress

Introduction to WordPress Plugin Development

Rachel McCollinLessons: 15Length: 1.6 hours
WordPressPHPWordPress PluginsWordPress Themes
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Introduction

01:01
  • Overview
  • Transcript

Part of the reason for the success of WordPress is how easy it is to customize with themes and plugins. There are a huge number of plugins available in the WordPress Plugin Directory or on Envato Market, but if you want to take your WordPress skills to the next level, there's no substitute for learning to code custom plugins.

In this course, you'll learn about how plugins work and how you can create different kinds of plugin. This is a comprehensive guide to everything you need to know to write your own plugins! You'll start with the basics—how to create a new plugin, how to structure your code, and how to connect to the plugin's API. Next, you'll learn some of the fundamentals of plugin development, like including scripts and styles. Finally, you'll learn the building blocks of creating WordPress plugins: custom content types and taxonomies, adding settings to the admin page, outputting HTML content, and creating widgets and shortcodes.

Do you want to learn WordPress development from start to finish? Check out our learning guide: Learn WordPress Development.

1.1 Introduction

Hello, and welcome to this Tuts+ course on WordPress plugin development. In this course, you'll get a good grounding in all the different aspects of plugin development and what you need to know to write your own plugins. So we'll start by identifying when you should write a plug in instead of using the functions file. We'll then look at the structure of a plugin, and I'll use a big complex plugin like Woo Commerce to demonstrate how you should organize your own plugins. We'll then move on to some practical examples of plugin code. So I'll show you how to set up a plugin and how to do things like in queueing style sheets and adding include files, and then I'll show you some specific examples on how to write plugins to create things like widgets and short codes, and to query the database. We'll then pull together a bunch of the techniques we've used in the course to create a custom widget, which will register a post type, output a query, and add all those into a widget that you see here on the site. Watch this course and get a thorough grounding in how to write your own plugin.

Back to the top

1.Introduction
2 lessons, 04:13

1.1
Introduction
01:01

1.2
How This Course Works
03:12

2.Plugin Overview
3 lessons, 25:08

2.1
When to Write a Plugin
08:09

2.2
Plugin Code and Structure
06:43

2.3
The Plugin API
10:16

3.Writing a Plugin
3 lessons, 17:22

3.1
Setting Up the Plugin
05:42

3.2
Adding Scripts and Styles
06:16

3.3
Adding Include Files
05:24

4.Plugin Functionality
4 lessons, 31:28

4.1
Admin Plugins
08:40

4.2
Content Creation Plugins
06:41

4.3
Outputting Content
07:20

4.4
Widgets and Shortcodes
08:47

5.Practical Project: Create a Widget Plugin
2 lessons, 16:40

5.1
Create a Widget Plugin: Register the Post Type and Taxonomy
05:56

5.2
Create a Widget Plugin: Run a Query
10:44

6.Conclusion
1 lesson, 03:24

6.1
Conclusion
03:24

1.2 How This Course Works

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

How This Course Works

03:12
  • Overview
  • Transcript

In this lesson, I'll give you an overview of how the course is structured to help you follow along and gain a comprehensive introduction to plugin development.

1.2 How This Course Works

Hello, and welcome back to this Tuts+ course on WordPress plugin development. This course works slightly differently from many of the other courses you might have seen on the Envato Tuts+ website. So in this part of the course, I'm gonna show you how the course will work and give you an idea of what to expect. Because I want to give you a broad grounding in all the aspects of plugin development, I'm not going to develop just one plugin during this course. Instead, I'll refer to a number of plugins that are available via Tuts+ and that you'll see in other courses. So the code will apply to various parts of the course. And you can see that this is a long course with lots of code. So for example, in the next part, Part 3.1, I'm gonna show you the code from a plugin to register taxonomies. And I'm also going to show you a theme. Because, that way, I'll demonstrate the difference between using your functions file and using a plugin. And as we work through the course, you'll see examples of code and plugins. So for example, we'll look at WooCommerce, which is a big third-party theme, and I'll use that to demonstrate how to structure your own plugins. In parts 4.1 to 4.4, we'll get a little bit more hands-on. And you'll start coding your own sample plugin if you work along with me. So what we'll end up with is a sample plugin that has some structure, with some includes, some scripts, and some styles, and has this core file. In which, I'll show you how to enqueue scripts and styles and how to include your files. And I'll also show you how to set up your plugin and add this commented out text. So that you know exactly how to start writing your first plugin. We'll then move on to some more examples where we'll be looking at existing courses and the code for them. So for example here, we'll look at this section-menus plugin. And I'll use that to demonstrate how you output content using the results of a query. So instead of creating one long plugin as we go along, we'll be creating one small plugin to show you the basics of plugin development. But I'll also use lots of existing plugins. And I'll work through the code of those in detail with you to demonstrate how they do what they do, and how you can achieve different functionality with your plugins. And as we go along, I'll show you the courses that they relate to, and I'll give you a link to them as well. I'll also refer you to a demo site that I'll be using in some parts of the course. And we'll look at the WordPress codex in various places. And I'll give you links to the relevant codex places for the different aspects of the course. So when you finish this course, instead of understanding in depth how to code one type of plugin, you'll have a broad grounding in how plugins work. And how you can use plugins to achieve different things in WordPress. And you can then take that knowledge to go on and learn how to code specific plugins in WordPress using our courses. In the next part of the course, I'll start looking at how you would use a plugin. And I'll compare the use of a functions file in the theme to coding a plugin. See you next time and thanks for watching.

Back to the top

2.0 Plugin Overview

2.1 When to Write a Plugin

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

When to Write a Plugin

08:09
  • Overview
  • Transcript

First, let's look at when you should write a plugin and when it would be best to just use your theme functions file.

Related Links

2.1 When to Write a Plugin

Hello, and welcome back to this Tuts+ course on plugin development. In this part of the course, I'm gonna give you an overview of when you should use a plugin as against coding something into the functions file in your theme. Because it's very tempting just to use that functions file for everything, and to stick loads of code in there that really should be going into a plugin. So let's take a look at the difference between the two. So here's an article that will help you identify which is better. But I'm gonna show you with reference to two plugins and themes that I've already developed for Tuts+. For other courses, so we'll start with this course which is a guide to the loop in WordPress. And that uses a theme. There's no plugin involved in this particular course. And it gives you a good opportunity to see what What sort of functionality you would add in the functions file in a theme. So this is the theme for that particular course. And you can see it's got a number of template files. And it's also got some include files such as the footer, and the sidebar, and so forth. And these include files to including the loop because it's a guide in the loop. But what we're interested in is the functions file. And this includes two functions which are relevant to themes and that you wont add to a plugin. So the first one is to set up the theme. So every well coded theme should have a theme set up function, which is hooked to the after set up theme hook And this includes setting up the title tag, the text name, post format, post thumbnails, RSS feeds, and also the navigation menu. So those are things that are specific to the theme, they're about the way that your site displays. So the functions file and any code that you to the theme Is about display, it's about the way your theme makes your site look, whereas a plugin is about functionality, and code that you put into a plugin will be code that you could use regardless of what theme you're running. So it's code that you want to hang onto if you switch themes in the future. And here's another example of a function that is relevant for using in the theme functions file. So that's a widgets function. And obviously, the widgets are specific to the theme. You wouldn't register widgets via plugin. And bear in mind these are widget areas, not widgets. So I'll be showing you how to create a plugin for widget that you can put in those widget areas. If I'm not confusing you with these terms later on in the course. But here in the functions file is where you register the widget areas, the side bars in your theme. So in this one we've got a side bar and we've got three footer widget areas, and those have to be registered in the theme. So those are good examples of functions you would add to your theme functions style. But before you go adding any and all functions that you want to add to your site to your theme functions file. It's important to consider whether it should be added to a plugin instead. And the real test is, do I want to keep this code if I switch themes in the future? And a good example of that is if you register a custom post type or a custom taxonomy. Because if you were to change your theme in the future, you wouldn't want to lose access to any posts you've added of that custom post type. Or that you've used that custom taxonomy with, because they'll still be in your database. So let's have a look at another example. So here we have the course, how to use custom post types in WordPress. Now this course includes a plugin, to register the custom post type, and it also includes a theme. So if we go back into the code, here's the theme. So I'm using this theme. To display my custom post types, so you can see for example here we've got archive.plusproject.php. But firstly, let's take a look at the plugin. So this plugin registers a post type called Project, and it includes The standard way of registering a post type in WordPress. Now a lot of people add this to their theme, because they think that it's linked to those archive pages and template files that are relevant for that post type. But in reality, it's much better to register a post type using a plugin, because that way if you change your theme in the future, you decide to use a third party theme Or you code a new theme for yourself, it means that you still got your post type. And you've still got access to all of the data in the database using that post type. Now that data will stay in your database, even if the post type isn't registered. So if you were to remove this plugin deactivate it, the database tables wouldn't change and you'd still have those posts in your database. So as soon as you reactivate the plugin You find that your post types and all those posts that you created using that post type are straight back available in your site. So it's important that you don't lose that if you change your theme in the future. So, the functions file for this particular theme, and if I just take you back. That's this Tuts+ custom post types theme, that I developed for that same course that functions file includes, including a style sheet Because it's a chart of a parent theme, and that's why it hasn't got this theme set up up here, because that's already included in the parent theme. And it also includes this function here, which displays projects on the homepage. And that's add it to the theme here because it's about the way the content is displayed. But arguably you could add this via a plug-in. You could create a completely separate little plug-in all of it's own That changes the way that projects are added on your homepage. Or alternatively, you could add it to this particular plugin. You could add an include file with that code in it, and I'll show you how to use include files later on in this course. So here's the plugin I created for that course. And that registers the post type. And that post type is then displayed in these two template files within the theme. So we've got all kind of types for this project. And what I've done here is copy the archive template file from the parent theme. And use it to create a custom template file for my custom post type. And there's also single post project which in the same way I copy the single template file from the parent theme and add it to my child Here, and that will display my post type that I've registered using that plugin. Now you might be thinking, if I was then to switch themes and I've still got my plugin registered, it gives me a problem because I haven't got this archive page. I haven't got this template file WordPress will always default, to another template file. It'll work its way through the template hierarchy, and it will display your project. Using the most appropriate template file it can come across, using that hierarchy. So it doesn't mean that you won't be able to display your projects anymore. It just means that they'll be displayed, using the template files from your new film. So that's the difference between the functions file and a plug-in. Use the functions file to add code that is about the way that your theme works. So for example Navigation menus and so forth. And there's also about the way that things are displayed in your theme. It's about design, and the look of your site. Use a plugin for any extra functionality. And in particular, ask yourself the question, would I need this functionality if I change things in the future. And if that is the case You would code a plugin. In the next part of the course. I'm going to show you the structure of a complex plugin. And you wouldn't be writing plugins this complex as you get started, but over time you might learn to and it gives you a good idea of how a plugin Is structured and how in particular, a large complex plugin is structured to ensure that the code all makes sense and is easily manageable and editable. See you next time and thanks for watching.

Back to the top

2.2 Plugin Code and Structure

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Plugin Code and Structure

06:43
  • Overview
  • Transcript

In this lesson, you'll learn about the structure of plugin files and their code.

Related Links

2.2 Plugin Code and Structure

Hello, and welcome back to this Tuts+ course on WordPress plugin development. In this part of the course, I'm going to use the WooCommerce plugin to demonstrate how to structure and organize your plugin. Now, WooCommerce is a huge and vastly complex plugin, but it's incredibly well organized. I've customized WooCommerce many times on client sites and my own sites. And I've always found that with reference to the code reference provided by WooCommerce. And also by delving into the files and following a trail of code through the different files, I've always been able to find what I'm looking for. Because the plugin is very, very well coded and very well organized. So if you want to get a copy of WooCommerce, you can download it here from the WooCommerce site. You can also download it from the Plugins directory on the wordpress.org site. Or alternatively, I provided a copy in the notes for this course. And here is the WooCommerce code reference. And if you want to find out more about the different aspects of WooCommerce, such as here we've got the classes. And then if we scroll down, we got interfaces, and all sorts of other things. So here on the left, this is all listed out as well. So you can find things by going down on the left. And another thing that I find really useful up here is the Hook Reference. So I use the action and filter hooks in WooCommerce a lot when I'm customizing it. And I tend to use those more than the classes. So let's take a look at the code for WooCommerce. So here's the code for the WooCommerce plugin. You can see there's a PHP file here in the main folder called woocommerce.php. And that's the file that runs the plugin and kicks it off in WordPress, but there's also a lot of other files. There may be hundreds, I'm not sure, I've never counted them. But anyway, they're very well organized, because there's so many that's really important. So here we've got an assets folder. And within that, you've got CSS, fonts, images, and scripts. And if I look into each of those, there are subfolders as well. So it's all organized in a hierarchical way, so that you can find what you're looking for really easily. This is a little bit more random with the images, but that's because there aren't so many of them. And you can see there's lots of CSS as well. So those are the assets, there's also all of the files for internationalization. And you can see here, you've got all the states that it's internationalized for, that it's localized for. And then we have the include files. And again, there's subfolders under here. So in the includes, we've got abstract, admin, the API, that's the WooCommerce REST API. We've got classes which for some reason I can't fathom, all entered in a subfolder of their own. We've got CLI, the Command Line Interface, customizer, data-stores, and so forth, and I don't need to read them all out. And then here, we've got functions. So the functions files are the ones in which you'll find these hooks, and the functions that are hooked to them. And those are the ones that I tend to delve into the most. And identify how I can create my own versions of them in my own plugins that I'm using to customize WooCommerce. Now I'm not teaching you how to customize WooCommerce in this course. All I'm doing is teaching you how a plugin is organized with reference to a big complex plugin like WooCommerce. So your plugin won't have as many files or as many subfolders in these directories as we've got here. But it will have a very similar structure. And you might decide not to have a top level assets folder here. You might just have CSS, fonts, images, and scripts up at the top level and that's up to you. And we'll be looking at structure in your plugin, and I'll show you how to do that later on in the course. So let's take a look at the code, so you can see how it works through. So here we've got the main woocommerce.php plugin file. Now that's actually very small compared to a lot of plugin files, we've only got 42 lines of code. But what it does do is it includes here this class-woocommerce.php. And it also returns an instance of WooCommerce. So let's have a look at this include. And again, we'll be going into includes a bit later on in this course in more detail. And I'll demonstrate how to code an include. So we've got includes, class-woocommerce.php. So I go into here, I scroll down, and we've got class-woocommerce.php. So this is a much bigger file. And that include file effectively dumps all of that code into this spot here in the main plugin file. So if you were to remove all of the include calls in a big plugin like WooCommerce and put all of the code into one file. You would have a huge file with hundreds and hundreds of lines of code, which would actually be quite difficult to interrogate and to work with. Whereas splitting it up like this, makes it easier to manage your code and to find things straight away. So here, you can see we've got functions, we've got all sorts of things. I'm not going to go through it in detail. But again, we've got a lot more includes. So we've got interfaces, abstracts, and then core functions, data stores and so forth. And all of these are being included here. So once again, as you can see, it's the likely effect of dumping all of the code from all of those files right in this file. So this is where all of the action goes on, this is where everything starts to happen. So you can see from this example that WooCommerce and let me close that up. WooCommerce uses a hierarchical structure to split up code, store it in includes to also store assets. And to then call those includes at the time in the code that it needs to do so. That's how you would organize your own plugins. And even when you're starting with a small plugin, it's a good idea to organize it well. Because as you build on your plugin and as you add more code to it in the future, you'll be glad that you did so. And it also is a way of building up good habits for the way that you organize and manage your plugins. So that's how a plugin is structured. In the next part of the course, we're going to take a look at the plugins API. See you next time, and thanks for watching.

Back to the top

2.3 The Plugin API

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

The Plugin API

10:16
  • Overview
  • Transcript

In this lesson, I'll give you an overview of the WordPress APIs you'll use to create your own plugin.

Related Links

2.3 The Plugin API

Hello and welcome back to this Tuts+ course on WordPress plugin development. In this part of the course, we're going to look at the plugin API. And that consists of the filter and action hooks that are provided by WordPress. And you can also add to those by creating your own filters and actions. So here, the plugins API page on the Codex details what actions and filters are, and actions and filters, do two different jobs. An action hook is an empty hook which is either one of these actions provided by WordPress and there's loads more. In fact if I go here, and I click on Action Reference, so here we go, we've got all of the action hooks provided by WordPress. And this lists them in the order that they run, so you can identify which ones you need to use at different stages in the process of loading your site. And you see there are hundreds of them, and there are some that you'll use a lot more than others. And generally, if you're using a function and you look that up in the Codex, you'll find that that gives you information about what hook you need to hook function to that includes that WordPress function. So these are the action hooks, now what an action hook is, is a completely empty hook that you can add your own code to. So it's a bit like those includes that I showed you in Woo commerce before. It's somewhere where you pull in code that's somewhere else. So in this case, it's an action hook provided by WordPress and it's pulling in code that you add to your plugin. So you would hook your functions to an action hook in order to get the code within your function to run at that particular point in the process, or that particular point in the code. A filter hook is slightly different, so let's just go back and look at the filters, Filter Reference, here we are. So again, there's hundreds of them and a filter is slightly different. A filter hook goes around existing code. So if there's some existing code, for example, some static text, or some sort of functionality. You can attach your own function to that filter hook in order to modify the code that's already in that filter. So essentially, you'll replace what's already within that filter with your own code. So, here is a Tuts+ guide to the difference between actions and filters. And here you got a definition of each of them, and some examples of them. So here I've got a function being called directly, we don't need to worry about that, and here we've got hooking a function to an action. Now, there are two functions that we use here. The first one, do_action, creates an action hook within your theme or your plugin. So you can register, you're federally registering a hook that you can then attach code to by hooking your functions to that action hook later on. So say, in my theme, I might have an action called compass_in_footer. And compass is the prefix I use on the parent theme that I've developed, the theme framework that I use for my own themes. So here, I've got an action hook called compass_in_footer that I'm adding to my theme in the footer file. And then if I want to put some code in that spot, I can create a plugin and then use add_action, with the first parameter being the name of that action hook and the second parameter being the name of my function. So that effectively adds all the code within my compass_colophon function, into this spot here in my footer file, and I can add as many as I want. And you can also prioritize them. So you can add, for example, here we've got 20, the default is 10 if you don't add a third parameter. But if I have 20, that will fire after any other functions that have been run with the default priority of 10. Or alternatively, I could use 5 or a lower number in order to run it first, and let's just scroll down to look at filters. So here is an example of how you create a filter. So instead of do filter, which just doesn't exist, you use the apply_filters function. So the apply_filters function has two parameters, the first is the name of the filter and then the second is the default code that's going to run unless somebody creates a function and hooks it to that filter. So if nobody creates a function hooked to that filter in a plugin or elsewhere in the theme, that means that this code within my theme will run. But if I want to modify that, I can create a function within my plugin or my functions file. And I can hook it to that, which I would do by scrolling down here, you see the example, and here I've used add_filter. And add_filter works in the same way as add_action. The first parameter is the filter hook that I'm adding it to and the second is my function. So my function here is new_credits and this here is the name of the actual filter hook. So that would replace any code in my filter hook in the second parameter with the code in my new function here. Let's take a look at some examples in some of the Tuts+ courses that have already been created. So here we've got a course called 3 More Practical Projects to Learn WordPress Pugin Development, and that takes you through the process of creating three plugins. So within this there's a plugin called tutsplus-section-menus. And there's also a theme called tutsplus-plugin-development, and that's been developed specifically for that course. Now here in the theme, in my sidebar file, I added an action hook by using do_action tutsplus_sidebar. So I've now got an action hook right in that spot called tutsplus_sidebar. And in my plugin, I've added a function here, tutsplus_section_menu, and that here is hooked to tutsplus_sidebar. So my first parameter is the name of the hook, and my second parameter is the name of the function which you can find up here. So that puts all of this code here, it effectively outputs this code in this particular spot in my sidebar file. And I haven't added a priority, because this is the only function I'm hooking to that, and I just want it to fire with a default priority of 10. But if I was writing multiple functions, I could use priorities to make sure I knew which one was going to fire first. Now let's take a quick look at woocommerce, because woocommerce is full of hooks. So here is an example, add_action admin_footer, this is hooking to the action that's provided by WordPress. That's not a WooCommerce action, because all the WooCommerce actions have the prefix woocommerce. Let's see if we can find another one. Here's another one. So we've got a function here called wc_cleanup_logs. And that's being hooked to the woocommerce_cleanup_logs action hook. If I wanted to find out where the action hook was, so I know exactly where that function is gonna be firing. I could interrogate the WooCommerce documentation and find out exactly where it is. And these hooks are good example of what's called an extensible plugin or extensible theme. Because if you use hooks to add content and to add code, instead of just directly coding that into the theme template files, or into your plugin file, it means that other people can come along and modify or override the code that you've already added. So they could attach another function to that action hook. They could override what's in the filter hook by using add_filter. Or alternatively, they can unhook existing functions from the action and filter hooks. And let me show you how that's done. So if we go back into this tutorial about action hooks and filter hooks. Here you can see that there are two functions that you can use to unhook a function from an action. There's remove_action, and there's remove_all_actions. remove_action has two parameters, the name of the hook and the name of the function that's hooked to it that you want to unhook. So that function effectively won't go to that point in the code. Now the priority is only important if there's already a priority been assigned when it was originally hooked to the action using the add_action function, so you would use the same priority. And if it has got priority, you need to add that again. remove_all_actions, for that same hook, removes any existing actions from that action hook. So that means that your fresh code, that you're then gonna hook to it will be the only code that runs on it. Filters are very similar. If I scroll down here, you can see that you can unhook a function from a filter. There's only one which is remove_filter, there isn't a remove all filters. So remove_filter and once again, the first parameter is the name of the filter hook. And the second parameter is the name of the function that you want to remove from it, so that works in the same way as remove action. So if you want to completely alter the code that's being output by a third party theme or by a third party plugin, you can write your own plugin and use remove_action or remove_filter to remove that code, and then use add_action or add_filter to add your own. So that's an overview of the WordPress Plugins API. In particular, looking at actions and filters. In the next part of the course, we're going to start coding a plugin. And I'll show you the introductory text, that commented out text at the top that you have to use in order to set up your plugin and make it work properly. See you next time and thanks for watching.

Back to the top

3.0 Writing a Plugin

3.1 Setting Up the Plugin

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Setting Up the Plugin

05:42
  • Overview
  • Transcript

In this lesson, you'll learn what you need to add to your plugin file to register it with WordPress.

Related Links

3.1 Setting Up the Plugin

Hello, and welcome back to this Tuts+ course on WordPress plugin development. In this part of the course, we're going to start writing a plugin. And I'll show you how to set up your plugin so that WordPress knows it's a plugin and can provide information about it in the admin screens. So here are a couple of resources that will help you with that. Firstly, the Codex page on writing a plugin. And secondly, our WordPress Coding Basics: Your First Plugin course. So here's my site and here's my Plugins page in the admin. Now at the moment, my plugin isn't showing up. And that's despite the fact that I have added the plugin file to the wp-content/plugins folder in my WordPress installation. But the reason it's not showing up is because I haven't added the commented out text that I need to, at the top, in order to set up the plugin. So here's the code, so if you look, I'm in wp-content and then plugins. And I've got a plugin here called tutsplus-sample-plugin. And that's just got one file in it at the moment. Now when you're creating a plugin, you can either just use one file for your plugin, as I've done with this plugin here, for example. Or you can use a folder and put your plugin file within there. And WordPress will automatically find the file that's got this commented out text, that we're about to add, and use that as the base file for the plugin. So anything else you add later on, such as include files and scripts and styles, will be caught via that base plugin file. It's a good idea to use folders because if you want to add more content later on, you can quite easily. But if you don't use a folder and you want to change later on, you could quite easily put your file within a folder and WordPress would still recognize it. So let's open my file. Now at the moment, this is an empty PHP file. So I need to add some commented out text to the top to tell WordPress that this is a plugin. So first, I'll add my opening php tags. I'm gonna need a slash and an asterisk to show that this is commented out text. The first field I use is Plugin Name. Then I'll have the Plugin URI. So that’s a link to where the plugin is stored. And that could be anything. That could be to your website. It could be to a GitHub repository, which is what I often use, or it could be to the documentation on your site. Or alternatively, it could be to the Plugins page in the WordPress plugin directory. It needs a Description. Making sure I type it correctly. Then we have the Author. The Author URI. The Version number. And normally, you'd start with 0.1 maybe for a development version and 1.0 for your first live version. I'm gonna call this version number 4.1 because that's the corresponding part of this course. The Text Domain is related to internationalization. So you add a Text Domain here, and then you use that within your internationalization functions to translate text. And then finally, the License, which is GPLv2. So that's my commented out text that tells WordPress a few things about my plugin. Now I'm gonna save that and have a look at the Plugins page in my admin screens. So I'll refresh the screen. And here it is, Tutsplus Sample Plugin. So I can now activate that if I want to. I'm not going to activate it cuz it doesn't do anything yet. But that shows you that this gives WordPress the information it needs to add your plugin to the Plugins page in the admin. So you can see we've got the description here. We've got the name here. We've got the author name with a link to my URI. And we've got a link here to the plugin URI as well, and the version number. So that gives WordPress everything it needs to run the plugin. So that's how you set up your plugin. In the next part of the course, I'm gonna show you how to add scripts and styles to a plugin. See you next time and thanks for watching.

Back to the top

3.2 Adding Scripts and Styles

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Adding Scripts and Styles

06:16
  • Overview
  • Transcript

In this lesson, you'll learn the correct way to add scripts and styles to your plugin.

Related Links

3.2 Adding Scripts and Styles

Hello, and welcome back to this TutsPlus course on WordPress plug-in development. In this part of the course, we're going to continue working with our sample plug-in. And I'll show you how to add and enqueue a script and a style sheet in your plug-in. So let's take a look at the code. So here is my plug-in, let's open that up in a new window so it's nice and clean. At the moment, all I have in it is my file. So if you remember from the earlier part of this course, where we looked at structuring a plug-in. I need to add a folder for my styles and my scripts. And I'm not going to add a top level assets folder, because I don't anticipate having a lot, but I will add a folder for each of them. So New Folder, For styles, and another New Folder for scripts. And then within my scripts folder, I'm gonna add a new file, Called my-script.js, now obviously, that would be a script that you'd need to write or to import from somewhere. And again in my styles folder, I'm gonna create a new file called style.css. So now I need to enqueue those in my plug-in. So I'm gonna start off by adding out, adding these comments so I can see that that's commented our text. And I always like to do this before each of my functions in a plug-in so that I can easily scan the plug-in and see what's going on. So I'm now gonna create a function called tutsplus_enqueue_scripts_styles. And I can enqueue both the script and the styles within the same function. Because both of them are hooked to the same WPNQ scripts hook. So the function that I use for that, the first one is WP register style and that registers my style. And it has a number of parameters. The first one is the unique name of my style. So I'll call that tutsplus_style. And then I need the file where it's held, or the folder where it's held. Now, this is relative to this plug-in. So I use plugins_url, and that has two parameters. The first one is the path to the style sheet, And the second one is this current file. And you add that using __FILE__ in capital letters, underscore, underscore. So that's my second parameter, plugins_url( css/style.css, __FILE__)) And then don't forget to add my semicolon at the end. So now I need to enqueue that style. And I need to enqueue tutsplus_style, and that just has one parameter. So that registers my style and then enqueues it. So now I'm gonna do the same thing with my script. And I'm going to copy this. And edit it, so I want go back to this, that doesn't want to be CSS, that wants to be styles. I've called my folder Styles here. To be honest, it's more common to call it CSS, but it doesn't really matter what you call it. Now let's just revisit what my script was called. It was called myscript.js. And then I enqueue my script. And I'll copy that tutsplus_script as the sole parameter of that. So I've registered a style and enqueued it and I've registered a script and enqueued it, and I then need to hook my function to the WP enqueue scripts hook. And you use WP enqueue scripts for styles and for scripts. There isn't a similar WPNQ styles hook. So I'll copy the name of my function, and then paste that there, and save that. So that enqueues my script, and my style sheet, and you can add as many scripts and style sheets as you want in your function. And that's the correct way to enqueue a script or style sheet. You shouldn't do it in the head of your theme. You shouldn't do it anywhere in the code of your plug-in over than by using this. So if you ever see an import command in CSS or anything like that, or a link in HTML, that is the incorrect way to do it in WordPress. This is the way you should always register and enqueue scripts and styles in WordPress. So that's how you add styles and scripts to your plug-in. And I've just realized that in copying my code from up here, I haven't added the closing brackets and the semi colon. So I'll just do that. In the next part of the course, I'll show you how to add include files. See you next time and thanks for watching.

Back to the top

3.3 Adding Include Files

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Adding Include Files

05:24
  • Overview
  • Transcript

In this lesson, you'll learn how to add include files for extra PHP code, and when it's a good idea to do so.

Related Links

3.3 Adding Include Files

Hello, and welcome back to this Tuts+ course on WordPress plugin development. In this part of the course, I'm gonna show you how to include files in your plugin. Now, this guide here from Tuts+ does relate to templates. But there's a lot in it about the core functions that are relevant to plugins. So here we've got include, include_once, require, and require_once. And they work in slightly different ways, as you'll see if you read this guide. Now, the code in this guide here uses functions like get_template_part. You don't want to do that, and I'll show you how to refer to your plugin files within your plugin. So let's go back to the code, so here's my plugin. I'm gonna update the version number, and I'm going to add my include files. So I'm gonna copy this commented-out text here, save typing all those asterisks again. So let's start by including a file. Now, the difference between including and requiring files and other functions that you'll have seen on this course is that I'm typing my include function straight into my plugin. I don't need to put it in a function and then attach that to a hook. Include just works exactly where you are in the plugin, so the first parameter is the path for my plugin. And there's that FILE again, so after that, I need to add, The name, Of my file, and that needs to go in inverted commas. We have here one parameter, and that's the path to my file. So include this plugin directory path relating to this file, so that's the plugin where this file is. And then I want includes, and then register_post_type.php. Now, that doesn't exist at the moment, so let's create it in the plugin. So we create a new folder called includes, and within, sorry, within that, We create a new file called register, post_type.php, now, that's a good example of where you might have some quite discrete function within your plugin. That isn't the core of your plugin, but it's important to it, and that you add that to a separate include file. So, for example, if my plugin is one to set up a store or to set up a photography gallery, but I need to register a post type for that to work. Then that include file could be kept separately so I can keep that code on its own and find it easily in the future. So at the moment, I'm including that file. And if that file can't be found, the plugin will just continue on its merry way and ignore what's happened. But what if I wanted to ensure that that file is definitely there, and if it's not there, the plugin throws an error? Well, I simply change that to require. So if I use require instead of include, it's required, it has to be there. And if WordPress finds at this point that this file doesn't exist, it will stop and it will throw an error. If I use include and it doesn't find it, it will just skip over it and carry on with the rest. So if, for example, you're running a store and your post type is products, it's not gonna work without your products custom post type. So it's useful to have require. And then there are two other versions of these functions, and they are include_once, And require_once, Which do what you might expect, they only include them once. So if that file has already been included elsewhere in your plugin or required, it won't do it again, it'll only do it the once. But if you want to insert that code all over again, you can just do it using include as many times as you want. So you might do that if you've got a snippet of code that you've put in an include file that you can use in multiple places. But something like this, where you're registering a post type, you only need to do that once. So you might use require_once for that because you need to ensure that it happens, and you only want it to happen once. So that's how you include files within your plugins. And it's a good way of managing large plugins with complex code that can be easily split down into different modules. In the next part of the course, we're going to start looking at some specific uses for plugins. And we'll start by looking at plugins that customize the admin screens. See you next time, and thanks for watching.

Back to the top

4.0 Plugin Functionality

4.1 Admin Plugins

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Admin Plugins

08:40
  • Overview
  • Transcript

In this lesson, you'll learn about some of the options for admin plugins. I'll also show you how to set your plugin up to work with the Customizer.

Related Links

4.1 Admin Plugins

Hello and welcome back to this Tuts+ course and WordPress plugin development. In this part of the course, I'm gonna show you some examples of the ways that you can use plugins to customize the admin screens within WordPress. And there are two ways to do that, you can customize individual admin screens directly and you can also add more options to the WordPress customizer. So let's start by taking a look at another plugin from this three more practical projects course from Tuts+. And this plugin, specifically is to customize the admin screens, so my plugin folder only has one file within it which which is tutsplus customize admin, and that does a number of things. So firstly, I've got editing dashboard widgets, so I'm removing some dashboard widgets using the remove metabox function here. And I'm gonna hook that to the action hook W-P dashboard setup. And I'll show you the action hooks and the filter hooks that relate to the admin screen in a moment. I can then add new content to the dashboard if I want to, so here I've added a widget, and I do that using add_meta_box function. And the add_meta_box function not only relates to the dashboard screen. That is, the opening screen you get when you open up your admin, but it also relates to the screen for editing posts and pages. So you can use add_meta_box to add your own custom meta boxes to all the post and page editing screens. And that's what's also been done in this plug-in to the post editing screen. So here you can see there's a function called add Metal Box and it's adding a metal box called Tut's plus post-editing meta, and that is added to the screen for editing a post. And we can see here that the 1, 2, 3 4th parameter is the post type that this meta box relates to. And that could be an array so you could use it on more than one post type if you want. And for that meta box, we use the Add meta box function where we give our meta box a unique name. And we also define where it's going to be and what post type it relates to, but also is a callback function, this third parameter here. And that callback function here is what populates that meta box. And we did the same thing here on the dashboard. So you can see here, there's quite a lot of HTML that's included within that callback function. So here, when I look at my dashboard, you can see that most of the dashboard widgets have gone, and here, I've got this welcome widget. And if I go to the post editing screen, and I edit in an individual post, you'll see my metabox over here on the right hand side. Now bear in mind that on this site I've got the classic editor plugin installed. Because I've built that plugin to customise the admin before gutenberg was added to WordPress core. And so I've installed the classic editor so you can see that metabox. If you wanted to add something similar Post Gutenberg you'd have to add a blog. And if you want to learn more about doing that, check out this learning guide from Tuts+. So that's how you customize the admin using a plugin, you can also write a plugin that will customize the admin via the customizer. So, what you're actually customizing via customizer is the front end, but it customizes that section of the admin that is called the customizer. And this is a really useful tool to use because over time I believe that the customizer will take a bigger and bigger role in terms of WordPress website administration. In fact, it might be that in the long term, the customizer is where you do everything, because that fits much better with Gutenberg, both the look and feel and also the principles. And for that particular course, I created a theme that modified the customizer, so let's activate that on our site. And then if you take a look at the customizer, you'll see that we added some contact details, images, including a logo and positioning of that, and a color scheme. So people can customize the main color, secondary color, links, and links on hover in this site. So you could very easily add that via a plugin, and that's something I have done for clients in the past. So for example, if they'd been working with a third party theme and they've wanted to be able to customize it themselves, I've created a plugin to target the styles added by the theme. Now, if you are adding a plugin for something like the Cutters game, you obviously need to bear in mind the fact that color scheme is display and so really its better in a theme. Butr adding something like contact details and images is something you could do in a plugin, and there's other things that you could add to the customizer too by using a plugin. So let's take a look at the code for the customizer within that theme. Here in the them I've added an include file in my Includes folder, and that's called customizer.php. So here I've got a number of functions which work with the customizer. So firstly, I'm adding the customizer controls, and to do this you use a class and you're extending the WP customize control class. And here I've created a class called Tutsplus_Customize_Textarea_Control, so here I'm customizing the text area. And then adding a specific section setting and control for that text area. And you don't need a section for every single item that you're adding in the customize, you could add one section and then add a number of controls inside it, and each control relates to a setting. So here you can see I've got the one section, which is contact details, and then I've got three lots of settings, address, phone number and email. So I'm adding a setting and a control for each of those. So the setting adds the date to the database and the control creates control in the customizer, so you can see here It's working with the class. So if I go down, there's another section here for uploading images. And I'm adding a setting and a control for the image itself, uploading it and then a setting and a control for positioning that element. So what I'm doing here, I'm using a radio button type of control, and then giving people choices of where the logo can appear. And then that taps into the CSS in the theme dependent on what people have selected. And then finally, I have a color scheme section, so there's a section here called Tutsplus colors that you can see. And I've added some defaults for those as well, so you can see how this is all done in this include file within my theme, so you could add this to a plugin quite easily. I'm echoing out all of the data relating to the address that's been added in the customizer, and I'm hooking that to the Tutsplus_in_header action hook which is in my theme. I'm then displaying the logo, and again hooking that tutsplus_header_logo and I'm using the styling that was provided. By this radio button up here, where people are selecting where it should appear to start it. And then we have a function that's quite different but that's just an option for the four colors in this color scheme for the database. That have been set via the customizer using those functions above, and then add these styles in the head of each page on the site. So this is hooking to the WP head hook to add it to the head. Adding styles to the head of your pages in your site isn't best practice for CSS. But with the customizer, this is often the only way to do it, and if you're using a standalone include file like this or you're using a plugin to modify the customizer, this is the only way you have to do it. But because you're having to use PHP variables, color_scheme1 here for example, the only way to do it Is by doing this within a PHP file. You can't add this to your CSS files, because CSS files can't read those PHP variables. So that's how you add more elements to the customizer and modify the theme using the customizer, which again, you could do via a plugin. In the next part of the course, I'll show you how you can use a plugin to create content types. So that's post types, custom post types, and custom taxonomy, see you next time and thanks for watching.

Back to the top

4.2 Content Creation Plugins

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Content Creation Plugins

06:41
  • Overview
  • Transcript

In this lesson, you'll learn how to add custom list types and taxonomies to your site using a plugin.

Related Links

4.2 Content Creation Plugins

Hello, and welcome back to this Tuts+ course on WordPress plugin development. In this part of the course, I'm gonna show you how you can use a plugin to create custom content types. And that includes custom post types, custom taxonomies, and custom fields or post metadata. So a custom post type is a bit like a post or a page. Which are the default post types that come with WordPress. You might use it to add something like products, if you're running a store, events, if you're running some sort of events type. Events, if your site is advertising or selling tickets for events or anything that you want to list. So, for example, on my writing site, I've got books as a post type. A taxonomy is something slightly different. There are built-in taxonomies in WordPress. And the ones that you're most familiar with are categories and tags. But you can add your own taxonomies. And you'll often find that if you're writing a post type, you'll want to add a custom taxonomy in order to classify that post type. And then finally, a custom field is additional metadata that you add to an individual post that tells users, tells people visiting your site, a bit more about that post and information about it. So, for example, on a site that I manage for a client that includes vacancies, which is a custom post type, that has a taxonomy which is the kind of vacancy. So if it's managerial or administrative, for example. And then it also has custom fields for things like the salary, the closing date and the interview date. So these codex pages will give you more information about those custom content types. And once again, I'm gonna walk you through some courses that have already been created and the code that was created for those. So here we've got a code called Using Custom Content Types in WordPress. So here we've got a course called Using Custom Content Types in WordPress. And here's another course, which is just a short one, called Registering Custom Post Types and Taxonomies in WordPress. So this first one is a longer course, and it goes into more depth on custom post types, taxonomies, and also custom fields and post metadata. And custom fields and post metadata are the same thing. They're just different words for the same thing. So let's take a look at my site. So here I've activated one of those plugins and I've registered a custom post type called Moons. And so I can add a new moon, not necessarily the new moon. And I haven't got any added here, but I could add new moons if I wanted to. And these also have a custom taxonomy, which is Planets. So I could add, for each moon, the planet that it orbits. And that's an example of a custom post type that could be registered. So let's take a look at the code. So here's my plugin to register my post type and my taxonomy. So I'm creating a function here called tutsplus_register_post_types. Although I'm actually only registering one post type here, but I could register more than one in this function. I'm giving it an array of labels and also an array of arguments, which includes the labels. And then I use the register_post_type function, which is provided by WordPress, with two parameters. The first one being moon, and the second one being arguments. And then I hook that. And here you can see my function name here, tutsplus_register_post_types. I hook this to the init hook. And then again, to register a taxonomy, I've created a function called tutsplus_register_taxonomies. I've got an array of labels for it and an array of arguments as well, which includes those labels. And these labels, in both cases, are the text that you'll see in the admin screens when you're editing your WordPress site. And you can see that I've internationalized the code by using internationalization functions here. And in this case, I used the register_taxonomy function. And that has three parameters, the name of the taxonomy. And to be honest, I should probably call it tutsplus_planet to make it unique. Because you never know, there might be another plugin or there might be a theme running on my site that has a taxonomy called planet. It's unlikely, but you never know. And then you can use rewrite to change the slug so that it doesn't show a slug of tutsplus_planet. So the taxonomy here is planet. Moon, the second parameter, is the post type that it applies to. And that can be an array, you can apply it to more than one post type. And then finally, all of my arguments. And then again, Using add_action, which we've looked at earlier. So that's how I register a custom post type and a custom taxonomy. But what about custom fields or post metadata? Now this course here shows you how to display your custom fields in a WordPress theme. Now in this particular course, I've used a theme, I've used the theme template files to display those. But you could use a plugin that hooks into any hooks that are in your theme if you're using a third-party theme that's got hooks, or if you're using a plugin like WooCommerce that's got lots of hooks. So let's take a quick look at the code for that. So here we've got this theme tutsplus-display-custom-fields-in-posts. And I've got my content-single here. And I've added an aside here for the post-meta. So I've added a particular custom field which I'm outputting here. So the key function I'm using here is get_post_meta, and that's got three parameters. The ID of the post, the name of the field, which here is Day of the Week, and whether I just want to output one or whether I want to output all of them. And here I've put true because I just want to output one. So I've used that twice for the day that I've written, the day of the week and also my mood on the day of writing that post. And that will be output at the bottom of every page. And there are lots of other ways you use get_post_meta. So if you create meta boxes, as we saw in the previous module on customizing the admin, you can give your users somewhere to add metadata for an individual post via your plugin. And then you could output that metadata somewhere on the post or elsewhere on the site, depending on what you need. So that's how you work with content types in your plugins. In the next part of the course, I'll show you how plugins can be used to output either static content or the results of a query. See you next time, and thanks for watching.

Back to the top

4.3 Outputting Content

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Outputting Content

07:20
  • Overview
  • Transcript

In this lesson, I'll teach you how to output static content or the results of a query in your plugin.

Related Links

4.3 Outputting Content

Hello, and welcome back to this Tuts+ course on WordPress plugin development. In this part of the course, I'm going to show you how you can use a plugin to output content onto the pages of your website. And that might either be static content or it might be the result of a query fetching data from the database. So let's start by looking at static content. And here in this course on, 3 Practical Projects to Learn to Code WordPress Plugins, I've created a plugin that outputs a call to action button that's activated via a hook. So let's take a look at the code, here's my plugin code. So first I'm enqueing the styles which we've already looked at in this course, and then I'm adding this function called tutsplus_cta_below posts, and CTA stands for call to action. So first I'm checking that it's a singular ( 'post' ) and then if that's the case I'm outputting this div with a class of cta-in-post. And that has got some static content in it, For more post like this in your inbox every week, join in our mailing list. Now that's very basic, and if you wanted to amend that, or allow your users to amend it you could use something like a widget or a shortcut to do so, which we'll look at in the next part of this course. But then finally, its hooked to an action. So in my theme, I've got an action called tutsplus_after_content, which is after the content of every single page in the site, but it'll only run the code if we're in a singular post. So let's take a look at the styling that I've added to that. So you see here, I've registered and enqueued a style sheet. So in my CSS folder, I've got a style sheet, and that styles my cta-in-post box. The second thing we'll look at is how you can use a plug in to output the results of a query. So here in another course called, 3 More Practical Projects to Learn WordPress Plugin Development, there's a plugin to create a section menu and that will output a list of the pages in this section of the site. There's also a plugin to create a display of custom posts and that uses WP_Query. So I'll show you both of these so you can see that there are two different functions that you can use to output a query. So first, if we look at tutsplus-section-menus, this firstly checks if we're on a page, because this only operates on a page. It looks to see if this post has got parents, has it go ancestors, and it fetches the top level ancestor for this particular page. And the reason for that is because we want to display a list of all the pages underneath the top level ancestor of the page. So if we're in the top-level of the page, it'll display the pages below it but if we are one of those pages below it, it'll display all the pages at the same level. And then it runs this function called tuts_plus_section_menu. And you can see here this is hooked to tutsplus_sidebar, which is a hook that I've got in my theme in the sidebar. So I'm checking that we're in a page again, and that we're not on the Homepage because this function I don't want to run on the Homepage. We're setting a variable called ancestor, which is the results of the function above, tutsplus_check_top_level_page. So now we've got that ancestor variable we're setting the arguments for our get_pages function. And get_pages is one of the functions that you can use to query the database. So my arguments are that the page is a 'child_of' the ancestor, that it's got a 'depth' of- 1 so that means any depth, and this 'title_li 'option means that the top level one isn't displayed. So I'm now using the get_pages function and saving the results of that to a variable called List_pages. If that's populated, if List_pages, it will then output a section with a heading and I've used class "widget-title" because that fits with the styling in my theme, and then an unordered list with all the sub pages. And that uses WP list pages because that will create a list of all of those pages with a link to each of the pages. So that's how you use get_pages to query the database and output content onto your site via a plugin. Now let's take a look at WP_Query. So this tutsplus-category-posts-list plugin uses WP_Query. So firstly, that's got a style sheet that it's registered at the top, and then we've got this function called tutsplus_category_ post_listing. And that will list the latest post it up to four categories on the site and output them with their featured image. So the first thing I want to do is fetch some categories. So in fact, it's outputting 3, because I've got number of 3, and random as my order. So I'm fetching 3 categories, if that categories variable is populated I'm then outputting a section, and we'll come back to this do_not_duplicate in a moment. Within my section, I've got a heading that says, ' Latest Posts ' internationalized, and then for each of my categories, I'm setting up some query arguments. So I want my 'post_type' to be "post", the number of posts output to be 1, the category to be the category that I fetched using get categories, and the post not to be in do_not_duplicate, so if you remember that was up here. And do_not_duplicate is an array of values which will include the post IDs of all the posts that are output as this loops through you're using this foreach loop. So I'm then using WP_Query to run a query, and if the query has posts I'm running what looks a lot like a standard loop. So I'm outputting an article with an h3 in it, the_post_thumbnail if it's got one, and then an h4 with the_title inside a link to the post, and then the_excerpt. I don't want to output the full content cuz this is designed to go at the bottom of each post in my site and display the latest posts in each category. I'm then adding the ID for this post to that do_not_duplicate array, so that when I go back up here and check this in my foreach loop, I won't get the same post duplicated again if it happens to be in more than one category. And then finally and very importantly wp_reset_postdata resets the query back to the default query that WordPress is running. If you don't use that at the end of WP_Query you could end up in all sorts of mess with your queries. I'm closing the section and then my function is hooked to add_action hook called tutsplus_after_content, which is a hook that I've added to the child theme that I created in this course to output the content. So that's one way of using WP_Query to output data from the database via a plugin. There are lots of other ways that you can use WP_Query, it's a hugely flexible class and one that I use a lot. And if you search for it on the Tuts+ website you'll find that there are a lot of tutorials and courses helping you to use WP_Query. In the next part of the course, we're going to move on to widgets and short codes. And I'll give you an overview of how you create those via a plugin. See you next time, and thanks for watching.

Back to the top

4.4 Widgets and Shortcodes

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Widgets and Shortcodes

08:47
  • Overview
  • Transcript

In this lesson, let's create a plugin that adds content to the screen via a widget or shortcode.

Related Links

4.4 Widgets and Shortcodes

Hello, and welcome back to this Tutsplus course on WordPress plugin development. In this part of the course, we're going to look at widgets and short codes. Now widgets are a really useful tool, because they allow the user the ability to add your widget into any widget area in their theme. And shortcodes are also used for users, because they allow users to add some code via a shortcode anywhere they want in a page or a post. So here in my site, that's got the 2017 default theme activated, I've got a number of widget areas. So there's my blog sidebar, the footer 1 and the footer 2, and depending on your theme, you'll have different widget areas. Some themes have loads of them, particularly big framework themes. And some themes only have a sidebar, or maybe a sidebar and a footer. But you will find that most themes do have at least one widget area. So WordPress comes with loads of widgets already installed. So you've got things like calendar and archive and categories and all sorts of other things. But you can create a plugin to add another widget, that you can then use in your site or other people can use in their site, to add that widget to a widget area. And a shortcode is also something that's accessible via the user. So let's take a look at this sample page, and you would add a shortcode by typing the name of the shortcode, Inside square brackets. And that would output the shortcode code into that point on the page when it's output. Now some short codes also have parameters, which makes them more flexible, and I'll show you how to add those as well. Let's take a look at some of the code. First, here's the widget plugin. So that's got some CSS which will be enqueued in the plugin, and it's got a file for the plugin code. So here you've got the enqueueing the stylesheet, and then we've got our widget. And to code a widget, you need to use a class. So you create your own class, which extends the core WP widget class. So here I've got Tutsplus Cta widget. So within my widget, I've got a number of functions. The first one is a constructor function, which constructs the widget and creates it so that there will be a widget in the widget screen. And that includes a class name for it, and also a description which you'll see on the widget screen, in the admin screens. We then need to have a function that outputs the form for the widget. So that's the form in the admin screen, either in the customizer or in the widget screen, where a user would input stuff to our widget. So here we've got a title, we've got a link, and we've got some text. This is a call to action, so we want to give it a title, which is optional. We want to give it some text, which will go in the call to action box, and we also need a link, because a call to action box is nothing without a link. The third function and don't forget we're all still within our class, is an update function. And that will update the database with the new instance of anything that a user inputs to our widget. So that's looking at title, text and link, and it's updating the instance of each to the new instance. We then have a function to display the widget in the site, so without this, it won't be output anywhere in the site. And that defines our variables, for the title, the text and the link, and in this case, I've defined variables for the title, the text and the link. You don't need to do it like that, but I prefer to because it means when I come to code the actual HTML, it's much easier. So I've defined those variables for those three items that people were able to enter in the widget. I've then output the code, so I echo arguments before the widget, which is standard because there are always before widget arguments. And then I have a div with the class Cta, and within that, I'm checking if the title has been filled, because that's an optional field. And if it has, I'm echoing out what goes before it, the title itself and what goes after it. And then I'm following that with a link that contains the text from that text field. I've enclosed my div and echo out the after widget arguments, and then close the function and then the class. And then I need a function to register the widget, so that has created the widget, but unless I register it, it won't actually work. So we then use the register widget function here. So I'm simply registering my widget called tutsplus_Cta_Widget and I'm hooking that to the widget init hook, which is the standard way that you register a widget. So that's how you create a widget plugin. Now let's take a look at a shortcode plugin. So the first one is a straightforward plugin with content. So again, I'm enqueueing a style sheet, and then I've got my shortcode. So I'm calling it tutsplus_cta_tags. It's got attributes and it's got no content to start with. The ob_start ensures that the output of this shortcode, appears in the right place in the content. If you don't use that, it'll output it at the beginning of whatever element that you're in. So that might be at the top of your content, it's not random, but it feels pretty random when you see it happen. So you use that ob_start, and then you've got div class with the Cta. And that echoes out the content, which is this second parameter here, for the shortcode. Close the div, and then return ob_get_clean, is the mirror of this ob_start and ensures that it's returned correctly. So return ob_get_clean, will return this object, this cta. So we then use the add a shortcode function. So that's different from anything else we've looked at. We're not using add action, or add filter. We're using add shortcode, cta tutsplus_cta_tags. So the two parameters here, the first one is what somebody would type in into their admin screen to add the shortcode to their post. And then the second one is the name of my function. So if I copy this and I go into my site, and I replace here name of shortcode with cta, that will output the text from my call to action shortcode. Now let's take a look at a shortcode with a little bit more complexity. So here we have a shortcode with more parameters. So again, we've got enqueuing the style sheet, we've got tutsplus_cta_atts, that's the name of the function. It's got attributes, and the content is null to start with. So we then define some default attributes, some text and a link, which is nothing at the moment. The user would need to add the link. But I could add that in my code if I wanted to. We've got ob_start and ob_get_clean here like we did last time, and again, we've got a div with a class of cta. And in this case, it's slightly different. So instead of simply outputting, the content that's defined by the plugin, the user can define the attributes. So again, I do cta in my shortcode. And if I just typed in cta, it would output it with these as the attributes, join our mailing list, and the link would go nowhere. But if I change that, To [cta link = "http//mysite.com"], that would output it with this default text, join our mailing list, wrapped around a link to mysite.com. And I could also change the text. Text = "hello", so that allows the user to define some attributes of the shortcode. And you'll probably have used shortcode plugins that you've downloaded from the plug in directory, to do this. So that's how you create a plugin, either to create a widget, or to create a shortcode. In the next part of the course, we're going to look at a practical project that puts together some of the skills that you've learned on this course. See you next time, and thanks for watching.

Back to the top

5.0 Practical Project: Create a Widget Plugin

5.1 Create a Widget Plugin: Register the Post Type and Taxonomy

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Create a Widget Plugin: Register the Post Type and Taxonomy

05:56
  • Overview
  • Transcript

In this lesson, you'll combine the skills you learned to this point in the course in a practical project: a widget plugin. You'll start by registering a post type and taxonomy.

Related Links

5.1 Create a Widget Plugin: Register the Post Type and Taxonomy

Hello, and welcome back to this Tuts+ course on plugin development. In this part of the course, we're going to combine a lot of what you've learned so far into a practical project. And in this project, I'm going to create a widget, but this widget will also incorporate some of the other techniques we've looked at. So what it'll do is, it'll take a custom post type, it'll query that custom post type, and it'll output the latest posts of that post type in a widget. So it'll use queries which we've looked at, it'll also use custom post types, which we've looked at, and it'll use widgets, which again, we've looked at. And this will combine them all into one plugin, so let's start with the code. So here I've got my empty plugin file, I've added some comments so I know what I need to do, and I've also added the commented out text at the top here. Which will tell WordPress that this is a plugin and what it does. So let's start by registering the post type, now we covered registering post types in an earlier part of the course. So, I'm gonna go back to that code that we created there, and I'm going to copy it and edit it. Because once you've written some code once, it's much more efficient and also more reliable to copy it and use it again with edits. So let's copy that and add it into our moons widget, because this is going to be a moon post type. So now we have our labels for our moon post type, and here we've got a rewrite, which is moons and we're also going to change the name of the post type to tutsplus_moon. And I'm gonna change this to tutsplus_register moon post type my function name, just so I know it's unique because we've been setting up a lot of plugins on this demo site and I don't want to accidentally have to, that are clashing with each other. So, there is our post type being registered, so it's got labels with moons in, it's got these arguments, including those labels, the fact that it has an archive that it's public, that it's not hierarchical so it will behave like a post rather than a page. That it's got this slug of moons rather than tutsplus_moon as its slug when we're looking at it in the browser, and that it supports the title the editor, the excerpt Custom-fields, thumbnails of featured images and page-attributes. And it will also apply to the post-tag and category taxonomies so we use tags and categories with it. But will also have a taxonomy that is specially for the moon post-type, and that's what I'll add next. Let's just tidy things up a little bit here, and I'll add one more gap, so now I'm going to register the taxonomies, so here is the code where I registered a taxonomy. So you can see actually, I already registered a moons post type, so I should have copied that, shouldn't I? But that just shows how you can take existing code, that you've used and edited to make it apply to a new post type. So here, we've got labels, we've got a singular name for it, and I'm keeping this taxonomy the same planets and got all of these labels for it, the rewrite slug is planets. And this time I'm gonna call it tutsplus_planet, tut's, okay so know where that came from and have, Tutsplus_moon as the second argument, so that's my function to register my taxonomy, I'm going to slightly change the name of it, to be sure that it's unique, And I also need to add another argument. Which is showing rest, and the reason for that is because of the Guttenberg interface. So Guttenberg uses the REST API to access posts, and taxonomies and everything else from the database. And without access to this taxonomy, it won't show up in the post editing screen for any post types that the taxonomy is registered for. So you need to include this show_in_rest, to make sure you can still access it If you're using the Guttenberg post editor, which you will be if you're using an up to date version of WordPress and you haven't installed a plugin to turn it off. So the first two parts of my plugin are complete, I have my post type, and I have my taxonomy. And if we take a look at the site, you can see that these are added to the site, so that's active because I've activated the plug in. So I've got planets as a taxonomy, I've added some moons, I haven't actually added the planets to them yet, but I could do that if I wanted to, the planets won't be called by the widget plugin. We could add those in if we wanted to, but for the sake of this particular plugin, it's just gonna output a list of the most recent moons that have been added to the site. So in the next part of the course, we'll move on to start creating that widget, so we'll create a query that will query for the most recent moons, and we'll create a widget that runs that query, see you next time, and thanks for watching.

Back to the top

5.2 Create a Widget Plugin: Run a Query

Previous
Next Lesson

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Create a Widget Plugin: Run a Query

10:44
  • Overview
  • Transcript

In this lesson, you'll continue creating the widget plugin to practice the skills you've learned in the course so far. You'll finish off the plugin by running a query and outputting its results in a widget.

Related Links

5.2 Create a Widget Plugin: Run a Query

Hello, and welcome back to this Tuts Plus course on plugin development for WordPress. In this part of the course, we're going to continue creating our widget. So we now have our custom post type registered as well as a custom taxonomy. Then the next step is to run a query. And I will create a function that outputs that query. And then I'll be able to run that function inside my widget. Now I could add all the code for the query inside my widget. But I like to put it in a function first. So that, well, for two reasons. One, is that I can use it somewhere else if I want to. And the other is it just makes coding my widget a little bit simpler and cleaner. So let's go to the code. So this time, instead of copying the query from an earlier part of the course. We did do queries earlier on and we used the WP Query, class, so you've already been introduced to that, but this query will be quite different. It's not gonna include categories, it's gonna output a list instead of articles. So I'm gonna code it from scratch because that's easier. So I'm going to call it I'm going to give it a function name. And I'm going to call it tutsplus_list_moons. First thing I'll do is set up a query arguments. So I've got two arguments. One is the post type. Which is tutsplus_moon, and the second is post_per_page. And I'm gonna output five. So those are the arguments for my query. It's gonna output the most recent five posts in the Tuts Plus moon post type. So now let's run the query. So I'm outputting my query, I'm checking if the query has got posts. So now let's output some actual HTML. So I've closed PHP and I'm opening an unordered list. Once I've opened that list, I then start to actually run the query. Because first I've checked if the query has posts and now I'm going to run it. So now that's the second part about putting a query. So I've got if query have posts, and then while query have post the post, so we'll start running the query. Making sure I type least ID not list is. So I've got a list with an ID of the post ID, and using the post class template tag to output classes for that post. So I've got a link to the permalink and then inside that link, I'll have the title of the post. And then I'm gonna close my link. And then I'm gonna close my list item. And then I need to end the query. And then finally, close my own ordered list. So I'll open up PHP here, so that these braces can be read. And then I'm going to put wp_reset_post data. I've got to reset the query. So here is my query. So I've got my query arguments, which are the post typing tuts plus moon. I've got the number of posts per page, which is the number of posts it will output in the widget. And then I've got my query, the outputs unordered list, and then within that for each post that's retrieved. It outputs a list item with a link and the name of that particular moon. So that's how I create that query. But that query isn't going to appear anywhere until I actually add it into my widget. So now let's create the next part and the final part of the plug-in, and that's the widget. Now for this, I'm gonna take the code we used in the earlier part of the course where we looked at widgets, and I'm going to edit it. We're gonna change its name, to tutsplus_Moon_Widget, we're gonna give it a new class name. And we're gonna give it a new description. I'm gonna change its name here to tutsplus_moon_widget, and the name that it's given in the widget screen to Moons List. So we now have the widget form. And all we need for this is the title. We don't need text and a link because we haven't got those. So that paragraph there for the title will stay and these two can be removed. We then have the function to update the data. And again, the text and link can be taken out and title will stay. And then we have the function to display the widget in the site. So again, we don't need link or text here. And then for the div, we will call it moons, moons-list. And then if the title is empty, we echo out that title, but I'm going to add in an h4 because that's what my theme uses. So if the title field is not empty, I'm echoing out what comes before the title, h4 class equals widget title. And then the title itself, the closing h4, and then after_title, and if that isn't the case, I want to echo out a default title. So I'm gonna copy this. Just put moons as the backup title in case the user doesn't actually add a title in the widget setup. I remove this part here with the link and so forth, because those aren't in this plugin. But what I do need to do now is I need to run my query, and to do that, all I have to do is run this function. And then my div is being closed. The after widget arguments are being echoed out. And that's the end of my widget. Now because I've done a bit of editing here, I just want to check all the braces. Yeah, that's good. So all the braces are in the right place. And then finally, we are registering a moons widget. And here we need to make sure we change this to the name of this class that is up here. And actually, in order to be really accurate, I'm going to copy and paste it. And I'm glad I did because I initially typed in moons. But it's actually moon. I'm gonna change it to moons actually. [LAUGH] I think it's not a moon widget. It's a list of moons. So there we have the code for our widget. So we've got our plugin in full now. We've got registering the post type and the taxonomy. Which we did in the last part of the course, we've got running a query to output a list of the most recent moons, most recently added to the site. And we've got our widget which runs that function and outputs the query. So if I go into the widget screen, we'll see I have a moons list widget. I'm gonna add that to my sidebar. I'm gonna save that title. And then refresh the screen on my front page. And there we have it, recently added moons. So it uses an h4, so it's consistent with other widgets in my theme. And it's got a list of all the moons. So if I click to those, I get to see any of the moons that I've added. So that's how you create a custom plugin, pulling together a lot of the techniques that we've used in this course. So we registered a post type and the taxonomy. We then output a query. And then we pulled that query into a widget. And that gives you an example of how you can use multiple techniques in plugins to create one more complex plugin. In the next part of the course, we'll wrap up and go through what's been covered in the entire course. See you next time and thanks for watching.

Back to the top

6.0 Conclusion

6.1 Conclusion

Previous

Next lesson playing in 5 seconds

Cancel

Introduction to WordPress Plugin Development

Conclusion

03:24
  • Overview
  • Transcript

Congratulations on completing this introduction to WordPress plugin development. In this lesson, I'll recap what we've covered in the course.

6.1 Conclusion

Hello, and welcome back to this Tuts+ course on WordPress plugin development. In this final part of the course, I'll recap on what you've learned and go through the different learning points that we've covered as we've gone through the course. So we started off by looking at when you would use a plugin, and comparing a plugin to the functions file. And I showed you some examples pf functionality that you'd add via a plugin. Such as registering custom post type, and that you'd add via the functions file, such as setting up navigation menus and thumbnail support. We then moved on to looking at the structure of a plugin. And I used WooCommerce as an example that we interrogated in detail to examine exactly how it's structured, how the files are kept, and also how to drill through the code and find an individual function that you might be looking for. And then we looked at the plugins API. So I showed you some examples of using filter hooks and action hooks. And I showed you how to use those to hook your functions and also how to unhook functions and prioritize them. So for example, in this plugin here that I use as an example, added our function tuts+ section menu to the tuts+ sidebar hook in the theme using the Add action function. We then started work on writing our own plugin. And we created over the three parts of the course, a plugin here that includes its own file structure, and also uses correct enqueuing and including to fetch those. And you can find those plugins in this Tuts+ course. We then looked at plugin security, and specifically validating, sanitizing, and escaping user data. So I showed you an example of a plugin to customize the admin by adding a meta box and how the data that's added via that meta box has to be checked for security using a nonce field. And also by checking user permissions. We then looked at some different examples of the type of plugin that you could create. And we started by looking at plugins that customize the admin. So we looked at two plugins. One of those was to customize the admin screens by editing the dashboard and by adding a meta box. And the other was to add extra functionality to the customizer. And then we looked at using a plugin to output some static content or some content fetched from the database using either the GetPages function or the WP query class, which you can find here. And then finally, we looked at creating our own widgets and shortcodes. And the plugins that we used were from this course here that included shortcodes and widgets. So I showed you how to create a really simple shortcode with some static content and also how to create a shortcode with parameters that your user could edit. And then we looked at how you create a widget that somebody can add to their site via the widget screen or the customizer. So we then looked at a practical project that pulled together a bunch of the techniques that we learned on the course. So we took the techniques for creating custom post types and taxonomies. For running a custom query using the WP query class. And also for creating a widget. And we created this widget here, which is in my sidebar, and you can see there on the site. Now you've completed this course, you should have solid grounding in how plugins work and the different ways that you can use them. I hope you found this course useful. Thanks for watching.

Back to the top
Rachel McCollin
Rachel McCollin
Rachel McCollin is a WordPress developer who writes books, articles and tutorials about web design and development, with a focus on WordPress and on responsive and mobile development. She runs a web design agency in Birmingham, UK and has published three books on WordPress, including WordPress: Pushing the Limits, an advanced resource for WordPress developers. She's currently writing her fourth book.
Add to My CoursesView on GitHubDiscuss in the Forum
Contents
1.0 Introduction
1.1 Introduction
1.2 How This Course Works
2.0 Plugin Overview
2.1 When to Write a Plugin
2.2 Plugin Code and Structure
2.3 The Plugin API
3.0 Writing a Plugin
3.1 Setting Up the Plugin
3.2 Adding Scripts and Styles
3.3 Adding Include Files
4.0 Plugin Functionality
4.1 Admin Plugins
4.2 Content Creation Plugins
4.3 Outputting Content
4.4 Widgets and Shortcodes
5.0 Practical Project: Create a Widget Plugin
5.1 Create a Widget Plugin: Register the Post Type and Taxonomy
5.2 Create a Widget Plugin: Run a Query
6.0 Conclusion
6.1 Conclusion
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories