imranhsayed / aquila

🎨 An Advanced WordPress theme
1.02k stars 218 forks source link
advanced-wordpress-theme-devlopment babel hacktoberfest hacktoberfest2020 oop sass singleton webpack4 wordpress-development wordpress-theme wordpress-theme-development

WordPress Theme - Aquila 🎨

Project Status: Active. code style: prettier

WordPress theme development banner

Tutorial Course

Also See - Advanced WordPress Plugin Development

Features:

Maintainer

Name Github Username
Imran Sayed @imranhsayed

Usage

  1. Clone the WordPress theme aquila in your WordPress themes directory and activate it.

Dashboard Setup.

  1. Create pages called 'Home' and 'Blog' and set them from Appearance > Customizer > Homepage Settings like so:

Development ( To be added )

Install

Clone the repo and run

cd aquila/assets
npm install

During development

npm run dev

Run precommit from assets directory before pushing the code for development/contribution.

cd assets && npm run precommit

Production

npm run prod

Linting & Formatting

The following command will fix most errors and show and remaining ones which cannot be fixed automatically.

npm run lint:fix

We follow the stylelint configuration used in WordPress Gutenberg, run the following command to lint and fix styles.

npm run stylelint:fix

Format code with prettier ( TO BE ADDED )

npm run format-js

Directory Structure

.
β”œβ”€β”€ README.md
β”œβ”€β”€ assets
β”‚Β Β  β”œβ”€β”€ main.js
β”‚Β Β  └── src
β”‚Β Β      └── library
β”‚Β Β          β”œβ”€β”€ css
β”‚Β Β          β”‚Β Β  β”œβ”€β”€ bootstrap-grid.min.css
β”‚Β Β          β”‚Β Β  └── bootstrap.min.css
β”‚Β Β          └── js
β”‚Β Β              └── bootstrap.min.js
β”œβ”€β”€ demo
β”‚Β Β  β”œβ”€β”€ banner.png
β”‚Β Β  β”œβ”€β”€ blog-page.png
β”‚Β Β  β”œβ”€β”€ features-one.png
β”‚Β Β  β”œβ”€β”€ features-two.png
β”‚Β Β  └── home-page-customizer-setup.png
β”œβ”€β”€ footer.php
β”œβ”€β”€ front-page.php ( Home Page )
β”œβ”€β”€ functions.php
β”œβ”€β”€ header.php
β”œβ”€β”€ inc
β”‚Β Β  β”œβ”€β”€ classes
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ class-aquila-theme.php
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ class-assets.php
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ class-menus.php
β”‚Β Β  β”‚Β Β  └── class-meta-boxes.php
β”‚Β Β  β”œβ”€β”€ helpers
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ autoloader.php
β”‚Β Β  β”‚Β Β  └── template-tags.php
β”‚Β Β  └── traits
β”‚Β Β      └── trait-singleton.php
β”œβ”€β”€ index.php ( Blog page )
β”œβ”€β”€ page.php  ( Single Page )
β”œβ”€β”€ screenshot.png
β”œβ”€β”€ single.php ( Single Post Page )
β”œβ”€β”€ style.css
└── template-parts
    β”œβ”€β”€ components
    β”‚Β Β  └── blog
    β”‚Β Β      β”œβ”€β”€ entry-content.php
    β”‚Β Β      β”œβ”€β”€ entry-footer.php
    β”‚Β Β      β”œβ”€β”€ entry-header.php
    β”‚Β Β      └── entry-meta.php
    β”œβ”€β”€ content-none.php
    β”œβ”€β”€ content.php
    └── header
        └── nav.php

Fixing Errors

  1. Error: Node Sass does not yet support your current environment Solution :
    cd assets
    npm rebuild node-sass