In today’s WordPress widgets tutorial you will learn all the basics you’ll need in order to use widgets effectively on your WordPress blog. You’ll find out what are widgets, how WordPress widgets benefit your website, how to add and delete them, how to modify them and much more.
Your WordPress blog’s widgets are very versatile and powerful tools that should not to be underestimated. They can significantly enhance the functionality and design of your WordPress blog.
WordPress widgets are easy to use. In fact you will be able to “play” with them and explore them with confidence because they are “unbreakable”.
What Are Widgets In WordPress
WordPress widgets can be defined as software, small applications or a code within a WordPress theme that can be used to add useful information to a blog. Previously, they were primarily used for adding and arranging content within the sidebar of a WordPress blog. These days they can be used in headers, footers and even within a post or a page.
By using WordPress widgets one can easily add new functions and features to a WordPress blog, improve the blog, monetize it and make it more successful.
All WordPress themes come already widgetized. These wonderful applications are stored in a specially assigned dashboard (admin area). The types and the number of these tools vary from theme to theme, but all the basic ones are always pre-installed.
Benefits Of WordPress Widgets
- They are very useful tools as they turn a WordPress blog into an interactive and engaging entity.
- They can provide additional and useful information that can be viewed on and accessed from any page or a post.
- They are easily adaptable to reflect new changes of the WordPress blog.
- They can easily monetize a WordPress blog and help a blogger make some money.
- Their functionality can be easily enhanced by simple to use plugins.
- New ones can be easily added to a WordPress blog via plugins.
Exploring WordPress Widgets Admin Area
To access the widget admin area of your WordPress blog, click on the “Widgets” link in the Appearance section of your blog’s Dashboard.
Image 1. Access WordPress Widgets
After you click on the link in Appearance you will be brought to the widget-specific admin area. (Please note that I am using my demo site ditahelp.me for all WordPress Tutorials. The active theme on that blog is the default Twenty Twelve theme). The widgetized area may vary slightly on different WordPress themes.
Image 2. Widgets Admin (Dashboard) Area
Once in the widgetized admin area you will see all the widgets your WordPress theme supports. Some are already displayed in your sidebar area by default, when you first installed WordPress. Typically, on the sidebar of your WordPress blog you will see the following widgets:
- Recent Posts
- Recent Comments
On your newly installed WordPress blog they will show up on the sidebar as shown below.
Image 3. Default Widgetized Sidebar
Some of them you will not need and you can delete them. Some of them you may want to keep.
1. How To Delete Widgets
The beauty of the built-in WordPress widgets is that rather than writing a code to delete or add them, they are simply dragged and dropped in and out in your blog’s widgetized area, typically a sidebar. You can do it as often as you wish without harming your WordPress blog.
For this tutorial, we will delete Archives and Meta widgets. We will keep the rest of them.
There are 2 ways to delete them, depending on what you want to do with them.
- You can delete it right from the sidebar in the widgetized dashboard – (when you delete an existing one, for example “Archives”, you will still retain the default Archives widget in the built-in, permanent widgetized “parking lot”,)
- You can place it in the “Inactive Widgets” area to use later. For example, you would place it , if you have created a text widget (I’ll talk about them further down) with information you would like to use at a later time. Rather then creating another one when you need it again, you can just retrieve “the retired one” from this “storage area” and add it to your sidebar with all the information within preserved.
► How to delete a widget – Method “a”
- In the dashboard select the widget you want to delete.
- Click on the dropdown pointer to expand its window
- Press “Delete”
Image 4. How To Delete Widgets – Method “a”
As soon as you hit the “Delete” button, it is gone from your sidebar area.
► How To Delete Widgets – Method “b” (want to keep it for later)
- Click on the widget you want to delete from sidebar
- While holding the button down, drag it to “Inactive Area”
- Release the “click” and “drop” it into the area
Image 5. How To Delete Widgets – Method “b” – Drag and Drop
In the example above I am simply dragging the Archives widget into the inactive area. Once in there, I drop it. It will be saved in this place until I will want to use it again. As an example, I already dropped the Meta one into the inactive storage area.
2. How To Add Widgets To The Sidebar Of Your WordPress Blog
Adding these “apps” to the sidebar is the exact opposite of deleting them, as you might have guessed already. When you want to add one, you simply click on the available widget you want to add, then drag it and drop it in the spot you want it to be within the sidebar.
To move it up and down within the sidebar, drag it up or down and drop it in place.
Adding Text Widgets To Sidebar
What if you want a new widget but you want the information within it to be different from the information in the build-in widgets? For this purpose we use the text widgets and we input the information into them manually.
You can add images, written information, optin boxes and other content into them. But there is one problem! Unfortunately, the text widget editor does not come with the bells and whistles of a post or pages WordPress editor. It seems you would need to know some HTML coding to create eye pleasing text and add images in the widget “editor” (actually, there is not even an editor there, just a plain old box).
Now I will show you how to overcome this WordPress shortcoming. I’ll share a little trick to ease your life! I’ll show you how to add “complex” HTML information as well as, HTML modified images (for example, advertisements linked with your affiliate link) to these widgets without any sweat.
1. How To Add Information To Text Widgets
- First create your text or image information in the WordPress editor (the one you use to write posts).
- Create the information in the “Visual” editor
- Change the “Visual” editor screen to “Text” editor (which is the HTML editor)
- Copy the information from the “HTML” editor to the text widget
- Press “Save” and you are done!
From the HTML editor, I copied the same bullet point information (as above) to the demo site’s text widget. Below is the example of the HTML version of the bullet points I added.
Let me summarize the steps of adding information to a text widget:
- Expand text window
- Add title (optional)
- Copy HTML text from your “Text” editor
- Paste copied HTML into the text widget
Image 6. An Example Of Adding Bullet Point HTML Text To A Text Widget
Let’s have look how the bullet points look look like on the demo blog.
Image 7. Bullet Point Text On The Demo Site
As you can see, the new widgetized information on the demo site’s sidebar looks perfect!
Note: You may want add title your new creation. Just enter the title in the Title box . The title cannot be customized. It’s look will be determined by the options of your WordPress theme.
2. How To Add HTML Modified Images To The Text Widget
For this example, I will use an advertisement image I created for one of my favorite programs (and that’s really me in the ad). Here are the steps:
- Upload the image to your “Visual” editor of your WordPress blog
- Link the image to a product or program (or whatever you want to link it to)
- Switch the “Visual” editor to “Text” editor
- Copy the image HTML information of the image
- Paste it into the text widget
Below is the image I am going to use. I have added the link to it, so when you click on it, it will take you to the program, I am advertising.
Now let’s have a look at the information I added to the text widget on the demo site.
Image 9. How To Add Linked Image To Text Widget
Pretty scary code! I certainly would not want to create it from scratch.
Scary as it is, it looks pretty neat on the demo site as you can see below. You can even click on the picture on the demo site (here is the link to the demo site if you want to check it out there).
Image 10. Example Of A Linked Image In the Sidebar
WordPress text widgets are very versatile. You can add all kind of information to them. On Blogging Spree, in the sidebar, many of widgets are text ones, including the optin Newsletter box. All of them are as simple to add as I showed you in this demo.
This WordPress widgets tutorial only covered the basics. I really wanted you to understand what are widgets, what does it take to implement them in your sidebar and how to customize them. There are also WordPress widgets available, which will enable you to do more complex things, like creating a magazine look of your site. But those are more advanced topics and I will cover them in the future WordPress tutorials. So stay tuned!
For now, go wild with the widgets you have on your WordPress blog and create some awesomeness.
Next Tutorial: What Are WordPress Plugins