WordPress Theme Starter

WordPress starter theme with a modern development workflow without any PHP dependencies required and simple deployment.

Features

• Flat and simple to understand theme file structure following best WordPress' standards.
• Laravel Mix with full support SASS, ES6, autoprefixing and Browsersync.
• Simple templating engine that wraps your template with header, footer and base structure automatically.
• Custom module approach that allows you to quickly build entire site on separated components based on ACF's Flexible Content with full nesting, reusing and previewing support.
• Bootstrap 4 with full Contact Form 7 support and some framework-friendly filters.
• stylelint with stylelint-prettier and stylelint-config-recess-order.
• ESLint with eslint-config-airbnb-base, eslint-plugin-vue and prettier-eslint.
• Polyfill.io for dynamic JavaScript polyfills.
• Lots of useful helpers
• TGM Plugin Activation to manage your plugin dependencies across different environments.

Requirements

Make sure all dependencies have been installed before moving on:

• WordPress >= 5.0
• PHP >= 7.3
• Node.js >= 12.0.0
• Yarn

Theme structure

themes/your-theme-name/         # → Root of your theme
├── acf-json/                   # → Home of your ACF config
├── acf-modules/                # → Home of your ACF modules
├── dist/                       # → Built theme assets (never edit)
├── js/                         # → Theme JS
├── languages/                  # → Theme language files (optional)
├── sass/                       # → Theme stylesheets
├── src/                        # → Theme PHP logic
│   ├── Helpers/                # → Helper source files
│   ├── vendor/                 # → External code fetched from elsewhere (never edit)
│   ├── assets.php              # → Theme assets
│   ├── filters.php             # → Theme filters
│   ├── helpers.php             # → Helper functions
│   ├── navs.php                # → Theme navigations
│   ├── option-pages.php        # → Theme Option Pages
│   ├── plugins.php             # → Theme Plugin Dependencies
│   ├── post-types.php          # → Theme Custom Post Types
│   └── supports.php            # → Theme Basic Supports
├── static/                     # → Theme static assets
│   ├── fonts/                  # → Theme fonts
│   ├── images/                 # → Theme images
│   └── vectors/                # → Theme SVG files
├── templates/                  # → Theme templates
│   ├── partials/               # → Partial templates
│   ├── content-search.php      # → Search template
│   ├── content-single-page.php # → Page template (modular)
│   └── content.php             # → Index (archive) template
├── 404.php                     # → 404 template
├── base.php                    # → Base template
├── footer.php                  # → Footer template
├── functions.php               # → Helpers autoloader, theme includes
├── header.php                  # → Header template
├── index.php                   # → Never manually edit
├── screenshot.png              # → Theme screenshot for WP admin
├── style.css                   # → Theme meta information
└── webpack.mix.js/             # → Laravel Mix config

Theme development

• Run yarn from the theme directory to install dependencies.
• Update your local development domain in webpack.mix.js.
• Run yarn watch to compile assets and run Browsersync.

Build commands

• yarn watch — Compile assets when file changes are made, start Browsersync session
• yarn dev — Compile and bundle your assets
• yarn lint — Lint your assets
• yarn prod — Compile assets for production

Deployment

Suggested methods of deployment are:

• rsync (if SFTP is available in your project)
• git-ftp (if SFTP is not available)

All you need to do is to make sure that bundled assets created by yarn prod command lands on your server besides all your regular theme files.

Suggested Continuous Integration software are:

• CircleCI
• Bitbucket Pipelines

All examples of deployments are included.