Prelude is a WordPress starter theme that helps you craft custom themes. It uses Gulp to compile and minify scss/css, concatenate and minify JS, compress images, and more.
Prelude uses Gulp to:
- Compile & minify Sass/CSS with sourcemaps
- Auto-prefix your Sass/CSS
- Minify and concatenate JavaScript/jQuery
- Compress images
- Package a theme for upload to WordPress or distribution
Prelude has some nifty features built into functions.php
to make developing a custom WordPress theme a little easier.
- Defer jQuery Parsing using the HTML5 defer property
- Customized Read More Links
- Get Featured image as URL
- Other various improvements to default WordPress functions that are too long and/or small to list here, check 'em out!
Prelude requires that you have Node and npm installed on your machine. If you need help with that, please visit the npm documentation.
- Install Prelude into your project using
npm install prelude-wp --save
and copy all theme files to your root directory. NOTE: As of3.3.9
Prelude no longer automatically moves theme files into your root directory. - Using the
theme
variable found ingulpfile.js
name your theme. This is only used for packaging purposes and is not critical (Don't forget to also fill out the theme information found instyle.css
in the root) - Run the default Gulp task while editing files using
gulp
orgulp default
You can modify the file structure however you like as long as it is also updated in gulpfile.js
. Of course your project files may vary. By default it is as follows:
.
├── README.md
├── gulpfile.js
├── package.json
├── .editorconfig
├── .jshintrc
├── assets/
│ ├── fonts/
│ ├── img/
│ │ ├── icons/
│ ├── js/
│ │ ├── plugins/
│ │ ├── vendor/
│ │ └── theme.js
│ ├── scss/
│ │ ├── components/
│ │ │ └── _footer.scss
│ │ │ └── _header.scss
│ │ │ └── _social-menu.scss
│ │ ├── globals/
│ │ │ └── _global.scss
│ │ │ └── _typography.scss
│ │ │ └── _WordPress.scss
│ │ ├── pages/
│ │ ├── parts/
│ │ ├── plugins/
│ │ │ └── _overrides.scss
│ │ ├── vendor/
│ │ └── _variables.scss
│ │ └── theme.scss
├── inc/
│ └── custom-post-types.php
│ └── menus.php
│ └── shortcodes.php
│ └── thumbnails.php
│ └── tweaks.php
│ └── widgets.php
├── page-templates/
├── parts/
│ └── meta.php
│ └── post-nav.php
├── 404.php
├── archive.php
├── comments.php
├── footer.php
├── functions.php
├── header.php
├── index.php
├── page.php
├── screenshot.png
├── search.php
├── sidebar.php
├── single.php
└── style.css
We have created variables to hold an array of your desired paths. This makes it so that you only need to update paths in one location. These variables are then passed into the Gulp tasks for processing.
The variables are:
phpFiles
- accepts an array of .php fileshtmlFiles
- accepts an array of .html filescssFiles
- accepts an array of .css filesassFiles
- accepts an array of .scss/.sass filesstyleFiles
- uses bothcssFiles
&sassFiles
paths for watching purposes (avoids loop issues)jsFiles
- accepts an array of .js filesimageFiles
- accepts an array of image files (.jpg, .png, .gif, etc)concatFiles
- accepts an array of .js files. These are used to concatenate your .js files into one file, and as such the files must be listed in the order you desirecopyFiles
- accepts an array of filesurl
- accepts a string to use as the BrowserSync proxy
Below are a list of the default gulp tasks.
gulp serve
- creates a local development server with live reloading and CSS injection via BrowserSyncgulp sass
- compiles Sass/SCSS files into CSS, adds vendor prefixes, and creates a sourcemapgulp minify-css
- ensures all Sass/SCSS is compiled to CSS and minifies themgulp styles
- runs thesass
andminify-css
tasks, in that ordergulp lint
- a JavaScript helper to find and catch errors, and creates a sourcemapgulp scripts
- concatenates and minifies JS files (in the order you declare)gulp images
- compresses imagesgulp watch
- watches files for changes and runs tasks based on what was updatedgulp package
- creates a production ready.zip
file based on your production theme foldergulp build
- runs all tasks exceptserve
andwatch
Running gulp
or gulp default
will run all tasks except package
.
We are always looking for ways to improve. If you find a bug, have a question, or wish to add a contribution please open an issue.