Awesome Open Source
Awesome Open Source

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


  • 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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
php (16,611)Ā 
hacktoberfest (4,260)Ā 
sass (470)Ā 
babel (356)Ā 
hacktoberfest2020 (270)Ā 
webpack4 (109)Ā 
wordpress-theme (85)Ā 
oop (73)Ā 
wordpress-development (52)Ā