Getting Started with The Bootsmooth Project
How to install a Bootsmooth Project Theme
To build a Bootsmooth Project WordPress Theme, start by downloading the source from its Github repository. You can get the source using one of the methods below:
- Download the zip archive of the master or latest branch and install the theme using the WordPress UI.
- Clone the repository of your chosen theme on in the WordPress theme directory (
git clone https://github.com/cpearson3/bootsmooth-wordpress-theme
The next steps once the theme is downloaded are:
- Install and activate the Bootsmooth WordPress on a WordPress site.
- Install Node and NPM on your webserver.
- Open a terminal, change to the theme directory, install project dependencies:
npm install -g gulp
- Create some pages, blog posts, and a menu and visit your WordPress site.
WordPress Theme Features
Bootsmooth Project WordPress themes implement a standard set of commonly used WordPress theme features. These include:
- Templates for posts, pages, archives, and 404 page handlers
- Primary navigation menu with one sublevel dropdown
- Site search
- Two widget areas:
- Header Widget Area on the Posts Archive page template
- Sidebar Widget Area on the Single Post page template
Once you download a copy of the project, you will see a directory which has the following structure:
style.scss. SCSS files for default variable definitions, component styles, and third-party libraries are located here.
Timber Page Templates
The Bootsmooth WordPress theme is based on the Timber Starter Theme.
Timber is a plugin that allows developers to build themes using a Model-View-Controller approach.
WordPress posts act as the data models which are queried from the database by WordPress / PHP controllers. This data is then passed on via a view context to Twig / HTML templates.
For more information on how WordPress routes requests, visit the WordPress Codex.
Global views include:
- Base Template (base.twig) – Base view that is extended by all page templates. Defines extendable Twig blocks for head, navigation, content, and footer.
- Base HTML Header (html-header.twig) – HTML head code.
- Base Footer (footer.twig) – Default site-wide footer.
WordPress handlers include:
- Posts Page (index.php / index.twig) – Default posts template which includes loop for WordPress blog posts with pagination.
- Single Blog Post (single.php / single.twig) – Template for display single WordPress posts.
- Blog “Tease” Template (tease.twig) – Template for displaying single posts rendered within a loop.
- Default Page (page.php / page.twig) – Default template for WordPress pages.
- Container Page (page-container.php / page-container.twig) – Page template with content wrapped in a container.
- Archives (archive.php, category.php, author.php and related views) – WordPress handlers and views for archive, author, and category templates.
For more information on getting started with Timber, read this article from CSS Tricks.
Building the Theme Sources
The theme stylesheets written in Sass (SCSS) and built with Gulp. The task for building the sources compiles the Sass sources in this order:
- Compile sources and frameworks imported into
- Process the outout with PostCSS
- Pipe the outputs it to
js/scripts.scss and outputs it to
dist/build.js. The default source includs an example class defintion and DOM-ready listener.