Bootstrap Starter Theme

Documentation and user instructions for the Bootstrap Starter theme.

  Live Demo     Theme Information     Demo Content File  

Bootstrap WordPress Starter Theme

Installing the Theme

There are two versions of the WordPress theme, standalone and child. The standalone ZIP file can be installed from the WordPress admin. The child should be installed using FTP and with the included Runway framework files.

In the downloaded files, go to the ‘WordPress‘ folder where you should see the sub-folders: ‘Child‘ and ‘Standalone‘. The theme files for each version are included inside.

  • Bootstrap Starter
    • HTML
    • WordPress
      • Child
      • Standalone

Standalone Theme Install

A Runway theme is installed in the same way that you install any WordPress theme. This can be done in two ways: you can upload the theme ZIP file using the WordPress theme upload facility, or you can upload the theme’s folders and files using an FTP application.

Installing via WordPress
  1. Install WordPress and make sure you are using the latest version.
  2. Login to your WordPress admin.
  3. Go to Appearance > Themes.
  4. Click on the Add New button.
  5. At the top of the Add Themes page click on the Upload Theme button.
  6. Click the file select input – it might say Browse… or Choose File – then locate and select the theme ZIP file.
  7. Click the Install Now button.
    • WordPress will now upload, unpack and install the theme. When finished you should receive a message indicating the theme was successfully installed.
Installing via FTP
  1. Extract the files from the theme’s zip file. This will create a folder on your computer named after the theme.
  2. Login to your FTP server and navigate to your WordPress ‘wp-content/themes‘ folder.
  3. Upload the theme’s folder from your computer to the ‘wp-content/themes‘ folder on your server.
    • The theme is installed once the folder has finished uploading.
Activating the theme

Once the theme is installed you can activate it from Appearance > Themes: hover over the theme’s thumbnail image and click the Activate button.

Child Theme with Runway Install

Installing the child theme and Runway framework together provides access to the advanced development tools included in Runway.

  • Bootstrap Starter
    • WordPress
      • Child
        • runway-bootstrap-starter
        • runway-framework
Upload child theme and framework
  1. Find the ‘WordPress/Child‘ folder in the theme download.
  2. Login to your FTP server.
  3. Navigate to your WordPress themes directory: ‘wp-content/themes
  4. Upload the Runway framework, ‘runway-framework‘, to the remote themes directory.
  5. Upload the child theme to the remote themes directory.
Activating the theme

Once the theme and framework folders are both uploaded you can activate the child theme from Appearance > Themes. Hover over the theme’s thumbnail image and click the Activate button. You do not need to activate the Runway framework first, only the child theme.

Child theme extensions

We recommended you use the version of the Runway framework that is distributed with the child theme. If you use an existing install of the Runway framework be sure to copy the extensions from the child theme’s framework to your version. Go to the ‘Child/runway-framework/extensions‘ folder and copy all extensions to your Runway install ‘wp-content/themes/runway-framework/extensions‘. After copying the extensions, navigate to the Runway > Extensions admin area and activate the uploaded extensions for the theme.

Customizing the child theme details

You can customize the child theme from the Runway > Themes area of the WordPress admin. Hover over the theme and click the Edit button represented by a pencil icon.

Setting up Menus

Menus are a standard WordPress feature and the menu editor works in the same way no matter what theme you happen to be using. This short guide covers the basic tasks required to create and set-up a navigation menu.

Defining a menu
  1. Login to the WordPress admin dashboard.
  2. Select Appearance > Menus to open the WordPress menu editor.
  3. Click the create a new menu link at the top of the page.
  4. Enter a name for your new menu in the Menu Name box and click the Create Menu button.
Adding items to a menu

