Customize WordPress Widgets and Sidebars Without Code

678 Shares

Want to customize your WordPress widgets?

Wish you could change the style of your sidebar widgets?
Need to hide some widgets on mobile devices?
Well, now you can, without knowing ANY code.
Literally. Zero code.

Widget Basics:

What is a widget?
A WordPress Widget is a small block that performs a certain function.
Widgets in WordPress allow you to add content and features in the widgetized areas of your theme – generally speaking, we’re talking about your sidebar here. However, these widget-ready areas can be in the header, footer, sidebar, after content, and basically any other area in your theme.
Widget areas are structures within your theme that allow you to easily add content to your blog design. Widgets and widget areas are not accessible on a post or a page.
Widgets let you do a lot of things to customize your blog without having to know too much, if any, coding and without making any real changes to your theme. You access them by logging into your website WordPress dashboard, clicking on Appearance, and then on Widgets.
Common widget areas in WordPress themes are:

Primary/Main Sidebar
Secondary Sidebar
Header Right
Before blog post
After blog post
Homepage widget areas
Footers

What’s the difference between widget and widget area?

Widgets can be added, removed and organized in your widget dashboard. On the left-hand side of the screen you’ll see your widget options. Depending on what plugins you use, there can be more or fewer options. On the right side of the screen are toggles for various widget areas. (Widget areas are totally dependent on the theme you’re using, so if you are confused, make sure to read the description below each widget area.)
How to Use Widgets:
Adding and removing widgets is super easy. All you have to do is click on the widget you want and drag it over to the widget area that you want it to be displayed in. The whole drag-and-drop functionality is part of what makes widgets so user-friendly.
There are a number of basic widgets that are included with every WordPress download. Aside from those, you can always add new widget options from downloading a plugin or contacting a WordPress developer! This is part of the reason why I love WordPress so much; the sky is the limit when it comes to customization possibilities.
Once you click and drag your widget into the widget section where you want it to be, you may need to adjust a few settings before you’re good to go, but this 100% depends on the widget itself.
(Side note: Please be aware when downloading WordPress plugins. All plugins are not the same. Make sure that the plugin that you’re downloading has been updated rather recently. Out of date plugins could create a coding conflict with your theme….aka they might not work like they were intended. Also, some plugins can slow down your website.
If you’d like to learn how to speed up your WordPress website, check this out: How to Make Your Website Faster)

Sidebar Widget Area:

Since most themes allow for full customization of sidebar widgets, I’m going to stick with examples of those! These customizations can be made to any widget, in any widget area but the style and display may depend on your specific theme.
Most Common Things to Include in Sidebar Widgets:

About Info:
Creating a mini biography for your sidebar is as easy as adding a text widget to your sidebar widget area with a few sentences about yourself and a profile photo then linking to your About page – Not sure about the HTML/CSS to help you do this? Download my free HTML/CSS ebook + cheat sheet and it’ll walk you through each step!
Opt-in Form:
Linking your opt-in incentive and your email signup form in your sidebar is a good way to increase the number of your subscribers.
Social Media Links:
We live in a social world. When people come to your website/blog and like what they see, they’re likely to want to connect with you and check out your social media platforms – My favorite plugin for this is: Simple Social Icons.
Popular/Recommended Posts:
Showing your recommended or popular posts in your sidebar is a great way to keep your visitors on your page, engaged in your content, and help to decrease your bounce rate.
Search Bar:
If people can’t find the thing they’re looking for on your website, they’ll want to utilize a search bar to help them find it. This helps with overall user experience. You don’t want people to get frustrated and leave your website because they didn’t have the chance to search for something (eeeek!)
Ads/Promotions:
This one can get a little sticky. If you’re featuring a product or you would like to include an ad or 2, go for it. But don’t jam that sidebar packed with advertisements. Depending on the type of ad, it could slow down your website. Depending on the graphic for the ad, it could distract your readers. Both of those things prevent the ad/promo from being effective, therefore it turns into wasted space.

How to Create an Effective Sidebar:

