Recently I needed to create a Facebook likebox WordPress widget for my friend, which of course can be easily created using a WordPress text widget, but since my friend is new to WordPress and has no clue about coding, and to make matters worse, she wanted to display it only on certain pages like single and category pages! So, I decided to quickly create a custom WordPress Widget, which should be flexible enough for her needs.
If you are familiar with WordPress, then you must be familiar with its Widgets which you can drag around, and place it on sidebar or any other “widgetized” areas such as header and footer. It’s one of many powerful features of WordPress, where you can add your own “stuffs” on fly.
You can create your own separate Widget Plugin, which can be installed and activated in your admin plugin page, but as many people, I prefer to put my widget code in default theme’s functions.php file, which is located in your active theme folder i.e (/wp-content/themes/YOUR-THEME). This way our custom widget works perfectly and I don’t need to install additional plugin.
Writing Basic Widget Code
Open your theme’s function.php (Create if you don’t find one), and copy/paste this PHP code anywhere within function.php and save the file. Now go back to your admin widget page, you should see “Facebook Likebox” widget in Available widget section. Just drag it to sidebar to see it in action.
As you can see it works like a charm, it displays Facebook Like Box as it should, but it’s rather static. It doesn’t have any user option in admin page nor it accepts any variable customization from a user, if we need to change anything, we need to change the hardcoded lines in function.php. So, to add more functionality to our Facebook Like Box widget, we need to understand how our code exactly works. If you review code above carefully you’ll notice I’ve followed simple steps to achieve the widget functionality.
- Extend WP_Widget class as shown in code above.
- function __construct() : Define widget name, desc in your Widget Class.
- function widget() : HTML content output for your widget.
- function form() : HTML options form for user in admin section.
- function update() : This function saves options provided by user in option form.
Writing Customizable Widget
You can play with code above in your functions.php file, and when you think you are more comfortable, we can extend our Widget code further.
Since our Facebook like widget will have many options, such as Facebook Page URL field, width, height fields and most importantly option to choose pages where user will be displaying the widget. I’ve made several changes in widget code adding HTML fields in function form(). I have also made changes in function update() and function widget() accordingly. You can see the changes in our complete Facebook Likebox widget code below:
Open your functions.php page in WordPress theme folder, copy/paste/save this code to see it in action, that’s it! You should find a new widget called “Facebook Like Box” under the widget section. It should present to you with many options for your Facebook Like Box, good luck!