Premium Responsive WordPress Themes

Buy Over 150+ Premium Themes for Only $99 – Lifetime Membership
( Free Install + Demo Setup ) | Trusted by 97,000+ Users

Simple Steps to Widgetize a WordPress Theme

widgets

For many people, updating themes using widget is not one of the easiest tasks. On average, it takes five or ten minutes but for amateurs, you might take hours trying to widgetize your theme. Widgetizing a theme requires some basic coding knowledge. One needs to be well conversant with elementary PHP editing skills and limited HTML coding experience.

Regardless of your coding experience however, updating your theme using widgets does not have to cost you a fortune. You can easily achieve it on your own, provided you take closer considerations in following easy steps. So what are these steps?

Essentials First

Before you can be able to fix your theme issues using widgets, you need to learn some basics about your website. Answering critical questions about your website will determine the coding systems you will use to give your website theme the amazing look it deserves using WordPress.

Listed or Unlisted Sidebars?

Does my theme use unordered list in creating the sidebar? Most of the presently used themes are designed the sidebar mark-up way. As such, most of the titles in unordered lists have <h2> titles. For such themes, upgrading your sidebar with a more dynamic one is a less involving process. if this was your original sidebar mark up;

cod1

You can carry out easy upgrade by just adding a couple of line to the coded system. In this case, the new modification will resemble this:

code2

If you are keen enough, you must have realised that there wasn’t so much transformation involved in widgetizing the theme.  All one needed to do was the addition of two coding lines. Although the physical changes are almost unnoticeable, there are significant changes realised in the display of the themes. The first theme was a normal WordPress theme. The subsequent one features a more dynamic theme with enhanced visual appeal. While making the changes, you should be careful not to disable the plugins or even remove the widgets. Doing so will have a reverse effect and the former sidebar will still be in display.

For those using newer WordPress versions, the upgrade does not stop there. You need to make some changes within the functions.php featured in the theme directory. Drag widget from the pallet on your left hand side and then drop them in the sidebar boxes. Do not forget to save your changes after doing this. Check your theme. Is it working?

Unlisted Sidebars 

The above theme widgetizing technique only focused on themes with unordered side bar lists. What happens when your theme is not a list? In this case, you will need to learn the design pattern of the associated sidebar. For the unlisted sidebars, there are different design patterns and each one of them is handled separately. The process involves the use of additional external parameters. It is the only way of instructing the plugin to change the theme of your site using Widgets. Let us consider one example.

Assume this was the original look of your mark up;

code3

You might have spotted a similar markup somewhere prior to this encounter. Most definitely, it is the second most common markup after the listed sidebar design. It is worth noting that the sidebar is not designed inside the common <ul> tag. As such, it is needless encoding the associated widgets in <li> tags. Additionally, it is observable that the titles for this markup are encoded within <div class=’The best team wins’ as opposed to <h2 tags like in the previous case.

In order to upgrade such a markup using widgets, it becomes necessary adding some parameters in the codes featured in functions.php without forgetting to consider the aforementioned observations. After making the changes, the resultant sidebar should look like this:

code4

You should be able to test this HTML markup and find it working on your website. While facilitating this process, you should have in mind that the associated sidebar id is generated with closer considerations of the widget name. As such, you should be very careful when deciding on this name lest you mess.

Learn the trick

It’s all that simple! Widgetizing a theme does not have to be complicated the way most people have been made to believe. You only need to learn the type of sidebar your theme is linked to, and then proceed from that point.

Bio

Jack Dawson is a web developer and UI/UX specialist. He likes to share knowledge and points of view with other developers and consumers on platforms. To learn more on these topics and get insight of what to look for in a Web Design Firm, visit our website.