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.
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+
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:
- AudioTheme – Gigs, Records, Videos
- Breadcrumb Trail – Breadcrumbs
- Cue – Site-wide Player
- Instagram Feed – Instagram widget
- Jetpack – Carousel, Contact form, Custom CSS, Infinite Scroll, Portfolios, Testimonials, Tiled Galleries, Widget Visibility
- MailChimp for WordPress – Sign-up Form
- Meta Slider – Homepage slider
- WooCommerce – eCommerce
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:
- Go to Appearance → Customize
- Click the Site Identity section to expand it
- 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.
The accent color can be changed in the Customizer:
- Go to Appearance → Customize
- Click the Colors section to expand it
- Update the Accent Color setting
The accent color is often used to style links and hover colors in various places throughout the theme.
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.
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 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.
The Primary Menu appears below the site title and logo. On smaller screens, the menu is displayed using a menu toggle button.
Social Links Menu
The Social Menu allows you to display links to your social media profiles as icons. Learn how to add a social links menu.
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.
Additional content can be added to your site using widgets. Wayfarer includes two unique widget locations: the Pages Sidebar and the Footer widget area.
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.
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.
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.
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.
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
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
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:
- Go to Appearance → Customize
- Click the Featured Content section to expand it
- Click the Add Posts button
- Select the items you want to feature
- Click the Select button
- Drag and drop items into your preferred order
- 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.
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.
Help on how to setup gigs can be found in the AudioTheme plugin documentation.
Help on how to setup records can be found in the AudioTheme plugin documentation.
Help on how to setup videos can be found in the AudioTheme plugin documentation.
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.
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.
The No Sidebar template displays just like a default page, however, like the title suggests, without a sidebar.
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!
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.
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.
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.
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.