Basis

Minimum requirements

Basis requires WordPress 3.6 or above.

Getting help

The documentation below explains all of the main features of Basis and how to get the most out of the theme.

If you need a hand, email support[at]thethemefoundry[dot]com.

Introduction to Basis

Basis is a theme for presenting your company or product to the world in a captivating way that is consistent with your branding. The Product template allows you to easily create beautiful, visually interesting layouts that invite your site visitors to take action. The Slideshow template makes it painless to tell your story and engage your audience. The blog is designed to enable clear and concise communication with your stakeholders. And the Theme Customizer allows you to add your own logo and tweak the color scheme to ensure that your branding is consistent.

Both the Product and Slideshow templates use a new page builder interface. The Page Builder allows you to quickly add sections or slides and drag-and-drop them into any order you want, so that you can focus on the real work of creating outstanding content.

Minimal Mode

Another feature of the Product and Slideshow templates is the ability to “turn off” the site header for that particular page. This allows you to use it as a landing page or one-page microsite. To activate Minimal Mode while editing a Product or Slideshow page, check the box next to “Hide the site header on this page”, located in the Page Attributes box in the right column.

The Product Page

The Product template uses a special interface to construct a complex vertical layout made up of different sections. To get started using this template, add a new Page and choose “Product Template” from the Template dropdown. The normal content editor will be replaced by the Page Builder box.

Below are descriptions and instructions for each available section type.

Banner section

The Banner section consists of a full-width background image with custom text and an optional button. It is great as an introductory section or a call to action.

Background

Setting a background image is the same procedure as setting a featured image in a post. Click Set background image and upload an image or choose one from the Media Library. Once an image is set, you can change it by clicking on its thumbnail.

Background images must be a minimum of 800 pixels wide, or they will not appear in the section.

Check the box next to “Darken to improve readability” if the image is too light and doesn’t provide enough contrast with the overlaying text.

Button

The button is designed to be an attention-grabbing link or call to action beneath the Banner section content. Both the URL and Label fields must be filled out before the button will appear.

Feature section

The Feature section consists of a featured image accompanied on the left or right side by a narrow column of text. It works well for product or service descriptions, or a large image with a detailed caption.

Featured image

Setting this featured image is the same procedure as setting a featured image in a post. Click Set featured image and upload an image or choose one from the Media Library. Once an image is set, you can change it by clicking on its thumbnail.

Changing the text position

By default, the title and content will appear to the right of the featured image, just as the interface for the Feature section suggests. However, this text can be moved to the left side simply by clicking and holding on the double-dashed line above either the image or the content and then dragging it to the other side. A shaded box with a dashed outline will indicate the new positioning of the elements when the mouse button is released.

Profile section

The Profile section consists of three sortable columns, each featuring an image, title and text. It is perfect for customer testimonials or team profiles.

Featured images

Each column can have a featured image. Setting these featured images is the same procedure as setting a featured image in a post. Click Set featured image and upload an image or choose one from the Media Library. Once an image is set, you can change it by clicking on its thumbnail.

Changing the column positions

Columns can be rearranged simply by clicking and holding on the double-dashed line above one of them and then dragging it to a new position. A shaded box with a dashed outline will indicate the new positioning of the columns when the mouse button is released.

Text section

The Text section is a blank canvas for standard content or HTML code. It functions the same way as a normal post or page interface, though there are fewer formatting buttons available. However, most of the same formatting can be achieved by switching to the Text tab of the editor and putting in HTML.

Re-ordering sections

Once you have added multiple sections, you can change their order simply by clicking and holding on one section and then dragging it to a new position. A shaded box with a dashed outline will show where the section will placed when the mouse button is released.

Click the small down arrow on the right side of a section header to collapse its content to make it easier to manage multiple sections.

Removing a section

Click the Remove button in the bottom-left corner of an expanded section panel to delete it. This cannot be undone, and any content in the section will be permanently deleted, so be careful!

The Slideshow

