• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Answer Your Tech

Wordpress How-to Guides

  • Writing
  • Settings
  • Jetpack
  • Navigation
  • Hosting
  • Getting Started
  • Themes
You are here: Home / Sidebar / How to Add the Wordpress Widget HTML Unit

How to Add the WordPress Widget HTML Unit

May 20, 2022 By Matthew Burleigh

How to Add the WordPress Widget HTML Unit

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.

Table of Contents hide
1 How to Add HTML to a Sidebar Widget in WordPress
2 How to Use the Custom HTML Widget in WordPress to Add an Image or Other HTML Element
3 More Information on How to Add Custom HTML to the Sidebar of a WordPress Website
4 Additional Sources

How to Add HTML to a Sidebar Widget in WordPress

  1. Go to your dashboard.
  2. Hover over Appearance, then click Widgets.
  3. Click the Primary Sidebar.
  4. Click and drag the Custom HTML widget to the Primary Sidebar.
  5. 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.

open the widgets menu

Step 3: Expand the Primary Sidebar widget location at the right side of the window.

expand the primary sidebar

Step 4: Locate the Custom HTML widget at the center of the window, then drag it to the desired location in the Primary Sidebar.

drag the custom html widget to the primary sidebar

Step 5: Give the widget a title, add your HTML to the body of the widget, then click the Save button.

how to add a custom html widget in wordpress

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

Matthew Burleigh
Matthew Burleigh

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 can read his full bio here.

Join Our Free Newsletter

WordPress guides and deals

You may opt out at any time. Read our Privacy Policy

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on Reddit (Opens in new window) Reddit
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on Pinterest (Opens in new window) Pinterest

Primary Sidebar

Join Our Free Newsletter

WordPress guides and deals

You may opt out at any time.
Read our Privacy Policy

Recent Posts

  • How to Add Two Spaces After Period in Word: A Step-by-Step Guide
  • How to Freeze a Row in Excel: Step-by-Step Guide for Beginners
  • How to Clear the Download History in Google Chrome: A Step-by-Step Guide
  • How Do I Find My WiFi Password on an iPhone? A Step-by-Step Guide
  • How to Change the Router Password on Your Netgear N600: A Simple Guide

Site Info

  • Domain Name - Hostgator
  • Hosting - Cloudways
  • Theme Framework - Genesis
  • Child Theme - Smart Passive Income Pro
  • Site Speed - WP Rocket

Archives

  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • March 2025
  • June 2024
  • May 2024
  • December 2023
  • November 2023
  • October 2023
  • November 2022
  • October 2022
  • May 2022
  • July 2020
  • September 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • July 2018
  • December 2016
  • November 2016

Categories

  • Comments
  • Genesis
  • Getting Started
  • Hosting
  • Jetpack
  • Navigation
  • Plugins
  • Settings
  • Sidebar
  • Themes
  • Tutorials
  • Writing
  • Affiliate Disclosure
  • Privacy Policy
  • FAQ
  • About
  • Contact

Copyright © 2025 AnswerYourTech.com

 

Loading Comments...
 

You must be logged in to post a comment.