The Screen Options panel (top right of the menu editor) enables you to choose which items you can use to add to a menu. Certain items, such as posts for example, are hidden by default.

  1. Locate the pane entitled Pages and in this pane select the View All tab to display a list of all the currently published pages on your site.
  2. Select the pages that you want to add to the menu by clicking the checkbox next to each page’s title.
  3. To add the selected pages to the menu click the Add to Menu button located at the bottom of the pane.
  4. Once you have added all the menu items you want to add to this menu click the Save Menu button.
Adding your menu to your site

A theme will normally have at least one location where a menu can be added to your site. Some themes may have two or more locations so that you can add different menus to different locations. The Manage Locations tab enables you assign your menus to whatever locations are set-up by the specific theme you are using.

  1. In the WordPress menu editor click on the Manage Locations tab.
  2. Under the Assigned Menu heading use the drop-down menu to assign a menu to a theme location.
  3. When you have finished, click the Save Changes button.

Your custom menu has now been added to your site.

Theme Options

Bootstrap Starter > Theme Options

Basic settings to configure the logo and design settings.

Design

  • Logo
    Upload or select a logo for the navigation bar. The output of this setting is applied in the ‘header.php‘ file.
  • Site Title
    Optional text shown beside or instead of the logo. The output of this setting is applied in the ‘header.php‘ file.

Page Headers

  • Use Page Headers
    Select the page types to use custom headers. The output of this setting is applied in the Bootstrap Custom Header extension, ‘extensions/bootstrap-custom-header/bootstrap-custom-header.php‘.

Bootstrap Starter > Home Page Header

Options to customize and add content for the home page header. Most of the settings in this section are applied in the Bootstrap Custom Header extension, ‘extensions/bootstrap-custom-header/bootstrap-custom-header.php‘.

Style

  • Background
    Choose the background color and style of the home page header.
  • Size
    Adjusts height, font sizes, padding and more for the home page header.

Content

Advanced

  • Custom Class Name
    Add a custom CSS class to the header container.
  • Custom CSS
    Add custom CSS rules to be applied to the page whenever the home page header is displayed.

Runway Child Theme

The child theme, together with the Runway framework, provides access to the advanced development tools included in Runway’s core and extensions.

  • runway-bootstrap-starter
    • assets
      • css
      • fonts
      • images
      • js
      • less
    • data
    • templates
Theme Options Builder

Create and edit theme options pages from Runway > Options Builder.

Child Theme Manager

Rename the theme, create a duplicate and modify every WordPress specific setting in Runway > Themes. Everything from the theme folder to the screenshot image can be modified from this area.

Advanced Editing and Development

This is only a short list of the custom changes you can apply using a Runway child theme. More details for theme development with Runway are here on the Guide website. Use the search or go to a topic to learn more.

Standalone Theme

The standalone version of the theme is the combined child theme plus Runway framework merged into a single, standalone WordPress theme. Standalone themes do not require the Runway framework.

  • runway-bootstrap-starter
    • assets
      • css
      • fonts
      • images
      • js
      • less
    • data
    • data-types
    • extensions
      • bootstrap-custom-header
      • bootstrap-navigation
      • bootstrap-template-functions
      • image-templates
      • jetpack-compatibility
    • framework
    • templates

When to use the standalone theme

Standalone themes are ideal for distribution to a client, commercial sales and for end users. If you only want to make a website from a theme in its current form and not develop your own custom theme, the standalone version would be the best choice.

Standalone themes do not have access to the Runway Options Builder to create new theme options pages or edit the ones that already exist. For these things you should always work with the child theme version.

WordPress Templates

Custom WordPress page templates are included in the theme. These templates are stored in the ‘runway-bootstrap-starter/templates‘ folder.

  • runway-bootstrap-starter
    • assets
    • data
    • data-types
    • extensions
    • framework
    • templates
      • cover.php
      • cover-with-page.php
      • page-full-width.php
      • page-full-width-flush.php
      • page-sidebar-left.php
      • page-sidebar-right.php

cover.php

The template for displaying full background cover pages.

cover-with-page.php

