Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
bin
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

WordPress starter is a starter template for WordPress websites.
Stack: Babel, Browsersync, Gulp, minireset.css, Sass,
Timber, Webpack, WordPress, WP-CLI.


πŸ“ Table of contents


βš™οΈ Prerequisites

🏁 Getting started

Step 1: Run the following command to create a new theme:

make create-theme

The prompt will ask you to enter some informations related to your theme, then to choose the site language. The starter theme is currently available in two languages:

  • en_US (selected by default)
  • fr_FR

If the desired language is not in the list, feel free to contribute to the project by adding a language.

Step 2: Run the following command to complete the installation:

make setup

Your WordPress is ready to be customized!

⌨️ Commands

Create theme

## Run an interactive prompt to create a new theme

make create-theme

Setup

## Get everything ready (Docker containers, WordPress download
## and configuration)

make setup

Serve

## Serve:
## - WordPress front-office at http://localhost:3000 with live reloading
## - WordPress back-office at http://localhost:3010/wp-admin
##   (username: admin, password: password)
## - phpMyAdmin at http://localhost:3011

make

πŸ’‘ This command will also install dependencies on first run and when package.json or yarn.lock files are updated.

Build

## Build WordPress theme for production use

make build

πŸ’‘ This command will also install dependencies on first run and when package.json or yarn.lock files are updated.

Help

## List available commands

make help

πŸ—„οΈ Project structure

