Wayfarer Documentation

on

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

Getting Started

After installing and activating Wayfarer, 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 subscription, you can get in touch through the priority support form.

Wayfarer requires WordPress 4.5+

Supported Plugins

Wayfarer includes basic support for a number of free plugins. For quick reference, we’ve listed plugins supported by the theme and used in the theme demo:

As with all our themes, Wayfarer includes various options to help you make the site your own.

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

  1. Go to Appearance → Customize
  2. Click the Site Identity section to expand it
  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. A site icon, a.k.a. favicon, can be set here as well.

Colors

The accent color can be changed in the Customizer:

  1. Go to Appearance → Customize
  2. Click the Colors section to expand it
  3. Update the Accent Color setting

The accent color is often used to style links and hover colors in various places throughout the theme.

Fonts

Wayfarer has built in support for a few handpicked Google fonts. To customize fonts, go to Appearance → Customize and click the Fonts section to open it and change 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.

Menus

Custom Menus provide granular control over the links that appear in the various navigation areas on your site. Wayfarer supports five menu locations: the Primary Menu navigation, the Social Links Menu, and three AudioTheme archive menus (Gigs, Records, and Videos). Support for displaying a breadcrumb navigation is also included.

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 allows you to display links to your social media profiles as icons. Learn how to add a social links menu.

Archive Menus

Wayfarer has menu locations for the Gig, Record, and Video archive pages when the AudioTheme plugin is active. Learn how to add a archive menu.

Breadcrumbs

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. Generally speaking, breadcrumbs can help with SEO.

Wayfarer has built in support for the Breadcrumb Trail plugin.

Widgets

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

Sidebar

The Sidebar widget area will display widgets on all singular pages that include a sidebar. For example, the sidebar will be shown on Posts, Pages, Records, Videos, and Gigs.

Sidebar and Widget Visibility

If you’re not wanting to show widgets on a page that does include a sidebar, we recommend installing Jetpack and using the Widget Visibility module. This module allows you to set the visibility of widgets for various page types.

We’ve also included a “No Sidebar” Page Template that can be set for Pages to remove the sidebar for that particular page.

Lastly, when setting up Gig, Record, and Video archives, there is an option to remove the sidebar from singular gig, record, and video pages. When editing one of those archive pages, find the “Archive Settings” metabox and check the “Enable sidebar for single posts in this archive?” option.

Footer

Widgets added to the Footer widget area will display on all pages in a three column grid by default. Visit the Theme Options section in the Customizer to select a different number of columns; one to four.

Site-wide Player

The site-wide player in Wayfarer displays at the top right of each page in the Site Identity section. The current track title displays with buttons to skip, play, and toggle the playlist. Learn how to setup the site-wide player.

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 instructions for setting up a static front page if you’d prefer to use a page for your homepage. You’ll also want to create a page for displaying your latest posts, or Blog.

Hero Image

The large hero image on the front page of the theme demo is added by setting a featured image for the static front page. The featured image will display full width across the browser area with a max-height of 600 pixels. The max size of the hero image is 1440x600 pixels.

Slideshow

Wayfarer also has built in support for the Meta Slider plugin to display a full width slideshow on the front page. If a hero image is set, the slideshow will display beneath it.

For best results, a slideshow on the front pages should be setup to use images that are 1440x600 pixels.

Featured Content

One unique feature available in Wayfarer is the ability to display featured content on the homepage. Use the “Featured Content” area to help up to 15 of your best articles, pages, records, videos, and/or archives get noticed.

Each article in the featured content area will display as a grid item showcasing the title and a background image. Background images are a common way of displaying an image behind text while keeping the area responsive. Because of this, you may need to sacrifice perfect images placement in this area as the image may also be shown on the singular page.

It’s also worth noting, if a featured image is not set for the featured content item, an image will be pulled from the items content or use the first image uploaded to the post.

To enable Featured Content:

  1. Go to Appearance → Customize
  2. Click the Featured Content section to expand it
  3. Click the Add Posts button
  4. Select the items you want to feature
  5. Click the Select button
  6. Drag and drop items into your preferred order
  7. Click the Save & Publish button at the top of the Customizer

Additional settings are available for the Featured Content area in the Customizer. Choose between two or three columns to display the content, select a unique color style, and choose a different image ratio size to better fit your featured images in that area.

AudioTheme Support

Wayfarer 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, Discography, & 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.

Page Templates

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

Full Width Template

The Full-Width template is a page template that displays content the full width of the content area. Learn more about how to create a Full Width page.

Grid Page

The Grid Page template is a page template that displays child pages in a visually appealing grid with a featured image and page title. Learn more about how to create a Grid Page.

No Sidebar

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

E-Commerce

Wayfarer includes basic support for WooCommerce to ensure the content displays within the theme’s layout. Additional styles and customizations may need to be made to make things look more cohesive in some instances.

Additional Theme Options

There are a number of additional Theme Options to further customize various aspects of the Wayfarer layout and design. The theme options can be found via the “Theme Options” section of the Customizer.

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 section into the desired order.

If you’ve installed the Breadcrumb Trail plugin, a new “Breadcrumbs” item will be added to the list.

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. It might be best to just give it try!

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

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 drop-down.

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 browsers left edge. Other options are to center align the content, which is a more traditional approach, or to make the content fill the browsers width, much like an application might display.

Customizing Wayfarer

Check out our knowledge base article on the recommended ways to customize your theme along with helpful plugins and links.

You can download a sample child theme here. In the sample, we’ve changed the site content background color from white to red as a way to demonstrate the changes are working.