The Complete Guide to WordPress Widgets (The What, The How, and Code Snippets)

WordPress widgets are incredibly useful. They let you add all kinds of extra content to your website outside the body of the post or page itself, encouraging users to get information, follow links, or take action.

In this post, I’m going to show you everything you need to know about WordPress widgets. How to add them to your site, how to create widget areas to put them in, how to install plugins that give you more of them, how to code your own widgets, and lots more.

First, let’s start by identifying what WordPress widgets are.

What are WordPress widgets?

In WordPress, widgets are snippets of content that live outside the flow of the page or post content.

Widgets contain information, navigation or media that is separate from an individual post or page. In most cases, each widget will be displayed on every page in the site, but you can also register widget areas for specific pages such as the home page.

To add a widget to your site, you need to add it to a widget area. Widget areas are created by your theme because they relate to the design and layout of your site and not to functionality.

Most WordPress themes have widget areas in the sidebar and footer, although some will have multiple widget areas in lots of places, such as below or above the content or in the header.

The screenshot below, of one of my own sites, shows widgets in the sidebar and footer.

WordPress comes with a bunch of widgets preloaded so you can use them without having to install any plugins or write any code. But you can also add lots more widgets by installing plugins or coding your own.

These can cover a vast range of content types, such as media, social media feeds, navigation, search, maps and lots more. There’s very little you might want on your site that you can’t find a widget for. In fact, the biggest challenge is often choosing between all the options and not going overboard.

When to Use WordPress Widgets

You should use a widget whenever you want to add extra content to one or more pages in your site (and when I say page, I include posts, archives etc.), but that isn’t part of the content of that page. They’re particularly useful for content you want to show on every page of the site, such as a list of your latest posts, a shopping cart, or a call to action button.

Think about how many users will need access to each widget and how important it is when you decide where to place it. Widgets in the sidebar will be more prominent than those in the footer, which some users may not even see.

So a latest posts widget or a call to action widget might be better off in the sidebar where people have more chance of interacting with them, while a social media feed could go in the footer.

If your theme also has special widget areas for the home page, you might want to use these for navigation around your site’s departments, lists of relevant content, or media such as a video welcoming people to the site.

11 Examples of Widgets in WordPress

The best way to understand the possibilities offered by WordPress widgets is by looking at some examples of them. Let’s take a look at eleven types of widget you’ll frequently see on WordPress sites.

1. Recent Posts Widget

The Recent Posts widget is possibly the most commonly used widget in blogs.

It lets you display a list of your most recent posts in the sidebar or footer of every page on your site, increasing the possibility that people will browse the site and read a number of posts.

The Recent Posts widget comes pre-installed with WordPress. It lets you set how many posts you want to show and what heading you want to give the widget.

If you want to add extra functionality, you can install a plugin for an alternative widget like WordPress Popular Posts, which displays the most popular content. Alternatively, the Advanced Random Posts widget refreshes every time the user visits a new screen.

2. Recent Comments Widget

Want to show visitors how vibrant your site is and how much your audience is engaging with your content?

The Recent Comments widget displays the latest comments on your site, giving visitors the opportunity to navigate straight to those comments and join in the discussion.

The Recent Comments widget comes with WordPress. Again, if you want to add extra functionality you can install a third-party comments plugin such as the WP Social Comments widget which lets people comment using their Facebook account: good for social media engagement.

3. Call to Action Widgets

A great use of a widget is to encourage people to take action, and you can do this with a call to action widget.

Your widget could be a simple button, or you could create something more bespoke using a text widget or HTML widget, or even an image widget, all of which come pre-installed with WordPress.

On one of my own sites, I’ve created a call to action widget encouraging people to sign up to my mailing list. This uses the built-in HTML widget in which I’ve included an image, some text and a button that I’ve coded in HTML.

4. Navigation Widgets

You can also use widgets to encourage people to navigate around your site.

There are a few options for this: the Categories or Tag Cloud widgets and the Navigation Menu widget.

The Navigation Menu widget lets you create an custom navigation  menu as well as the main navigation menu in your site, and then add that to a widget area.

You could even add your main navigation menu to a widget area, although this will only work if you have a small navigation menu.

Adding a navigation menu to the footer of your site will encourage people reaching the end of a post to navigate around your site. It’s particularly helpful for mobile users who may have to do a lot of scrolling to get back up to the main navigation menu after reaching the end of a post.

Alternatively, you can use the built-in Categories widget to display a list of the categories in your site, or the Tag Cloud widget to make it easy for people to access tag archives.

5. Media Widgets

Adding media to your sidebar or footer will bring your site to life and give users something to look at or interact with.

