[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]
by Arooj Ahmed via Digital Information World
"Mr Branding" is a blog based on RSS for everything related to website branding and website design, it collects its posts from many sites in order to facilitate the updating to the latest technology.
To suggest any source, please contact me: Taha.baba@consultant.com
Every WordPress site needs a theme to pull content from the database and display that in a design. And theoretically you could run a site with just a theme and nothing else. But that site would be very limited without the addition of plugins.
Plugins add extra functionality to your WordPress site over and above what comes with WordPress core. Everything from a booking calendar or animated slider, to a full-featured learning management system or online marketplace—you can add them all to your site with plugins.
In this guide, I’ll show you how to create your own WordPress plugin. I’ll show you how to use best practice in plugin development, how to get the code in your plugin to run, and how to structure your plugin’s code and files. I’ll also walk you through the process of creating your first plugin and answer some FAQs.
If you want to add some specific features to your website, there are plenty of places you can buy or download plugins. The WordPress plugin directory includes thousands of free plugins that’ll help you create the site you need. But if you’re looking for more advanced features, a better user interface or improved support, it’s worth buying premium plugins from authors on CodeCanyon.
But sometimes you might need to code your own plugin! This can be more efficient than using a third party plugin, as you might only need a part of the code provided by those. It also means you can develop a plugin that meets your needs more precisely, or you can customize an existing plugin to adapt it for your site.
To build your own plugin and run it on your WordPress site, you’ll need:
Don't test your plugin on your live site until you know it works!
If you don’t already have a local WordPress installation, follow our guide to copying your site to a local install. Or if you can’t install WordPress locally, use a duplicate of your site on a testing installation on your server. Find out how to copy your site.
Plugins can carry out lots of tasks. What they all have in common is that they add extra functionality to your site. Types of WordPress plugin include:
…and lots more! For an idea of what plugins can do, check out the WordPress plugin directory and the CodeCanyon marketplace.
Before you get started building your plugin, it’s worth knowing what goes into a plugin. Exactly what the plugin code will look like will depend on your plugin: some are small, with just one plugin file, while others are massive, with multiple include files, scripts, stylesheets and template files. And there are plenty that fall somewhere in the middle.
The elements you’ll probably have in your plugin are:
Let’s have a look at each of these.
The main plugin file is essential. It will always be a PHP file and it will always contain commented-out text that tells WordPress about your plugin.
Here’s an example, from the Akismet plugin:
<?php /** * @package Akismet */ /* Plugin Name: Akismet Anti-Spam Plugin URI: https://akismet.com/ Description: Used by millions, Akismet is quite possibly the best way in the world to <strong>protect your blog from spam</strong>. It keeps your site protected even while you sleep. To get started: activate the Akismet plugin and then go to your Akismet Settings page to set up your API key. Version: 4.1.6 Author: Automattic Author URI: https://automattic.com/wordpress-plugins/ License: GPLv2 or later Text Domain: akismet */
This tells WordPress what your plugin does, where to find out more about it and who developed it. It also gives information about the version number and the text domain and path for internationalisation, as well as the license.
WordPress takes this information and uses it to populate the plugins screen in your site. Here’s how Akismet looks on that screen:
You can see that the information provided in the plugin file is used to populate this entry and provide links.
Other information about the plugin is contained in the README.txt file, which is used to populate the plugin's page in the plugin directory:
The main plugin file will also contain the code that makes the plugin run. Sometimes that will be all the PHP for the plugin, but for larger plugins, there’ll be calls to include files containing extra code. This helps you organize your code and means you don’t have one long disorganized file that’s difficult to work with. I’ll show you how to use include files later in this guide.
While there are no hard and fast rules on how you organize the folders in your plugin, it makes sense to adopt the same structure that other plugin developers use. This will familiarize you with the way other plugins are built and mean that if you share your code in future, it will make sense to other people.
Folders in your plugin might include:
You might find you need to use more folders if your plugin is large or complex. For example WooCommerce has folders for packages, sample data and more. These in turn include subfolders for things like blocks and admin files.
If your plugin outputs content that needs styling, either in the front-end or in the admin screens, you may need stylesheets.
And if your plugin will use scripts, you’ll need files for these.
It makes sense to keep these in their own folder, even if you only have one of each. You’ll need to enqueue these scripts and stylesheets using a dedicated function in your main plugin file. I’ll show you how to do this when we’re building the plugin.
If your plugin needs organisation, you can do this by splitting your code into multiple files, called include files.
You then put these files into their own folder and call them in your main plugin file using an include
or require
function.
This way, you can keep the bulk of your code in web organized file structure while your main plugin file remains lean and minimal.
If your plugin isn’t all that big, you don’t need to use include files: just add your code to the main plugin file. But you might find you need to organize this file and reorder functions within it as you add them, to maintain a logical structure.
This are the most common elements of a plugin. We’ve seen in the WooCommerce example that there can be many more. Or in smaller plugins there can be many fewer. But as you develop more plugins, you’ll find yourself using these elements more and more.
When you add code to your plugin, it won’t do anything until you activate it in some way. There are a few methods you can use to activate your code or pull in code from WordPress:
Let’s take a look each of these.
Functions are the building blocks of WordPress code. They’re the easiest way to get started writing your own plugins and the quickest to code. You’ll find plenty of them in your themes' files too.
Each function will have its own name, followed by braces and the code inside those braces.
The code inside your plugin won’t run unless you call the function somehow. The simplest (but least flexible) way to do that is by directly calling the code in your theme or somewhere else in your plugin.
Here’s an example function:
tutsplus_myfunction { // code goes here }
To directly call that function in your theme, you’d simply type tutsplus_myfunction()
in the place in your theme template files where you want it to run. Or you might add it somewhere in your plugin... but you’d also need to activate the code that calls it!
There are a few limitations of this:
It’s much better practice to call functions by attaching them to a hook.
By attaching your function to a hook, you run its code whenever that hook is fired. There are two types of hook: action hooks and filter hooks.
Action hooks are empty. When WordPress comes to them, it does nothing unless a function has been hooked to that hook.
Filter hooks contain code that will run unless there is a function hooked to that hook. If there is a function, it’ll run the code in that function instead. This means you can add default code to your plugin but override it in another plugin, or you can write a function that overrides default code that’s attached to a filter hook in WordPress itself.
Hooks are fired in three ways:
wp_head
and wp_footer
hook. Combine these with conditional tags and you can run specific code on certain types of pages in your site.Some of this is more advanced, but with your first plugin, you’ll probably be hooking your functions to an action or filter hook output by WordPress itself, most likely an action hook.
Classes are a way of coding more complex features such as widgets and customizer elements, that make use of the existing WordPress APIs.
When you write a class in your plugin, you’ll probably be extending an existing class that’s coded into WordPress. This way, you can make use of the code provided by the class and tweak it to make it your own. An example would be the customizer, where you might write a class including a color picker, making use of the color picker UI that’s provided in the existing class for the customizer.
Using classes is more advanced than functions and it’s unlikely you’ll do it in your first plugin. To find out more, see our guide to classes in WordPress.
If you do write classes, you’ll still have to use actions or filters to get them to run.
Before you start coding your plugin, it helps to understand best practices for plugins so your code can be high quality right from the start.
These include:
You might think that using best practice isn’t necessary because it’s just you working with the plugin. But your plugin might grow over time, you might let other people use it, or you might sell it. Or you might come back to it in two years and not be able to remember how the code is organized!
At last! You have a grounding in how plugins work and it’s time to roll your sleeves up and create your first plugin. I’m going to take you through the process of creating a simple plugin that registers a custom post type.
This is a very common use of a plugin, and something you might then build on over time to add custom template files for your custom post type or other functionality.
I’ll show you the basic code for the plugin and give you an introduction to how you might add to it over time.
Even if your plugin is starting out small with just one file, it’s good practice to give it its own folder. Start by creating a folder in your wp-content/plugins directory. Inside that, create a PHP file for your plugin.
Give them both a name that makes sense and includes a prefix. I’m calling my folder tutsplus-register-post-types and my file tutsplus-register-post-types.php.
Now open your plugin file and add the commented out information at the top. You can take mine below and edit it to reflect the fact that this is your plugin, not mine.
<?php /* Plugin Name: Tuts+ Register Post Types Plugin URI: https://tutsplus.com/ Description: Plugin to accompany tutsplus guide to creating plugins, registers a post type. Version: 1.0 Author: Rachel McCollin Author URI: https://rachelmccollin.com/ License: GPLv2 or later Text Domain: tutsplus */
Now if you save your file and go to the Plugins screen in your development site, you’ll see the plugin on the screen:
You can activate it if you want but it won’t do anything yet, because you haven’t added any code to it. Let’s do that.
Now it’s time to write the first function in our plugin. Start by making your plugin and adding the braces which will contain the code. Here’s mine:
function tutsplus_register_post_type() { // movies $labels = array( 'name' => __( 'Movies' , 'tutsplus' ), 'singular_name' => __( 'Movie' , 'tutsplus' ), 'add_new' => __( 'New Movie' , 'tutsplus' ), 'add_new_item' => __( 'Add New Movie' , 'tutsplus' ), 'edit_item' => __( 'Edit Movie' , 'tutsplus' ), 'new_item' => __( 'New Movie' , 'tutsplus' ), 'view_item' => __( 'View Movie' , 'tutsplus' ), 'search_items' => __( 'Search Movies' , 'tutsplus' ), 'not_found' => __( 'No Movies Found' , 'tutsplus' ), 'not_found_in_trash' => __( 'No Movies found in Trash' , 'tutsplus' ), ); $args = array( 'labels' => $labels, 'has_archive' => true, 'public' => true, 'hierarchical' => false, 'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail', 'page-attributes' ), 'rewrite' => array( 'slug' => 'movies' ), 'show_in_rest' => true ); register_post_type( 'tutsplus_movie', $args ); }
This includes all the labels and arguments for your post type and (crucially) the register_post_type()
function which is provided by WordPress.
I’ve used movies as my post type here as I’m creating an imaginary movie review site. You might want to use something different.
Now if you save your file and go back to your site, you’ll see that nothing has changed. That’s because you haven’t activated your code. The method we use to activate the function here is by hooking it to an action hook provided by WordPress, the init
hook. When you use a function provided by WordPress (such as register_post_type
) you’ll find that there’s a hook that you should use. You can find details in the WordPress handbook entry for registering custom post types.
So let’s add the hook. Under your code, and outside the braces, add this line:
add_action( 'init', 'tutsplus_register_post_type' );
We use the add_action()
function to hook our code to an action hook, with two parameters: the name of the action hook and the name of our function.
Now try saving your files and going back to your site. You’ll see that the custom post type has been added to your admin menu.
Nice!
Now let’s add an extra function, to register a custom taxonomy. Below the code you’ve written so far, add this:
function tutsplus_register_taxonomy() { // books $labels = array( 'name' => __( 'Genres' , 'tutsplus' ), 'singular_name' => __( 'Genre', 'tutsplus' ), 'search_items' => __( 'Search Genres' , 'tutsplus' ), 'all_items' => __( 'All Genres' , 'tutsplus' ), 'edit_item' => __( 'Edit Genre' , 'tutsplus' ), 'update_item' => __( 'Update Genres' , 'tutsplus' ), 'add_new_item' => __( 'Add New Genre' , 'tutsplus' ), 'new_item_name' => __( 'New Genre Name' , 'tutsplus' ), 'menu_name' => __( 'Genres' , 'tutsplus' ), ); $args = array( 'labels' => $labels, 'hierarchical' => true, 'sort' => true, 'args' => array( 'orderby' => 'term_order' ), 'rewrite' => array( 'slug' => 'genres' ), 'show_admin_column' => true, 'show_in_rest' => true ); register_taxonomy( 'tutsplus_genre', array( 'tutsplus_movie' ), $args); } add_action( 'init', 'tutsplus_register_taxonomy' );
Again, you might want to change the name of your custom taxonomy. Here I’ve made the taxonomy apply to the post type I’ve just registered (the third parameter of the register_taxonomy
function). If you gave your post type a different name, make sure to edit that bit.
Now save your file and take a look at your admin screens. When you hover over your post type in the admin menu, you’ll see the new taxonomy.
You now have a working plugin. Well done!
Let’s take a look at how you might add to it.
If you need to use custom styling or scripts in your plugin, you could add them right into your plugin file—but that’s not best practice. Instead, you should create stylesheets and scripts as separate files in your plugin folder and enqueue those, using a function provided by WordPress.
Let’s imagine you want to add styling for your custom post type. You could add this to your theme, but you might want to add some specific styling to the plugin to make the post type stand out from other post types in any theme.
To do this, you create a new folder inside your plugin folder called css (or styles, it’s up to you). Inside that folder, create a stylesheet called style.css, or you can give it a more specific name for clarity. I’m going to cal mine movies.css.
You then need to enqueue that file in your plugin so that it can be used by WordPress. Add this to your main plugin file, above the functions you already have. I like to add enqueuing and includes first in my plugin file so I can see what other files are being activated.
function tutsplus_movie_styles() { wp_enqueue_style( 'movies', plugin_dir_url( __FILE__ ) . ‘/css/movies.css’ ); } add_action( 'wp_enqueue_scripts', ‘tutsplus_movie_styles' );
If you save your file, you won’t see any difference in your admin screens—but if you’ve added posts of the custom post type and your stylesheet includes styling for them, you’ll now see that in the front-end of your site.
Note that the hook used for enqueuing both stylesheets and scripts is the same: they both use wp_enqueue_scripts
. There isn’t a separate hook for styles.
Enqueuing scripts works in a very similar way. Follow these steps:
wp_enqueue_style()
function with wp_enqueue_script()
.Another option as you develop your plugin is to create extra PHP files, known as include files. If you have a lot of these, you might create multiple folders for different types of include file, or you might just create one folder called includes.
There are a few functions you can use to include files, which you’ll find in our comprehensive guide to including and requiring files.
For example in our custom post type plugin, we might create some code to vary the way the content of the page is output, using the the_content
filter hook to amend the code being run each time the content is output on a product page.
Instead of adding this code to the main plugin file, you could add it to a separate file called movie-content.php and then write the code in that file for the way the content is output for movies.
To include this file in your plugin, you add a folder called includes to your plugin, then in that you add the content-movie.php file.
To include that file in your plugin, you add this code at the beginning for the main plugin file:
include( plugin_dir_path( __FILE__ ) . ‘includes/movie-content.php' );
You don’t need to hook this to an action or filter hook—just use the include_once()
function in your plugin file. That will then call the code from the include file as if it was in your main plugin file at that point.
In this guide I’ve shown you how plugins are coded and also shown you how to get started building a simple plugin.
Once you’ve got the hang of plugin development, you can build more complex and full-featured plugins to carry out more complex tasks on your site.
Let’s take a look at some examples.
Widget plugins involve working with classes but are a good introduction to the topic. Our guide to creating a widget plugin will help you do it.
You can also find plenty of widget plugins on Code Canyon, which will save you coding them yourself. In our blog we’ve identified the best widget plugins for 2020, the best Facebook widgets and the best Twitter widgets.
Creating a shortcode is a great place to start creating plugins as they’re relatively simple and very useful. Find out how to create them with our guide to coding shortcodes in WordPress.
CodeCanyon also has a bunch of useful shortcode plugins you can use to add extra functionality to your site.
Social media plugins are incredibly popular as they let you display your Facebook, Twitter or Instagram feed on your site and let your visitors share you content via their own social media accounts.
Code Canyon has dozens of social media plugins. Learn about the best social media plugins and how to create an online community for your WordPress site.
If you want to optimize the media on your site and display galleries or video feeds, a plugin will make everything look more professional. Find out how to find the best gallery plugins for images or video and how to code your own gallery plugin. Or browse the professional gallery and video plugins on Code Canyon.
Adding forms to your site lets your visitors get in touch and helps build a relationship. Code Canyon has plenty of premium form plugins that will make it easy for your visitors to contact you. Learn how to create a form with the bestselling QuForm plugin.
Here are the answers to some of the most frequently asked questions about WordPress plugins.
It’s tempting to simply keep on adding code to the functions.php file, and there is some code that should be there.
But if your code is related to functionality in your site, rather than the design or the output of content, then you should code it into a plugin. This means that if you switch themes in the future, you still have that functionality. And you can use the plugin on another site running a different theme.
This is probably because you haven’t hooked your code to an action or filter hook. Until you do that, nothing will happen.
You’ve probably added some code that’s got an error in it somewhere. PHP is an unforgiving language and this might be as minor as a semicolon in the wrong place.
Try turning on WP_DEBUG
in your wp-config.php file and you’ll see a message telling you where the error is. Then you can fix it.
All this normally means is that there are too many empty lines in your plugin file. Go back and check there are no empty lines at the beginning of the file.
If that doesn’t fix it, try turning on WP_DEBUG
.
We have lots of tutorials and courses helping you to build all kinds of plugins here on Envato Tuts+. See if you can find anything that inspires you.
You can choose from thousands of free plugins in the WordPress plugin directory. You can also buy third party plugins from CodeCanyon. Always buy plugins from a reputable supplier so you can be sure they follow WordPress coding standards and don’t contain malicious code.
Plugins will turn your site from a simple blog into a powerful website that includes advanced features and is secure and robust. Try adding plugins to your site today and coding your own to see how you can use plugins to improve your WordPress site.
Explore thousands of the best WordPress themes ever created on ThemeForest and leading WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes and plugins and improve your website experience for you and your visitors.
Here are a few of the best-selling and up-and-coming WordPress themes and plugins available for 2020.
Saz Dekorasyon Bambu dekorasyon ve hasır dekorasyon alanında Türkiye çapında hizmet veren bir firmayız.
BISON is one of the world’s leading manufacturers of machine tool accessories, including manual and power lathe chucks, precision machine and toolmaker’s vises, and milling fixtures.
RentALL – Airbnb clone is an online rental marketplace that helps entrepreneurs to start their rental business instantly.