Complete Guide to Custom Plugins and Modules

Clarity eCommerce - The eCommerce Platform to Scale and Grow Your Business
Complete Guide: How to Create Simple WordPress Custom Plugins And Widgets

What are Custom Plugins and Widgets?

Surely, you'll agree with us that all WordPress sites require themes that'll help to pull content from their database, displaying it in design. Although you can always run a website with a single theme, you'll definitely need plugins to make it run well. That's because plugins offer additional functionality than the ones that came with WordPress. In case you don't know, you'll be able to add anything, including an animated slider, full-featured learning management system (LMS), booking calendar, and many more to your site, with the help of plugins. Speaking of WordPress custom widgets, they are also similar to plugins in the sense that they also allow website owners to add an advanced level of functionality to their sites. In case you're wondering how to create WordPress custom plugins and widgets for your site, you might have to stop wondering about it. That's because, in this post, we'll be sharing with you the step by step guides to help you with it.

Complete Guide: How to Create Simple WordPress Custom Plugins And Widgets

However, before we go straight into that, let's get familiar with what WordPress custom plugins and widgets are below: According to WordPress, custom plugins are functions written in PHP scripting language, which help to add a specific set of features to the WordPress weblog. Interestingly, by using access points and a few methods provided by WordPress Plugin API, they can easily be integrated with the weblog. On the other hand, although we don't have a standard definition for WordPress custom widgets, you can use them to add new features and content to the website's sidebars. Furthermore, you can also see that widgets are drag-and-drop content areas, which you can add to your site when you have their plugins installed and activated. Now that we know what WordPress custom plugins and widgets are, let's take it one at a time, and look at how you can create them below.

Step by step creation of a new plugin

How to Create A WordPress Custom Plugin

You probably must be wondering why it's essential for you to create WordPress custom plugins when you can add functionality to your theme. Well, to answer that, we'll say there are lots of benefits attached. Unarguably, adding functionality to your WordPress theme isn't really a bad idea. The problem with that, however, is there are times when a WordPress custom plugin is better for you. For instance, if something goes wrong with your plugin, you can easily alter your code and get the site running back. However, that's never the case for a core WP code, as altering it can be catastrophic.

In case you're interested in creating WordPress custom plugins for your website, you'll be able to do that, following the step by step guides below:

You need FTP access to create a WordPress custom plugin for your website, you'll need FTP access to your hosting account. There's a lot of FTP software out there, including FileZilla and Coda, which you can use during this process. Furthermore, in case you're not familiar with FTP, you can get a better idea of it by checking here.

1. Create a new folder for your WordPress plugin

Since you're now familiar with FTP and able to access your hosting account, what's next is to navigate to the plugins folder of your WordPress. You should be able to locate it at /wp-content/plugins. After that, all you need is to create a new folder for your plugin. In case you don't know how to do that, you can follow the straightforward steps below:

  • Click on the new folder
  • Next, assign a unique name for the folder, using lowercase letters and separating it with
  • dashes. For instance, you can use it in this format, 'create-new-plugin-folder'.
  • Lastly, enter the new folder, and that's it.

You need to create a new PHP file for the plugin

After creating the folder for your plugin, the next thing is to create a new PHP file for it. You'll be able to do that by going to your new plugin folder and creating the file within it. Just like the previous one, you can assign it as 'create-new-plugin-folder.php'. With that, all that remains is to open the file and get ready to perform some editing work.

Configure the information of your plugin

As mentioned earlier, you're now in the stage where you have to edit the details of your plugins. You can do that by copying and pasting the file details below into your own. However, endure that you adjust the name and URL to suit that of your plugin.

    
    

/** * Plugin Name: My First Plugin * Plugin URI: http://www.mywebsite.com/my-first-plugin * Description: The very first plugin that I have ever created. * Version: 1.0 * Author: Your Name * Author URI: http://www.mywebsite.com **/

With that, you have now completed the first phase of creating your WordPress custom plugin. It's worth noting that the five steps above are only there to show you how simple it is to create plugins for your site. For now, you now have a plugin. But for you to make it perform some functions for you, you need to add actions and filters.

    