You can use the built-in Image widget to display any image in your sidebar or footer, and it lets you turn that image into a link too.

Alternatively, the Video widget lets you stream video from YouTube or Vimeo right into the widget area of your site. This is particularly useful if your site has special widget areas for the home page, but can also be good in the footer as a way of catching people’s attention when they reach the end of a post.

6. Social Media Widgets

If you want to engage with people who visit your website by social media, adding your social media feed to the sidebar or footer of your site will show people that you’re active on social media and encourage them to like or follow you.

One way to get access to social media widgets for the biggest platforms (Facebook, Twitter, Instagram) is to install the Jetpack plugin, which includes all of these and lots more.

Alternatively, all the social media platforms have their own plugins, available free via the plugin directory. Or you can find third party plugins that will let you customize the way you display your social media feed.

7. Shopping Cart Widget

If you’re running an ecommerce store on your site using a plugin like WooCommerce, it’s a good idea to include a cart widget so users can easily navigate to their cart wherever they are in the store.

You could put this in the sidebar where people will easily be able to see it, or in the header for added visibility if your theme includes a widget area there.

Ecommerce plugins like WooCommerce include shopping cart widgets and other e-commerce widgets as part of the plugin, so once you’ve added e-commerce to your site, you’ll find them added to your Widgets screen.

8. Form Widget

If you want people to contact you, ask questions or sign up to a mailing list, you could add a form to your sidebar.

There isn’t a form widget included with WordPress but you can add plugins to provide them, such as the free Contact Form 7 or the premium but very powerful Gravity Forms.

9. Map Widget

If your business is based in a physical location and you want people to be able to find you easily, adding a map widget to your site will help.

There are a number of free Google map widget plugins or other WordPress map plugins you can use, such as the WP Google Maps plugin.

Alternatively, if you don’t want to install a plugin, you can grab the embed code from Google Maps and add that to an HTML widget.

10. Login Widget

If you’re running a membership site, a login widget will make it easy for people to log into your site without having to go to a separate login page.

The Meta widget which comes with WordPress includes a login link but it also includes other things you might not want, so I’d recommend using a separate plugin for this from the plugin directory.

The Login with Ajax widget gives you a login form in your widget meaning people can log into your site from any page.

11. Search Widget

A really simple but incredibly useful widget is the Search widget, which comes preloaded with WordPress.

Add this to your sidebar or header and you make it easier for people to find things on your site.

If you want to boost the power of your search widget, you can install the free WP Google Search widget, which uses Google search.

How to Add Widgets to your WordPress Site

Once you’ve decided what kind of widgets you need for your WordPress site, it’s time to install them.

Don’t be tempted to add too many. The more there are, the less likely users are to notice them. Instead, focus on two or three key widgets for the sidebar. You can add more to the footer, where they’re less important anyway.

And if you have any extra widget areas in your theme, decide which widgets to put in those. Make sure they fit with the layout and design of your site.

There are three ways to add widgets:

• Use the widgets that already come with WordPress.
• Add a third-party widget from the plugins directory.
• Buy a premium plugin that includes a widget.

Finding Widgets for Your WordPress Site

There is a vast array of available widgets, so it can bed difficult to choose which one to install. Let’s take a look at the options and then examine how you might choose the best one for you.

Widgets that come with WordPress

If one of the pre-installed widgets does what you need it to, then use that. It will save you time and mean less code running on your site.

The pre-installed widgets are:

• Archives: link to archives by month, designed for blogs but rather outdated now.
• Calendar: a calendar of your posts, again suitable for blogs especially if yours is time-sensitive (but not so common these days).
• Custom HTML: the ultimate in flexibility, add whatever content you want by typing or pasting in the HTML (like Google forms). Avoid if you aren’t comfortable with coding.
• Image: display an image from your media library.
• Navigation Menu: show the main navigation menu or a separate one you create.
• Recent Comments: a list of recent comments with links to them.
• Tag Cloud: a list of tags in a cloud format, with links to the relevant archives.
• Video: embed a video from YouTube or any other streaming service.
• Audio: embed a podcast, a player, song or other audio clips (suggested: How to Start a Podcast Using WordPress).
• Categories: a list of the categories in your blog, with links to the archive pages.
• Gallery: more advanced than the image widget, display a gallery of images.
• Meta: metadata such as login links and RSS feeds. A hangover from WordPress’s early days and not very useful now.
• Pages: show a list of your site’s pages with links.
• Recent Posts: display a list of your most recent posts to encourage people to read them.
• Search: a simple search box.
• Text: any text you want to add, such as information about the site.

Adding Widgets with a Plugin

