Make Cool Sidebars in Wordpress using the PHP Code Widget

Using the WordPress PHP Code Widget to Make Cool Sidebars


(This post is meant more for our WordPress readers than general clients. The techiness of it might not be relevant to any but website designers…)


The use of dynamic sidebars and menus in WordPress is undoubtedly one of the content management system’s great features. One default widget I find myself using frequently for sidebars is the Text Widget. The Text Widget is great because it gives designers the opportunity to make sidebars out of simple text and accepts HTML. So, for instance, styling static lists of links is a breeze with the Text Widget, as is any task requiring which is text/HTML based. In a recent project for a New York City client, though, I needed to create a sidebar that did more.

The client had multiple categories of content, which they needed to be sortable by category. Basically, their site contains multiple types of “blog posts” which consist of photo galleries and news stories. These two major categories needed to be separated into two individual archives and made selectable in two stacked sidebars. (See below…)

Using Sidebars to Sort by Category
</br >

Using just the Text Widget, then, wasn’t going to do the trick here. Rather, I needed a sidebar widget which would allow me to insert the PHP code necessary to find posts archived under the categories “news” and “photo galleries” and produce a list of links to the appropriate posts.

Luckily, there’s a WordPress Plugin written specifically for this task. The PHP Code Widget, allows developers to embed PHP into their widgets, considerably extending the possibilities of a text widget.

Using WordPress function “query posts,” along with the PHP Code Widget, then, allowed me to create the sidebars shown above. The code I used follows:

Code Snippet PHP Widget
</br >

As I note in the annotation, there’s basically two things going on here. The query_post function is sorting the output of permalinked titles, based on the category number assigned to those posts. So, in this case, all my Gallery listings are assigned a Category ID of 20. The function, then, is making a list of titles and hyperlinks of only category ID number 20 and setting a limit of 10 post titles it will display.

It’s pretty simple stuff, when you understand what’s going on. But pretty powerful stuff, at the same time.

Post Navigation