The starter theme for building Flynt projects.
โ ๏ธ DEPRECATED. This repository is no longer in active development. For the latest version of Flynt please use the new Flynt repository. โ ๏ธ
Flynt is a sustainable approach to website development and content management with a component-based philosophy.
Flynt Theme is a ready-to-go WordPress theme that implements all of Flynt's best practices.
<your-project>/wp-content/themes
.flynt-starter-theme/gulpfile.js/config.js
to match your host URL.const host = 'your-host-url.test'
<your-project>/wp-content/themes/flynt-starter-theme
. Run yarn
and then yarn build
.flynt-starter-theme
theme.In your terminal, navigate to <your-project>/wp-content/themes/flynt-starter-theme
and run yarn start
. This will start a local server at localhost:3000
.
Changes to files made in Components
and Features
will now be watched for changes and compiled to the dist
folder.
All template files can be found under the theme root, in the templates
directory.
The structure of each page within the theme is created using a nested JSON object. Each PHP template within the templates
directory takes a simple JSON configuration file, and using the Flynt Core plugin, parses and renders this into HTML.
For example, take templates/page.php
:
<?php
Flynt\echoHtmlFromConfigFile('default.json');
The JSON template configuration files are found in config/templates
. These configuration files define the components and their areas which are loaded into the template.
Take config/templates/default.json
as an example. This template contains the DocumentDefault
component, with one area within it: layout
. The layout
area contains the LayoutSinglePost
component, which in turn has three nested areas: mainHeader
, pageComponents
, and mainFooter
. In addition, the pageComponents
area contains the ComponentLoaderFlexible
component.
{
"name": "DocumentDefault",
"areas": {
"layout": [
{
"name": "LayoutSinglePost",
"areas": {
"mainHeader": [],
"pageComponents": [
{
"name": "ComponentLoaderFlexible",
"customData": {
"fieldGroup": "pageComponents"
}
}
],
"mainFooter": []
}
}
]
}
}
The layout
area is then rendered in the Components/DocumentDefault/index.twig
template:
<!DOCTYPE html>
<html class="flyntComponent {{ body_class }}" lang="{{ site.language }}" dir="{{ dir }}" is="flynt-document-default">
<head><!--...--></head>
<body role="document">
{{ area('layout') }}
{{ wp_footer }}
</body>
</html>
A component is a self-contained building-block. As such, each component is kept within its own folder which contains everything it requires; the layout, the ACF field setup, all necessary WordPress filter and hook logic, scripting, styles, and images.
ExampleComponent/
โโโ assets/
| โโโ exampleImage.jpg
| โโโ exampleIcon.svg
โโโ fields.json
โโโ functions.php
โโโ index.twig
โโโ README.md
โโโ script.js
โโโ style.styl
Building components is a sustainable process, meaning every component you develop can be reused within a project, or in another; increasing your head-start with every new Flynt project.
Since components are self-contained, areas provide a way to stack our building-blocks together. An area is simply a location within a component where it is possible to add other components.
With WordPress, it is easy to create one large functions.php
file, crammed full of all the custom logic your theme may need. This can get messy. In Flynt, we split each piece of functionality into smaller, self-contained feature bundles.
In most cases, features add global hooks and filters that affect the project on a global level. With this in mind, each feature is built with reusability in mind.
Flynt comes with a core set of ready to go features, each with its own readme. To learn more, look through the Features directory.
flynt-starter-theme/ # โ Root of the theme
โโโ Components/ # โ All base components
โโโ config/ # โ WP/ACF Configuration
โ โโโ customPostTypes/ # โ Configure custom post types
โ โโโ fieldGroups/ # โ Configure ACF field groups
โ โโโ templates/ # โ Page templates (JSON)
โโโ dist/ # โ Built theme files (never edit)
โโโ Features/ # โ All features
โโโ gulpfile.js/ # โ Gulp tasks and setup
โ โโโ tasks/ # โ Individual gulp-tasks, e.g. webpack, stylus
โ โโโ config.js # โ Gulp config
โ โโโ index.js # โ Load gulp tasks with config
โ โโโ webpack.config.js # โ Webpack config
โโโ lib/ # โ Hold utils and setup features
โ โโโ Utils/ # โ Small utility functions
โ โโโ Bootstrap.php # โ Flynt Bootstrap
โ โโโ Init.php # โ Setup theme, register features
โโโ node_modules/ # โ Node.js packages (never edit)
โโโ templates/ # โ Page templates (PHP)
โโโ .gitignore # โ Files/Folders that will not be committed to Git.
โโโ .stylintrc # โ Define Stylus linting rules
โโโ functions.php # โ Set template directory and load lib/Init.php
โโโ index.php # โ Theme entry point (never edit)
โโโ package.json # โ Node.js dependencies and scripts
โโโ phpcs.ruleset.xml # โ Define PHP linting rules
โโโ screenshot.png # โ Theme screenshot for WP admin
โโโ style.css # โ Required WordPress theme style file.
โโโ yarn.lock # โ Yarn lock file (never edit)
You can read the full documentation here.
This project is maintained by bleech.
The main people in charge of this repo are:
To contribute, please use GitHub issues. Pull requests are accepted. Please also take a moment to read the Contributing Guidelines and Code of Conduct.
If editing the README, please conform to the standard-readme specification.
MIT ยฉ bleech