The WordPress plugin directory has thousands of free widget plugins that will give you more widgets to choose from.

As well as that, lots of other plugins also include widgets, such as an ecommerce plugin giving you a cart widget and more.

If the plugin directory doesn’t have the plugin you need, you might decide to add a premium plugin. Sometimes these will offer more functions or a more intuitive interface. But sometimes you’ll find the same features in a free plugin, so make a good search of the plugin directory before paying for plugins.

How to Find the Right Widget for Your Site

To find the right WordPress widget for you, follow these tips:

1. Identify exactly what you need from the widget. What functionality does it need to have and how do you want it to look? Does it need to link to any third-party APIs?
2. Check the built-in widgets to see if there’s one that meets your needs. Test any relevant ones, if you find a suitable one, that’s great. If not…
3. Check the plugin directory, which you can access via Plugins > Add New. Try searching for more than one term to find the right plugin for you, and search with and without the word ‘widget’. Sometimes a plugin that isn’t focused on widgets will include a widget as part of a wider set of features.
4. If you can’t find anything suitable among the free plugins, look for a premium plugin. Ask other WordPress users for recommendations and look at reviews before choosing one.

Whichever widget you choose, you’ll need to test it to check it works as you want it to. If you’re buying premium plugins, I’d recommend buying one with a money-back guarantee or a free trial period in case it isn’t right for you.

How to Add Widgets to the Sidebar and Footer in WordPress

Now you’ve chosen your widget, it’s time to add it to your site.

You can add widgets to any active widget areas provided by your theme. If your theme doesn’t have a widget area in the place you want one, try looking for an alternative theme.

Later in this post I’ll show you how to code your own widget area.

There are two ways to add widgets to your site:

• By using the Customizer. Go to Appearance > Customizer > Widgets in the admin menu, or Customize > Widgets from the admin bar at the top of the screen.
• Via the Widgets admin screen. Go to Appearance > Widgets in the admin menu, or from the admin bar, click Customize > Widgets.

I’ll show you how to use both of these methods shortly but first let’s have a look at widget areas and why you get the ones you do with your theme.

Widgets Aren’t Just for the Sidebar

Depending on your WordPress theme, you might find you have widget areas in multiple places.

Most themes have widget areas in the sidebar and footer. But some also have them in other places, like below or above the content or in the header.

If you go to the widgets settings screen in the WordPress admin, you’ll be able to see all of the widget areas in your theme.

I use a theme with multiple widget areas in lots of places. You can see in the screenshot below that there are widget areas above and below the content, in the header, below the main footer.

If you want to add widgets to other places in your site it makes sense to find a theme that has multiple widget areas. The best way to do this is to use a framework theme.

A good example of a widget in a place in your theme that isn’t the sidebar or the footer is to add a search bar in the header like I have on one of my websites.

Widget Areas and Themes

Widget areas are coded into the theme template files, as well as the theme functions file.

Here you can see the code I’ve used in my theme functions file to add a widget area that will go in the header.

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

And here is the code in my header.php file that adds that widget area into the right place in the theme.

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

If you want to add extra widget areas in your theme, you need to add the same kind of code. I’ll show you how to do this later in this post.

Don’t forget that if your theme doesn’t have as many widget areas as you would like, you can always do one of two things:

• Find a theme that does have widget areas where you want them.
• Code the new widget area into your theme or a child of your theme.

Once you’ve got widget areas in all the places in your theme that you want them, you can start adding widgets to them.

How to Use the Widgets Screen to add Widgets

There are two ways to add widgets to your WordPress site. The first one is to use the Widgets screen in the WordPress admin.

Click on Appearance > Widgets. This brings up the widgets screen.

To add a widget you can do one of two things:

• Drag it over from the list of widgets on the left-hand side into the relevant widget area.
• Click on the widget you want to add, and you’ll see a list of where you could add it. Select the widget area you want, and click the Add Widget button.

You might then need to edit where the widget is positioned within the widget area.

You can add as many widgets as you want to each widget area, but don’t go overboard. You can drag them around inside the widget area to get them in the right order. You can also drag them from one widget area to another if you decide you don’t like the way they look.

You can also use your keyboard to add widgets using the Widgets screen, so if you don’t have access to a mouse you can still add widgets.

Adding and Editing Widgets in Accessibility Mode

If you can’t use a mouse, you can use the Widgets screen with a keyboard.

First, put the screen into accessibility mode by clicking on (or tabbing to and selecting) the Enable accessibility mode link at the top right of the screen.

The screen will then change to reflect the fact that you’re in accessibility mode.