add_action("the_content", "my_thank_you_text"); function my_thank_you_text($content) { return ($content = "<p>Thank you for reading!</p>"); }

The above code illustrates how you can add actions and filters to your WordPress. So, you can copy the code and add it to your plugin file. That should be right under the plugin information. Furthermore, the essence of the action functions is that they are usually called upon when you visit any page of the site and attached to the action hooks presented by WordPress. So, as for the code above, it hooks into “the_content” action, when WP the content for your site. Also, WP will call upon the "my_thank_you_text" function as soon as the action fires.

You can also read more about how you graduate from creating a simple WordPress custom plugin here. From there, you'll get more familiar with actions, filters, and hooks. Apart from that, you'll also get more familiar with WordPress functions and many more.

Step by step process for creating a widget

How to Create A WordPress Custom Widget

To start with, you'll be able to create a WordPress custom widget that matters by checking here. As for the page, it'll introduce you to what you need to get started and working examples.

That said, there are several benefits attached to creating your WordPress custom widgets. One of them is that they provide you with quick access to show your information inside your website's theme.

Step 1: Create a Class for the Widget

Furthermore, for you to create your widget, first you'll need to extend the class of WP_Widget. You can do that using the following code: class master_Cta_Widget extends WP_Widget { }

Note, instead of the word 'master' in the code, you can make use of a name that suits you for the class.

Step 2: Create the Constructor Function

After creating a class for your widget, what's next is to create the constructor function. Carefully check below for how you can do that with a simple function, which you need to add inside the braces. This is where the widget starts to build.

//widget constructor function function __construct() { $widget_options = array( ("classname" = "master_cta_widget"), ("description" = "Add a call to action box with your own text and link.") ); parent::__construct("master_cta_widget", "Call to Action", $widget_options); }

Step 3: Develop a form for the output of the widget

By adding the function below into the braces, it means you've successfully created a form to output your widget. Furthermore, the form is what users utilize to add a link and text to the call to action box.

    

//function to output the widget form function form( $instance ) { $title = ! empty( $instance['title'] ) ? $instance['title'] : ''; $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here'; $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here'; ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label> <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /> </p> <p> <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label> <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /> </p> <p> <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label> <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /> </p> <?php }

Step 3: Save all inputs from the form

To be able to save all input from the form into the widget settings, all you need is to add the function below:

    

//function to define the data saved by the widget function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = strip_tags( $new_instance['title'] ); $instance['text'] = strip_tags( $new_instance['text'] ); $instance['link'] = strip_tags( $new_instance['link'] ); return $instance; }

Step 4: Create a function to help you display the widget on the site

To be able to display the WordPress custom widget in your site, copy and paste the following function into your file:

    

//function to display the widget in the site function widget( $args, $instance ) { //define variables $title = apply_filters( 'widget_title', $instance['title'] ); $text = $instance['text']; $link = $instance['link']; //output code echo $args['before_widget']; ?> <div class="cta"> <?php if ( ! empty( $title ) ) { echo $args['before_title'] . $title . $args['after_title']; }; echo '<a href="' . $link . '">' . $text . '</a>'; ?> </div> <?php echo $args['after_widget']; }

Final Step: Register your widget

So far, you've been able to write a class for your widget. What's now next is to register the class, following the function below:

    

//function to register the widget function master_register_cta_widget() { register_widget( 'master_Cta_Widget' ); } add_action( 'widgets_init', 'master_register_cta_widget' );

Save the file, and that's all about creating a WordPress custom widget. However, to get the best out of your widget, there's a need for you to style with CSS. You can do that by using the code below:

function master_widget_enqueue_styles() { wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) ); wp_enqueue_style( 'widget_cta_css' ); } add_action( 'wp_enqueue_scripts', 'master_widget_enqueue_styles' );

How can we help

Are You Looking for a WordPress Expert?

Clarity Ventures deals with all facets of WordPress. If you don't want to take the stress of technicalities then you should simply hand over your project to us, and we'll handle all your worries and provide you the best digital solution.

Related Posts