How To Modify A WordPress Theme Widget

(Updated on 05/31/2017)

 

Modifying to your WordPress theme is important to get your website just the way you want it to be. To do this, it’s ever so important to create a child theme to preserve your adjustments, but this safeguard only goes so far…

As widgets are not covered, I’m here show how to safely modify them!

What This Sample Is About

The piece of code I’ll be sharing today is for anyone that wants to modify an existing widget, typically those that come along WordPress many themes. It can also be used as the basis for a completely new widget, but the intention here is to preserve those much needed customizations.

Also, if you ever want to change a widget (or any code on your website), you’ll first need access to its file. You can use FTPS, SFTP or other protocols to browse you site’s files in an file manager program. If you don’t already know how to do this, please contact your hosting company for more details.

General Overview

Today’s sample is really a template you can copy and use in your site.

There are some ways do this, but I find the simplest one to be the installation of a plugin that will take care all your tweaks: Code Snippets. Another way is to add all code to your child theme’s  functions.php  file.

Regardless of your approach, to modify a WordPress theme widget is just to copy its content and create a new one outside your theme’s folder. If an update is available, no changes will be lost!

Widgets location are theme dependent, but in most cases there will be a folder named widgets you can look inside for the one you want. If that is not the case, there are a couple of ways to find the widget’s code you’ll need:

  1. You can check the theme’s functions.php file to see if the developer included it directly there;
  2. Or you can search for add_action( 'widgets_init' and see which files have content that match.

Once you have the code you’ll need, don’t modify it directly. This would be overwritten as soon as an update is available, losing the customization whole point.

How to Use This Template

Now that you know the code you want to adapt, it’s time to create a new widget with it.

First, you’ll use the template code in the end of this post to create one, copying the original code to it. Next, after you enable the snippet (in case you are using Code Snippets plugin), proceed to modify it.

WordPress widgets are defined via a PHP class that inherits its core functionality from WP_Widget. Each new widget need to to redefine WP_Widget::widget() and, if options are to be available for its configuration, WP_Widget::update() and WP_Widget::form() are also needed.

The code template below cover how to redefine these three methods in your custom widget. Besides that, you need to create the widget constructor, but this is the easiest part: you’ll just give your widget a name and a description.

__construct()

This is the only method you’ll create, completely disregarding the original widget.

The marked lines highlight where you give the widget’s title and where to write its description. Both will show in the back-end of your WordPress website.

You can get more informations here.

widget()

This method is the widget per se and are the only one of the three that is mandatory.

You can get more informations here.

form()

In case the widget have options, this method is the form it will show you.

You can get more informations here.

update()

In case the widget have options, this method updates the widget options entered in the form.

You can get more informations here.

Code Template

Using the template requires you to replace every occurrence of custom_name for a name you deem appropriate. Every highlighted line needs to be changed to comply with the new name you choose.

Each method you’ll need to redefine is currently empty. Copy the code from the source widget’s file, delete those you don’t need and include others if present. When done, your custom widget will be ready to be modified at your will.

Testing The Custom Widget

Now that you have a working copy of the original widget, you can start changing the code to suit your needs.

Be aware that if you insert a broken piece of code your site could crash. Don’t panic, you just need to remove it:

  1. If you are using Code Snippets, insert ?snippets-safe-mode=true to the URL so you can disable snippets in a per page context. To deactivate the problematic widget and reevaluate its code, you can go to your-domain/wp-admin/admin.php?page=snippets&snippets-safe-mode=true;
  2. If you are using the functions.php file, undo or comment out the problematic modification.

Final Words

Don’t forget to leave any questions in the comments, in case you need some help, and good luck!

Leave a Reply