You can then navigate between elements of the screen using the Tab key on your keyboard, and hit Enter to select an item and act on it. You can either tab to a widget, hit Return on the Add link and then pick where you want to add it, or tab to the widget area and hit Return on the Edit link.

How to Use the WordPress Customizer to Add Widgets

Using the Customizer to add widgets instead of the widgets screen means you can see your widgets as you’re adding them. This makes it easier to see how your widgets will look and to move them around between widget areas if you want to.

In the admin menu, click Appearance > Customize. Alternatively, from the admin bar at the top of the screen in the live site (assuming you’re logged in), just click on Customize. This will open the Customizer.

Now click the Widgets option and you will see a list of all the widget areas in your theme. Click the widget area where you want to add a widget and click the Add a widget button.

This gives you a list of all the widgets available for your site. That’ll include all the built-in widgets that came with WordPress plus any widget you’ve added via plugins.

Pick the widget you want to add to that widget area and you’ll see it in the preview screen on the right-hand side.

You can reorder widgets by dragging them up and down on the left-hand side or by clicking the Reorder link below the list of widgets and then clicking the arrows to move them up and down.

Once you finished adding widgets via the Customizer don’t forget to click the Publish button at the top left so that your changes are saved. If you leave the Customizer without doing this, none of your changes will be reflected on the live site.

Once you added your widgets, please take a look at them and check how they fit in the design of your page. If you’ve added too many widget areas, things might look a bit messy. You’ll either need to remove some of them or you can move them from one widget area to another.

It’s really easy to do this in the Widgets screen, where you can drag widgets between widget areas.

How to Add a Widget to a Specific Page

Some themes include widget areas that are just for specific pages, like the homepage. But what if you want to add a widget to just one page on your site?

You can do this in the Gutenberg post and page editor.

Add a new block in the usual way and then select the Widgets block type.

You can then choose from many of the widgets you have enabled for your site, and add it to the content of your post or page. It’s really useful if you want to add a form widget, a call to action widget, or a list of your latest posts.

How to Edit Widgets

Once you’ve added widgets to your site, you can make changes to them. Individual widgets will have settings you can access via either the Widgets screen or the Customizer (it doesn’t matter which of these you used to add the widget.)

Some widgets don’t include any settings, but others have settings for the widget title for example or the number of posts displayed. Some are more complicated and require you to set up the widget in a separate settings page. Check the documentation from your plugin’s developer.

Options you have for editing widget plugins include:

• Editing the settings for the plugin.
• Moving the widget from one widget area to another.
• Removing the widget. You have two options for this, which will look at shortly.

To edit the settings for the widget, find that widget in the widgets screen or the customizer, and simply edit any options provided.

To move the widget from one area to another, open the widgets screen and drag it from one widget area to another. In accessibility mode, navigate to the arrow to the right of the widget and select from the options.

Deleting Widgets

To delete a widget in the Widgets screen, find that widget and click the delete link to the bottom left of the widget settings box.

To delete a widget in the Customizer, find the widget in its widget area. Click on the arrow to the right of the widget’s name, and then click the Remove link to the bottom left of the widget settings.

You can also remove a widget from a widget area but still make it available to use later on through the Widgets screen.

Scroll down to the Inactive Widgets area towards the bottom of the screen. Drag widgets to this area to remove them from the widget area but keep them as drafts with their current settings. You can then always drag them back into a widget area if you want to in the future.

If you switch themes and your new theme has different widget areas, any widgets that don’t fit in the widget areas in the new theme will automatically be moved to the Inactive Widgets list by WordPress.

How to Add a New Widget Area to your Theme

If your theme doesn’t have widget areas where you want them, you can always add your own. You do this by adding two pieces of code.

Let’s add a widget area below the content.

Creating the Widget Area in Your Theme Functions File

The first step is to set up the widget area using the register_widget() function.

If you’re using a third-party WordPress theme (here’s a selection of the best ones), you need to create a child theme to do this. The reason for that is that if you update the theme in the future, all your changes will be lost.

If you’re working with your own theme, you can simply edit the theme.

Start by opening your theme’s functions.php file. At the bottom of the file, add this code.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Now save your functions.php file. If you go to your Widgets screen or the Customizer, you’ll find the new widget area available for you to add widgets.

But if you do this, they won’t actually show up on the page. This is because you need to add some code to your theme template file.

Adding The Widget to a Theme Template File

The first thing is to find out which theme template file you need to use.

