Anthem

Learn how to set up the Anthem WordPress theme.

Using Keyboard Navigation

Anthem supports keyboard navigation on your home page (to move between newer/older articles) and on galleries (to move between images). Just use the left and right arrow keys to shift between pages or images!

Using Post Formats

Anthem takes full advantage of the new custom post formats in WordPress 3.1. Whenever you create a new post, choose an appropriate post format, and follow the instructions below.

Posting articles

Articles work just like regular WordPress posts, just leave the post format set to Standard and go!

Posting images

Select Image from the post format box and use the Set Featured Image link in the Featured Image box.

Posting galleries

Select Gallery from the post format box. Then, upload your image files via the Add Media button. Insert your gallery into the content, and add a description to the content (optional). Your images will now show using Anthem’s native slideshow display.

Would you like to autostart your gallery? If yes, please read through the section of this theme’s documentation about enabling gallery autostart.

You can also optionally show image captions with the slideshow.

Of course, you can also use the default WordPress gallery in the Standard post format.

Select Link from the post format box and type your link title into the post content editor. Now highlight the text you just entered and create your link by clicking the “link” icon in the editor. The actual post title will be ignored and only the linked text you enter will be shown.

Posting audio

Select Audio from the post format box and upload your audio files via the upload media icon at the top of your post editor. You may also add a description for your audio files in the post content area.

Posting video

Select Video from the post format box. Make sure you are editing in HTML mode, and paste your embed code into the post content area.

Posting quotes

Make sure your content editor is empty to begin with. Then, select Quote from the post format box. The content editor will be populated with a space for your quote as well as the name of your source – fill in this template, and your quote will be styled correctly.

Posting chats

Make sure your content editor is empty to begin with. Then, select Chat from the post format box. The content editor will be populated with a template for your chat, which you can fill in with your own content. If you need to add more lines to your chat, change to HTML mode on your editor, and copy/paste however many <li class="odd"><span class="label">Person A: </span>Said something</li> lines you need. Just make sure to alternate ‘even’ and ‘odd’ on the classes to get proper styling.

Options

Logo and Header

You can upload a custom image to appear in the header, either above the site title, or replacing it. The ideal image size is a square, 240 pixels on a side.

Did you know that Surf Office, Postmatic, Yeah Dave, and over 700,000 small businesses run their websites with Make, our free WordPress page builder. Discover the Make page builder now.

  1. Navigate to Appearance → Theme Options.
  2. Click on the Logo & Header section.
  3. Click Upload Image and follow the instructions.
  4. After the image upload has completed, choose “Full Size” and click Insert into Post.
  5. If you would like the image to appear as a circle (like in the demo), check the box next to “Add border radius to photo”.
  6. To have the image replace the site title, check the box next to “Hide site title”.
  7. Click Save Settings.

Post Display

Anthem allows easy customization of various elements on single post views:

  1. Navigate to Appearance → Theme Options.
  2. Click on the Post Display section.
  3. Check the appropriate boxes to hide or show elements on the single post view.
  4. Click Save Settings.
  1. Navigate to Appearance → Theme Options.
  2. Click on the Footer section.
  3. Enter the full links to your Twitter, Flickr, Google+, and Facebook pages, and you’ll have icons in the footer for each.
  4. Click Save Settings.

Use the slideshow in posts and pages

To enable a slideshow on a page or non-gallery post, add your gallery; then, paste the following shortcode into your page content, replacing the default [gallery] shortcode:

[gallery slider="true"]

Using the regular [gallery] shortcode will remove the slider styling and return to the default WordPress gallery.

To autostart a slideshow within a gallery post, add your gallery; then, paste the following shortcode into your post content, replacing the default [gallery] shortcode:

[gallery autostart="true"]

To autostart a slideshow within a page template or non-gallery post, include autostart="true" into the shortcode, like so:

[gallery autostart="true" slider="true"]

By default, any text added to the Caption field of images in a gallery slideshow is hidden. To have these captions appear beneath their images as the slideshow cycles, you simply need to add captions="true" to the gallery shortcode, similar to the autostart option above. So in a gallery post the full shortcode would look like this:

[gallery captions="true"]

In a page template or non-gallery post it would look like this:

[gallery slider="true" captions="true"]

And, of course, this option can be combined with the autostart option too:

[gallery slider="true" captions="true" autostart="true"]

Image styling

By default, WordPress wraps everything in a <p> tag unless it is wrapped by something else. <p> tags within blog posts are limited to a width of approximately 65% (via Anthem’s CSS). To get an image within blocks of text to expand the full width of the article you’ll need to upload or use an image 600px wide (or larger) and wrap it like so in the HTML editor:

<div class="large"><img src="/path/to/image/image.jpg" alt="image" /></div>
Using the “large” class isn’t really necessary; it just needs to be wrapped in a div so WordPress doesn’t add paragraph tags.

To float images in a standard post and utilize Anthem’s custom styling you’ll need to wrap images with a <div> in HTML editing mode, like so:

Right:

<div class="r-float"><img src="/path/to/image/image.jpg" alt="image" /></div>

Left:

<div class="l-float"><img src="/path/to/image/image.jpg" alt="image" /></div>

List styling

By default, Anthem adds bullets and numbers to unordered <ul> and ordered <ol> lists. You can remove bullets or numbers from lists by adding a class of “normal” in HTML editing mode.

<ul class="normal">
    <li>List item</li>
    <li>List item</li>
</ul>

Image dimensions

Where a height is not provided, feel free to insert your own custom value.

Blog post image:

  • Width: 880px

Blog post image large:

  • Width: 921px

Logo image:

  • Width: 140px
  • Height: 140px

Sign in and ask a question