A widget is a component that adds content and features to a widget area (also called a sidebar). But there is more to learn about what are widgets in WordPress than that.
Widget areas allow users to personalize their websites. A widget area may appear on different pages or only one. Your theme may have only one widget area or many.
WordPress widgets are an excellent way to supplement your site’s content, snippets, and interactivity.
They make your site more than just a blog, and they give you the freedom to choose which content you want to display on each page of your site and ensure that no one misses it.
Here are some examples of how widget regions can be used:
- Create a homepage with widgets. This enables site owners to customize what appears in each section of their homepage.
- Create a footer that users can personalize with their own information.
- Create a blog with a personalized sidebar.
A widget is a PHP object that generates HTML. On the same page, the same type of widget can be used several times (e.g. the Text Widget). Widgets have the ability to save data to a database (in the options table).
When you create a new type of widget, it will be visible in the user’s Administration Screens under Appearance > Widgets. From the WordPress admin, the user can add the widget to a widget area and customize the widget settings.
How to install Widgets in WordPress?
WordPress comes pre-installed with a number of Widgets. If those are inadequate, you can add more by searching the WordPress Plugin Directory, which is available from the WordPress Administration Plugins > Add New Screen.
When you’ve found the plugin you’re looking for, click the Install now button. This will change to an Activate button after a few moments. To activate the plugin, click this button.
You can now add the widget offered by the plugin to a widget area in your theme by going to the Customizer or the Widgets screen.
If you purchased a widget plugin from a third-party supplier, such as CodeCanyon, you must upload the plugin to your web. This is something you can do directly from your admin screens.
Upload the plugin’s zip file (only zip files will work). Install the plugin by clicking the Install Now button, and then activate it. When you go to the Customizer or Widgets screen, the widget will be available.
How to display Widgets?
Before you can add a Widget, make sure the Theme you’re using supports Widgets (more specifically: Widget Area). You can do this by going to the Appearance menu and looking for a submenu called “Widgets.”
Adding from Theme Customizer
If your theme supports Theme Customizer, you can use the instructions below. A live preview of updates is available in Theme Customizer.
Then, pick the widget you want to add by clicking the Add Widget button. It will appear as a preview on the right, and you can adjust the settings or try different widgets until you’re satisfied. When you’re finished, click the Publish button at the top to save your edits.
Please keep in mind that if you exit the Customizer without clicking Publish, none of your changes will be saved. Keep in mind!
Adding from dashboard
There is another way, go to the Appearance » Widgets page from the admin sidebar to see a list of available widgets.
Once there, you’ll notice all of the available widgets on the left. The widget zones for your theme will be found on the right side.
Each of your installed widgets has a short description that explains its purpose and use. Simply drag and drop a widget from the list on the left to an area on the right to make it to a widget area on your web.
You can also rearrange widgets by moving them up and down.
Each widget has its own set of settings, which you can access after adding the widget. Don’t forget to save your widget settings by clicking the Save button.
How to Include More Widget Areas in Your Theme?
If your theme lacks the widget areas you need, the easiest solution is to find another theme that does. But what if you’re pleased with your theme’s design and just want to add one or more extra widget areas?
Using the register sidebar() function, you can build your own widget areas in WordPress. This is done in two steps:
- Registering the widget area of your functions.php file with a function.
- Adding the widget area to the appropriate location in your theme.
If you’re using a third-party theme (one you downloaded from the theme directory or purchased from somewhere like CodeCanyon), you can’t make changes to it directly. Create a boy theme instead, and add your new code to it.
Widget Area Registration
To register the widget area, create a function in your functions.php file that looks like this.
function wptechonline_register_widgets() {
register_sidebar( array(
'name' => __( 'After Content Widget Area', 'wptechonline' ),
'id' => 'after-content-widget-area',
'description' => __( 'Widget area after the content', 'wptechonline' ),
'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', 'wptechonline_register_widgets' );After you save the file, the widget area will appear in your Widgets screen and in the Customizer. However, it will not yet output anything to the web.
Including a Widget Area on Your Website
To make the widget area appear on your site, add code to the appropriate template file in your theme. This will be sidebar.php for the sidebar and footer.php for the footer. However, if you want to add an additional widget area in a different location, you’ll need to locate the appropriate template file.
- Add a widget area above or below the content by including it in your single.php, page.php, or any other file that outputs single posts or pages.
- To add a widget area to a particular file, such as the home page, make a file called front-page.php, copy the contents of your index.php or page.php file into it, and then add the widget area code.
- Add the following code to single-posttype.php to add a widget area to posts of a particular post type, where posttype is the name of the post type.
There are more options—the WordPress template hierarchy is the best resource for determining which file to use.
In our template files, we would add the following code after the content for the after content widget area I registered above:
if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>
<aside class="after-content widget-area" role="complementary">
<?php dynamic_sidebar( 'after-content-widget-area' ); ?>
</aside>
<?php }After you’ve done that, any widgets you add to that widget area will appear in the correct location on the web.
What Is the Distinction Between a Widget and a Plugin?
Plugins can add a variety of functions and features to your WordPress website, including more widgets. However, not all plugins include widgets. It is totally dependent on the plugin’s intent.
Widgets, on the other hand, are drag-and-drop blocks that can be used to add content to your site’s sidebar and other areas. Some widgets are included with your standard WordPress installation, and you can add more widgets by using plugins.
These widgets are put in widget areas, which are special content areas on your site where your guests can see the content.
Conclusion
Widgets are a straightforward WordPress feature that should not be ignored. You can customize your sidebars with widgets even if you don’t know anything about design or coding. Furthermore, adding them to your theme’s widget areas is as simple as dragging and dropping them, followed by a few settings tweaks.
To begin using WordPress widgets on your site, simply go to Appearance Widgets in your dashboard or the WordPress Customizer. Then you can drag any widgets you like into your sidebars or footer. There are numerous default options that allow you to add text, a search bar, and other features. You can increase your versatility by using plugins such as WordPress Popular Posts.
