Documentation and user instructions for the Bootstrap 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
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
- Install WordPress and make sure you are using the latest version.
- Login to your WordPress admin.
- Go to Appearance > Themes.
- Click on the Add New button.
- At the top of the Add Themes page click on the Upload Theme button.
- Click the file select input – it might say Browse… or Choose File – then locate and select the theme ZIP file.
- 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
- Extract the files from the theme’s zip file. This will create a folder on your computer named after the theme.
- Login to your FTP server and navigate to your WordPress ‘wp-content/themes‘ folder.
- 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
Upload child theme and framework
- Find the ‘WordPress/Child‘ folder in the theme download.
- Login to your FTP server.
- Navigate to your WordPress themes directory: ‘wp-content/themes‘
- Upload the Runway framework, ‘runway-framework‘, to the remote themes directory.
- 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
- Login to the WordPress admin dashboard.
- Select Appearance > Menus to open the WordPress menu editor.
- Click the create a new menu link at the top of the page.
- 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.
- 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.
- Select the pages that you want to add to the menu by clicking the checkbox next to each page’s title.
- To add the selected pages to the menu click the Add to Menu button located at the bottom of the pane.
- 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.
- In the WordPress menu editor click on the Manage Locations tab.
- Under the Assigned Menu heading use the drop-down menu to assign a menu to a theme location.
- When you have finished, click the Save Changes button.
Your custom menu has now been added to your site.
Bootstrap Starter > Theme Options
Basic settings to configure the logo and design settings.
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.
- 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‘.
Choose the background color and style of the home page header.
Adjusts height, font sizes, padding and more for the home page header.
- Header Content
Add your custom home page header content.
- Auto Paragraphs
Enables the WordPress auto paragraphs function on home page header content.
- 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.
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.
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.
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.
Custom WordPress page templates are included in the theme. These templates are stored in the ‘runway-bootstrap-starter/templates‘ folder.
The template for displaying full background cover pages.
The template for displaying full background cover at the top of the page before the full page content.
The template for displaying pages with no sidebar.
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.
The template for displaying pages with a left sidebar.
The template for displaying pages with the sidebar right.
The default home page styling.
The default login form styling.
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.
Makes a paragraph stand out by adding the
<p class="lead">Some introduction text before the content.</p>
Add a padded content section when a container is given the
<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
<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
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
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>
Adds a gradient to the header element. Applied in ‘header.php‘ and ‘extensions/bootstrap-custom-header‘.
<section id="header" class="masthead masthead-gradient"> <!-- Header Content Here --> </section>
Applies the default primary background color to the header element. Applied in ‘header.php‘ and ‘extensions/bootstrap-custom-header‘.
<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>
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‘.
<section id="header" class="masthead masthead-large"> <!-- Header Content Here --> </section>
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 but with fixed positioning to stay at the browser bottom even when scrolling.
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‘.
The download includes an HTML version with sample templates.
- Bootstrap Starter
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.
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.
Bootstrap Custom Header
Custom header content for the Bootstrap Starter theme.
Bootstrap Custom Login
Customize the WordPress login screen background and logo.
Custom navigation walker adds Bootstrap specific structure to WordPress navigation menus.
Bootstrap Template Functions
Custom template functions for the Bootstrap Starter theme.
Image Attachment Template Functions
Functions specific to the image template of the Bootstrap Starter theme.
Jetpack Compatibility Functions
Add specific Jetpack compatibility features to the theme.
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.
- Download the full Bootstrap Starter Theme package.
- Install dependencies:
- Make sure grunt is available at the command prompt.
You can install
grunt-clias described on the Grunt Getting Started page.
- Modify one of the LESS files: ‘runway-bootstrap-starter/assets/less/‘.
You should avoid editing files in the ‘/less/bootstrap/‘ folder.
- In the command prompt, type
grunt watchto build the CSS for a theme.
- Use the
grunt watchcommand to watch the folders and automatically build the CSS each time a LESS file is saved.
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.
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.