Facebook Pixel

How to Create CSS Customizable Widgets with WordPress Custom Sidebars Plugin

We love a good sidebar. They can provide a dose of extra information, useful links, and easily accessible contact information. However, unique pages require unique sidebars, which is a problem posed by WordPress‘ default settings. Our favorite framework for WordPress is PageLines DMS, and they have a great recommendation to overcome this issue. The Custom Sidebars plugin.

This plugin allows the designer to create any number of customized sidebars and assign them to whichever pages they’d like. Meaning the sidebar on your contact page can contain useful additional information, while your product pages contain sidebars with contact forms for questions. It’s brilliant! Except for one nagging issue. By default, the sidebars will be styled the same, with no unique classes or ids making customizing difficult, barring some “.page-id” CSS styling, or another workaround. That’s a lot of manual work. If you’re running into the same issue we’ve got the solution right here.

Creating Unique CSS Classes for Sidebars

We utilize the advanced edit options through the Custom Sidebars plugin to create unique headers. We primarily use this option to create a specific style of header (font-size, color, font-weight, etc.) that is consistent across  the entire sidebar. Your choice of styling may differ across each header, each sidebar and across the entire site.

After installing and activating the plugin go to Appearance > Custom Sidebars. Create a new sidebar, name it and then choose the edit option. Use this code to create unique headers for each widget and each sidebar.

Custom Sidebars Backend Code

The Code You Need

This code will give each header a class (we used h2’s and “widgettitle” in this example. Feel free to change that.) as well as create a unique id for each widget in each sidebar. This simple chain allows you to edit each one with simple CSS. Here’s an example of how the code will change, broken down by each important step.

Custom Sidebars Header Customization

Image Annotations

  1. These text boxes have titles (pizza, pizza pie) associated with them as well as filler text. However, there is currently no styling.
  2. The original code offers no way to differentiate between each text box, widget and custom sidebar. This makes for messy page-id CSS which would not be easy to mass reproduce.
  3. After adding the code above you can see id’s have been added to each text widget and a class has been added to the widget title.
  4. Here is an example of the simple CSS you could write to change the titles of each widget within each custom sidebar you create.
  5. You can see the results. We made each widget title an h2 and then made the top one red. This is a simple change for the demonstration. With this technique you could implement far more intricate styles for these headers.

Now you’ve got sidebars custom to each page and headers customized to each sidebar. This simple addition to your sidebars will make designing unique, targeted pages much easier.

Tell us your favorite ways to customize your sidebars in WordPress in the comments below!