Ovationby AudioTheme

Getting Started

After activating Ovation, you can begin tailoring it 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 Ovation’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 the first page most visitors see when visiting your site. While it shows a list of your latest posts by default, Ovation 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.

Header Media

Adding an image or video to the top of the homepage is a great way to make a good first impression and set the tone for your site.

  1. Open the Customizer.
  2. Click the Header Media section to expand it.
  3. Upload a new image or enter the URL to a YouTube video.

A video header will only load on the homepage on screens that are at least 900 pixels wide and 500 pixels tall, to help your site load more quickly on mobile devices. The video will automatically play silently in the header area, and visitors will see a Play/Pause toggle button in the top right corner.

For the Header Video, you can link to any video hosted on YouTube. If you have a Premium or Business Plan, you also have the option to upload your own video in .mp4 format. Smaller file sizes will help make sure your site is loaded quickly, so try to optimize your file to reduce its size as much as possible. The absolute maximum file size you can upload is 8MB.

You can also add a Header Image to display a large photograph at the top of your site. If you add both a video and an image, the image will be used as a placeholder to display while the video loads, and will be shown on smaller screens where videos may be harder to serve over mobile networks.

An additional setting for darkening the header media is included in the Theme Options → General section and is useful for making sure the text in the header remains visible when using a header image.

Front-Page Sections

A unique feature available in Ovation is the ability to highlight manually-curated content on the homepage. The four front-page sections can display pages and recent posts.

Adding Front Page Sections

  1. Go to the Customizer.
  2. Navigate to Theme Options → Front Page.
  3. Select a page in each dropdown to feature it on the front page.
  4. Click the Save & Publish button at the top of the Customizer.

Front Page Section Layouts

Certain types of pages have unique design touches when displayed on the front page. Ovation uses a custom layouts for:

Grid

Select a page using the Grid, Record Archive, or Video Archive page template to display a grid of child pages as a front page section. Below is an example of how the grid layouts will appear on the front page.

Recent Posts

Select the page set as your blog page to display your three most recent posts. These posts will display as three columns with a border dividing them. Below is an example of how the recent posts section will appear on the front page.

Single Record

Select a page that is a child of a Record Archive page to feature a single record as a front page section. This section will appear with a dark background, record artwork to the left, and record details to the right. Below is an example of how a single record will appear on the front page.

Custom Menus provide control over the links that appear in the navigation areas on your site. Ovation supports two menu locations: the Header Menu and Social Links Menu.

You can manage menus by going to Customize → Menus.

Header Menu

The Header Menu can appear above or below the header area at the top of your site. It may also be fixed to the top of the screen while scrolling.

On smaller screens, the menu is displayed when a visitor clicks the “Menu” toggle button.

Header Menu Position

To change whether the Header Menu displays above or below the header:

  1. Open the Customizer.
  2. Navigate to Theme Options → Layout.
  3. Under the Site Header Layout setting, drag the “Navigation” item above or below the “Site Identity” item to rearrange them.

Header Submenu Style

There are two different submenu styles to choose from; vertical and horizontal (default). The vertical submenu style supports up to two levels of drop-links while the horizontal style only supports one. To choose the style:

  1. Open the Customizer.
  2. Navigate to Theme Options → Layout.
  3. Choose one of the Navigation Dropdown Style options.

Be sure to hover over the menu items in the preview to see the dropdowns.

The Header Menu scrolls with the page by default, but it’s also possible to make it stick to the top of the screen when scrolling. To enable the sticky navigation:

  1. Open the Customizer.
  2. Navigate to Theme Options → Layout.
  3. Check the box for the “Enable sticky navigation” setting.

The Social Links Menu displays links to your social media profiles, like Twitter and Facebook, as icons. It appears in the middle of the header either above or below the site title and logo, depending on where the Header Menu is located.

Each menu item can be added as a Custom Link. Ovation will automatically display the correct icon based on the link URL.

The following icons are bundled in Ovation 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.

Slide-out Sidebar Widget Area

Ovation includes a Sidebar widget area where you can add additional content. Widgets added to the Sidebar widget area display on all pages, and can be toggled open and closed using the “Sidebar” icon in the main navigation area.

Records

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

To begin adding records, first set up a Record Archive:

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

You can choose to enter a short introduction in the content area of this page; this will appear above the records. 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. Add the record’s cover art by assigning it as a Featured Image.
  4. Change the Publish date to the date the record was released.
  5. Find the Page Attributes box and change the Parent Page 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 the Record Archive page, you should see your first record listed. Continue adding records using the same steps. Always be sure to set the “Parent” page as the Record Archive page!

Record Order

By default, records are organized by page order on the Record Archive. You can choose to display records by publish date or alphabetically instead. (We chose to display records by date in the theme demo.)

Here is how to change how records are ordered on record archives:

  1. Open the Customizer.
  2. Browse to your Record Archive page.
  3. Navigate to Theme Options → General.
  4. Change the Record Archive Order from the dropdown.
  5. Click the Save & Publish button.

Single Record Pages

Record Artwork

Set the record’s cover art by assigning it as a Featured Image.

Record Details and Purchase Links

You’ll notice on the theme demo, additional details are displayed for each record along with purchase links. You can add this content and more with 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.

Record Playlist and Content

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

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

Videos

Ovation 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 (e.g. YouTube, Vimeo, Instagram).

Add a video by inserting the video URL into the page’s main content area:

By default, videos are displayed in page order on the Video Archive. You can also choose to display videos by publish date or alphabetically:

  1. Go to the Customizer.
  2. View your video archive page.
  3. Navigate to Theme Options → General.
  4. Change the Video Archive Order from the dropdown.
  5. Click the Save & Publish button.

Page Templates

Page templates allow you to change the layout or functionality of individual pages on your site. The page template settings are in the Page Attributes meta box, on the right side of the page when editing a page in your admin panel.

Default Template

The default page template displays content in a single column. When a featured image is added, it will appear as a banner below the page title.

Full-width Page Template

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

Grid Page Template

The Grid Page template is a page template that displays child pages in a visually-appealing grid using each page’s featured image and title. The display of this page template will look similar to the Record Archive page template.

Grid Page Order

By default, grid page items are displayed page order on the grid page archive. You can choose to display grid page items by publish date or alphabetically:

  1. Open  the Customizer.
  2. View your grid page archive.
  3. Navigate to Theme Option → General.
  4. Change the Grid Page Order from the dropdown.
  5. Click the Save & Publish button.