Basis

$79

by The Theme Foundry

Start building.

Drag and drop layouts.

Basis features a drag and drop page builder interface. Create a section, add your content, and move it around. Mix and match sections in countless combinations. Each section fits together perfectly, so building a layout is easy. Go assemble the perfect page.

product-feature-1

Stunning slideshows.

Introduce yourself.

We didn’t stop with the new page builder interface. Basis also makes it easy to create beautiful full-width slideshows, which are perfect for introducing you or your brand on your homepage, a promotional page, or a tour of your products and services. You don’t need to deal with tagging posts or finding pages either. You’ll create and sort all your slides quickly and easily from one page.

product-feature-2

Go big.

Create a landing page.

Any pages created with the product builder or the slideshow builder can be turned into a landing page or microsite. Turn on “minimal mode” for that page and the header will disappear. Great for showcasing your product or event, making a special announcement, or building a simple one page website. Basis is one the most flexible WordPress business themes on the market.

product-feature-3

Add some style.

Make it your own.

Personalizing your new website should be fun. We’ve leveraged the built-in WordPress customizer, so adding your own background image or color is easy. On top of that, we’ve included options for customizing the link colors and adding a custom logo (custom colors other than the background require the Custom Design upgrade). Combine these options with the page builder to give your website a truly unique look.

Help and additional information

If you need help with Basis be sure to read through the Basis documentation by clicking the Support button at the top of the sidebar on this page. You can also ask us questions in the WordPress.com Basis support forum.

Looking to buy Basis for a self hosted WordPress.org website? The Theme Foundry builds WordPress templates for WordPress.org and you can purchase the Basis theme for WordPress.org directly from their website.

Quick Specs (all measurements in pixels):

  1. Basis is a flexible-width, responsive design.
  2. Images and videos will scale to fit the viewing screen.
  3. Archive and single post pages feature a main column width of 610px.
  4. Product page template display content at a width of 1068px.

Getting help

The documentation below explains all of the main features of Basis and how to get the most out of the theme. However, if you get stuck, or find that you have questions that aren’t answered here, there are two other places you can look for help:

  1. The “Help” tab: On most administration screens in WordPress, there is a tab in the upper right corner titled Help. Clicking this will reveal a panel that has lots of useful tips and explanations. Most of this information pertains to general WordPress usage, but some of the screens have Basis-specific guidance as well.
  2. The Help Forum: On WordPress.com you will find a Basis support forum where you can get answers to your questions.

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.


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:


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.


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

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.


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 Theme 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 Theme 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 Theme heading.
  3. Check the box next to Enable simple archive view.
  4. Click Save & Publish.

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 Theme 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 Theme heading.
  3. Under Footer Text, enter the desired content.
  4. Click Save & Publish.
Limited HTML can be used in the footer text area, including the following tags: a, abbr, acronym, b, blockquote, cite, code, del, em, i, q, strike, and strong. All other HTML tags will be stripped from the text. Not all HTML tags have been specifically styled for the footer and may require custom CSS.

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 Theme heading.
  3. Enter the full URL of the social profile into the relevant text box.
  4. Click Save & Publish.

Looking for the self hosted WordPress.org version?

Browse our self hosted WordPress themes at The Theme Foundry website.