#FST - A ZURB Foundation Starter Theme for WordPress
FST is a simple WordPress starter theme loaded with ZURB Foundation 5.5.2.
This theme has been built for use as a starter theme and as a learning aid for people who wish to get into WordPress theme design.
MIT licence (open source).
Note: in January 2015 this theme had a major re-build, bringing its base files in line with BST, my Bootstrap Starter Theme for WordPress. Now users of either theme will feel 'at home' in the other.
##Features of FST
- Simple, intuitive, clean code – CSS, JS, functions, template includes and loops are organized into different folders.
- ZURB Foundation 5.5.2 – CSS and JS enqueued in
- jQuery 2.1.4 enqueued – from the
- Normalize 3.0.3 enqueued – from the
- Foundation icon fonts included – http://zurb.com/playground/foundation-icon-fonts-3. These are used in various places throughout this theme.
- Two WordPress menu positions in the Foundation top-bar – left and right.
- Optional search form built into the top-bar
- Foundation pagination for blog index and category pages
- A starter CSS theme –
css/fst.css(Don't put your own styles in
- Visual editor stylesheet – into which the same Foundation and starter CSS theme are preloaded by
@import, so that what you see in the visual editor is (mostly!) what you get at the front end (WYSI(M!)WYG). E.g. you will see the theme's typography in the WordPress Post/Page editor, but its width will not be the same as your article column width in the front end.
You can simply swap the default Foundation files (included) for a custom made Foundation CSS generated by the customizer (http://foundation.zurb.com/develop/download.html), and this theme will still work.
- You will still need to include the button styles and form styles in the customized foundation.css build.
- If in the customizer you change the humber of grid columns (from the default 12), you will need to adapt the grid layout in
You will need to:
- Get the latest Foundation SCSS files from http://foundation.zurb.com/docs/sass.html and place them in a
scss/folder in the root directory of this theme;
- Set up your pre-processor so that it outputs your CSS files in the theme's
- Then you can modify
scss/foundation/_settings.cssand you can create your own
scss/fst.scssfile. Note: be sure to copy my original content of
css/fst.cssinto your SCSS file before your pre-processor overwrites it.
Alternatively, you may prefer to combine all into one CSS file, by putting
@import "foundation/settings"; and
@import "foundation"; at the top of your scss/fst.scss.
If you do this, then remember to remove the register and enqueue for "foundation.min.css" from
functions/enqueues.php as it is no longer required. Also, you will then need to remove
@import url("foundation.min.css"); from
##Make this theme your own
You can easily make this theme your own by following these steps:
- Rename the root folder from
- In your code editor, do a global search-and-replace ("Replace in files...") to rename ...
your-theme– everywhere in the theme's code.
- Modify the comments in style.css.
Do all that correctly, and this WordPress theme will still work!