PHPackages                             ycms/theme-base - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ycms/theme-base

ActiveLibrary[Utility & Helpers](/categories/utility)

ycms/theme-base
===============

036PHP

Since Jul 6Pushed 10y ago1 watchersCompare

[ Source](https://github.com/ycms/theme-base)[ Packagist](https://packagist.org/packages/ycms/theme-base)[ RSS](/packages/ycms-theme-base/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

[Cutlass Wordpress Starter Theme](http://cutlasswp.com/)
========================================================

[](#cutlass-wordpress-starter-theme)

Create themes with the power of Laravel's Blade
-----------------------------------------------

[](#create-themes-with-the-power-of-laravels-blade)

Cutlass is a Wordpress Starter Theme with the power of Laravel's Blade templating engine included, allowing you to develop Wordpress sites more quickly then you ever have before. It includes HTML5 syntax, Bootstrap and Font Awesome by default.

Like Twig better? Try [Sprig!](https://github.com/zach-adams/sprig)

Designed by [Zach Adams](http://zach-adams.com), Cutlass is built off of [Roots Wordpress Starter Theme](https://github.com/roots/roots) and the [Blade Wordpress Plugin](https://github.com/MikaelMattsson/blade)

Special Thanks to [Mikael Mattsson](https://github.com/MikaelMattsson) and the Team at [Roots](http://roots.io) for making the Blade Wordpress Plugin and the Roots Starter Theme respectively

Features
--------

[](#features)

- [Laravel's Blade](http://laravel3.veliovgroup.com/docs/views/templating) templating engine for even quicker Wordpress theme development
- [Gulp](http://gulpjs.com/) for SASS compiling, file concatination, image minifying, javascript uglifying, and livereload
- [Bower](http://bower.io/) for front-end package management
- [Bootstrap Ready](http://getbootstrap.com/)
- HTML5 Ready
- Tons of useful functions and theme activation thanks to [Roots](https://github.com/roots/roots)

Requirements
------------

[](#requirements)

- PHP 5.5 or higher
- Apache or nginx
- Wordpress 3.0.0 or higher

Installing
----------

[](#installing)

1. Clone this repo - `git clone git@github.com:zach-adams/cutlass-wp-theme.git` or [download the zip file](https://github.com/zach-adams/cutlass-wp-theme/archive/master.zip) and install it like a normal Wordpress theme.
2. Go to the theme directory and run `sudo npm install` or `npm install`
3. Run `bower install` to install dependencies
4. Run `gulp dev` to compile the initial css and js or just `gulp` to compile initial css and js and then run watch task

Theme Development
-----------------

[](#theme-development)

### Directory Structure

[](#directory-structure)

```
+-- dist/ - Distribution/Production files, Gulp takes care of this folder
+-- inc/ - Various helpful functions and Blade code. All included in function.php
+-- lang/ - Language code
+-- src/ - Development Files
|   +-- fonts/ - Font Files
|   +-- img/ - Pre-optimized images (images optimized by gulp)
|   +-- js/ - Javascript files
|   +-- sass/ - Default SASS directory
|	|	+-- base/ - Basic CSS styles for HTML, Typography, Colors, etc.
|	|	+-- components/ - Wordpress Specific code, tables, buttons, etc.
|	|	+-- helpers/ - SASS helpers, variables, mixins, paths
|	|	+-- layout/ - Header, Footer, Navigation, Site, etc.
|	|	+-- pages/ - Page specific code (home, contact, etc.)
|   +-- vendor/ - Where your vendor code goes (Bower install's here)
+-- templates/ - Blade templating
|   +-- content/ - Main content for the templates
|   +-- includes/ - Various includes (Header, Footer, etc.)
|   +-- layouts/ - Fundamental layouts of the templates

```

### Install Gulp and Bower

[](#install-gulp-and-bower)

Install Gulp with `npm install -g gulp` and Bower with `npm install -g bower`

### Gulp Tasks

[](#gulp-tasks)

- `gulp dev` - Compiles SASS (without minification), concatinates CSS included with Bower (read in Bower section), copies main.js
- `gulp build` - Compiles SASS (with minifcation), concatinates and minifies CSS included with Bower (read in Bower section), copies main.js
- `gulp watch` - Watches src/ and dist/ folders for changes (as well as all PHP and Blade files) and triggers livereload when it detects one
- `gulp image` - Minifies images in src/img/ to dist/img/
- `gulp image-clear` - Clears all images out of dist/img/ and re-minifies all of them
- `gulp` - Runs `gulp dev` then `gulp watch`

### Bower

[](#bower)

Read more about bower [here](http://bower.io/). Bower installs to the src/vendor directory.

#### How your dependencies are added to vendor.css/vendor.js

[](#how-your-dependencies-are-added-to-vendorcssvendorjs)

Gulp has a plugin called main-bower-files that can read the main files in each bower install, determining which one you're looking for from that. Most of it should happen automatically as you install Bower packages, however there may be times where you don't want packages included in the vendor.css or vendor.js or you wish to alter the files that are included by default. Here's how to do that.

1. Open your bower.json
2. Add the "overrides" section like so:

```
{
  "overrides": {
    "BOWER-PACKAGE-NAME-GOES-HERE": {
    	"main": "**/*.js",
      	ignore": true
    }
  }
}

```

3. Put in the name of the Bower Package
4. **main** is the name of the Javascript files that are passed to Gulp to be minified, you can edit which one Bower chooses by default
5. **ignore**, if set to true, will set the package to be ignored by Gulp when it looks

Bootstrap Navigation
--------------------

[](#bootstrap-navigation)

This theme comes with the [Bootstrap Nav Walker](https://github.com/twittem/wp-bootstrap-navwalker) developed by [twittem](https://github.com/twittem/). Reference the [Github](https://github.com/twittem/wp-bootstrap-navwalker) page on how to make changes.

What's Blade?
-------------

[](#whats-blade)

To quote Laravel's website:

> Blade is a simple, yet powerful templating engine provided with Laravel. Unlike controller layouts, Blade is driven by template inheritance and sections. All Blade templates should use the .blade.php extension.

Luckily Mikael Mattsson of the [Blade Wordpress Plugin](https://github.com/MikaelMattsson/blade) made some custom Wordpress Blade sections we can use so instead of writing:

```