Consider the goals of your website. Once you’re clear on your goals, you’ll be able to organize your sidebar with a breeeeze. Some website goals could be to: increase your email subscribers, sell more of your products, get more people to join your online course, or simply getting more visitors to check out your services and hire you.
What’s the best way to create an effective sidebar? Target it.
Consider using different widgets on different pages and posts of your website, depending on the content of those pages. For example, in the sidebar of my blog post I would put my “About Me” widget at the top so that new visitors could match a face to my content. But, on my About Page itself, I might leave that widget off and instead put my social media links at the top. (We’ll go over how to do this in the Customize Widgets section!)
Not sure what to include? Go check out a couple people in your niche or industry. Look at their sidebars. Take note of what’s working and what’s not. Inspiration can always be super helpful, just don’t copy them. Copying isn’t cool.
The key to having an effective sidebar is by NOT jam packing it. You don’t want to overwhelm your readers with a busy sidebar. If it’s busy they won’t focus on your content, and they won’t know what to do next. This could discourage visitors from sticking around….which is the last thing we want.
If you’re having a hard time picking just ONE goal for your sidebar, prioritize them.
Simplicity is best….always.

3 Common Sidebar Mistakes:

Too Much Going On:
We just touched on this above but it really is THAT important to mention it more than once (or more than 5x. Seriously. Don’t jam pack it) – Keep that sidebar area focused, less is more.
Helpful Tip: Every few months re-examine your sidebar. Is there too much going on? Could you toss out a few of those widgets? Has the goal of your business/website changed? Switch it up. Feature a new product or post.
Leaving the Default WordPress Widgets:
Ouch. Total rookie mistake. But don’t worry, there’s the easy fix for it. Open each widget and click the “Delete” link at the bottom.
Now you have an open sidebar area to help you strategize and reach your goals! Bingo.
Too Many Ads/Affiliate Links:
There’s nothing wrong with having a few ads on your website and there’s nothing wrong with promoting products that you absolutely love. The problem revolved around the NUMBER of ads + affiliate links.
Filling up a sidebar with promotional product banners and images gets overwhelming and if there’s enough in a row it starts to look all spammy; like you’re only blogging for the affiliate income. If the ad or affiliate product is helpful to your audience, absolutely suggest it. If it adds no value, then consider leaving it out.

Customizing Your Widgets:

Overview:
Want to customize your sidebar widgets but don’t know the first thing about coding?
Pffffft, no prob bob. I got your back with this one. A few months ago, I was introduced to the plugin Widget Options by Phpbits.
Now, being a WordPress designer and developer myself, I’ll be honest. I’m always a little eerie about uploading plugins to my website if I can just hard code the functionality myself. BUT Widget Options intrigued me a bit…..and after downloading and diving into it, I absolutely love it. This single plugin has the functionality and customizing options to do what it would take 3 or more plugins to do.
The user design and interface is extremely easy to figure out and manipulate.
It allows me to:

Show or hide widgets on specific pages, post types, or blog categories (This is absolute GOLD for making your sidebar 10x more effective.)
Show or hide widgets depending on the screen size or type of device (Ya know, for when you don’t want your mobile user’s to be scrolling for 6 years to get to the bottom of your page)
Show or hide widgets depending on the day of the week….(like whaaaaa this is genius!)
Custom Widget ID & Classes (Lifesaver for my HTML/CSS custom coders out there)
Hide or Show Widget Title (If you want to write a title for your own sanity but don’t want the internet world to see it)
Generates Widget Shortcode (Ever want to use a widget-only plugin and couldn’t find a way to show the plugin content INSIDE a page/post – aka not in a specific widget area – BINGO, here’s your answer)
Style each widget individually (example: background color, hover, heading/text color, link color, border color, border style, border width, number of columns, background image, + a bunch of other options)
Create “Fixed” widgets: these stay in place when the user continues to scroll through the page content.
Add Animation to widgets: Perfect for those widgetized homepages that need a boost.

So, basically, in a nutshell, this plugin has not only made my customizing easier on my own websites, but it makes it a breeze for my clients too.
So then, I got to thinking…well, if I love it, and my clients love it….I’m 100% positive the rest of the WordPress user world would love it. So, here we are!

How to Customize Widget:

You can customize your widgets as a whole, or you can customize them indivudally as needed. This plugin gives you the option to play with both.
If you’d like to customize the options on a more general level, just go to your WordPress dashboard and click SETTINGS, then WIDGET OPTIONS.

If you’d like to customize your WordPress widget options for specific widgets go to your WordPress Dashboard, click on APPEARANCE, then WIDGETS. Drag the widget you would like to use into the widget area that you want it to show up in and the widget options appear at the bottom of that widget.

