Customizing menus and widgets for my new WordPress theme
I have a history of somewhat routinely tweaking or fully redesigning my theme, but it’s usually just a matter of moving some elements around, changing a colour here and there and calling it a day. With the release of WordPress 3.0, I took a slightly different approach this time. This release brings with it some major changes and I decided to begin digging into WordPress a little more deeply than I usually do this time.
In particular, I decided it was high time I really began grokking widgets to a degree I hadn’t before and I was determined that the new WordPress menu system would be my friend. This meant a different approach to the usual. I’ve built a number of sites with WordPress where I presently work, and for clients in the past. As we move more deeply into WordPress for blogs and other projects at BCIT, I felt that leveraging the platform’s features for my personal use would be useful.
Simple menus – different mindset
I’ve always written custom menu code in the past. For the most part, I did this because I could ensure that I maintained states for styling on families of pages and I could include exactly what I wanted to in various areas of page real estate. However, I’ve always been bothered by this to some degree because, once I’ve finished designing a theme, I’m still opening up my code editor and FTP-ing something or other to the server as I make a tweak here and a tweak there, as opposed to simply updating my site through the admin panel.
Taking a look at the two menus in the header area above, the upper-most menu contains the core static pages of the site. Originally when styling this theme on my test server I was worried that I’d have a hard time preserving parent menu styling when on a child page of that page. However, with the automatic generation of current_page_parent and current_page_ancestor classes, I can easily make my menus behave just the way I want and not write a single line of conditional PHP menu code. The ability to build any number of custom menus and use them wherever you want, is a game-changer.
While I’ve usually implemented journal categories and archives in drop-down or bullet sidebar lists for all blog and archive pages, I decided I would reduce the number of categories significantly and implement them as the lower of the two header menus above. I don’t use tags and this also helps ensure that I use a few key categories or topics for my writing, and that those categories are always on top for visitors to find. I couldn’t find an easy way to implement a label for this menu, even looking closely at the parameters and arguments for the wp_nav_menu function.
My hardcoded category menu label
What I ended up doing was placing a margin on the menu code and wrapping it in another div, with which I hardcoded the label for the menu (pictured at left). Imperfect I admit, but perhaps I’ll be able to figure out how to do it with only the menu code, as I know I can set the wrapper div for the menu, but just haven’t found a label argument so far.
For a simple explanation of how to implement 3.0 menus in your theme, check out Digging Into WordPress’s explanation.
The trouble with widgets
Even when widgets first came out, I resisted the urge to use them on my personal site because I like more contextual elements on my pages and have generally preferred to control things with PHP. The difficult-to-style/control markup generated by functional widgets, coupled with the fact that widgets would be site-wide once implemented, turned me off using them. I was also a little unclear about how to widget-ize various areas of my theme without screwing things up.
If you’re looking for a simple explanation of how to add widgets to your WordPress theme, the guys at Digging Into WordPress have done it again. I found this article simple and to-the-point. It allowed me to enable widgets in my existing theme through the functions.php file and then place the widget code in the various places in my theme where I want them to appear. I addressed most of my issues around styling widget markup by trial and error. Where the WordPress default or plugin widgets I tried didn’t produce the markup I wanted I often got around this by inserting WordPress functions directly in the widgets, just as if they were coded into my theme’s sidebar.php file.
You may be saying, “That’s all well and good, but you can’t run PHP code in your widgets.” You’d be right, unless you first enabled the handy little ExecPHP plugin, which I’d recommend being careful with, as it allows you to execute PHP in posts, pages and widgets.
Contexutalizing widgets
While this fixed most of the issues I had with how widgets worked and styling their markup, the concept still posed a significant issue for me, as I couldn’t control where they appeared and where they didn’t appear. It turns out that there are a few options that allow you more granular control of where widgets will appear on your site. In my case, I wanted a fat footer with some Flickr photos and couple of my external feeds to appear only on my homepage, while I generally have a different sidebar for posts, archives, static pages, pages with children and my homepage, to name a few.
When I first started looking for ways to make widgets appear conditionally, I stumbled upon what I thought was the perfect solution in the Widget Context plugin. When editing a widget, a large second panel appears below the widget content which allows you to include (or exclude) the widget in any or all of your theme’s templates via checkboxes, or to select pages on your site by URL (see below).
The Widget Context plugin editing panel
This implementation makes sense to me, as setting the options as you create or edit the widget works well and so does the plugin, provided you only use the checkboxes. The real power in the plugin is the ability to use specific URLs for widgets on your site, if it worked. I’m not sure if it’s due to the fact that this plugin has not been updated since before the release of WordPress 3.0, but implementing by URL doesn’t work, and having to live with templates as the deepest level of widget granularity doesn’t allow you to override widget appearance on a page-by-page basis if needed.
As I did a little more searching, I came across Kyle’s post about Shiba’s Custom Widgets plugin. That led me to make my way to Shiba’s own site, where I found a lot of good WordPress plugin work happening.
In large part, it does just what Widget Context does, but through a different type of implementation. It adds new widget creation, management and options links and, frankly, having duplicate widget panels (and several instances of the same widget in them) is a little confusing until you get used to the concept. What I really like about it, though, is that the granularity of widget control is perfect and, when you want to override the template settings you do so through the post, page or category editing panel. In other words, using Shiba’s Custom Widgets, you can place widgets exactly where you want them on your site, provided you’ve enabled widgets in that part of your theme and factored the widget into your CSS.
In closing and next steps
I still have a few pages to whip up, but most of the work is done. What I like is that I finally dug into a few things I wanted to and found that, with a little sleuthing, I was able to do pretty much exactly what I wanted despite my old-school attitude that I needed to hand-code all the custom stuff. I can build the menus I want with the styling I want, and I can build the widgets I want, styled as I want and placed where I want. I’m really looking forward to exploring more menu and widget customizations as we start using WordPress more and more at work.
August 22nd, 2010 at 10:50 pm
[...] James Wanless » Customizing menus and widgets for my new WordPress theme [...]
August 22nd, 2010 at 10:56 pm
[...] Excerpt from: James Wanless » Customizing menus and widgets for my new WordPress … [...]
August 22nd, 2010 at 11:02 pm
[...] View original post here: James Wanless » Customizing menus and widgets for my new WordPress … [...]
August 22nd, 2010 at 11:39 pm
[...] this article: James Wanless » Customizing menus and widgets for my new WordPress … Share and Enjoy: Posted in WordPress Tags: James Wanless, wanless « NEUMANIA.net » Blog [...]
August 22nd, 2010 at 11:52 pm
[...] James Wanless » Customizing menus and widgets for my new WordPress theme [...]
August 23rd, 2010 at 12:00 am
[...] the rest here: James Wanless » Customizing menus and widgets for my new WordPress … Share and [...]
August 23rd, 2010 at 10:00 am
[...] This post was mentioned on Twitter by All WordPress news and James Wanless, Progressive Bloggers. Progressive Bloggers said: #cdnleft #cdnprog Customizing menus and widgets for my new WordPress theme (James Wanless): I have a… http://dlvr.it/47VKQ #cdnpoli [...]
August 26th, 2010 at 7:53 am
Glad my post could be of help!
Let me know if you need anymore help with the Shiba Widgets. They are amazing.
~Kyle~
October 19th, 2010 at 11:44 pm
[...] the rest here: James Wanless » Customizing menus and widgets for my new WordPress theme Tags: result, [...]