WP Plugins 101 : Customize Your Website the Way You Want!
Developing your own plugin
In order to develop your own plugin, it’s critical to first understand how the key systems work. Plugins operate primarily using hooks, which are a way for one piece of code to interact with (‘hook into’) another.
In this section, we will cover up the basics of how to develop your own plugin. Please notes, that don’t develop your plugin on the live site until it is ready and pass the test. You can use the staging site in your local environment, learn more.
There is some terminology in WordPress that you need to understand before you get started to develop custom plugins which is :
Hooks
WordPress works by using hooks as their main communication tool between plugins and themes. Hooks are very powerful tools to customize how WordPress works, think of it as a commander of your website that gives a command to WordPress to do certain things.
Reference
Hooks come in different types which are :
Action Hook
A WordPress action refers to a specific activity that is going to happen at a particular time. With actions, you can add or change the functionality of your plugin.
The functions that are attached to the action hook will be executed once that action is triggered. Here is a sample of the action hook :
add_action( 'wp_enqueue_scripts','custom_function' ); function custom_function() { //do something }
WordPress core comes with dozens of predefined actions. However, you can also create your own. Either way, when developing your WordPress plugin, you’ll use do_action to set values for your hooked function. The add_action function will then be used to connect that function up to a specific action. Here is the sample code :
// The action callback function. function example_callback( $arg1, $arg2 ) { // (maybe) do something with the args. } add_action( 'example_action', 'example_callback', 10, 2 ); /* * Trigger the actions by calling the 'example_callback()' function * that's hooked onto `example_action` above. * * - 'example_action' is the action hook. * - $arg1 and $arg2 are the additional arguments passed to the callback. $value = do_action( 'example_action', $arg1, $arg2 );
Reference :
Filter Hook
WordPress filters are hooks that accept a single variable or a series of variables and then sends them back after they’ve been modified. In a nutshell, filters let you change the content that is displayed to users. Here is a sample of the filter hook :
add_filter( 'the_title', 'custom_title ); function custom_title( $title ) { return 'The ' . $title . ' was filtered'; }
You can create your own filter by using the apply_filters hook. Then to execute it, you can use the add_filter function. This will let you hook a specific function to the filter, so you can manipulate the variable and return it. Here is the sample code :
// The filter callback function. function example_callback( $string, $arg1, $arg2 ) { // (maybe) modify $string. return $string; } add_filter( 'example_filter', 'example_callback', 10, 3 ); /* * Apply the filters by calling the 'example_callback()' function * that's hooked onto `example_filter` above. * * - 'example_filter' is the filter hook. * - 'filter me' is the value being filtered. * - $arg1 and $arg2 are the additional arguments passed to the callback. $value = apply_filters( 'example_filter', 'filter me', $arg1, $arg2 );
Reference :
Shortcode
Put simply, shortcodes are user-facing bits of code that give users a quick and easy way to create and display custom functionality to their sites. Shortcodes can be placed in posts and pages via the editor, in menus and widgets, and so on.
Many plugins make use of shortcodes. You can create your own shortcode by using the add_shortcode function. Here is a sample of the shortcode :
add_shortcode( 'myshortcode', 'myshortcode_function' ); function myshortcode_function( $atts ) { $atts = shortcode_atts( array( 'text' => 'My Shortcode is Awesome!', ), $atts, 'myshortcode' ); return $atts['text']; }
To integrate your shortcode into your page you can simply add this code :
[ myshortcode ]
Note: Remove the spaces between the brackets
Widgets
Another way to enable plugin functionality through a simple interface is by using WordPress widgets. You can create a widget by extending the WP_Widget class.
WordPress uses an object-oriented design approach to widgets, meaning that the functions and values are stored in the single entity of a class.
WordPress Plugin Development: Step by Step
- Create Plugin File and Folder
The default path to the plugin directory is in wp-content/plugins ; it may range depending on the types of WordPress installation you are using. For a custom framework like Bedrock, Themosis, or some other WordPress framework you might want to consider checking their documentation.Then you can create the folder and file for your plugin- Folder : wp-content/{plugin-name}
- File : wp-content/plugin-name/{plugin-name}.php
- Give a plugin description
Once it is finished, you can open {plugin-name.php} with your favorite editor e.g (Sublime Text, VSCode, PHPStorm, etc) then give your plugin a description :/** * Plugin Name: Your Plugin Name * Plugin URI: http://yourdomain.com * Description: Your Plugin Description * Version: 1.0.0 * Author: Your Name * Author URI: http://yourdomain.com * License: GPL2 */
- Activate Plugin
Activate your plugin through the backend admin panel, it stays in yourdomain.com/wp-admin/plugins.php
- Yaay, your very first plugin has now been activated!
Further reading
Though you have published your very own first plugin, it doesn’t add any features or modified anything to your website. The next step should be to develop features for your plugin.