AYLIN - Minimal Wordpress Theme

Boilerplate aims to be compatible with a large range of PHP versions, however, still have modern tooling for developing a theme.

What's inside?

• Webpack - Module Bundler
• SASS - a CSS preprocessor
• Babel - JavaScript ES6 to ES5 compiler
• Stylelint - a SCSS linter
• Prettier - a SCSS linter
• ESLint - a JavaScript linter

Important Prerequisites

Development Environment

Make sure you have:

1. Node installed on your system.
2. Yarn globally installed.
3. PHP >= 5.2.4 installed before moving on.

WordPress

Boilerplate follows a WordPress Minimal Requirements.

1. Read the WordPress theme development guidelines
2. Understand the WordPress template hierarchy
3. Understand the WordPress Loop
4. Understand how WordPress helps with Data Validation/Sanitization
5. Read up on the following WordPress core APIs:
   • the Plugin API
   • the Shortcode API
6. Understand when you should use a Custom Functionality Plugin instead of implementing functionality within a theme
   • Creating a custom functions plugin for end users
   • How to Create a Custom Functionality Plugin (And Why You Need One)

JavaScript

1. This project uses webpack to provide support for modular JS, read up on the functionality & tools it provides

CSS

1. The boilerplate assumes you are using SCSS to write your styles and compiles to CSS using Node Sass
2. PostCSS is used to help you write modern CSS. PostCSS is a very popular tool that allows developers to write CSS pre-processors or post-processors using Plugins:
   • Autoprefixer is used for parsing and adding the correct vendor prefixes to the final generated CSS
   • PostCSS Preset Env is used to let you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments.
   • CSS MQPacker is used to pack same CSS media query rules into one using PostCSS.
   • CSSNANO is used to minify your CSS and makes code optimizations to have the least amount of code delivered in production.

Development Guidelines

• Avoid committing the built theme to the project repository
• Avoid committing the wp-uploads directory to the project repository
• Avoid making changes directly to the built theme -- Always use the build process
• In production avoid uploading the theme development directory to a public server!
• It is good practice to enable WP_DEBUG in your wp-config.php file, but only during development. If you use our Vagrant Dev Environment setup, its already handled ;)

Standard Theme Development Process

Installation and Setup

1. Install WordPress and clear it of unnecessary default themes & plugins. If you use our Vagrant Dev Environment setup, skip this line.
2. Clone/Download the contents of this repository into a directory in your WordPress wp-content/themes directory:

    $ git clone -b master git@github.com:code2gether/aylin-minimal-wordpress-theme.git
    # or if you want to change name of project when cloning it
    $ git@github.com:code2gether/aylin-minimal-wordpress-theme.git <my-theme-name> # without the arrows

3. Open the terminal and navigate to the my-theme-name directory:

    cd wp-content/themes/my-theme-name/resources

4. (Note: The next steps require nodejs and yarn)
5. Run yarn to install all dev dependencies
6. Run yarn build to generate the "built theme" for the first time
7. Log in to the admin and enable the my-theme-name
8. Start Developing! 🎉

Development

To begin developing your application, make sure you are in my-theme-name directory:

1. run yarn start to begin the development build process that uses Browsersync, Webpack and Node SASS.
2. Develop your theme in the resources/assets and /my-theme-name directories, the built assets will be generated by webpack into dist directory
3. Optional Stuff:
   • To install any dependency, use yarn add <module(s)> to easily manage JS dependencies, then use import <module> from '<module>'; anywhere in your JS files you want to use them.

Production

1. Delete files you are not using from inside the /my-theme-name directory
2. Make sure to add a screenshot.png to your theme.
3. Before deploying run yarn build to generate a Production ready version of the built theme
4. Deploy the built theme dist directory, not the assets directory

Resources Structure

resources/
|-- fonts/ # Custom typefaces goes here.
|   |-- .gitkeep
|-- images/ # Put static images here.
|   |-- .gitkeep
|-- scripts/ # Put JS scripts here.
|   |-- main.js
|-- styles/ # Styles goes here.
|   |-- helpers/ # Useful SCSS helpers
|   |-- _global.scss # global style for theme
|   |-- main.scss # Put your custom SCSS modules here

Contributing

Great that you are considering supporting the project. You have a lot of ways to help us grow. We appreciate all contributions, even the smallest.

• Report an issue
• Propose a feature
• Send a pull request
• Star project on the GitHub
• Tell about project around your community

License

AYLIN is licensed under the MIT license.