Tonik — WordPress Starter Theme

Tonik is a WordPress Starter Theme which aims to modernize, organize and enhance some aspects of WordPress theme development.

Take a look at what is waiting for you:

• ES6 for JavaScript
• SASS and Foundation CSS Framework
• Webpack for managing, compiling and optimizing theme asset files
• Utilizes PHP Namespaces
• Simple Theme Service Container
• Child Theme friendly Autoloader
• Readable and centralized Theme Configs
• Oriented for building with Actions and Filters
• Enhanced Templating with support for passing data

Requirements

Tonik Starter Theme follows WordPress recommended requirements. Make sure you have all these dependences installed before moving on:

• WordPress >= 4.7
• PHP >= 7.0
• Composer
• Node.js

Documentation

Comprehensive documentation of the starter is available at http://labs.tonik.pl/theme/

Installation

Creating new Theme

Create project via composer create-project composer command.

$ composer create-project tonik/tonik <theme-name>

You can also directly download or clone the repository to the wp-content/themes directory.

# Clone repository to the <theme-name> folder.
$ git clone [email protected]:tonik/tonik.git <theme-name>

Resolving Dependences

Install back-end dependencies and generate an autoloading file.

# Install composer dependencies.
$ composer install -o

Install frontend dependencies and task runner.

# Install node dependencies.
$ npm install

Development

Initializing a Theme

Starter comes with simple CLI and tonik command, which allows you to easily fill theme details and information like name, description and project namespace. Simply call vendor/bin/tonik command in the theme root directory. A setup wizard will guide you through the entire process.

# Run setup wizard.
$ vendor/bin/tonik

Building a Theme

Theme uses Webpack to compile and optimize its scripts, stylesheets and assets.

# Build theme for development.
$ npm run dev

# Build theme for production.
$ npm run prod

# Watch for file changes, rebuild theme and refresh the browser.
$ npm run watch

Folders and Files Structure

This starter theme introduces "easy to follow" folder structure, which enforces to divide your theme logic into separate files.

themes                              # — Root of your theme
    ├── app/                        # — Theme application logic
    │   ├── Http/                   # — Http layer of theme
    │   │   ├── ajaxes.php          # — Theme ajaxes endpoints
    │   │   ├── assets.php          # — Theme styles and scripts loading
    │   ├── Setup/                  # — Setups for theme
    │   │   ├── actions.php         # — Theme action hooks
    │   │   ├── filters.php         # — Theme filter hooks
    │   │   ├── navs.php            # — Theme navigation areas
    │   │   ├── shortcodes.php      # — Theme shortcodes
    │   │   ├── sidebars.php        # — Theme widgets areas
    │   │   ├── supports.php        # — Theme supports
    │   │   ├── thumbnails.php      # — Theme custom image sizes
    │   │   ├── widgets.php         # — Theme custom widgets
    │   ├── Structure/              # — Structures for theme
    │   │   ├── posttypes.php       # — Theme custom post types
    │   │   ├── taxonomies.php      # — Theme custom taxonomies
    │   ├── helpers.php             # — Collection of helper functions
    ├── build/                      # — Webpack configuration and instruction files
    ├── bootstrap/                  # — Files responsible for bootstrapping a theme
    │   ├── compatibility.php       # — Theme compatibility checker (don't edit)
    │   ├── theme.php               # — Theme bootstraper script (don't edit)
    ├── config/                     # — Configuration files
    │   ├── app.json                # — Theme assets manifest file
    │   ├── app.php                 # — Theme configuration file
    ├── public/                     # — Front-end compiled/builded assets (don't edit)
    ├── resources/                  # — Resources files
    │   ├── assets                  # — Front-end source assets
    │   │   ├── js                  # — Theme JavaScript files
    │   │   ├── sass                # — Theme Stylesheets files
    │   │   ├── images              # — Theme images
    │   │   ├── fonts               # — Theme fonts
    │   ├── languages               # — Theme translations
    │   ├── templates               # — Theme templates
    ├── 404.php                     # — 404 page controller
    ├── composer.json               # — PHP dependences and PSR-4 Autoloading
    ├── footer.php                  # — Footer partial template
    ├── functions.php               # — Bootstrapping the theme. Initiates Autoloader and Composer (don't edit)
    ├── header.php                  # — Header partial template
    ├── index.php                   # — Index page controller
    ├── package.json                # — NPM dependencies and scripts
    ├── screenshot.png              # — Theme screenshot image
    ├── style.css                   # — Theme details information (don't write any CSS declarations in here)

USAGE.md Boilerplate

USAGE.md provides "How to use" guide for themes created with this starter. Remember to properly fill this file before finalizing the project. Your clients will be grateful.

Contributing

Great that you are considering supporting the project. You have a lot of ways to help us grow. We appreciate all contributions, even the smallest.

• Report an issue
• Propose a feature
• Send a pull request
• Star project on the GitHub
• Tell about project around your community

License

The Tonik Starter Theme is licensed under the MIT license.