.
β”œβ”€β”€ app                              # WORDPRESS SITE
β”‚   β”œβ”€β”€ wp-content/themes/md-starter # Starter theme
β”‚   β”‚   β”œβ”€β”€ fonts                    # Font assets
β”‚   β”‚   β”‚   └── roboto               # Roboto from Google Fonts (TTF, WOFF, WOFF2)
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ images                   # Image assets
β”‚   β”‚   β”‚   └── og-image.jpg         # Image for og:image meta tag (placeholder by default)
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ languages                # Localization
β”‚   β”‚   β”‚   β”œβ”€β”€ en_US.mo             # en_US theme localization (compiled)
β”‚   β”‚   β”‚   β”œβ”€β”€ en_US.po             # en_US theme localization
β”‚   β”‚   β”‚   β”œβ”€β”€ fr_FR.mo             # fr_FR theme localization (compiled)
β”‚   β”‚   β”‚   β”œβ”€β”€ fr_FR.po             # fr_FR theme localization
β”‚   β”‚   β”‚   └── md-starter.pot       # Theme localization template
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ lib                      # Theme features
β”‚   β”‚   β”‚   β”œβ”€β”€ disable_wp_emoji.php # Disabling WordPress emoji
β”‚   β”‚   β”‚   └── theme.php            # Theme declaration and initialization
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ post-types               # Post types
β”‚   β”‚   β”‚   └── .gitkeep             # Tracking an empty directory within Git
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ templates                # Twig templates
β”‚   β”‚   β”‚   β”œβ”€β”€ components           # Components
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ nav-footer.twig  # Footer nav
β”‚   β”‚   β”‚   β”‚   └── navbar.twig      # Navbar (main nav)
β”‚   β”‚   β”‚   β”‚
β”‚   β”‚   β”‚   β”œβ”€β”€ dev                  # Development utilities
β”‚   β”‚   β”‚   β”‚   └── lorem.twig       # Partial featuring static lorem ipsum content
β”‚   β”‚   β”‚   β”‚
β”‚   β”‚   β”‚   β”œβ”€β”€ layouts              # Layouts
β”‚   β”‚   β”‚   β”‚   └── default.twig     # Default layout
β”‚   β”‚   β”‚   β”‚
β”‚   β”‚   β”‚   β”œβ”€β”€ 404.twig             # 404 error
β”‚   β”‚   β”‚   β”œβ”€β”€ index.twig           # Home page
β”‚   β”‚   β”‚   β”œβ”€β”€ page.twig            # Page
β”‚   β”‚   β”‚   └── single.twig          # Single post
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ 404.php                  # 404 error declaration
β”‚   β”‚   β”œβ”€β”€ composer.json            # PHP dependencies, used by Composer
β”‚   β”‚   β”œβ”€β”€ composer.lock            # Tracking exact versions for PHP dependencies, used by Composer
β”‚   β”‚   β”œβ”€β”€ functions.php            # Changing WordPress default behavior
β”‚   β”‚   β”œβ”€β”€ index.php                # Home page declaration
β”‚   β”‚   β”œβ”€β”€ page.php                 # Page declaration
β”‚   β”‚   β”œβ”€β”€ screenshot.png           # Theme screenshot, used in WordPress back-office
β”‚   β”‚   β”œβ”€β”€ single.php               # Single post declaration
β”‚   β”‚   └── style.css                # Theme CSS declaration
β”‚   β”‚
β”‚   └── wp-cli.yml                   # WP-CLI configuration
β”‚
β”‚
β”œβ”€β”€ bin                              # BINARIES
β”‚    β”œβ”€β”€ create-theme                # Script to create a new theme
β”‚    └── dwp                         # Script to use WP-CLI inside a Docker container
β”‚
β”‚
β”œβ”€β”€ documentation-images             # PROJECT DOCUMENTATION IMAGES
β”‚
β”‚
β”œβ”€β”€ gulp                             # GULP/WEBPACK CONFIGURATION AND TASKS
β”‚   β”œβ”€β”€ env                          # Gulp configuration per environment
β”‚   β”‚   β”œβ”€β”€ dev.js                   # Development environment
β”‚   β”‚   └── prod.js                  # Production environment
β”‚   β”‚
β”‚   β”œβ”€β”€ tasks                        # Gulp tasks
β”‚   β”‚   β”œβ”€β”€ sass.js                  # Sass task declaration
β”‚   β”‚   └── script.js                # JavaScript task declaration
β”‚   β”‚
β”‚   β”œβ”€β”€ webpack                      # Webpack configuration per environment
β”‚   β”‚   β”œβ”€β”€ common.js                # Shared between development and production environments
β”‚   β”‚   β”œβ”€β”€ dev.js                   # Development environment
β”‚   β”‚   └── prod.js                  # Production environment
β”‚   β”‚
β”‚   └── index.js                     # Script to invoke proper environment and dynamically load
β”‚                                    # Gulp tasks
β”‚
β”‚
β”œβ”€β”€ js                               # JAVASCRIPT SOURCE FILES
β”‚   └── app.js                       # Main JavaScript file used as entry by Webpack
β”‚
β”‚
β”œβ”€β”€ sass                             # SASS STYLE (STRUCTURE INSPIRED BY BULMA https://bulma.io)
β”‚   β”œβ”€β”€ base                         # Base style
β”‚   β”‚   β”œβ”€β”€ _all.sass                # Importing all stylesheets
β”‚   β”‚   β”œβ”€β”€ generic.sass             # Style for generic elements (html, body, etc.)
β”‚   β”‚   └── helpers.sass             # Helper classes (modifiers)
β”‚   β”‚
β”‚   β”œβ”€β”€ components                   # Components style
β”‚   β”‚   └── _all.sass                # Importing all stylesheets
β”‚   β”‚
β”‚   β”œβ”€β”€ dev                          # Development utilities
β”‚   β”‚   β”œβ”€β”€ shame.sass               # WIP style or dirty hacks
β”‚   β”‚   └── structure.sass           # Highlighting site structure (import commented by default)
β”‚   β”‚
β”‚   β”œβ”€β”€ elements                     # Elements style
β”‚   β”‚   β”œβ”€β”€ _all.sass                # Importing all stylesheets
β”‚   β”‚   β”œβ”€β”€ content.sass             # Handling WYSIWYG generated content
β”‚   β”‚   └── title.sass               # Title style
β”‚   β”‚
β”‚   β”œβ”€β”€ fonts                        # Fonts style
β”‚   β”‚   β”œβ”€β”€ _all.sass                # Importing all stylesheets
β”‚   β”‚   └── roboto.sass              # @font-face style for Roboto
β”‚   β”‚
β”‚   β”œβ”€β”€ form                         # Form style
β”‚   β”‚   └── _all.sass                # Importing all stylesheets
β”‚   β”‚
β”‚   β”œβ”€β”€ grid                         # Grid style
β”‚   β”‚   β”œβ”€β”€ _all.sass                # Importing all stylesheets
β”‚   β”‚   └── columns.sass             # Basic columns system
β”‚   β”‚
β”‚   β”œβ”€β”€ layout                       # Layout style
β”‚   β”‚   β”œβ”€β”€ _all.sass                # Importing all stylesheets
β”‚   β”‚   β”œβ”€β”€ footer.sass              # Footer style
β”‚   β”‚   β”œβ”€β”€ header.sass              # Header style
β”‚   β”‚   β”œβ”€β”€ main.sass                # Main style
β”‚   β”‚   β”œβ”€β”€ section.sass             # Section style
β”‚   β”‚   └── wrapper.sass             # Wrapper style
β”‚   β”‚
β”‚   β”œβ”€β”€ utilities                    # Utilities
β”‚   β”‚   β”œβ”€β”€ _all.sass                # Importing all stylesheets
β”‚   β”‚   β”œβ”€β”€ animations.sass          # Some basic animations
β”‚   β”‚   β”œβ”€β”€ mixins.sass              # A few useful mixins
β”‚   β”‚   └── variables.sass           # Variables for colors, typography, etc.
β”‚   β”‚
β”‚   └── style.sass                   # Main Sass file used as source by Gulp
β”‚
β”‚
β”œβ”€β”€ .babelrc                         # Presets and plugins to use, used by Babel
β”œβ”€β”€ .gitignore                       # Files and folders ignored by Git
β”œβ”€β”€ .tool-versions                   # Which version to use locally for each language, used by asdf
β”œβ”€β”€ docker-compose.yml               # Services, networks and volumes, used by Docker Compose
β”œβ”€β”€ Dockerfile                       # Docker containers declaration
β”œβ”€β”€ gulpfile.js                      # Gulp configuration
β”œβ”€β”€ LICENSE                          # License
β”œβ”€β”€ Makefile                         # Commands for this project
β”œβ”€β”€ package.json                     # JavaScript dependencies, used by Yarn
β”œβ”€β”€ README.md                        # Project documentation
β”œβ”€β”€ renovate.json                    # Renovate bot configuration
└── yarn.lock                        # Tracking exact versions for JavaScript dependencies,
                                     # used by Yarn

πŸ–₯ Layout structure

The starter comes with a simple layout, structured like the following:

// Wrapper
.wrapper
  // Header
  header.header
    .container
      …

  // Main
  main.main
    // Section (repeatable)
    section.section
      .container
        …

  // Footer
  footer.footer
    .container
      …

Highlighting site structure

There is also a Sass utility allowing to highlight the site structure (pretty useful in development). Simply uncomment @import "dev/structure.sass" in style.sass if you want to use it.

🚨 Linting PHP files

Follow these steps if you want to lint PHP files using WordPress Coding Standards.

Step 1: Install wp-coding-standards/wpcs:

make install-wpcs

Step 2: Move to your theme folder.

Step 3: Set path for wpcs:

composer config-set

Step 4: You are now able to lint any PHP file:

composer lint [filename].php

🍱 Cache busting

Our strategy for cache busting is to automatically append a ?ver=[version] to each asset query. When you need to bust the cache, simply update Version in style.css.

✍️ Authors

πŸ€œπŸ€› Contributing

Contributions, issues and feature requests are welcome! See the list of contributors who participated in this project.

πŸ“„ License

WordPress starter is licensed under the GNU General Public License v3.0.

You can’t perform that action at this time.