Hum

Hum

Meet Hum, a light, responsive theme designed to show off a stream of posts, quotes, and images. Based on Twenty Eleven, Hum lets your content stand out with support for multiple post formats, a Showcase page template, space for a logo, a sleek fixed left sidebar and custom menu, several widget areas, and more!

Custom Menu

The handy fixed* sidebar with custom menu keeps your site navigation at the ready. You can configure this by going to Appearance -> Menus and assigning a Primary Menu.

* Note: the fixed style means a small number of menu items work best in this area — menus with lots of items may run off the edge of the screen, rendering them inaccessible. Also, long site titles or site titles with long words may get cut off at narrower screen sizes — this theme works best with site titles that are fairly short in length.

Widget Areas

Hum supports one Main Sidebar just after the content, three widget areas in the site footer, and an additional widget area (Showcase Sidebar) on the Showcase page template. You can configure these areas by going to Appearance -> Widgets.

Showcase Page Template

To get started with the custom Showcase page template you need to create a page for it. Choose the Showcase Template under page templates in any page, save it, and assign it as the front page in Settings → Reading. This will change your site from the standard Hum blog look to Hum’s fancy showcase. You still have your regular blog list at hand for several views, like categories, searches, and tags, and you can specify another page to work as your blog if you want to.

To add posts to the Featured Post section just mark some posts as Sticky. That’s all there is to it.

To have a big featured image, you need to use an image that is at least 740px x 288px. Also, make sure you have a set size for Large image under Settings → Media that allows for such sizes.

To populate the sidebars’ Ephemera Widget, you can make use of the Aside or Link post formats when you create a new entry (or convert an old one).

And if you want an introductory text message, just write it in the content of your Showcase page and it will appear on your site. And that’s it!

Custom Header and Background

You can configure a flexible-height custom header that will display in the left sidebar by going to Appearance -> Header – this feature is particularly useful for a logo or other small image:

Logo space

You can also change the background image or color by going to Appearance -> Background.

Pull Quotes

You can dress up your posts by “pulling” blockquotes out of the content with a class of “pull” and “alignleft” or “alignright”. You can also add a class of just “pull” if you want a more dynamic blockquote that extends out on both sides. Here are some examples of how to do that in the post HTML editor.

</pre>
<blockquote>
A normal blockquote</blockquote>
<blockquote class="pull">
A bolder blockquote that extends into both margins</blockquote>
<blockquote class="pull alignleft">
A bolder blockquote that floats into the left margin</blockquote>
<blockquote class="pull alignright">
A bolder blockquote that floats into the right margin</blockquote>
<pre>

Quick Specs (all measurements in pixels)

  1. The main column width is 628 except in the Showcase page template where it’s 740
  2. The main sidebar width is 627
  3. The footer sidebar widths are 627 with one sidebar active, 302 with two sidebars active, and 194 with all three sidebars active. (Due to the responsive design, these widths will change depending on the size of the screen.)
  4. The Showcase page sidebar width is 627