The template for displaying full background cover at the top of the page before the full page content.

page-full-width.php

The template for displaying pages with no sidebar.

page-full-width-flush.php

The template for displaying pages with no sidebar and no content container. Content will span the full browser width unless wrapped in a content container in the editor.

page-sidebar-left.php

The template for displaying pages with a left sidebar.

page-sidebar-right.php

The template for displaying pages with the sidebar right.

Home Page

The default home page styling.

Admin Login

The default login form styling.

Helper Classes

Included in the theme are CSS classes to allow advanced styling and extra functionality. Some of the classes are native to Bootstrap with custom styling or modifications for the theme. Other classes were created custom for the theme. Below is a list of the different helper classes and details on applying them to the theme.

.lead

Makes a paragraph stand out by adding the lead class.

Examples

<p class="lead">Some introduction text before the content.</p>

.featurette

Add a padded content section when a container is given the featurette class.

Examples

<div class="featurette">
  <p>Some special text here for the featurette section.</p>
</div>

.container-text > .panel-text

A wrapper for text to allow vertically aligned content. Use a container-text element with a nested panel-text element.

Examples

<div class="row">
  <div class="col-sm-6">
    <div class="container-text">
      <div class="panel-text">
        <p class="h2">First Title</p>
        <p class="lead">More text, content or anything else you want to put here.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="container-text">
      <div class="panel-text">
        <p class="h2">Second Title</p>
        <p class="lead">More text, content or anything else you want to put here.</p>
      </div>
    </div>
  </div>
</div>

.container-image > .panel-image

A wrapper for images to allow vertically aligned content. Use a container-image element with a nested panel-image element.

Examples

The example below uses an image in one container and a Bootstrap glyphicon for the other. Any image or graphic element will work.

<div class="row">
  <div class="col-sm-6">
    <div class="container-image">
      <div class="panel-image"><span class="glyphicon glyphicon-flag" style="font-size:200px;"></span></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="container-image">
      <div class="panel-image"><img src="my-graphic.jpg"></div>
    </div>
  </div>
</div>

The class also works well with the container-text and panel-text nested inside a featurette class. Try applying this code using the “Full Width – Flush” template.

<div class="featurette">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <div class="container-text">
          <div class="panel-text">
            <p class="h2">Feature Title</p>
            <p class="lead">A sub-title or supporting text.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="container-image">
          <div class="panel-image"><span class="glyphicon glyphicon-flag" style="font-size:200px;"></span></div>
        </div>
      </div>
    </div>
  </div>
</div>

#header.masthead-gradient

Adds a gradient to the header element. Applied in ‘header.php‘ and ‘extensions/bootstrap-custom-header‘.

Examples

<section id="header" class="masthead masthead-gradient">
  <!-- Header Content Here -->
</section>

#header.masthead-primary-bg

Applies the default primary background color to the header element. Applied in ‘header.php‘ and ‘extensions/bootstrap-custom-header‘.

Examples

<section id="header" class="masthead masthead-primary-bg">
  <!-- Header Content Here -->
</section>

Combine with the masthead-gradient class to add a primary color background gradient.

<section id="header" class="masthead masthead-primary-bg masthead-gradient">
  <!-- Header Content Here -->
</section>

#header.masthead-large

Adds extra padding and larger font sizes to the header element. Used for the home page to produce a larger header. Applied in ‘header.php‘ and ‘extensions/bootstrap-custom-header‘.

Examples

<section id="header" class="masthead masthead-large">
  <!-- Header Content Here -->
</section>

.footer-sticky

Allows a static footer content area or menu at the bottom of a content area. Useful when applied with the cover template. For reference see the examples in the HTML files: ‘HTML/examples/cover‘.

.footer-sticky-fixed

Same as footer-sticky but with fixed positioning to stay at the browser bottom even when scrolling.

.float-navbar