The Slideshow template uses a special interface to construct a series of slides that can have content and full-background images. To get started using this template, add a new Page and choose “Slideshow Template” from the Template dropdown. The normal content editor will be replaced by the Slideshow Builder box.

Adding a slide

In the Slideshow Builder box, click the “Add Slide” button.

Each slide consists of a background image, a link button (text and URL), a title, and a content field. The content field will accept a limited amount of formatting, either with the provided buttons, or by switching to the Text tab and entering HTML. Media can also be inserted via the Add Media button.

Background image

Setting a background image is the same procedure as setting a featured image in a post. Click Set background image and upload an image or choose one from the Media Library. Once an image is set, you can change it by clicking on its thumbnail.

Background images must be a minimum of 800 pixels wide, or they will not appear on the slide.

Check the box next to “Darken to improve readability” if the image is too light and doesn’t provide enough contrast with the overlaying text.

Re-ordering slides

Once you have added multiple slides, you can change their order simply by clicking and holding on one slide and then dragging it to a new position. A shaded box with a dashed outline will show where the slide will placed when the mouse button is released.

Click the small down arrow on the right side of a slide header to collapse its content to make it easier to manage multiple slides.

Removing a slide

Click the Remove button in the bottom-left corner of an expanded slide panel to delete it. This cannot be undone, and any content in the slide will be permanently deleted, so be careful!

Default pages

The default page template has two different layouts, depending on whether or not the page has a featured image. Without a featured image, a page will have a one-column, full width layout. Adding a featured image will switch the page to a two-column layout, with the featured image and description on the left and the page title and content on the right.

Content can be added below the featured image in the left column by inputting it in the Description field in the Media interface.

The Blog

The blog section is designed to be clean and simple, though it has several configurable options. See the sections below to learn how to customize it to fit your needs.

Setting a Posts page

In WordPress, the page that shows a list of your most recent blog posts is known as the Posts page. By default, this is the main, or “Home” page of the website. However, if you have set a static Front page, you will need to also specify a page to be your Posts page.

1. Add a new Page. Give it a title, such as “Blog”, then publish it.
2. Navigate to Settings → Reading.
3. In the Front page displays section, find the dropdown next to Posts page and choose the page you just added.
4. Save Changes.

Excerpts

By default, the full content of each blog post will appear on the Posts page. This may not be an issue, but if you would prefer to have only shorter blurbs on the Posts page that then lead to the full article when clicked, you have two options: create an excerpt or use the More tag.

Simple archive view

If you would prefer an even simpler view on the Posts page and in the blog archives, you can activate Simple archive view. This will hide post content, excerpts, and featured images, leaving only the date, author, and post title. Of course, when viewing an individual post, all of the post’s features will be visible.

For instructions on activating Simple archive view, see below.

Sidebar layout

Basis has an optional sidebar that will appear to the right of the content on the Posts page, blog archives, and search results when active. While the sidebar is enabled, the layout of these views will shift so that some elements will appear above or below the post title instead of to the left of it. To activate this layout, simply add one or more widgets to “Sidebar” on the Widgets screen.

Post featured images

When setting a featured image for a post, be mindful of the dimensions of your chosen image. The way the image displays on individual posts depends on its width:

• If the image is at least 800 pixels wide, it will appear as a large background banner that spans the full width of the browser window.
• If the image is less than 800 pixels wide, it will appear at the beginning of your content, with the text wrapping to the left.

For more information about the image sizes used in Basis, see below.

Author avatars

Another feature of the individual post view is the author’s avatar, which will appear as a circular image above the post date. However, it will only appear if the author’s account email address has a registered Gravatar.

Styles

Basis offers two custom styles that a user can add to post content. The styles are implemented via the Styles dropdown in the second row of buttons in the Visual editor. To reveal the second row, click Show/Hide Kitchen Sink in the first row.

Introduction

Introduction is a block-level style, meaning it will create a separate block of styled content from whatever text it is applied to. It is intended to emphasize the introductory paragraph of a post, page, or section.

