Wordpress Boilerplate

This repo is used to start with your Wordpress project.

Who do I talk to?

For questions talk to:

• ivan.ruzevic@infinum.hr
• denis.zoljom@infinum.hr

It contains:

• Webpack3 config and build
• ES Linting
• Style Linting
• PHP Error Check
• WPCS Style Guide
• PostCSS with:
  • Autoprefixer
  • Postcss-font-magician
  • Css-mqpacker
  • Cssnano
• Build and Prebuild Bash Script
• GitIgnore
• Sass files based on Infinum Handbook
• Precreated template files nad helpers
• Bem menues
• Google rich snippets
• ...

Getting started

We recommend search and replace theme_name with your theme name. Change theme name in files:

• theme_name - theme folder
• webpack.config.js - in themeName variable
• postcss.config.js - in themeName variable
• .gitignore
• .eslintignore
• package.json - project name

Development Pre Start

• sh _setup.sh - run script
• Setup docker or any other local environment

Development Start

• npm start
  • Builds assets in watch mode using Webpack

Browser sync

We are using BrowserSync to sync assets cross-device to setup got to webpack.config.js and set proxyUrl variable to service you are using to show Wordpress. It is tested on MAMP and Vagrant.

Linting Assets (JS,SASS)

• npm run precommit
  • Lints JS and SASS using Webpack

Linting PHP

We are using WordPress coding standards 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=WordPress';
• alias wpcbf='phpcbf --standard=WordPress';
• Reload terminal

Checking theme for possible violations:

• wpcs wp-content/themes/theme_name

AutoFix theme for minor violations:

• wpcbf wp-content/themes/theme_name

Build

Build creates public folder in theme with js, css, images and fonts

• sh _prebuild.sh
  • Check for errors js, css, php but not WP standards
• sh _build.sh
  • Builds production ready assets

Note

• ALWAYS prefix custom function. We used inf_.

Recommended plugins

• Advanced Custom Fields PRO
• All-in-One WP Migration
• Better Search Replace
• Contact Form 7
• EWWW Image Optimizer
• Post Duplicator
• Post Type Switcher
• Redirection
• Taxonomy Switcher
• TinyMCE Advanced
• WordPress Importer
• WP Fastest Cache
• WP-Optimize
• WPML
• Yoast SEO

Plugin

If you are creating custom plugin, the use of Wp Plugin Boilerplate is mandatory.

https://wppb.me/