Overview

Information described in this documentation will give you an idea of how to setup your site to look and function like the theme demo. View the changelog for more a detailed record of all the changes made to Twotone.

Getting Started

After installing and activating Twotone, you can jump in and customize your theme by going to Appearance → Customize. You’ll find options for adding a logo, changing colors, assigning custom menus, front-page settings, and more.

Detailed instructions for working with the theme’s unique features are included below, but if you run into any issues or have a question and have an active AudioTheme license, you can get in touch through the priority support form.

Twotone requires WordPress 4.1+

Adding a Logo

By default, Twotone will use your site title in the header. Alternatively, an image can be used in place of the site title by going to Appearance → Customize → Site Title & Tagline → Logo.

Colors

Header Color

The header color adjusts the color of items in the header: site title, site navigation, intro title, and audio player. Outside of personal preferece, changing the header color can help make text more readable with certain background colors and images.

Background Color

To customize the main background color — the default color is black — go to Appearance → Customize → Colors → Background Color. By default the background color only displays behind the header content; the main content of the theme is white and would require customizing the CSS.

Background Image

To customize the main background image you can go to Appearance → Customize → Background Image and upload a background image. The background image will only be visible behind the header content, however, the front page does have an option to make the header the full height of the browser, thus showing the entire background image on that page.

Custom Background Colors and Images Per Page

If you’re wanting to change the background image or color on a per page basis, we’ve added support for the Custom Background Extended plugin. This is a powerful little plugin allowing each page to have its own unique look.

Header Image

Twotone has support to add a header image which will display full width on all pages. To customize the main header image go to Appearance → Customize → Header Image.

Custom Header Colors and Images Per Page

If you’re wanting to change the header image or color on a per page basis, we’ve added support for the Custom Header Extended plugin. This is a powerful little plugin allowing each page to have its own unique look.

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 under the “Colors” section.

Header Titles

You’ll also notice when a header image is set there are titles that display over the image. These titles change with the page type. In most cases, the header title will display the content archive title if it has one. In other cases, like with Pages, the page title will be used.

Homepage Setup

Create a Page titled “Home” to use as your homepage if you don’t already have one.

Once your homepage has been created, you can head to Settings → Reading in your WordPress dashboard. Here you can set the homepage by changing “Front page displays” setting to the following:

1. Choose the “A static page” radio button.
2. In the “Front page” dropdown, select your “Home” page.
3. Click “Save Changes”.

The page set as the “Front Page” should now be displaying as your homepage. Continue reading to learn how to make this page display a large background image, audio player, videos, and upcoming gigs like the theme demo.

Homepage Background Image

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

In the theme demo, we utilized the Custom Header Extended plugin to set the header image on the front page.

Homepage Title / Intro Content

The homepage layout has the ability to add a short intro in the header. By default, the page title is used when the front page is set to use a staic page, otherwise, the Post archive title is used. A short intro description can be shown instead of the default title by going to Appearance → Customize → Theme Options and adding some content to the “Front Page Intro Content” setting; some HTML can be used.

Content and Widgets

Adding content to Twotone’s Home page is done by using Widgets. To start adding widgets to the homepage, go to Appearance → Widgets and look for the widget area labeled “Home”. Widgets can also be added to the homepage via Appearance → Customize → Widget: Home.

The homepage content will be shown above the widget area. When the homepage is set to display a full height header, the content will display in the header area above the image.

Site-wide Player

The site-wide player in Twotone relies on the Cue plugin. Cue gives you the ability to easily create custom playlists and display a site-wide player.

Once Cue is activated, go to Playlists → Add New to create a playlist. After creating a playlist in Cue, you can associate it with the Site-wide Player in the Players meta box while editing the playlist. It’s also possible to use the Customizer:

1. Navigate to Appearance → Customize
2. Click the Cue Players section to open it
3. Choose a playlist from the dropdown for the Site-wide Player setting

Front Page Player Only

