Giter Club home page Giter Club logo

genese's Introduction

โœจ๐ŸŒ‹ Genese

contributions welcome Tweet

Genese is a WordPress starter theme with a modern front-end development workflow.
Based on HTML5 Boilerplate, BrowserSync & WebPack (HMR).


๐ŸŽ‰ Features


๐Ÿ“Œ Modern front-end development workflow:

  • Hot Module Replacement for Js & Scss files.
  • BrowserSync to watch changes on PHP files.

๐Ÿ“Œ WordPress development workflow enhanced:

  • Template wrapper: removes repetitive inclusions in template files.
  • A nice organization of the code with some SEO snippets.

Usage

1. Clone the repository to the WordPress theme directory.

git clone https://github.com/mystroken/genese.git

2. Remove the .git folder.

cd genese && rm -rf .git/

3. Enjoy coding your theme with Genese.

genese/               # โ†’ Root folder for the project
โ”œโ”€โ”€ app/
        โ”œโ”€โ”€ inc/      # โ†’ WordPress Hooks and miscellanous helper functions.
        โ””โ”€โ”€ walkers/
โ”œโ”€โ”€ resources/
        โ”œโ”€โ”€ assets/   # โ†’ Frontend assets source and Configs of compiling process.
        โ”œโ”€โ”€ lang/
        โ””โ”€โ”€ scripts/  # โ†’ Do touch, scripts to compile assets.
โ””โ”€โ”€ template-parts/

3.1 โ€” Customize the frontend.

First you should get Nodejs installed on your machine. Then install npm dependencies

npm install

Configure the assets bundling ./resources/assets/config.js Start the dev script

npm run start
npm run build
  • 3.1.1 โ€” Customize webpack
  • 3.1.2 โ€” Include scripts into WordPress

3.2 โ€” Setup the theme.

  • 3.2.1 โ€” Declare navigations
  • 3.2.2 โ€” Declare widget areas (sidebars)

3.3 โ€” Customize templates

  • 3.3.1 โ€” Customize the base template
  • 3.3.2 โ€” Customize the template parts
    • 3.3.2.1 โ€” Index views (index.php, archive.php, search.php)
    • 3.3.2.2 โ€” Single views (single.php, page.php)

Inspired by

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.