To add the Introduction style:

1. Reveal the second row of editor buttons if it is hidden.
2. Highlight a full paragraph of text.
3. Click the Styles dropdown and select “Introduction”.

Alert

Alert is a block-level style, meaning it will create a separate block of styled content from whatever text it is applied to. It is intended to draw attention to the important content it contains.

To add the Alert style:

1. Reveal the second row of editor buttons if it is hidden.
2. Highlight a full paragraph of text.
3. Click the Styles dropdown and select “Alert”.

Button Link

Button Link is a style that can only be applied to existing hyperlinks within the content in the Visual Editor. It will turn the link into a thick black button with white text.

To add the Button Link style:

1. Reveal the second row of editor buttons if it is hidden.
2. Place the cursor on an existing hyperlink within the content.
3. Click the Styles dropdown and select “Button Link”.

Image sizes

For reference, these are the image sizes used in Basis:

Post featured image (archive view)

• Width: 720px
• Height: 480px
• Aspect ratio: 3:2

Post featured image (single view)

Note that these are the minimum recommended dimensions for a post’s featured image.

• Width: 1290px
• Height: 860px
• Aspect ratio: 3:2

Page featured image

• Width: 940px
• Height: variable
• Aspect ratio: variable

Slideshow background image

• Width (max): 1440px
• Height (max): 1440px
• Aspect ratio: variable

Customizing Basis

Basis offers the ability to customize certain parts of the theme through the Theme Customizer. Changing these options is the easiest way to alter the theme. While you cannot customize every part of the theme with the customizer, the important optional features in Basis have been made available in the Theme Customizer.

Custom logo

You can replace the site title text in the header with a custom logo image. This image can also optionally include a high-resolution version for use on HiDPI devices (such as retina displays).

1. Navigate to Appearance → Customize.
2. Click the Logo heading.
3. Under the Regular Logo heading, either click the No image button or, if an image currently exists, click the image.
4. Drag a logo to the area that says “Drop a file here” or click the select a file link and add a logo. If you have previously uploaded a different logo, you can find it on the “Uploaded” tab.
5. As soon as the logo is uploaded, a preview of the site with the logo will be displayed.
6. To add a “Retina Logo”, repeat these steps in the Retina Logo section.
7. Click Save & Publish.

Accent color

You can choose a custom color to accent several elements on the site, including links, slideshow buttons and banner buttons.

1. Navigate to Appearance → Customize.
2. Click the Colors heading.
3. Under Accent Color, click the Select Color button.
4. Choose a new color from the color picker, or enter the hex code for your desired color.
5. If you change your mind, you can click “Default” to return to Basis’s default link color.
6. Click Save & Publish.

Display options

Sticky post label

Sticky posts have a colored label in the post header. By default the label says “Featured”, but it can be changed to something else, for example “Important” or “Sale”.

1. Navigate to Appearance → Customize.
2. Click the Display heading.
3. Enter the desired sticky label under Sticky post label.
4. Click Save & Publish.

Simple archive view

To enable Simple archive view:

1. Navigate to Appearance → Customize.
2. Click the Display heading.
3. Check the box next to Enable simple archive view.
4. Click Save & Publish.

Footer

Footer widgets

You can choose where the two footer widget areas will display on the site: Everywhere, Everywhere but my front page, or On my front page only.

1. Navigate to Appearance → Customize.
2. Click the Footer heading.
3. Under Show the footer widgets, choose an option.
4. Click Save & Publish.

Footer text

Basis allows for the addition of arbitrary text in the footer of the theme:

1. Navigate to Appearance → Customize.
2. Click the Footer heading.
3. Under Footer Text, enter the desired content.
4. Click Save & Publish.

Social profile links

Social profile links for Twitter, Facebook, Google Plus, Flickr, Pinterest, LinkedIn, and RSS can be added to your site’s footer. To add a social profile link, follow these steps:

1. Navigate to Appearance → Customize.
2. Click the Footer heading.
3. Enter the full URL of the social profile into the relevant text box.
4. Click Save & Publish.