Applied to the <body> tag so the page content flows behind the navbar. Great for full screen backgrounds and slide shows. For reference see the examples in the HTML files: ‘HTML/examples/cover/with-carousel.html‘.

Examples

<body class="float-navbar">

HTML Files

The download includes an HTML version with sample templates.

  • Bootstrap Starter
    • HTML
      • assets
        • css
        • fonts
        • images
        • js
      • examples
        • blog
        • carousel
        • cover
        • dashboard
        • grid
        • jumbotron
        • jumbotron-narrow
        • justified-nav
        • navbar
        • offcanvas
        • signin
        • theme
        • tooltip-viewport
        • index.html
        • kitchen-sink.html
      • 404.html
      • contact.html
      • cover.html
      • cover-with-page-content.html
      • elements.html
      • index.html
      • login.html
      • navbar.html
      • navbar-default.html
      • navbar-fixed-static.html
      • page.html
      • page-sidebar-left.html
      • search.html

Using the sample code in these template files you can quickly create custom layouts, styles and demo sites. The starter theme is designed to allow developers to quickly build custom WordPress themes. You can integrate additional features into your custom theme using the examples in the HTML files.

Extensions

The theme includes several extensions to provide extended functionality. The extensions are not required and any one can be disabled and removed without causing errors. The conditional nature of each extension allows them to be activated and used only if the added functionality is desired.

Child themes include extensions like plugins and allow activation and deactivation through an admin interface. To access this area to to Runway > Extensions and turn on and off the ones chosen. To add new extensions you can use the Runway > Add-ons area or manually copy them to the folder ‘runway-framework/extensions‘.

Standalone themes manage extensions differently. The framework assumes that only activated extensions from the Child theme will be included in the Standalone version. Because of this, all extensions in the Standalone version’s ‘/extensions‘ folder will be automatically activated. To remove an extension from the Standalone version of the theme simply delete it from the folder. To add a new extension to the Standalone them you only need to drop it into the folder and it will be automatically activated.

Included Extensions

Bootstrap Custom Header bootstrap-custom-header

Custom header content for the Bootstrap Starter theme.

Bootstrap Custom Login bootstrap-custom-login

Customize the WordPress login screen background and logo.

Bootstrap Navigation bootstrap-navigation

Custom navigation walker adds Bootstrap specific structure to WordPress navigation menus.

Bootstrap Template Functions bootstrap-template-functions

Custom template functions for the Bootstrap Starter theme.

Image Attachment Template Functions image-templates

Functions specific to the image template of the Bootstrap Starter theme.

Jetpack Compatibility Functions jetpack-compatibility

Add specific Jetpack compatibility features to the theme.

Additional Assets

For advanced editing the theme includes the LESS files to generate the Bootstrap CSS as well as Grunt tasks to speed up development. If you’re familiar with how to use these tools you can make use of them. If not, there are some basic instructions below about setup and usage.

To use Grunt and LESS you’ll need to have Node installed. Below are the basic steps for using the Grunt and LESS files to update the core Bootstrap CSS files.

  1. Download the full Bootstrap Starter Theme package.
  2. Install dependencies: npm install
  3. Make sure grunt is available at the command prompt.
    You can install grunt-cli as described on the Grunt Getting Started page.
  4. Modify one of the LESS files: ‘runway-bootstrap-starter/assets/less/‘.
    You should avoid editing files in the ‘/less/bootstrap/‘ folder.
  5. In the command prompt, type grunt or grunt watch to build the CSS for a theme.
  6. Use the grunt watch command to watch the folders and automatically build the CSS each time a LESS file is saved.

Grunt Files

Grunt is a task-based command line build tool for automating repetitive tasks like minification, compilation, unit testing, linting, etc. The included Grunt file will create your CSS files and minify them across both the HTML and Runway Child theme. The Grunt file will not update the Standalone version of the theme.

Learn more about setting up and installing Grunt.

LESS Files

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Learn more about setting up and using LESS.

Create a Note

Google+