• If you’re adding an extra sidebar, then you’ll need to add this code to your sidebar.php file.
• If you’re adding your widget area before or after the content, you’ll need to add it to whichever theme template files are outputting the content.
• If you’re adding a widget area to your header, you’ll need to add the code to your header.php file.
• If your new widget area is just for one page in your site or for one type of content, you’ll need to use the WordPress template hierarchy to work out exactly which template file you need to either use/create and then edit it. So, for example, you’d like to add widget areas to your homepage, you’ll need to create a front-page.php file and add your widget area there.

Once you’ve identified which template file you need to edit and exactly where you need to have the code for the widget area, add the following code. In the case of a widget area after the content, we add it to the post.php and page.php file in our theme:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

Now save your template file(s).

Note that your code will be different from mine depending on what you’ve called your widget area and what elements you want to place it inside. I generally use an aside element because to my mind they are designed for sidebars and widget areas.

Ninja tip: If you move the ending of your container element for the content to the beginning of the sidebar and/or footer file, then you can add this there and you only need to add it once.

Now if you take a look at your site, you’ll find that any widgets you added to your widget areas will show up in the right place. If they’re not in quite the right place, go back and edit your template files, making sure the code is in the spot where you want it. You also might need to edit your CSS to get looking the way you want it to.

How to Code Widgets Using the Widgets API

So now you know how to pick widgets for your site, how to add them to your site, and how to register new sidebars or widget areas. The next step is to learn how to create a WordPress widget.

Sometimes, you might find there isn’t a plugin available to create the exact widget that you want on your site. That means you’ll have to code it yourself.

In this example, I’m going to show you how to code a really simple call-to-action widget.

Overview of the Widgets API

The Widgets API in WordPress includes all of the code that you need to register, create, and code widgets. The Widgets API includes:

• Classes to build new widgets.
• Functions to register widgets and deploy them on your site.
• Functions to unregister widgets, for example from a parent theme.

Here we’ll be using a class to build a widget. The first step is to create a plugin to hold the widget.

Create a Plugin for Your WordPress Widget

To create your own widget, you’ll need to code a plugin. Don’t add the code for a new widget to your theme, because widgets are about functionality and not about display. If you change your theme in the future, you want to still be able to access that widget.

Start by creating an empty plugin. Create a plugin folder in your wp-content/plugins directory and add an empty file to that. Give it an appropriate name. Open that file and add this code.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

You’ll need to edit the author URI and plugin URI to your own. That will create a plugin for you that you can activate via the Plugins screen.

But if you activate it, nothing will happen. You’re going to have to add some code to your plugin.

Create a Class for the Widget

The code for the widget is going inside a class. So add that next.

class kinsta_Cta_Widget extends WP_Widget {

}

Create the Constructor Function

The first thing to go inside the class is the constructor function to create the widget. Add this inside the braces of the class.

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

This starts to build the widget.

Create the Form to Output the Widget

Next, we need a form that will be used by the Widgets screen and the Customizer to create the widget. Add this, still inside the braces.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

This gives users a form they can use to add text and a link to the call to action box.

Create the Function to Save the Widget

Now you need to save anything that’s input to that form. Add this.

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

This will save the data input by users to the widget settings.

Create the Function to Output the Widget

Now you need to add the code which will display the widget on the site. Again, add this inside the braces:

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
  echo $args['before_title'] . $title . $args['after_title'];
};
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

Register the Widget

Now you have your class written, it’s time to register the WordPress widget so it works. Add this code outside the class.

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

Now save your plugin file. Go to the Widgets screen and you’ll see the widget for use.

If you add it to a widget area and add text and a link to it, it will be output in the live site.

It might not look all that good right now. You need to add some CSS to style it.

Adding CSS to the Widget

To add CSS to your plugin, you need to create a stylesheet and enqueue it in your plugin. Add this to your plugin file before the class.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

Now you need to add a style.css file inside the plugin’s folder and add any styling to that. I’ll leave that to you!

You now have a simple call to action button that you can add to any widget area on your site. If you add it to your sidebar, for example, people will be able to use it to get to your sign up page from anywhere on the site.

You can create more complex widgets with extra settings and options, but this gives you an idea of how to get started creating your own widget.

If you want to see my code for this plugin, including the styling, you can find it on Github. If you’re starting with code, here’s an in-depth guide on git vs GitHub and how to get started with both.

Summary

Widgets are one of my favorite features of WordPress. They can bring your website to life, and help you get more signups or convert more visitors to customers. You can add WordPress widgets to any existing widget area in your theme, or you can add extra widget areas so that you can add more widgets in more places.

There are also plenty of places to find widgets. WordPress comes with a number of them pre-installed, and you can also install more of them via plugins. But that’s not all, if you feel comfortable, you can also code your own widgets using the Widgets API.

Now it’s your turn: how do you use WordPress widgets on your site? How many are you using?