Slight Under-the-Hood Improvements plus Jetpack Comments

You may not notice offhand, but we made some rather significant under-the-hood changes over the weekend. Despite often drooling like fan boys over the latest and greatest WordPress features, much of this theme has been hard-coded. For those of you who aren’t familiar with what “hard-coded” is, it means that the sidebar was just HTML in the theme’s sidebar template, not widgets, and the navigation menu was just HTML in the theme’s header template, not a custom menu. Why did we do this? Because it was easy, fast, and we didn’t need to change anything.

Well, as WordPress continues to mature, more features are implemented as widgets. As we began desiring some of these, it became clear that the sidebar needed to be widgetized, and the existing modules (or non-widgets) needed to be switched over to widgets. Are you stuck with a theme that isn’t widgetized? If so, don’t worry, it’s really easy to widgetize your theme, and most existing HTML modules can simple be added as a text widget.

As for custom menus, we’re starting to see new features that rely on established menus. For example, Jetpack’s new mobile theme uses your primary custom menu. Since we just switched to that mobile theme, it was time to do away with the hard-coded menu too. Adding custom menus to your theme is a bit more complicated, but we’ll get to that later.

The last bit of the customization, and probably the most noticeable, was adding support for Jetpack Comments. I know, Jetpack Comments is supposed to work out of the box, but I think this theme is a bit older than they intended. If you activate Jetpack Comments and don’t see any change, check your theme’s comments template, and replace the old-fashioned comments form elements with the super-handy comment_form tag.

So, what’s the best way to do all the above? Well, I don’t proclaim to be an expert, which is why I always consult the work that has already been done by experts, like the two most recent default themes, Twenty Eleven and Twenty Twelve. In my humble opinion, the best way to tackle upgrades like this (and really the best way to learn almost anything) is to directly compare your theme’s template to a more modern theme’s template. Once you isolate the area to change, the differences should be readily apparent, and the reason for the change becomes obvious (maybe after a bit of extra Googling). Beyond that, it’s just a few extra minutes of trial and error as you basically copy and paste the good code and make it work with your overall design. It’s fun, and you learn a lot while doing it.