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:

  1. Download the zip archive of the master or latest branch and install the theme using the WordPress UI.
  2. Clone the repository of your chosen theme on in the WordPress theme directory (wp-content/themes/):
    git clone https://github.com/cpearson3/bootsmooth-wordpress-theme

The next steps once the theme is downloaded are:

  1. Install and activate the Bootsmooth WordPress on a WordPress site.
  2. Install Node and NPM on your webserver.
  3. Open a terminal, change to the theme directory, install project dependencies:
    npm install -g gulp
    npm install
  4. Run gulp to initiate the build and watch tasks for Sass and Javascript files
  5. 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

Project Structure

Once you download a copy of the project, you will see a directory which has the following structure:

js/
Javascript source code directory. All source is written in ES6. The main build file is scripts.js

scss/
Sass source code directory. The main build file is style.scss. SCSS files for default variable definitions, component styles, and third-party libraries are located here.

dist/
Location of compiled Javascript sources

views/
Twig + HTML page templates

style.css
Compiled and minified theme stylesheet

*.php
WordPress page controller sources

gulpfile.js
The gulp build file

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

Stylesheet

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 scss/style.scss
  • Process the outout with PostCSS
  • Pipe the outputs it to style.css.

Javascript

The gulp task for building the theme javascripts compiles ES6 sources imported into js/scripts.scss and outputs it to dist/build.js. The default source includs an example class defintion and DOM-ready listener.