Quick Start Guide

This is a quick start template for a WordPress block theme with Tailwind CSS.

Watch the video guide

Steps you need to do:

  • Save this page and open it as project.
  • Change the theme info in Theme settings , including Block category for custom blocks.
  • If you are going to use the AI Assistant, create the project brief in the AI panel.
  • Create a section (or nav, header, footer) for every template section and content block. Use Block action to turn the section into a block.

About the styling:

  • Body style adds class prose so that prose is added both to the front-end and to the WP Block editor.
  • Most sections should have not-prose class so that prose styling is disabled within that section.
  • Sections that display post content should not have the non-prose class. Instead non-prose can be added on their sub-elements that do not display post content.
  • Add class active to the first item of the nav menu. Customize the style in Style manager.
  • nav style with wp-has-admin-bar variant moves the top nav bar below the WordPress admin bar, if it is shown.
  • pre style is an example of how to style elements in the WP Block editor.
  • additional-editor-styles.css contains CSS styling for the body that is applied only in the WP block editor.
Post header without prose
Post content with prose