FSE Generator Overview
Build hand-coded WordPress themes using build tools — SCSS, Autoprefixer, Browsersync — and Bootstrap.
Installation / Getting Started
- Create your theme folder, and open your terminal within your theme folder.
- If it's your first time using Yeoman generators. Install this first, use the command:
npm i -g yo - Then install the generator:
npm i -g generator-fse - And run the generator:
yo fse
You will be guided through describing your Theme. And after just 2 minutes, you can begin hand-coding your Theme! 🎉🎉🎉
Why the FSE Generator?
Get code started rather than spending time setting up the theme. Save up to 48 minutes per startup worth of your precious time for every web build. The more projects you do, the more time you save.
SCSS / CSS
Contains a list of useful mixins for your SCSS
PHP / HTML
Forked from the WordPress _s theme, and tidied up slightly, to make it work with bootstrap components which you will use the most.
JavaScript
Basic JavaScript taken from the _s theme, with the ease of use to include your own JavaScript code in an organised manner through the /js/ folder.
Bootstrap
One of the world's most popular frameworks used on millions of websites to date, proving its resilience through many years and more to come. Powered by the world's top websites on the internet today.
NPM
npm run watch — automatically refresh your browser, compile your scss, and autoprefix your css.
npm run build — zip your theme for production-ready websites, and remove build files/code.
Built upon the _s theme by Automattic
The FSE Generator is built upon the _s theme by Automattic — a starter theme built for WordPress, to save you 1,000s of hours worth of development time.
We Keep It Simple, so You Focus on Building What You Do Best
We have removed any conflicts/redundancies between Bootstrap and the _s theme, so that you never face those conflicts again. This includes _s theme containing Normalize.css, but Bootstrap already has Normalize.css!
We have removed unneeded code in _s so that your hand-coded theme is rest-assured custom!
Contact Us
If you have any queries/questions/feedback, please drop us an email at info@fsedigital.com 😊
About FSE Digital
FSE Digital is a full-service digital marketing agency skilled in SEO, PPC, Social Media, Web Design/Development, and Copywriting. With a network of associates throughout London and the United Kingdom.
FSE Digital delivers tailored, consultative markeitng services that can be applied to businesses of any sector, size, or budget.
css
fonts
images
inc
├── customizer.php
├── jetpack.php
├── template-functions.php
├── template-tags.php
├── woocommerce.php
└── wpcom.php
js
├── customizer.js
├── navigation.js
└── skip-link-focus-fix.js
languages
├── _s.pot
└── readme.txt
sass
├── elements
│ └── _elements.scss
├── forms
│ ├── _buttons.scss
│ ├── _fields.scss
│ └── _forms.scss
├── media
│ ├── _captions.scss
│ └── _media.scss
├── mixins
│ └── _mixins-master.scss
├── modules
│ ├── _accessibility.scss
│ ├── _alignments.scss
│ └── _infinite-scroll.scss
├── navigation
│ ├── _menus.scss
│ └── _navigation.scss
├── site
│ ├── primary
│ │ ├── _comments.scss
│ │ └── _posts-and-pages.scss
│ └── _site.scss
├── typography
│ ├── _copy.scss
│ ├── _headings.scss
│ └── _typography.scss
├── variables-site
│ ├── _colors.scss
│ ├── _structure.scss
│ ├── _typography.scss
│ └── _variables-site.scss
├── _plugins.scss
├── _theme.scss
├── _utilities.scss
└── style.scss
template-parts
├── content-none.php
├── content-page.php
├── content-search.php
├── content-single.php
└── content.php
.editorconfig
.gitignore
.jshintignore
.npmrc
404.php
archive.php
comments.php
footer.php
functions.php
header.php
index.php
LICENSE
package.json
page.php
phpcs.xml.dist
readme.txt
rtl.css
screenshot.png
search.php
sidebar.php
single.php
style.css