Advanced customization

Basis was designed and built to be very flexible and easy to tailor to your brand. However, if there are changes that you would like to make that are not possible through the customization options above, first read through our tutorial on setting up a child theme. Below are further details on a few specific customizations.

Page Builder templates

Similar to normal theme templates such as index.php and single.php, the templates for the Product sections and the Slideshow slides can be customized using a child theme. These template files can be found in the root directory of the Basis theme, and each starts with _section-.

One difference between the Page Builder templates and normal templates is in how changes to them take effect. In normal templates, if you modify the file and save it, you can just reload a relevant page or post on your site and see the changes. With Page Builder templates, after you save your modifications, you must click Update on the screen using the Page Builder before your changes will be visible.

Filter hooks

Using filters is the most difficult way to alter the theme and should only be done if you are comfortable working with PHP. These filters and the sample code should be placed in your child theme’s functions.php file.

basis_responsive_nav_options

The basis_responsive_nav_options filter allows a developer to change options related to the dropdown navigation menu that appears in the header of the mobile view of the site. For example, to change the label of the dropdown menu tab from “Show Menu” to “Navigate”, the following code could be added to the child theme’s functions.php file:

function my_responsive_nav_options( $options ) {
    $options['label'] = 'Navigate';
    $options['closedLabel'] = 'Hide';
    return $options;
}
add_filter( 'basis_responsive_nav_options', 'my_responsive_nav_options' );

For more information about the options available, check out the Responsive-Nav.js documentation.

basis_slideshow_options

The basis_slideshow_options filter allows a developer to change options related to the slideshow that is rendered with the Slideshow page template. For example, a developer could change the time between slide transitions from 7 seconds to 9 seconds by adding the following code to the child theme’s functions.php file:

function my_slideshow_options( $options ) {
    $options['timeout'] = 9000;
    return $options;
}
add_filter( 'basis_slideshow_options', 'my_slideshow_options' );

For more information about the options available, check out the Cycle2 documentation.

basis_archives_title

The basis_archives_title filter allows a developer to change the title of one or more archive pages, without having to alter the template files. For example, the default title of a month archive is something like “From October, 2013”. However, a developer could change this title for all October archives by adding the following code to the child theme’s functions.php file:

function my_october_archives_title( $title ) {
    global $wp_query;

    if ( is_month() && 10 === $wp_query->monthnum ) {
        $title = 'From the 10th month of the year ' . $wp_query->year;
    }

    return $title;
}
add_filter( 'basis_archives_title', 'my_october_archives_title' );

basis_read_more_text

The basis_read_more_text filter allows a developer to change the link text that appears beneath excerpts. For example, the default link text is “Read more”, but a developer could change it to “Keep reading” by adding the following code to the child theme’s functions.php file:

function my_read_more_text( $text ) {
    return 'Keep reading';
}
add_filter( 'basis_read_more_text', 'my_read_more_text' );

basis_custom_logo_max_width

The basis_custom_logo_max_width filter allows a developer to change the width of the custom logo in the site header. The default width is 244 pixels, but a developer could change it to 350 by adding the following code to the child theme’s functions.php file:

function my_custom_logo_max_width( $width ) {
    return 350;
}
add_filter( 'basis_custom_logo_max_width', 'my_custom_logo_max_width' );

basis_social_links

The basis_social_links filter allows a developer to add, remove, reorder, or edit social icon links in the site footer. For instance, to add a link for Instagram, a developer could add the code below in the child theme’s functions.php file:

function my_social_links( $services ) {
    $services['instagram'] = array(
        'title' => 'Instagram',
        'url'   => 'http://path.com/to/instagram-profile'
    );
    return $services;
}
add_filter( 'collections_get_social_links', 'my_collections_get_social_links' );

Then in the child theme’s style.css file:

.icons li a.instagram {
    width: 18px;
    background: url(http://path/to/icon/image) no-repeat;
    background-size: 18px 18px;
}