Theme Sniffer is a plugin utilizing custom sniffs for PHP_CodeSniffer that statically analyzes your theme and ensures that it adheres to WordPress coding conventions, as well as checking your code against PHP version compatibility.
The Theme Sniffer requires:
- PHP 7.0 or higher.
- WordPress 4.7 or higher.
- Download zip file. Note: Please use this distribution plugin zip. GitHub provided zip will not work.
- Install this as you normally install a WordPress plugin
- Activate plugin
- Clone this repository under
wp-content/plugins/ - Run
composer install - Run
npm install - Run
npm run build - Activate plugin
-
When developing on Windows machine you might run into various issues with CLI when not installed globally. Installing following items globally might help, but use it with caution:
- Run
npm install --global eslint-cli - Run
npm install --global stylelint - Run
composer global require "squizlabs/php_codesniffer=*"& make sure that you have installed WordPress Coding Standards and PHPCompatibility by runningphpcs -i. When PHPCS installed globally, you might need clone both repositories and add them to PHPCS withphpcs --config-set installed_paths /path/to/PHPCompatibility,/path/to/wpcs
- Run
Note: If you build the plugin this way you'll have extra node_modules/ folders which are not required for the plugin to run, and just take up space. They are to be used for the development purposes mainly. Some of the vendor/ folders are necessary for Theme Sniffer to run
- Go to
Theme Sniffer - Select theme from the dropdown
- Select options
- Click
GO
Select Standard- Select the standard with which you would like to sniff the themeHide Warning- Enable this to hide warningsRaw Output- Enable this to display sniff report in plain text format. Suitable to copy/paste report to trac ticketIgnore annotations- Ignores any comment annotation that might disable the sniffCheck only PHP files- Only checks PHP files, not CSS and JS - use this to prevent any possible memory leaksMinimum PHP version- Select the minimum PHP Version to check if your theme will work with that version
Development prerequisites:
- Installed Node.js
- Installed Composer
- Test environment - Local by Flywheel, VVV, Docker, MAMP, XAMPP, WAMP (whatever works for you)
All of the development asset files are located in the assets/dev/ folder. We have refactored the plugin to use the latest JavaScript development methods. This is why we are using webpack to bundle our assets.
When wanting to add a new feature fork the plugin. If you are a maintainer create a feature/* branch.
To start developing, first clone this repo under wp-content/plugins/. Then run in the terminal:
composer install
npm install
Then you can run:
npm run start
This will run webpack in the watch mode, so your changes will be saved in the build folder on the fly. After you're done making changes, run:
npm run build
This will create the assets/build/ folder with js and css files that the plugin will use and a zip file for installation.
If you want to skip creating the zip file, you can use
npm run dev
This command behaves like the build one, but it skips creation of the zip file.
When developing JavaScript code keep in mind the separation of concerns principle - data access and business logic should be separate from the presentation. If you 'sniff' (no pun intended) through the js code, you'll see that index.js holds all event triggers and calls the method for sniff start that is located in the separate ThemeSniffer class. Business logic modules should contain plain JavaScript (no framework), which makes it reusable. Of course, there is still room for improvement, so if you notice something that could be improved we encourage you to make a PR.
The same is valid for PHP code. The business logic is stored in the src/ folder, the JS and CSS are located in assets/ folder and the views are located in the views/ folder.