The ability to add widgets to the sidebar of your WordPress website is a very helpful feature that can let you put a lot of important information for your visitors on the side of your website.
If you have previously explored the widgets in WordPress, then you likely found a number of default options that let you quickly add some of the most common types of widgets.
But inevitably, you will decide that you want to put something else in the sidebar that you can’t do with one of the default widgets.
Fortunately, WordPress offers a Custom HTML widget where you can put your own HTML code inside of a widget that you add to your sidebar.
You can add HTML to your sidebar in WordPress by going to your admin dashboard, hovering over Appearance and clicking Widgets, then adding the Custom HTML widget to the Primary Sidebar. You will then be able to add your HTML to the widget and save it.
Now when you view your site you should see the HTML content that you included in the widget.
Our tutorial continues below with additional discussion about the HTML WordPress widget.
How to Add HTML to a Sidebar Widget in WordPress
- Go to your dashboard.
- Hover over Appearance, then click Widgets.
- Click the Primary Sidebar.
- Click and drag the Custom HTML widget to the Primary Sidebar.
- Customize the HTML widget, then click Save.
Our guide continues below with additional information on using the WordPress HTML widget, including pictures of these steps.
How to Use the Custom HTML Widget in WordPress to Add an Image or Other HTML Element
The steps in this article were performed in WordPress 4.9.7.
If you don’t see the Custom HTML widget in your WordPress installation when you follow the steps below, then it’s likely that you are using an older version of WordPress. In that case you can try using the Text widget instead.
Step 1: Sign into your WordPress dashboard.
Note that you will need to be an admin for the WordPress site to be able to edit widgets.
Step 2: Hover over the Appearance tab at the left side of the window, then choose the Widgets option.
Step 3: Expand the Primary Sidebar widget location at the right side of the window.
Step 4: Locate the Custom HTML widget at the center of the window, then drag it to the desired location in the Primary Sidebar.
Step 5: Give the widget a title, add your HTML to the body of the widget, then click the Save button.
Now you can go to your home page and see how the widget looks.
Our tutorial continues below with additional discussion about using the Custom HTML widget to add styled content to your sidebar.
More Information on How to Add Custom HTML to the Sidebar of a WordPress Website
The CSS that is applied to the sidebar of your theme is probably not going to be what you want it to be, especially if you are adding text or lists to the sidebar. You may need to format the HTML in the sidebar, or, more likely, you will need to add some custom CSS for the sidebar unit to make it look the way you want it to.
With each new release of WordPress you seem to be able to use WordPress widgets in more areas of your site, and customize them in additional ways. This has negated the need for many dedicated widget plugins and sidebar widgets, as there as so many custom widget options in a default WordPress site now that you can likely find a widget function without needing to slow your site down with unnecessary plugins.
While there is going to be a field at the top of the widget area where you can specify a widget title, you will likely need to test this out for your theme. Some themes don’t display widget titles, and some use strange styling for them.
Depending on your theme, or if you are using a widget that was added by a plugin, you might have some widget settings that let you add more styling, or choose where you want to display the widget. This can let you do things like hide the widget on your site’s pages, or only show the widget in certain WordPress post categories.
One of the nice things about WordPress is that you have so many customization options available to you. If you can’t get your widget content to display properly with built in widgets like the recent posts widget, or a WordPress popular posts widget, then you can simply create your own widgets instead.
If you find that some of your existing widgets don’t look great, or you simply want to trim your sidebar down, then find out how to delete widgets in WordPress. Many WordPress themes will include some widgets by default, and you may find that you don’t want them after you have had your site for a bit.
Additional Sources
Matt has been working with WordPress and creating content using this powerful content management system for years. While he has written about many other tech topics, WordPress is one of his favorites.
You must be logged in to post a comment.