How To Create Simple WordPress Social Icons Plugin

• August 18, 2015
• Leave a comment

You can the extend the functionality of your WordPress website by installing Plugins. Plugins can be treated as package of code that can modify, customize and extend functionality of your website without modifying the core of WordPress. The best feature of any plugin is that you can use it on any of your WordPress website. If you need some modification, customization and functionality in your other WordPress website then your life is safe by creating a plugin. This article will provide you a step by step guide for creating any type of WordPress Plugin.

Few Considerations Before Starting The Plugin Development

Purpose:

The question is Why you are creating a plugin? In our case, we are creating a WordPress plugin that will create social icons widget and It could be used any where in the website. In any genre, website owners must include links of their company’s social media on website, so our plugin could be used in almost any website.

Plugin Name:

If you are going to create a plugin that does not exist then choose a unique plugin name. It’s a good practice to search the plugin name you choose before you start developing WordPress plugin directory to avoid plugin name conflict.

In our case, plugin name is “PressTigers Simple Social Icons Widget” because “Simple Social Icons Widget” plugin name already exists in WordPress plugin directory so we added the Prefix “PressTigers” to avoid plugin name conflict.

Plugin Directory & Files:

All WordPress plugins of your website will be uploaded in the plugins directory of your WordPress installation. It is a good practice that you name your plugin folder same as your plugin name to avoid plugin folder conflict. Use small caps and replace spaces with “–”. In our case, plugin folder name will be “presstigers-social-icons-widget”.

There may be many files in your plugin, but one file is necessary for your plugin and that will be your plugin main file. Again it’s a good practice to name your plugin main file same as your folder name, so in our case, our plugin file name will be “presstigers-social-icons-widget.php”.

Readme File:

Now, include the instruction file in your plugin folder that would be helpful for developers. Add a quick description and overall functionality of your plugin in this “Readme” file.

Steps Of Plugin Development:

Step 1: Plugin Information

The starting lines of your file will be the plugin information in commented and predefined format for the information parser. This information is called plugin header. This is extremely important because without this, WordPress will not be able to recognize your plugin during installation.

There are more options for plugin header but minimum requirement is:

Note: Replace the information with yours where needed.

You need to create a file in your plugin directory named as “uninstall.php”. This file will be called when we uninstall the plugin. The “unistall.php” file could be called directly so it always check the WordPress uninstall constant i.e. WP_UNINSTALL_PLUGIN to verify that the file is called by WordPress. Add the lines below in your uninstall.php file:

Now your plugin is ready to install. Compress the plugin folder in zip format and upload via your WordPress admin panel. You can see in the below screenshot version 1.0 of the plugin is installed and activated.

At this stage, we didn’t add any functionality in our plugin. Let’s add some code in the plugin so that we can get the required output.

Step 2: Adding Functionality:

Before starting the code, you must know WordPress coding standards and plugins hooks. Always use comments, follow the naming convention in your coding. When plugin is activated or deactivated, it performs some actions. It is a good practice to use Activation/Deactivation hooks because sometimes we may want to create/delete database tables:

Best Practices:

In this article, we are not going to highlight all the best practices but a few ones that we will follow in our plugin development:

• Always use unique prefix with your plugin files, variables, functions and classes
• Run the code where needed e.g. if you want to add the functionality at admin end then use the check written below:
  
  <?php if( is_admin() ){ //your code goes here } ?>

  1 2 3 4 5

  <?php if( is_admin() ){ //your code goes here } ?>

• Create sub directories for CSS, JavaScript and Images

Now the plugin is installed and activated but there is no widget created yet. Lets add code to our plugin now. The basic widget class that is extended from WordPress widget class will create, display and update the plugin widget. The class has four main functions:

1. Constructor: It contains widget name, description and its unique identifier
2. Form: It is responsible for output of widget at WordPress admin panel. In our case, it will contain the URL input fields for social icons.
3. Widget: It is responsible for the output at front-end i.e. For end user. In our case, it will output the social icons
4. Update: It is responsible for updating the Social Icons URLs
   
   <?php class presstigers_simple_social_icons_widget extends WP_Widget { public function __construct() { // widget actual processes } public function widget( $args, $instance ) { // outputs the content of the widget } public function form( $instance ) { // outputs the options form on admin } public function update( $new_instance, $old_instance ) { // processes widget options to be saved } } function register_presstigers_simple_social_icons_widget() { register_widget( 'presstigers_simple_social_icons_widget' ); } add_action( 'widgets_init', 'register_presstigers_simple_social_icons_widget' ); ?>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   <?php class presstigers_simple_social_icons_widget extends WP_Widget {         public function __construct() {           // widget actual processes       }         public function widget( $args, $instance ) {           // outputs the content of the widget       }         public function form( $instance ) {           // outputs the options form on admin       }         public function update( $new_instance, $old_instance ) {           // processes widget options to be saved       } }   function register_presstigers_simple_social_icons_widget() {     register_widget( 'presstigers_simple_social_icons_widget' ); }   add_action( 'widgets_init', 'register_presstigers_simple_social_icons_widget' );   ?>

We have to register the widget through action hook “widgets_init”. Without registration, our widget will not appear in WordPress Widget Dashboard. Now add the code in every function one by one:

Updating Constructor Function:

Add widget unique ID ( you can use your own ), widget name and widget description, now update the code with the code below:

Update Form Function:

We will add three input fields for three social icons i.e. Facebook, Twitter and Google+. You can add more if you want to, its totally up to your choice. The form function has one argument i.e. $instance is an array that will contain social icons URLs information, so first check for the saved value and then create a label and input field:

Get the saved value of Facebook link and it will return back some value or empty at start. Now create input field for Facebook using get_field_name and field_id:

Repeat this process for other social icons. Our final code will look like this:

Update The ‘Update Function’:

Now we need to store the social icons values in our WordPress. For this, we need to get the values and save it. The update function has two arguments; $new_instance and $old_instance. The new updated value will be in $new_instance and $old_instance will contain previously saved values. Our final code for the update function will look like this:

Now go to your WordPress widget area. You will see a widget added in the widget list of your WordPress.

You need to drag and drop the widget to your primary sidebar or any other sidebar you want and then we will update the URLs value for our social icons.

At this stage, you are able to add a widget and save your values in WordPress but still the output of this widget is empty. Now its time to update the widget function. In widget function, we just get the values and display those values with HTML. You can design as you like, for now we will make it simple. The updated code will look like this:

The widget function will generate the social icons links and then you add your CSS to style those icons. You can also add more functionality to the widget like social icons photo, title etc.

Conclusion:

These are some basic practices to start WordPress Plugin Development. The plugin system is great. If you still have any issue in developing a plugin, then you can review WordPress documentation and search for your problem there. Our PressTigers are also there to help you out in every issue/error that may occur. Let us know your queries as well.