Menu Close


WordPress Theme – Aquila 🎨

Project Status: Active. code style: prettier

  • A WordPress theme Project for Advanced WordPress Theme Development Course.
    This theme uses Bootstrap. Learn to build an Advanced WordPress Theme from scratch

WordPress theme development banner

Tutorial Course

Also See – Advanced WordPress Plugin Development


  • Custom front page.

  • Custom Blog page with posts displayed in grid format using bootstrap.

  • Block Style Variations

  • Custom Gutenberg Blocks

  • InnerBlocks


Name Github Username
Imran Sayed @imranhsayed


  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 )


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


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

β”œβ”€β”€ 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
View Source Code
Posted in Development