Home

Welcome to the Create WordPress Project!

Create WordPress Project is a WordPress Plugin and Theme development environment to help you build your next best project in a modern, secure, flexible, and interactive manner. You build with modern tools, codes, and markups and leave the rest to the build process to bundle and export a final project for you.

This project is a WP Rig spin-off. For more details, see it's Wiki.

Features

CSS

Stylesheets (CSS files) are processed using PostCSS leveraging PostCSS Preset Environment to allow modern/future CSS markups and Custom Properties aka Variables. During processing, CSS is passed through Autoprefixer to ensure backward compatibility with older browsers.

Stylesheets are loaded progressively on a component basis within in-body <link> tag. This preload feature is not available out-of-the-box on WordPress (yet).

You will not be using the default WordPress hook to register or enqueue stylesheet. To use preload feature (see Asset class), you will need to add style and then call that stylesheet handle when needed.

• Asset::add_style() - Main method for you to register stylesheet to the project. Use this on or after wp_loaded hook but before default WordPress script registration hooks such as wp_enqueue_scripts.

• Asset::print_styles() - Main method for you to add stylesheet when it is needed. Use this on your template file or wherever it seems fit to add style for that particular content (component).

• Asset::preload_styles() - Helper method to preload stylesheet conditionally. This is used internally to generate <link> tag with rel="preload" attribute. Just here for completeness.

• Asset::has_preload() - Helper method to verify if preloading is enabled or not. By default, it returns false if current project supports AMP, else true. Just here for completeness.

Stylelint is used to lint CSS files compliant with WordPress CSS Coding Standards.

Javascript

Javascript files are processed using Babel compiler so the next generation javascript works perfectly with older browsers.

AMP plugin is supported by default and Developer Interactivity is considered to load scripts conditionally. This means JS files are never registered or enqueued when the AMP plugin is installed and activated in the current project.

You will not be using the default WordPress hook to register or enqueue scripts. To support the AMP project (see Asset class), you will need to handle scripts differently.

• Asset::register_script() - Main method for you to register javascript to the project. Use this on or after wp_loaded hook but before WordPress script registration hooks such as wp_enqueue_scripts.This method has the $enqueue parameter to queue script automatically. It is recommended to pass true here so nothing more to do on your part.

• Asset::localize_script() - Main method for you to add localized data to the registered script. You may call this method before or after register_script (preferably after) as data is only localized at the time of enqueuing the script handle.

• Asset::enqueue_script() - Helper method for you to enqueue javascript that are registered using register_script method and when $enqueue set to false. You will need to manually enqueue them using default WordPress script registration hooks (not recommended).

• Asset::is_amp() - Helper method that determines whether or not to register script if current project supports AMP. This is used internally to register/enqueue script only when the project does not support AMP.

ESLint is used to lint Script files compliant with WordPress JavaScript Coding Standards.

Google Fonts

Full support for loading Google Fonts. To add google fonts (see Asset class), you may use:

• Asset::add_google_font() - Main method to add google font. Pass the font name and array of font weights as method parameters to register that google font.

• Asset::set_google_font_display() - Set google font display type. Default is swap.

PHP

PHP in Create WordPress Project is developed using PHP Codesinffer (PHPCS) compliant with WordPress PHP Coding Standards. Some of the rules are modified so Codesniffer won't flag for the modern build process set up for this project (see Ruleset XML File).

• Namespace - This development environment supports PHP Namespace for autoloading files that contains class, interface or trait compliant with the PSR-4 Standard.

  • It is strictly recommended to have a file to only define class, interface or trait inside it and nothing else.

  • An autoloader already exists to the root directory and by default autoloads file inside Includes and Assets directory (that are PSR-4 Compliant).

  • The above mentioned Asset class is loaded using the autoloader (see Bootstrap class private method Bootstrap::setup() where autoloader is used). Lets consider the Asset file as an example:

    • Asset.php file is inside Assets directory.
    • namespace must be TheWebSolver\Codegarage.
    • classname must be Asset (same as filename without extension .php).
    • Autoload path will then be {Bootstrap::$root}/Assets/Asset.php.

• Type Hints - Since, Create WordPress Project has a minimum requirement of PHP 7.0, parameter type hints and return type hints are used wherever possible. This is done for code clarity and error-proofing.

Translate

• Create WordPress Project has built-in support for auto-generation of .pot file to make your project translation ready.

Contribute

Developers are welcome to contribute and provide feedback. For now, you can start a discussion 📣 for any review, suggestion, or amendment.

Thank You

Thank you for trying out this development rig. Cheers!!! 🍻