Awesome Open Source
Awesome Open Source

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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,535,723) 
Docker (34,505) 
Makefile (23,636) 
Webpack (9,740) 
Wordpress (7,546) 
Docker Compose (6,692) 
Sass (6,234) 
Babel (3,261) 
Gulp (2,657) 
Yarn (1,630) 
Starter Kit (1,392) 
Starter (1,272) 
Starter Template (696) 
Wordpress Development (607) 
Make (440) 
Browsersync (338) 
Wp Cli (226) 
Wordpress Starter Theme (192) 
Timber (187) 
Minireset Css (4) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194