|
| 1 | +# Child Theme for Tonik WordPress Starter Theme |
| 2 | + |
| 3 | +### Child theme boilerplate for Tonik Starter Theme based themes. Makes easy to customize and overwrite parent theme components. Additionaly provides the same set of tools for child theme development. |
| 4 | + |
| 5 | +## Requirements |
| 6 | + |
| 7 | +Make sure you have all these dependences installed before moving on: |
| 8 | + |
| 9 | +- WordPress >= 4.7 |
| 10 | +- PHP >= 5.6 |
| 11 | +- [Composer](https://getcomposer.org) |
| 12 | + |
| 13 | +# Installation |
| 14 | + |
| 15 | +## Creating new Theme |
| 16 | + |
| 17 | +Create project via `composer create-project` composer command. |
| 18 | + |
| 19 | +```bash |
| 20 | +$ composer create-project tonik/child-theme <theme-name> |
| 21 | +``` |
| 22 | + |
| 23 | +You can also directly download or clone the repository to the `wp-content/themes` directory. |
| 24 | + |
| 25 | +```bash |
| 26 | +# Clone repository to the <theme-name> folder. |
| 27 | +$ git clone [email protected]:tonik/child-theme.git <theme-name > |
| 28 | +``` |
| 29 | + |
| 30 | +## Resolving Dependences |
| 31 | + |
| 32 | +Install back-end dependencies and generate an autoloading file. |
| 33 | + |
| 34 | +```bash |
| 35 | +# Install composer dependencies. |
| 36 | +$ composer install -o |
| 37 | +``` |
| 38 | + |
| 39 | +# Development |
| 40 | + |
| 41 | +## Initializing a Child Theme |
| 42 | + |
| 43 | +Boilerplate 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. |
| 44 | + |
| 45 | +```bash |
| 46 | +# Run setup wizard. |
| 47 | +$ vendor/bin/tonik |
| 48 | +``` |
| 49 | + |
| 50 | +## Building a Child Theme |
| 51 | + |
| 52 | +By default child theme boilerplate do not comes with any task runner of manager for theme assets. However, if you need it, you can copy relevant Webpack configuration files and settings directly from parent theme. |
| 53 | + |
| 54 | +## Folders and Files Structure |
| 55 | + |
| 56 | +This child theme and parent theme files was divided into separate files and folders. This makes it easy to overwrite parent theme files and developing child specific ones at the same time. |
| 57 | + |
| 58 | +``` |
| 59 | +child # — Root of your chld theme |
| 60 | + ├── app/ # — Parent Theme application files (to overwrite) |
| 61 | + ├── bootstrap/ # — Files responsible for bootstrapping a theme |
| 62 | + │ ├── theme.php # — Theme bootstraper script (don't edit) |
| 63 | + ├── child/ # — Child Theme application logic |
| 64 | + │ ├── Http/ # — Http layer of child theme |
| 65 | + │ │ ├── assets.php # — Child Theme styles and scripts loading |
| 66 | + │ ├── Setup/ # — Setups for child theme |
| 67 | + │ │ ├── supports.php # — Child Theme supports |
| 68 | + │ ├── helpers.php # — Collection of helper functions |
| 69 | + ├── config/ # — Configuration files |
| 70 | + │ ├── app.php # — Theme configuration file |
| 71 | + ├── public/ # — Front-end compiled/builded assets |
| 72 | + ├── resources/ # — Resources files |
| 73 | + │ ├── languages # — Child Theme translations |
| 74 | + │ ├── templates # — Child Theme templates |
| 75 | + ├── composer.json # — PHP dependences and PSR-4 Autoloading |
| 76 | + ├── functions.php # — Bootstrapping the theme. Initiates Autoloader and Composer (don't edit) |
| 77 | + ├── package.json # — NPM dependencies and scripts |
| 78 | + ├── screenshot.png # — Child Theme screenshot image |
| 79 | + ├── style.css # — Child Theme details information (don't write any CSS declarations in here) |
| 80 | +``` |
0 commit comments