PhpDev.App
imranhsayed/aquila

imranhsayed/aquila

Stars: 837

Forks: 189

Pull Requests: 76

Issues: 31

Watchers: 32

Last Updated: 2023-04-17 17:48:37

#advanced-wordpress-theme-devlopment #wordpress-theme #wordpress-development #wordpress-theme-development #webpack4 #babel #sass #singleton #oop #hacktoberfest #hacktoberfest2020

🎨 An Advanced WordPress theme

License:

Languages: PHP, CSS, JavaScript, SCSS

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

Features:

  • Custom front page.

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

  • Block Style Variations

  • Custom Gutenberg Blocks

  • InnerBlocks

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

OPEN ISSUES

See all

RELEASES

See all