Twotoneby AudioTheme

Getting Started

After activating Twotone, start tailoring it from the Customizer, where you’ll find tools for adding a logo, changing the background, assigning Custom Menus, specifying front-page settings, managing the site-wide audio player, and more.

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

Adding a Logo

Your site’s title and tagline will be displayed in the header area of Twotone by default, but you can easily replace the text with your own logo or custom image in the Customizer:

  1. Go to the Customizer.
  2. Open the Site Identity panel.
  3. Upload a new image in the Logo field.

You may also customize the site title and tagline text in this section, or hide them to display the logo by itself.

Header Image

Twotone displays a header image at full-width across all pages. To customize the main header image go to Customize → Header Image.

Unique Header Images For Each Page

By default, the custom header image will display on each page. Twotone also offers the ability to use a featured image as the header image for a particular page.

Note: Child (sub) pages of the Record and Video Archive page templates will not display their featured image as a header image. These pages will show the featured image of their parent page, or default to the main custom header image.

Header Overlay Opacity

To ensure visibility of text in the header, we’ve added a setting to increase or decrease the background color over the header image. This overlay color can be adjusted by changing the “Header Overlay Opacity” slider in the “Theme Options” section.

Twotone: Header Opacity Setting

Homepage Setup

wpcom-twotone-homepage

Your homepage is one of the first pages most visitors see when browsing your site. While your homepage shows a list of your latest posts by default, Twotone also allows you to select a static page instead. If you’d prefer that, follow the instructions for setting up a Static Front Page.

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 easily find it.

Customize the homepage further by adding widgets to the homepage widget area.

Homepage Featured Image

To display a large image on the homepage, you’ll need to set a custom header image via the Customizer. You can choose to display the header full height by going to Customize → Theme Options and check the Enable full-height header on front page checkbox.

Homepage Intro Content

To add intro content to your homepage, go to Customize → Theme Options and use the “Front Page Intro Content” open to enter your text.

Homepage Content and Widgets

To add widgets to the homepage, go to Customize → Widgets: Home.

Site-Wide Audio Player

Twotone: Music Player

Highlighting a few choice tracks in the header of your site with Twotone’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. Click the Theme Options section to expand it.
  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 blue Add to audio playlist button.
  6. Click the blue Update audio playlist button.

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

Front Page Player Only

If you’d like the player to show on the front page of your site only, go to Customize → Theme Options and check the box for Limit player to front page only.

Records

wpcom-discography

Twotone 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.

Record Archive Columns

Twotone has the option to display your records in one, two, or three columns on the record archive page. To specify the number of columns, go to Customize → Theme Options and select a number in the “Record Archive Columns” setting.

Twotone: Single Column Record Archive Layout

When displayed in a single column, each entry displays the record artwork to the left of the record title and a custom excerpt.

Single Record Pages

Twotone: Record Content Layout

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.

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

To purchase links below the record playlist, insert them in the content area of the page. To create button-style links, 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

wpcom-videos

Twotone 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. Find the Page Attributes box and select the “Video Archive” option in the Template field.
  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. Find the Page Attributes box and 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.

Video Archive Columns

Twotone has the option to display your videos in one, two, or three columns on the video archive page. To specify the number of columns, go to Customize → Theme Options and select a number in the “Video Archive Columns” setting.

Twotone: Single Column Video Archives.

When displayed in a single column, each entry shows an embedded video, the entry title, and a custom excerpt.

Photos

Create a new page for your photos and insert a Gallery to display them.

Custom Menus provide granular control over the links that appear in the various navigation areas on your site. Twotone supports two menu locations: the Primary Menu navigation and the Social Menu (the social icons at the bottom of each page).

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

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

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

Widgets

Twotone features three widget areas.

Home Widgets

The home widgets area will only show on the front page of your site and are displayed in a three-column grid.

The Footer widget area is located at the bottom of every page on the site, just above the credits or the Social Menu. Any widgets added to this area will display in a three-column grid.

Page Templates

Page templates allow Pages to function differently depending upon the page template set. A page template can be set under Page Attributes → Template when editing a page in your dashboard.

Mid-Width Template

With the Mid-Width page template option, you can create a full-width page with a maximum width of 960px.

Full-Width Template

With the Full-Width page template option, you can create a full-width page with a maximum width of 1280px.

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 Record Archive page template, in which grid item and archive setup is the same. See record archive setup info.

Additional Customizations

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

Full-Width Background Images

The option to display the background image as a full-screen image can be found at the bottom of the custom background image settings in the Customizer.

Archive Content

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

  • The “Full Text” option will display the post content in full; this is the default setting. The post content may still be truncated using the More Tag.
  • The “Summary” option will display an excerpt of the content. WordPress will create an automatically generated excerpt from the post content. Alternatively, a custom excerpt can be created using the Excerpts setting.
  • The “Custom Excerpt” option will display text explicitly added as an Excerpt, otherwise, no content will be shown.
  • The “No Content” option will not display any post content, leaving only the post title and entry meta.

Archive Images

The Archive Images setting offers more control over how featured images are shown on archive pages of your site. By default, featured images are not shown on archive pages, like your blog posts page. You can display an image on this page by choosing the “Post Header” option under Archive Image settings. This will display the featured image in the posts header, above the content.