Creating your own widgets for WordPress

Welcome, and today is going to be a great day for you, I’m going to show you how you can create your very own widgets for WordPress. On the site, widgets can take on an infinite range of possibilities to customize and help make your project even more modular. The most traditional location where the widgets appear is in the sidebar of the site. However, widgets are not limited to this: we can place widgets on absolutely any part of the site. We can put a listing of categories, a YouTube video, a calendar of posts and many other possibilities in these places.

Creating your own Widget doesn’t have to be difficult

According to the official documentation on WordPress Widgets, you should create Widgets using a class template defined by them, which is what I will teach in today’s article. In this example, we will create an “About the Author” widget, which can be inserted in the general sidebar of the blog (or in a specific sidebar for posts).
This widget will check if we are in a post (which WordPress calls a single) and if we are, will display the name, avatar, and description of the author of the post, all this data will be coming directly from your WordPress database.

Let’s get started with step one

First of all, you will need to separate your widget into three methods within a class:

  1. A method for generating and displaying the HTML that will appear on the side of your blog or site.
  2. A method that will be used to generate and display the HTML of the form that will appear in the control panel of the blog or site.
  3. A method that will be used to save the data coming from this form.

Knowing this, let’s start our class:

<?php
/**
* Example of widget
*/
class AboutAuthorWidget extends WP_Widget {
}
?>

Remembering that your class must extend the WP_Widget class, from WordPress itself. Now let’s insert four empty methods to leave the class structure ready:
public function AboutAuthorWidget() {
parent::WP_Widget(false, $name = ‘About the author’);
}
public function widget($arguments, $instance) {
}
public function update($new_instance, $instance_old) {
}
public function form($instance) {
}

Form () method
Now let’s start with the form() method, which displays the form. This widget would not need form and options since it does not have any kind of configuration, but we’ll leave an optional thing like displaying the author’s website link.

Our form () method will look like this:

public function form($instance) {
$widget[‘link_author’] = (boolean)$instance[‘link_author’];
?>
<p><label for=”<?php echo $this->get_field_id(‘link_author’); ?>”><input id=”<?php echo $this->get_field_id(‘link_author’); ?>” name=”<?php echo $this->get_field_name(‘link_author’); ?>” type=”checkbox” value=”1″ <?php if ($widget[‘link_author’]) echo ‘checked=”checked”‘; ?> /> <?php _e(‘Show the author link’); ?></label></p>
<?php
}

At the beginning of the method we get an information of the current instance of the widget, so if we are editing a widget, we will know the option saved in the database.

Update () method

Now we go to the update () method, which saves the data and settings of the widget (in this case, just the checkbox) in the database.

This method will need to return the data to be saved in the database, thus:

public function update($new_instance, $instance_old) {
$instance = array_merge($instance_old, $new_instance);
return $instance;
}

Widget () method

This method will be responsible for displaying the data (HTML) of the widget on the side of your blog.
public function widget($arguments, $instance) {
if (!is_single()) return;
}

Including something about the author:
$author = array(
‘name’ => get_the_author_meta(‘display_name’),
’email’ => get_the_author_meta(‘user_email’),
‘description’ => get_the_author_meta(‘description’),
‘link’ => get_the_author_meta(‘user_url’)
);
Now just start displaying the Widget HTML:
echo $arguments[‘before_widget’];
Echo $arguments[‘before_title’] . $arguments[‘widget_name’] . $argumentos[‘after_title’];
echo get_avatar($author[’email’], $size = ’59’);
echo “<h4>{$author[‘name’]}</h4>”;
echo “<p>{$author[‘description’]}</p>”;
if (isset($instance[‘link_author’]) && $instance[‘link_autor’]) {
echo ‘<p>Visit the <a href=”‘. $author[‘link’] .'” title=”‘. $author[‘name’] .'” rel=”nofollow” target=”_blank”>author site</a></p>’;
}
echo $arguments[‘after_widget’];

 

Now you only need one line to enable it in your control panel:
add_action(‘widgets_init’, create_function(”, ‘return register_widget(“AboutAuthorWidget”);’));

Once you have the knowledge to creat a basic plugin you are in a great place to build your own custome widget. I will be developing this theme overthe coming weeks. If you enjoy learning how to create your own widgets for WordPress please comment below. You might alway want to check out my last post on how to create a wordpress plugin.

Similar Posts:

5 (100%) 2 votes

Add Comment

seventeen + 18 =

social media
How to use social media to explode your business
Starting Online Business Without Investments: 10 Free Responsive WordPress Themes
WordPress Security
WordPress Security 101: Powerful Tips On Keeping Your WordPress Site Secure
widgets for WordPress
Creating your own widgets for WordPress
Hostgator vs A small orange.
HostGator VS A Small Orange – Which Is the Better Web Host
A Small Orange web hosting review
InMotion Hosting Coupon Code
InMotion Hosting Coupon Code-50% Off Discount-Promo Code
InMotion Hosting Review Image
InMotion Hosting Review-Things To Know About InMotionHosting
How to create your own Wordpress plugins
How to create your own WordPress plugins
Lead Generation
5 ways to Improve Your Website’s Lead Generation
How to Use Photoshop to Create Animated GIFs.
How to Use Photoshop to Create Animated GIFs.
7 Tips to Write a Successful Blog and Get More Traffic
7 Tips to Write a Successful Blog and Get More Traffic
ANDROID APPLE WINDOWS
Must Have Android Games For 2017
Must Have Android Games For 2017
Optimize your Mobile App
How to Optimize your Mobile App to Rank Higher in Google Play Store
apple watch series 2 Techigyaan
The New Apple Watch Series 2 See Whats New
Must Have Android Games For 2017
Must Have Android Games For 2017
recipe-box-wordpress-recipe-plugin-featured
The Very Best WordPress Recipe Plugins
apple watch series 2 Techigyaan
The New Apple Watch Series 2 See Whats New
How-to-Save-SnapChat-Photos-and-Videos-on-Android-Device
How to Save SnapChat Photos and Videos on Android Devices
Starting Online Business Without Investments: 10 Free Responsive WordPress Themes
WordPress Security
WordPress Security 101: Powerful Tips On Keeping Your WordPress Site Secure
developing WordPress sites
WordPress Development Good practices for developing WordPress sites
recipe-box-wordpress-recipe-plugin-featured
The Very Best WordPress Recipe Plugins