Wayfarerby AudioTheme

Getting Started

After activating Wayfarer, 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 Wayfarer’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, Wayfarer 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 this page to your menu so your visitors can find it.

Hero Image

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

Wayfarer: Document Hero

 

A featured image on other Posts and Pages will also display as a large hero image at the top of the page.

One unique feature available in Wayfarer is the ability to display featured content on the homepage. Use the “Featured Content” area to showcase up to 15 of your best posts and pages.

Wayfarer: Document Hero

 

Each article in the Featured Content area will display as a grid item showcasing the title and a background image.

If a Featured Image is not set for a Featured Content item, an image will be pulled from the content area or the first image uploaded to the page will be used.

To enable Featured Content:

  1. Go to the Customizer.
  2. Click the Featured Content section to expand it.
  3. Enter a tag name in the Tag Name field. We used “featured” in the theme demo.
  4. Click the Save button.
  5. Edit a post or page and assign it the Featured Content tag you set in step 3 to feature that post or page.

Featured Content Options

Wayfarer includes a couple display options for the Featured Content on the homepage. You will see a new “Homepage” Theme Options section when viewing the homepage of your site in the Customizer. Here, you can choose between two or three columns, change image sizes, remove titles, and even change the way images are colored.

wayfarer-theme-options-homepage

Menus

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

wayfarer-customize-menus

You can create and assign menus by going to CustomizeMenus.

Header Menu

The Header Menu appears at the top of the page and should be used as the main navigation for your site. 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. Wayfarer will automatically display the correct icon based on the link URL.

Wayfarer: Customize Social Menu

The following icons are bundled in Wayfarer for use in your Social Menu: Amazon, Apple/iTunes, Bandcamp, CD Baby, Facebook, Flickr, Github, Google Play, Google+, Instagram, Last.fm, LinkedIn, Pinterest, ReverbNation, SoundCloud, Spotify, Tidal, 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.

Wayfarer: Customize Breadcrumbs

The breadcrumb navigation can be enabled via the Customizer:

  1. Go to the Customizer.
  2. Open the Theme Options panel.
  3. Click the Layout section.
  4. Check the Show breadcrumbs on single pages setting.

When enabled, a breadcrumb navigation will display below the header content on 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. Wayfarer includes two widget locations: Sidebar and Footer.

Wayfarer: Customize Widgets

 

Sidebar Widget Area

The Sidebar widget area will display widgets on most single and archive type pages. Use the widget visibility feature to show/hide widgets on certain pages. On larger screens, the 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 the bottom of all pages in three columns on larger screens. As the screen size decreases, the number of columns adjusts to better display the content.

Site-Wide Player

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

Wayfarer: Customize Player

Here’s how to enable the audio player:

  1. Go to the Customizer.
  2. Open the Theme Options panel.
  3. Open the General section.
  4. Click the Edit Playlist button under the “Player Attachment IDs” heading.
  5. Select previously uploaded audio MP3 files or upload new files.
  6. Click the Add to audio playlist button.
  7. 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

wayfarer-document-records

Wayfarer 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 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 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 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 by following the same steps. Always be sure to set the “Parent” page as the Record Archive page.

Record Order

By default, records are ordered by page order on the record archive. The order can be changed to display records by publish date or alphabetically. We chose to display records by date in the theme demo.

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

  1. Go to the Customizer.
  2. View your record archive page.
  3. Open the Theme Options panel.
  4. Open the General section.
  5. Change the Record Archive Order from the dropdown.
  6. Click the Save & Publish button.

Single Record Pages

wayfarer-document-record

Record Artwork

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

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.

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 your visitors to preview your music.

Wayfarer: Document Record Edit

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

Videos

Wayfarer: Document Videos

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

Wayfarer: Document Video

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

Wayfarer: Document Video Edit

Video Order

By default, videos are ordered by page order on the video archive. The order can be changed to display videos by publish date or alphabetically.

Here is how to change how videos are ordered on video archives:

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

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

Grid Page Order

By default, grid page items are ordered by page order on the grid page archive. The order can be changed to display grid page items by publish date or alphabetically.

Here is how to change how grid page items are ordered on grid page archives:

  1. Go to the Customizer.
  2. View your grid page archive.
  3. Open the Theme Options panel.
  4. Open the General section.
  5. Change the Grid Page Order from the dropdown.
  6. Click the Save & Publish button.

Full Width 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 1100px.

Additional Customizations

More theme-specific settings can be found in the Theme Options panel of the Customizer.

Site Layout

Customizer → Theme Options → Layout → Site Layout

The Site Layout option allows a bit of control over how the site is aligned. By default, the content of the site is aligned to the browser’s left edge. Other options are to center align the content, which is a more traditional approach, or to make the content fill the browser’s width, much like an application might display.

Site Header Layout

Customizer → Theme Options → Layout → Site Header Layout

The site header layout setting is a custom setting unique to Wayfarer. Here you can choose to reorder the section on the front page to change how they will display. To do this, simply drag-and-drop the sections into the desired order.

Wayfarer: Customize Site Layout

If you’ve enabled Breadcrumbs, a new “Breadcrumbs” item will be added to the list.

Hero Content Overlay

Customizer → Theme Options → Layout → Enable hero content overlay?

Checking the box for “Enable hero content overlay” will overlay the content preceding the Hero area. The order of the content is set in the “Site Header Layout” option mentioned above.

Wayfarer: Customize Hero Overlay

Archive Content

Customizer → Theme Options → General → Archive Content

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

  • Full Text – Display the post content in full; this is the default setting. The post content may still be truncated using the More Tag.
  • Summary – 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.
  • Custom Excerpt – Display text explicitly added as an Excerpt; otherwise, no content will be shown.
  • Full Text – Does not display any post content or excerpt, leaving only the post title and entry meta.

Archive Images

Customizer → Theme Options → General → 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” or “Thumbnails” option from the dropdown.