One of the most common features people take advantage of when we’re being asked to build a WordPress blog are the widgets. Widgets are easy to apply in any blog and, for developers, easy to style.
You can find the Widgets on your dashboard, on the left sidebar; hover on Appearance and either click Widgets on the sub-menu that appears on the right or click on Appearance and select Widgets below it. This is where widgets can be applied just by dragging and dropping.
Now, the tricky part: What if the client wants to be able to change the widgets around without having the styles break? The solution is to try and make general CSS selectors that will apply to all widgets, regardless of what kind they are. Here are a few of the rules I’ve come up with to help me keep widgets dynamic for the user without breaking the styles.
- Place custom “widgets” in the same place as the others. If you know how to make your own widget to work from the theme’s plugins folder and activated through the dashboard, that is always the most dynamic and recommended way to go about it rather than hardcoding it into the sidebar template file. This way you can make a stylesheet dedicated to your plugin. If you are not creating your own widget in the theme’s plugin folder, and are hardcoding a custom widget into your theme’s template files instead, place it into the same structure as the other widgets. Usually in sidebar.php, you’ll see that #primary and #secondary are lists. Insert your custom widget in the list as if it was a WordPress native widget.
- Keep the same structure. Widgets are not only in a list, but they usually have a class like “widget-container” and titles like “widget-title.” Take advantage of these to make styles consistent throughout. To target specific widgets, then you can use the widget’s ID. Each widget will usually have it’s own specific ID.
- Apply margins on the bottom of widgets. To evenly space out widgets and to make sure that short content pages don’t zip up right underneath the last widget, I like to keep a consistent margin after the widgets, preferably on widget-container, or some bottom padding on the li’s of #primary or #secondary.
- Take advantage on the dashboard’s Widget’s menu. If it’s possible to use the “Custom Menu” or “Text” widgets that are already easily available and can be just as easily removed to build any custom widgets, it’s better to use take advantage of this feature rather than manually putting it into the sidebar.php.
- Don’t use #primary or #secondary in your CSS selectors unless you are positive that widgets aren’t going to change between Primary and Secondary Widget areas in WordPress’ Widget page.
By sticking to these rules, you can prevent headaches later and allow the user freedom to remove, edit and change the order of their widgets without conflicting with the design.
Share your comments below or tweet us @Pixafy!
