Tktk Theme

Starter development theme using Timber and Tailwind.

Welcome to the repository for TKTK theme

Setting up your WordPress with Laravel Valet
Installing the Theme
Starting your development
What's here?
Resources

Setting up your WordPress with Laravel Valet

Create a folder for your project.
In the root of your project folder, install WordPress with wp core download --skip-content
Create your wp-config.php file and paste the contents of wp-config-sample.php

Using Sequel Pro or DBngin, create your database. Overwrite the connection in wp-config.php:

define( 'DB_NAME', 'tktk-theme' ); // Name should match the name you created

/** MySQL database username */
define( 'DB_USER', 'root' );

/** MySQL database password */
define( 'DB_PASSWORD', '' );

/** MySQL hostname */
define( 'DB_HOST', 'localhost' );

In the root of your project folder run:

wp core install --url=yoursiteurl.test --title="Your site title" --admin_user=admin --admin_password=admin [email protected] --skip-themes

Navigate to the url you passed to the install command. Use the user and password you passed to the command at yoursite.url/wp-admin to login to the dashboard.

Installing the Theme

Install this theme as you would any other, and be sure the Timber plugin is activated. But hey, let's break it down into some bullets:

Make sure you have installed the plugin for the Timber Library (and Advanced Custom Fields - they play quite nicely together).
Download the zip for this theme (or clone it) and move it to wp-content/themes in your WordPress installation.
Rename the folder to something that makes sense for your website (generally no spaces and all lowercase). You could keep the name tktk-theme but the point of a starter theme is to make it your own!
Activate the theme in Appearance > Themes.
Do your thing! And read the docs for Timber. Check out TKTK components.

Setup

From the command line, change directories to your new theme directory:

cd /wp-content/themes/your-theme

Install theme dependencies and trigger an initial build.

npm install

Development

From the command line, type any of the following to perform an action:

Command	Action
`npm run watch`	Builds assets and starts Live Reload and Browsersync servers
`npm run start`	Builds assets and starts Live Reload server
`npm run build`	Builds production-ready assets for a deployment
`npm run lint`	Check all CSS, JS, MD, and PHP files for errors
`npm run format`	Fix all CSS, JS, MD, and PHP formatting errors automatically

What's here?

views/ contains all of your Twig templates. These pretty much correspond 1 to 1 with the PHP files that respond to the WordPress template hierarchy. At the end of each PHP template, you'll notice a Timber::render() function whose first parameter is the Twig file where that data (or $context) will be used. Just an FYI.

src/ contains all the CSS and JS files needed to run your start and build commands defined in your package.json. This theme uses @wordpress/scripts. When the commands are run, it will create a build folder that contains your compiled CSS and JS assets. The classes/Enqueue.php has already been configured to enqueue the assets in the build folder.

Resources

This branch of the starter theme has some more example code with ACF and a slightly different set up.
Twig for Timber Cheatsheet
Timber and Twig Reignited My Love for WordPress on CSS-Tricks
A real live Timber theme.
Timber Video Tutorials and an incomplete set of screencasts for building a Timber theme from scratch.
TKTK Component Library

Top categories