Quick Start

Learn how to get the most out of the Draft WordPress theme.

Installation

Grab a copy of the Draft WordPress theme:

Login to your WordPress site:

Structure

The structure of your WordPress site is made up of 2 critical elements, template-parts & templates.

Template-parts define certain global/reusable parts of your WordPress site, such as the header and footer. At the very least, you’re probably going to need a header and footer.

Templates define the layout and structure of parts of your website, such as website pages or a blog posts. Templates can be composed of template-parts.

Add Template Parts

Since the Draft WordPress theme doesn’t ship with any template-parts, we’ll have to add them.

You can either create these from scratch, or ( this is what we do ) head on over to the Draft block pattern library to grab ready-to-use, responsive template-parts.

To add template-parts to your site:

Add Templates

Since the Draft WordPress theme doesn’t ship with any templates, we’ll have to add them.

For example, a page template might be made up of header and footer template-parts. Content then would more than likely go between these header and footer template-parts. The template would then serve as a template from which this page structure is defined.

Just like template-parts, you can create these from scratch. Head over to the Draft block pattern library & block template library to grab ready-to-use, responsive block-templates.

Styling

The Draft WordPress theme ships with almost no styles, all the styling is going to be driven by utility classes.

Since the Draft theme ships without any styles, you’re going to have to configure the utility classes and apply them to site elements.

When you hear the words ‘utility classes’, your mental model of utility classes may suggest that these utility classes are applied on an element-by-element, or block-by-block, basis.

While you can easily add utility classes to any core block in the block editor, because of the huge 3rd party plugin ecosystem ( and the variety of block editor integration strategies ), we may not be able to directly add classes to many site elements.

The hope is that you can get your site design 80-90%+ of the way there without adding any utility classes directly to blocks by first globally @apply-ing Tailwind CSS utility classes to blocks and site elements.

The mental model we use for building WordPress sites with Tailwind CSS

CSS

When it comes to adding styles to your site, the first thing you’ll want to do is configure the Tailwind CSS utility classes.

Since the Draft plugin uses the Tailwind CSS default styles out of the box, you may be able to forgo adding custom values for most utility classes.

The big ones you’ll want to consider customizing are the color and font family utilities. The default color utilities use mostly a black and white palette and the font family defaults are set to use sans-serif system fonts.

Apply Classes Globally

Once you’ve got your utility classes configured, you’ll want to apply classes globally. This allows you to apply utility classes to many of the most important site elements.

Since the Draft theme doesn’t really apply any styles, including responsive styles, this is when you would want to apply responsive utility classes to site elements, such as responsive font sizes for typography elements ( h1…h6, p, link, etc. ) and stateful variants such as hover, focus, active, etc.

Add Utility Classes to Blocks

The hope is that you can get your site design ~80%+ of the way there without adding any utility classes directly to blocks.

To get your site design to 100%, add utility classes to blocks.

Purge CSS

Finally, once you’ve got your blocks styled you can toggle from development to production mode to purge any unused styles sitewide.