Here’s an overview of the specific ways you can customize your WordPress widgets:

1. Create Columns in your sidebar:

This option is probably more useful in a footer widget area or for widgetized homepages, but can also be used in the sidebar:

You can change these column options depending on what mobile device your website is being seen on.

2. Show or hide widgets on specific pages, post types, blog categories, OR by page role:

So you can choose to hide a specific widget if someone is logged in as an editor; that way they have no control over editing that specific widget. You can also show or hide certain widgets on multiple pages or categories….all by checking or unchecking a few boxes. By targeting your widgets to only show up on specific pages, you’re making your sidebar as effective as possible! (and who doesn’t like effective?!)

3. Show or hide widgets depending on the device your user is viewing your website on:

Talk about all-star mobile responsiveness! In most WordPress themes when a user is on a mobile device, the sidebar is bumped down below the page content. By doing this, it makes the page EXTRA long to scroll.

For a good rule of thumb, if the content in the sidebar isn’t extremely valuable to the user or won’t improve their experience on your website, don’t show it on smaller screens.

4. Show or hide widgets depending on the day of the week:

This can come in handy is you’re having a special promotion only on certain days of the week, or if you do weekly roundups on certain days and you want to highlight a certain blog category. The possibilities really are endless here.

5. Customize each WordPress widget specifically:

For this part of the post, I’m focusing on sidebar widgets, which the individual styling can be used for but its ultimate purpose is to help you customize the widgets used in your homepage. (Kind of like a clean-coded pagebuilder substitution.) If you’re using a Genesis child theme, this plugin could be your new best friend when you pair it with your widgetized homepage.

Good rule of thumb — Just because this plugin gives you the option to customize just about everything, doesn’t mean you SHOULD. You want your website/blog to look clean, crisp, and professional. Stick with your brand scheme and palette when customizing. Having soft pastels throughout your website and then hitting your visitors with a neon green widget border is probably not the best idea…...don’t laugh, I’ve seen this hahaha

Anyways, check out all of these bomb.com WordPress widget styling options!

6. Hide widget title + enable fixed widget + link widget:

Sometimes you want to be able to put a title in your widget so you know what kind of content is in there, but you don’t actually want that widget title to show. Hiding or showing a specific widget title is as easy as checking a box.

Fixed widgets are widgets that stay in their location, regardless of scrolling. This option is also as easy as clicking a little box.

Want your widget to link to another page or post? Just toss that URL into the Link: box and you’re good to go. The Widget Options plugin also lets you control if you want your link to open in a new tab when clicked or if you want your specified link to be “nofollow” (All links that you make money or commission from should be “nofollow”)

7. Animate Specific Widgets:

Want to draw attention to a specific widget? or add a little custom flair to your homepage widgets? You can add a ton of different animation options by using this plugin. Just like the individual styling options, the animation option is best paired with a widgetized homepage. If you’re using a Genesis child theme with a bunch of homepage widgets, this could help you take them up a notch, or two.

(Be careful, just like with the widget styling. Just because you have the option to add different animations to each widget, that doesn’t mean you should. Always think about your user first.)

8. Add widget specific CSS classes or IDs:

This option is a dream for my fellow WordPress customizers. It lets you separate your widgets by class, or target them specifically by ID for added styling purposes.

9. Generate widget shortcode:

Some WordPress plugins only provide functionality for widgets. Since that’s the case, you can’t really use that functionality in any other spot on your website unless it has a designated widget area. This can get a little frustrating if you want to be able to add that plugin functionality within a page or post. BUT, now, since you can generate a widget shortcode, you can place the widget in an unused widget area and copy the shortcode over to a post or page.

It might sound a little complicated at first, but it’s a total dream. Just had to use this feature the other day on a client website. Easy as pie.

Wrapping Up:

The sidebar is overlooked by many WordPress users, but the way you structure it can have a big impact on the way visitors interact with your website. It can also be a make or break when it comes to getting your audience to take action; like sign up for your email list, purchase the product you’re promoting, etc. Using WordPress widget areas can be a great way to help you introduce yourself to your visitors, lead them deeper into your site (+ reduce bounce rate), and grow your email list.
The sky’s the limit with WordPress and now, thanks to the Widget Options plugin, you don’t have to know any type of coding in order to put a little personality behind your online presence!