Infinum WordPress Boilerplate

This repository contains all the tools you need to start building a modern WordPress theme, using all the latest front end development tools.

Who do I talk to?

For questions talk to:

• ivan.ruzevic@infinum.hr
• denis.zoljom@infinum.hr
• team@eightshift.com

It contains:

• Webpack4+ config and build
• ES Linting
• Style Linting
• PHP Error Check
• WPCS Style Guide
• BrowserSync
• PostCSS with plugins
• Build and Prebuild Bash Script
• .gitignore
• Sass files based on Infinum Handbook
• Precreated template files and helpers
• BEM menues
• Google rich snippets
• Object oriented codebase
• Namespacing
• Autoloader
• Project-specific wp-config
• Import / export scripts
• Project setup wizard
• ...

Getting started

First you need to install WordPress locally, using any of the local development environment you prefer. You can use XAMPP, MAMP, WAMP, VVV, Docker or Laravel Valet. You'll also need to have Node.js, Composer and WP-CLI installed.

To start, fork this repository to your own, and then clone it

git clone git@github.com:your-name/wp-boilerplate.git

If you are using VVV clone it in the public_html folder

git clone git@github.com:your-name/wp-boilerplate.git public_html

Run node script to setup your project and rename all files via wizard. Run this first and only once

npm run rename

This will make changes to theme name, description, author, text domain, package, namespace, and constants (this is important when specifying environment variable).

Development Pre Start

After renaming your theme, run this to setup WordPress on the server. The script will install npm and composer dependencies and install the latest version of WordPress.

bash bin/_setup.sh

After running setup script, you'll need to create wp-config.php. You can do that manually, or use WP-CLI

wp config create --dbname={DBNAME} --dbuser={DBUSER} --dbpass={DBPASS}
wp core install --url={dev.boilerplate.com} --title={THEMENAME} --admin_user={ADMINUSER} --admin_email={ADMINMAIL}
wp theme activate {THEMENAME}

Development Start

Builds assets in watch mode using Webpack.

npm start

Browser sync

We are using BrowserSync to sync assets and enable easy cross-device testing. It is tested on MAMP and Vagrant (VVV).

Linting Assets (JS,SASS)

Lints JS and SASS using Webpack

npm run precommit

Linting PHP

We are using Infinum coding standards for WordPress to check php files.

To install it, you need to install Composer first.

• Add this aliases to you bash config:

alias phpcs='vendor/bin/phpcs';
alias phpcbf='vendor/bin/phpcbf';
alias wpcs='phpcs --standard=vendor/infinum/coding-standards-wp/Infinum';
alias wpcbf='phpcbf --standard=vendor/infinum/coding-standards-wp/Infinum';

• Reload terminal

Checking theme for possible violations:

wpcs wp-content/themes/inf_theme

Autofix theme for minor violations:

wpcbf wp-content/themes/inf_theme

Build

Build creates public folder in theme all the assets.

Check for errors js, css, php but not WP standards

bash bin/_prebuild.sh

Builds production ready assets

bash bin/_build.sh

Import & Export

Details are located in the README-project.md file. Be sure to change the URL according to your project.

Note

This theme uses OOP with namespaces and autoloader. We have also included ci-exclude.txt file, to point what files to exclude when deploying using continuous integration.

When you add new class in your theme, be sure to run

composer -o dump-autoload

to rebuild the composer's autoload class map. The reason why this isn't automatic is that we are folowing modified WordPress coding standards, and not PSR standards, so this has to be done manually.

Recommended plugins

Below is the list of plugins that we've used when working with this boilerplate, so we can confirm that they are working

• Content:

  • Advanced Custom Fields PRO
  • Category Order and Taxonomy Terms Order
  • Post Duplicator
  • Nested Pages
  • TinyMCE Advanced
  • Regenerate Thumbnails

• Develop:

  • Debug Bar
  • Query Monitor

• Seo:

  • Yoast SEO
  • ACF Content Analysis for Yoast SEO

• Optimizations:

  • Autoptimize
  • Nginx Helper or WP Fastest Cache
  • WP-Optimize
  • Redirection
  • Transients Manager
  • Wordfence Security

• Multilanguage:

  • WPML Multilingual CMS
  • WPML String Translation
  • WPML Translation Management
  • Advanced Custom Fields Multilingual

• Other:

  • WordPress Importer
  • Mailgun

Plugin

When working for a client it may be easier to add every additional functionality to the theme. Since you are using namespaces, this contains all the necessary logic in the theme. You can use plugins of course, but be careful how you are adding extra functionality, so that you don't run in the dependency hell. If you need to expose certain functionality across the multisite we recommend that you create a plugin.

Plugins should be created using plugin boilerplate, with addition of namespaces and autoloader.

https://wppb.me/

Credits

Infinum WordPress Boilerplate is maintained and sponsored by Infinum.

License

Infinum WordPress Boilerplate is Copyright ©2018 Infinum. It is free software, and may be redistributed under the terms specified in the LICENSE file.