JosephFC1995 / wordpress-structure

🎨 An Advanced WordPress theme

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About

🎨 An Advanced WordPress theme


Languages

Language:PHP 59.8%Language:SCSS 18.0%Language:JavaScript 15.3%Language:CSS 6.9%