Hammervon AudioTheme

Getting Started

After activating Hammer, you can begin setting it up from the Customizer, where you’ll find tools to add a logocustomize colorscreate menusset up the front page, and more.

Detailed instructions for working with Hammer’s unique features are included below. If you run into any issues or have a question, you can find additional help by:

Homepage

The homepage, or front page, is typically one of the first pages most visitors see when visiting your site. While it shows a list of your latest posts by default, Hammer includes a few options that allow you to customize the layout and information displayed.

Read the documentation for setting up a static front page if you’d prefer not to have your blog on your homepage. You’ll also want to create a page for displaying your latest blog posts. Be sure to add the this page to your menu so your visitors can find it.

Hero Image

The large banner images shown on the homepage of the theme demo can be added by setting a featured image on the homepage.

Hammer: Hero Image

Setting a featured image for other Posts and Pages will display as a large hero image at the top of the page.

Front Page Grid Content

The page set as the static front page uses the Grid Page template. This template will display child pages in a block grid display. This is how the three column grid below the featured image showcases the Biography, Record, and Video pages.

Menus

Custom Menus provide granular control over the links that appear in the various navigation areas on your site. Hammer supports two menu locations: the Primary Menu navigation and the Social Links Menu. Support for displaying breadcrumb navigation is also included.

Hammer: Menus

You can create and assign menus by going to Customize → Menus.

Primary Menu

The Primary Menu appears below the site title and logo. On smaller screens, the menu is displayed using a menu toggle button.

The Social Menu displays links to your social media profiles, such as Twitter and Facebook, as icons. Each menu item can be added as a Custom Link. Hammer will automatically display the correct icon based on the link URL.

The following icons are bundled in Hammer for use in your Social Menu: Amazon, Apple/iTunes, Bandcamp, Facebook, Flickr, Google Play, Google+, Instagram, Last.fm, LinkedIn, Pinterest, ReverbNation, SoundCloud, Spotify, Tumblr, Twitter, Vimeo, WordPress, and YouTube.

Breadcrumb Navigation

Breadcrumbs are used to facilitate navigation apart from the main navigation menu. It is a list of elements in the form of links that tell the site visitor about their location on the site. The breadcrumb navigation can be enabled via the Customizer:

  1. Go to the Customizer.
  2. Click the Theme Options section to expand it
  3. Check the Show breadcrumbs on single pages setting.

When enabled, a breadcrumb navigation will display below the Primary Navigation for all Pages (excluding the homepage). See screenshot above for an example of how and where the breadcrumbs will be shown.

Widgets

Additional content can be added to your site using widgets. Hammer includes two unique widget locations: the Pages Sidebar and the Footer widget area.

Hammer: Widget Areas

Pages Sidebar

The Pages Sidebar widget area will display widgets on Pages only. Use the widget visibility feature to show/hide widgets on certain pages. On larger screens, the Pages Sidebar displays to the right of the content, otherwise, it will display in a block grid layout below the content on smaller screens.

Widgets added to the Footer widget area will display on all pages in three columns on larger screens. As the screen sizes decreases, the number of columns adjusts as needed to better display the content.

Site-Wide Player

Hammer: Audio Player

Highlight a few choice tracks in the header of your site with Hammer’s audio player. To use this feature, you will need the WordPress.com Premium or Business plan.

Here’s how to enable the audio player:

  1. Go to the Customizer.
  2. Open the Theme Options panel.
  3. Click the Edit Playlist button under the “Player Attachment IDs” heading.
  4. Select previously uploaded audio MP3 files or upload new files.
  5. Click the Add to audio playlist button.
  6. Click the Update audio playlist button.

This will add the attachment ID for each audio file to the Customizer setting. You should now see an audio player similar to the one shown in the theme demo.

Records

Hammer: Discography

Hammer allows you to add records to your site and display them in a visually appealing grid.

