WordPress Theme Builder

Este projeto tem o carater de prover um conjunto de ferramentas para facilitar o desenvolvimento de temas para WordPress.

Requisitos

• PHP: 7.0.33^
• Advanced Custom Fields: 5.8.12^
• WordPress: 5.4.1^
• WooCommerce: 4.3.0

Guidelines

• PHP
  • Templates, Template-parts and Components are compressed for performance
  • Because of this, don't write multiple line functions or conditions
  • For any complex validation, invoke a specific function
  • If it needs to write a code snippet, invoke a template-part or a component
  • Make use of variable sharing / global
  • Try not to have exceptions

Commands

Build for deploy:

npm run build --prod

gulp build --production

Place a watcher on the whole src folder:

npm run watch --prod

gulp watch --production

Clean dist folder:

gulp clean

Disclaimer: This program have a watcher built in, but it's not that reactive to changes - especiatilly with added new/old files. So, after add or remove anything, is to best run gulp build or npm run build. There's also --prod and --dev mode attached to each command. By default, gulp will run everything as --dev.

Folder structure

|- builder/
  |- gulp/
  |- utils/
  |- webpack/
  |- config.js
|- dist/
|- node_modules/
|- theme/
  |- public/
  |- src/
    |- assets/
    |- components/
    |- functions/
    |- templates/
    |- templates-parts/
    |- woocommerce/
|- .babelrc
|- .eslintignore
|- .eslintrc.js
|- .gitignore
|- gulpfile.babel.js
|- package.json

Details

• Files

  • /builder/config.js: Builder config - mostly, global variables
  • .babelrc: Babel config
  • gulpfile.babel.js: Gulp config exit

• Folder

  • /builder/gulp: contain the gulp config parts
  • /builder/dist: files for distribution
  • /builder/utils: JS for builder
  • /builder/webpack: contain the webpack config parts
  • /theme/public: static files for distribution
  • /theme/src: files for development
    • /assets: assets files
    • /components: reusable components
    • /functions: functions parts
    • /templates: resusable templates
    • /templates-parts: templates parts
    • /woocommerce: woocommerce parts

Helpful links

WordPress

• Bloginfo
• Conditional Tags
• Functions
• Template Tags
• Theme Handbook

Structure

• Gulp 4.0
• CSS Tools: Reset CSS
• WooCommerce: Templates
• WooCommerce: Conditional Tags
• WooCommerce: Checkout Fields
• ARIA
• ARIA Techniques
• Kinda: Speed up Your WordPress (2020)
• JavaScript Events

Others

• CHANGELOG

Icons (PNG)

• android-chrome-192x192
• android-chrome-512x512
• apple-touch-icon
• apple-touch-icon-60x60
• apple-touch-icon-76x76
• apple-touch-icon-120x120
• apple-touch-icon-152x152
• apple-touch-icon-180x180
• favicon-16x16
• favicon-32x32
• msapplication-icon-144x144
• mstile-150x150

Icons (SVG)

• safari-pinned-tab