Widgetized sidebars can go anywhere, and in some cases, you may want to use them…
Better Text Widget adds a small improvement to text widgets in WordPress. It adds a unique class name to each instance of a text widget in your sidebar based on the title of the widget to allow for easier CSS customization.
What’s It Do?
Basically, any text widgets that you add to a WordPress sidebar will have a new class name attached to it. The class name is based on the title of the Widget itself. So, if your title is “Widget Title” then the class for that widget will be “widget-title.” The idea is that text widgets might be used for a variety of different things, and it may be necessary to attach unique styling to each. With Better Text Widget you can use the new class name to restructure the widget’s styling without affecting any of the others.
How’s It Work?
When installed, Better Text Widget will start working right away. Any text widget you have will inherit a class based on the class name. If your widget does not have a title, then no class name will be assigned. If a widget is titled “My Widget” then the HTML markup will look like this:
<aside id="text-3" class="widget widget_text my-widget"> // Widget Content </aside>
That means you can use the “my-widget” class to style the individual widget however you want. Let’s say we want to make the title green and add a large top margin above the actual content. We would use this CSS.
.my_widget .widget-title { color: green; } .my_widget .textwidget { margin-top: 3em; }
Since we are using the “my-widget” class, other text widgets on the page will not be affected. If you are a front-end developer, this can be very, very useful and I’m sure there are dozens of manipulations that can be done that are beyond the scope of this tutorial.
Costs, Caveats, Etc.
Better Text Widget is free and has been updated a few times to weave it into the WordPress API more efficiently. With no settings and only a single piece of functionality though, it is not updated much. If you’re having a problem with it, please visit the support forums.