Giter VIP home page Giter VIP logo

dow-starter-theme's Introduction

Getting started

How to spin up the theme and development.

General

Main idea of this project it to reverse the logic of a standard WordPress theme, which loads wires the view files according to the Template Hierarchy.

This theme has a singular entry point of index.php which routes all the traffic though the theme core and loads a specific template from src/views/ using View Composers. This means templates are not responsible of processing the logic anymore, but instead they're loaded by the internal classes when needed.

Theme structure

.
├── .tools/             # Internal Node package helping with development
├── config/
│   ├── acf-json/       # Local copy of ACF groups
│   ├── *.json          # Various configuration files, like colors or typography
│   └── *.php           # Bootstrap configuration files
├── src/
│   ├── assets/         # JS, SCSS and Image development files
│   ├── classes/        # Theme PHP files
│   └── views/          # Template files, loaded according to the WP template hierarchy
├── functions.php       # Theme bootstrap file
├── index.php           # Entry file, not editable
└── style.css           # Theme manifest, not loaded on front-end

Development

Install dependencies

$ composer install && npm install

Build the static assets

This will transform SCSS into CSS, JS ESNext into older syntax and optimize images.

$ npm run build

Run the following script for processing styles, JS, and images on the fly whenever any change occur to any of those files.

$ npm run start

Linting and testing the code:

$ npm run lint
$ composer lint
$ composer test

Deployment

Run this script to generate production-optimized assets.

$ npm run build:production

Migrate the files according to .git-ftp-ignore file or use automated Github workflow.

dow-starter-theme's People

Contributors

aniaszlkwcz avatar dartui avatar jakubmikita avatar szaleq avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.