If you’d like to add a player to the front page of your site and not on other pages, you can do this by going to Appearance → Customize → Cue Players and check the box to Limit player to front page only.

AudioTheme Support

Twotone requires the AudioTheme plugin to be installed and activated to function as shown in the theme demo. AudioTheme provides the ability to manage your Gigs, Venues, Records, Tracks, and Videos. The plugin can be downloaded from your account dashboard.

Gig, Record, & Video Archives

Be sure to read the documentation about setting up your archives to add links to your discography, gig, and video pages.

Gigs

Help on how to setup gigs can be found in the AudioTheme plugin documentation.

Records

Help on how to setup records can be found in the AudioTheme plugin documentation.

Videos

Help on how to setup videos can be found in the AudioTheme plugin documentation.

Photos

The photos page in the theme demo is displayed using a WordPress gallery shortcode. To display the photos in a tiled grid, you will need to install and activate the Jetpack plugin, then enable its Tiled Gallery module.

Once Jetpack is activated, you can create your Tiled Gallery by following these steps:

1. Go to Jetpack → Settings
2. Activate the Tiled Galleries module
3. Edit an existing page or create a new page
4. Create a new gallery with the “Tiles” option selected
5. Optional: To make all of your galleries tiled by default, go to Settings → Media in your site’s dashboard and select the checkbox next to “Display all your gallery pictures in a cool mosaic”

Blog

Similar to the homepage, you’ll need to create a page where your blog can be accessed. Create a new page titled “Blog” then head to Settings → Reading and select your blog page in the “Posts page” dropdown. Be sure to save your changes.

Menus

Menus provide granular control over the links that appear in the various navigation elements on your site. Twotone supports four different menu locations out of the box, which generally work like menus in standard themes if you’re familiar with them. If not, brush up on their use in the WordPress Menu User Guide in the Codex.

Start creating and assigning menus via Appearance → Menus.

Archive Menus

Twotone has menu locations for the Gig, Record, and Video archive pages. These menus can be used to add additional navigation for past gigs or maybe display different record types (e.g. Albums, Singles). An example of an archive menu can be seen on the theme demos Upcoming Gigs page, where we use the menu to display past gigs by year.

Adding a menu to one of these archive pages is the same as assigning a menu to the main navigation via Appearance → Menus.

Social Links Menu

The Social Links Menu in Twotone allows you to display links to your various social media profiles, like Twitter and Facebook, as icons. Each menu item should be added as a custom link. Twotone will automagically display the correct icon based on the link URL. For example, a link like http://twitter.com/audiotheme/ will display a Twitter icon because the theme has detected it is a Twitter 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.

Footer Widgets

Above the Social icons menu you can also add all your widgets to the three-column footer widget area. Just go to Appearance → Widgets to add widgets to the Footer widget area.

NOTE: The footer widget is desiged to display one widget in each column of the footer. Any additional widgets will wrap around, clearing the tallest widget.

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

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

Full Width

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

Customizing Twotone

Custom Fonts

Twotone has built in support for a few handpicked Google fonts. To start customizing fonts, go to Appearance → Customize → Fonts.

Typekit Fonts

If you have a Typekit account and would like to use the fonts included in one of your kits, you can follow the documentation for integrating custom fonts for Typekit.

Custom CSS

For minor CSS customizations, we recommend using a plugin that allows you to easily add your snippets in the WordPress admin panel. If you’re already using Jetpack, it ships with a Custom CSS module, otherwise, Custom CSS by Dev7studios is a good standalone option.

Child Theme

When looking to customize Twotone, you’ll want to make your changes via a child theme. You can download a sample child theme here.

Need Customization Help?

If you need help customizing your theme, you can find help in the following places

• Contact Anna DiTommaso for WordPress Services for Musicians.
• Fill out the customization request form.

Plugin Support

Twotone also has additional support and/or styles for the plugins listed below. Each plugin can be installed and activated from the Plugins screen in your WordPress dashboard.

• Cue
• CueBar
• Jetpack
• Custom Header Extended
• Custom Background Extended