To begin adding your records, you first need to set up the Record Archive:

  1. Create a new page.
  2. Give the page a title (we used “Music” in the demo).
  3. Find the Page Options box and select the “Record Archive” option in the Template field.
  4. Click the Publish button to create and save the page.

You can optionally enter a short introduction in the main content editor. Now that your archive is set up, you can start adding records:

  1. Create a new page.
  2. Enter the title of the record.
  3. Set the record’s cover art as the Featured Image.
  4. Change the Published date to the date the record was released.
  5. Find the Page Options box and change the Parent to the page you created as the Record Archive (this is important).
  6. Click the Publish button to create and save the page.

Now when you visit your Record Archive page, you should see your first record listed. Continue adding records by following the same steps. Always be sure to set the “Parent” page as the Record Archive page.

Single Record Pages

Hammer: Single Record Callout

Record Artwork

Set the record’s cover art as the Featured Image.

Record Playlist

Audio is added to single record pages by inserting a playlist in the editor. A playlist will list a group of tracks and allow your visitors to preview your music.

Hammer: Single Record Editor

Note: You will need the Premium or Business plan to use this feature.

You’ll notice in the theme demo, we display additional details for each record along with purchase links. You can add this content and more by adding a custom excerpt. To create button-style links as shown in the screenshot above, use basic HTML to add a special button class using the HTML/Text editor. Here is an example of the record details and purchase links used in the theme demo.

<a class="button" href="https://www.apple.com/itunes/">iTunes</a>

You can use the example code above to get started. Change the text and href attribute (link) to your own info.

Videos

Hammer: Video Library

Hammer also allows you to add videos to your site and display them in a visually appealing grid.

Before adding your videos, you need to set up a Video Archive page:

  1. Create a new page.
  2. Give the page a title (we used “Videos” in the demo).
  3. Select the “Video Archive” option as the Template.
  4. Click the Publish button to create and save the page.

You can also enter a short introduction in the main content area of the page. Now that your archive is set up, you can start adding videos:

  1. Create a new page.
  2. Enter the title of the video.
  3. Enter a URL to the video from a supported service in the main content editor.
  4. Set a screenshot of the video as the Featured Image. Video thumbnails are displayed in a 16:9 aspect ratio and will be cropped from the top down.
  5. Change the Parent to the page you created as the Video Archive — this is important.
  6. Click the Publish button to create and save the page.

Now when you visit your Video Archive page, you should see your first video listed. Continue adding videos by following the same steps; always be sure to set the Parent page as the Video Archive page.

Single Videos

Single video pages will grab the first video from the content area and feature it just below the video title. There are a number of supported video services which can be used.

Hammer: Single Video

A video can be added by simply inserting the video URL into the content area:

hammer-single-video-editor

Page Templates

Page templates allow Pages to display or function differently. A page template can be set in the Page Options meta box when editing a page in your dashboard.

Grid Page

The Grid Page template is a page template that displays child pages in a visually appealing grid showcasing a featured image and page title. The display of this page template will look exactly like the Video Archive page template, in which grid item and archive setup is the same. See video archive setup documentation.

The Grid Page template is used on the front page of the theme demo.

Full Width Template

The Full-Width template is a page template that displays content the full width of the content area. A full-width page has a maximum content width of 1120px.

No Sidebar Template

The No Sidebar template displays just like a default page, however, like the title suggests, without a sidebar.

Additional Customizations

More theme-specific options can be found in the Theme Options section of the Customizer.

Archive Content

The Archive Content setting offers more control over how the content is displayed on archive pages of your site. The options are:

  • Block Grid – Display post content in a Masonry grid layout as shown in the theme demo.
  • Full Text – Display the post content in full; this is the default setting. The post content may still be truncated using the More Tag.
  • No Content – Disables the post content, leaving only the post title and entry meta.

Archive Images

Choose to display featured images on archive pages by enabled the “Show featured images on archive pages.” setting.