Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
  1. Code
  2. Plugins

Creating a WordPress Network Widget

Read Time:6 minsLanguages:

In this tutorial, we are going to create a widget that will display sites from a WordPress Network of sites. This short tutorial will show you how simple it is, to create a widget and use it to navigate to different network sites.

Step 1 Adding the Base for the Widget

Assuming that you have already set up a Network of sites, we will begin by creating a file mynetwork.php. Add the following code for the base to extend the WordPress Widget Class.

"The function add_action( 'widgets_init','') is used to register our widget"

Step 2 Writing the Construct Function

Now that we have the base of our widget, let's start adding actual functionalities to it. We'll start by adding a new object attribute called blogs. This attribute will be used as an array to hold the list of registered blogs on your site.

Now we will add some small snippets to our __construct function. First we will assign an array of blogs to the object attribute by using the WordPress function get_blog_list. Any time we plan to reference the array, we simply use $this->blogs.

Lastly, we'll call the parent constructor function and add some information about our widget. The function takes a Base ID(string), Name(string), Options(array) and Control Options(array). This information will will be displayed in the widget panel.

Step 3 Writing the Form Function

In this step we will create the widget form found in the administrator. Our form will have an Image Url field for each blog on the site. The URL field will hold a thumbnail of the site being referenced.

Looping Through Blogs

The first thing we do is create a foreach loop that will loop through each site's blogs created on your site. The loop does not include the blog name, so for this purpose we use the get_blog_details function. The function takes the blog id and can return Blog Name, ID, Post Count, Path and more. We will add the blog name above each URL field. If you you look closely, you will see that our get_field_id function uses the blog_id, this will make our name tag look like this image-1 which will be important for us in our other functions.

Step 4 Writing the Update Function

The Update Function will save the values entered in our widget form. First we make the variable $instance an array, then we make another loop of each blog. During the loop we will update the old $instance with $new_instance then we return the variable.

Step 5 Writing the Widget Function

Finally, we have our widget function which will render HTML in our widget position. Within this function we add a foreach loop of our registered blogs and during each loop, we will define the image, link and name of the blog. We add an if statement to check to see if an Image Url was added in the widget panel, if no images were selected then the respectful blog will not be shown. This is one way that admin can choose to hide a blog from their widget list. Next we add some HTML, with an image of each blog wrapped in its blog path and at the bottom we call the blog's name. We finish the function by closing all open tags.

Finished Code


The styling of the blog was not covered in this tutorial but one can style the divs into a horizontal display or add some jQuery effects to make them scroll, fade or jump. I hope you find this tutorial useful and you adapt some of the snippets into your own widget. A great idea would be a carousel of registered site blogs. Please leave your feedback below. Happy coding!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.