Zoe is a free, clean WordPress blog theme with a simple two-column layout, options page controlling custom header options and social submission buttons, custom menu, widgetized sidebar, and optional sidebar-free page template. The layout is SEO-friendly, using H1 header tags for single post page titles and H3 on index/archive pages. View a full-sized screenshot. You can download Zoe here and it’s been submitted to the WordPress theme site for approval. It passed the initial test, but now must be looked through by humans.


If you use Zoe, why not donate to support the project development and future improvements? You can do it by clicking the Donate button below:

Using Zoe

The Zoe theme works right out of the box and has an options page at Appearance -> Zoe Options. Here are notes on the available options and a few more detailed notes on ways you can use the features.

A palette of the theme color scheme can be found here: Zoe theme colors and some complimentary, triadic, & analogous colors can be found here: Zoe complimentary colors.

On the Options Page

The options page allows you to manage header image/tagline and the built-in social buttons.

Adding A Header Image

Zoe supports adding a header image through your dashboard. To upload a header:

  1. Go to Appearance -> Zoe Options
  2. Check the box under “Turn on Header Image.” If your image is 770x153px you won’t need to crop it or resize. If you need to resize the header image area to fit your image:
    1. In the two boxes below “Turn on Header Image” alter the numbers to fit the height and width of the header image you plan to upload. Do this before uploading the header. Header image area cannot be wider than 900 pixels without displaying awkwardly.
  3. Save Changes.
  4. Go to Appearance -> Header.
  5. Use the tools to upload and crop the image as necessary.
  6. Save. Your linked header image will appear in place of your blog’s name in the header.

To remove a header image, simply go back to Appearance -> Header and click the “Remove Header Image” button. If you aren’t using a header image, you should go back to Appearance -> Zoe Options and uncheck the “Turn on Header Image” box. If you leave it checked, your site will think it has a broken header image and may not render well in most browsers.

Deactivating The Social Icons and Adding a Twitter Username

Zoe includes icons for submitting posts to various social networking sites. You can deactivate the social bar through the Appearance -> Zoe Options page. If using a plugin, choose “Turn off ALL Social Buttons.” You can also opt not to display them on the blog’s home page or on WordPress Pages. You can also add your Twitter handle on the options page. If you do, “by @yourtwittername” will be included when people share your posts on Twitter.

Adding A Custom Menu

Zoe supports the built-in WordPress custom menus. To activate the header navigation menu:

  1. Go to Appearance -> Menus.
  2. Create and name your menu (whatever you want to call it).
  3. After creating your menu, you’ll see a box on the left labeled “Theme Locations.” It should read “Your theme supports 1 menu. Select which menu you would like to use.” Select “Nav Menu” from the dropdown box and save.
  4. Use the “Custom Links” box to add links to the menu and save when done. You can drag the links to reorder.

The menu will display on your homepage. If you don’t create a menu, the theme will simply list your site’s pages (using wp_list_pages).

Adding A Custom Default Gravatar

Want commenters without gravatars to have something classier than WordPress’s normal defaults? Zoe supports adding a default gravatar to your theme.

  1. Create a square gravatar that’s at least 60px by 60px (for best display).
  2. Save it as “mygravatar.jpg”
  3. Upload to the images folder in the Zoe theme. wp-content/themes/Zoe/images/
  4. Go to Settings -> Discussion, scroll to the gravatars section and select ‘My Gravatar’ from the list. Save.

Should you want to use a .png image, go to functions.php, locate the phrase mygravatar.jpg, and change the file extension to .png. Be very careful when editing functions.php

Author Bios on Archive Pages

The archives page for each author (accessed by clicking their name below the post title), include a brief bio section at the top. To make yours look its best:

  1. Have a gravatar (from gravatar.com) set for the e-mail address you used to create the account,
  2. Set first name, last name, or nickname in your user profile and select a nice looking version of it from the “Display name publicly as” dropdown,
  3. Add “Biographical Info” to the “About Yourself” portion of your user profile.

If you have all three set up, the archives page will display your avatar, attribute posts to your public display name, and include a short biography. If not, it’ll just show a normal header, the default gravatar, and no bio.

No Sidebar Page Template

Zoe includes a page template for removing the sidebar from desired pages (not posts). When creating the page, select “No Sidebar” from the Template dropdown in “Page Attributes” on the right.

Image Classes

Zoe is set up to use the basic WordPress image classes “aligncenter”, “alignleft”, and “alignright” (“center”, “left”, and “right” also work). It also includes two classes for effect. img class=”pad” creates a 4px padding of #F4F2F0 (which can be changed in style.css). img class=”shadow” creates a shadow effect of #D6CEC4 (also can be changed in style.css)

I hope you enjoy using Zoe! Feel free to ask questions below or contact me. I can’t guarantee theme support, as this is a free theme and I’m a graduate student, but I’ll do my best to help.