Let\u2019s get started!<\/p>\n
Missed a tutorial in our WordPress Development for Beginners series? You can catch up on all five posts here:<\/strong><\/p>\n Before we get stuck into making an actual plugin, let’s take a detailed look at hooks, actions and filters. It’s these elements that the whole plugin system is based on and will help you fully understand the behind the scenes of how WordPress actually works.<\/p>\n Let’s have a look at an example.<\/p>\n What if you wanted to create a plugin that added some analytics tracking code to your site? Tracking code is typically placed at the bottom of a webpage right before the closing Remember back in WordPress Development for Beginners: Building Themes<\/a> I mentioned the Here’s\u00a0a code example you can play with:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Let’s break it all down. Firstly, I wrote a function that simply echoes the tracking code. It isn’t used anywhere, it’s just a function sitting there in my plugin. Then, using the Whenever WordPress gets to the This is the basis of hooks but we’ll delve into them in a bit more depth later in this tutorial so you can learn about and use their power. Before moving on, I want to mention a slight correction. The Now that you’ve had a taste of what’s to come, let me properly explain the terminology you’ll read about in this tutorial before we move on.<\/p>\n Hooks<\/strong> are a part of the WordPress Now that we know the basics, let’s look at the We’ve already looked at the first two, which are the only required ones. They identify which function should be executed and where it should be run.<\/p>\n The third parameter determines the order of the functions that are executed. This is useful when there are multiple functions tied to the same hook. It’s entirely possible that you want to add multiple tracking codes to a website. Using the priority argument you can control when your function is run.<\/p>\n The accepted arguments simply tells WordPress how many arguments the hooked function accepts. You’ll need to look in the WordPress Codex<\/a> for each hook to see if you need to add something here. Some functions take more than one argument, in which case you’ll need to specify it here. Take a look at the example below and you’ll see why this is the way it is when creating our own hooks a bit later.<\/p>\n Example Action<\/strong><\/p>\n WordPress doesn’t just offer actions in themes but also in the backend admin and within the context of specific user actions. The The need for arguments becomes apparent here. If I add a function to this hook, how do I know which post was published and what the details were? Looking at the hook documentation<\/a>, you can see that the function is passed the post ID and post data as two arguments.<\/p>\n For example, let’s send an email to the post author when a post is published:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n As I mentioned earlier, filters work in much the same way but modify data so you’ll mostly be returning within your hooked functions. To add filters we use the Example Filters<\/strong><\/p>\n A good example to start with is modifying the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Note that I have not specified the priority and the accepted arguments. This will make the priority 10 and the accepted args 1. I’m not using the argument passed (the default more text) at all, I’m just returning a string.<\/p>\n You could use the same method to embed an advertisement within the first paragraph of your single post content. Take a look:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n With a little CSS to float the ad to the right, you could have a standard ad block within your content in a just few seconds.<\/p>\n Learning about how hooks are defined and how to create our own can greatly aid in the understanding of the system. Let’s say you’re creating an eCommerce plugin and you’re adding the functionality to list products, you could do something like this:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n You’ve essentially hard-coded that you want to show 10 products. What if someone is creating an extension for your work and wants a view where only three products are shown? If you write your code cleverly, you can allow others to modify it. Let’s use a hook to allow developers to tap into our work.<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n By using the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Now that we know all about hooks we need to know where to put them. Let’s take a step back and look at plugins in general.<\/p>\n Plugins reside in the main plugins directory of your WordPress site, which is usually found in First, create a folder in your plugins directory and name it\u00a0 Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n This information is displayed in the backend admin of your site in the plugins section. Once you save the file you should see your new plugin listed; you’ve just created a perfectly functioning plugin. It doesn’t do anything just yet, but it can be activated. Go ahead and do that now.<\/p>\n We’ve actually done 90% of the work. All we need to do now is find a way to add our link to the end of the post content. You can think of this as modifying the post content by appending some text to it. This means we’ll need to use the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n This will add a link after our content, which will allow users to tweet and the link will already be filled in the tweet box.<\/p>\n That’s actually all there is to know about plugin creation. All plugins are a mixture of functions and hooks that determine where these functions are executed. From now on, all you need to focus on is learning various sub-systems like the Options API<\/a>, Metadata API<\/a> and so on.<\/p>\n There are many ways to add options to your themes. Let’s look at the default way that is contained in the WordPress Codex<\/a>.<\/p>\n We’ll\u00a0start off by creating a page in the admin that will hold the form:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The Here’s what our options page looks like so far on the front-end:<\/p>\n While this may look cool and all, it’s overkill for our small plugin and just clutters the interface. Always consider placing your options pages inside<\/em> an existing menu. This page would be best placed within the Settings<\/strong> section using the The next step is to let WordPress know about our tweet settings. This consists of using the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n All done. The final step is to add a form that uses our options. Use the following code as a template to create your own settings. Don’t forget to use the \n
Hooks, Actions and Filters<\/h3>\n
<body><\/code> tag. It must remain in place if the theme is switched and it must work on any WordPress install. So, if you don’t have control over themes directly, how do you do this?<\/p>\nwp_head()<\/code> and wp_footer()<\/code> functions and how you must add these to your theme? Our example above is exactly why these must be present. The wp_footer()<\/code> function can execute other functions defined by plugins.<\/p>\nadd_action()<\/code> function, I told WordPress when to execute my function.<\/p>\nwp_header()<\/code> function it finds all other functions, which are hooked to it using add_action()<\/code>. It then executes these functions one-by-one, echoing the tracking code as a result.<\/p>\nwp_footer()<\/code> function in the footer of themes is not actually a hook, it’s a simple function that contains the hook somewhere within its code. A hook is called like this: do_action('wp_footer')<\/code>, but this really wasn’t important for the first example, you’ll understand more about this soon!<\/p>\nTerminology<\/h4>\n
Plugin API<\/code>. Actions and filters are two different types of hooks. Actions<\/strong> allow you to add functionality, you basically define a function that is run whenever the hook is processed by WordPress. A filter<\/strong> works similarly, but instead of adding functionality, it modifies existing functionality. For example, WordPress has a hook which determines the length of the excerpt: 55 words. You can use a filter to modify it to different word count.<\/p>\nAll About Actions<\/h4>\n
add_action()<\/code> function in more detail to understand it better. The function takes four arguments, which are:<\/p>\n\n
publish_post<\/code> hook is run whenever a post is published, allowing you do something at that point.<\/p>\nAll About Filters<\/h4>\n
add_filter()<\/code> function, which takes the same arguments as add_action()<\/code>.<\/p>\nmore<\/code> string at the end of excerpts which is “[…]” by default. To modify this you could do something like this:<\/p>\nDefining Hooks<\/h3>\n
apply_filters()<\/code> function we’re telling WordPress that we have a hook named “product_count” and we want to run all functions hooked to it. In any other plugin, someone could change this value to three with the following method:<\/p>\nThe Basics of Plugin Creation<\/h3>\n
wp-content\/plugins<\/code>. As an example, let’s create a plugin that adds a tweet link below posts.<\/p>\ntweet-plugin-tutorial<\/code>. Create a file within this folder and name it\u00a0tweet-plugin-tutorial.php<\/code>. Open the file and paste in the following code:<\/p>\nthe_content<\/code> hook, like before:<\/p>\n![\"Tweet](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-10-at-11.51.28.png\")
Adding Theme Options to Plugins<\/h3>\n
tweetlink_settings_menu()<\/code> function is hooked to admin_menu<\/code>.\u00a0According to the Codex, this is how menu entries must be created. The bulk of the work is done by the add_menu_page()<\/code> function, which takes a bunch of arguments to create a top level page. The arguments in order are:<\/p>\n\n
![\"Our](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/options-page.png\")
add_options_page()<\/a><\/code> function.<\/p>\nregister_settings()<\/code> function inside a function hooked to admin_init()<\/code>. Here’s what the code for this looks like:<\/p>\nsettings_fields()<\/code> and do_settings_sections()<\/code> functions to ensure WordPress saves your data for you.<\/p>\n
![\"Twitter](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/twitter-name.png\")