Getting started

ska-theme is a WordPress theme designed to be used in combination with the ska-blocks plugin. The theme disables most of the conventional WordPress functionality for styling blocks. Templates, template parts and patterns that come with the theme all use Tailwind classes.

Files you should have:

  • ska-blocks.zip
  • ska-icons.zip (optional) [download]
  • ska-theme.zip
  • ska-theme-child.zip (highly recommended) [download]

1. Installing the prerequisite plugins

  1. Login to your WordPress Admin Dashboard.
  2. Go to Plugins -> Add New Plugin.
  3. In the top left corner of the plugin installation page click Upload Plugin.
  4. Select ska-icons.zip from your computer and hit Install Now.
  5. After installation, click Activate Plugin.
  6. Repeat step 3 but this time select ska-blocks.zip plugin.
  7. After activation, when prompted for the license key, enter it.

2. Installing the theme and child theme

  1. Navigate to Appearance -> Themes.
  2. In the top left corner click Add New Theme.
  3. Click Upload Theme, choose ska-theme.zip file from your computer and hit Install Now.
  4. Once installed, do not activate the theme, instead press Go to Themes page.
  5. Click Add New Theme again, how ever this time choose the ska-theme-child.zip file.
  6. Once the child theme is successfully installed, press Activate and enter your license key if needed.

3. First steps

Configure the theme

Theme options are always available in the block editor whenever you are editing a post, page or a template, how ever you can also go to a dedicated page for theme options by navigating to ska -> ska-theme in your WordPress admin dashboard.

As the first thing, you may wish to enable the ska-theme -> General -> Under construction option, to prevent people from seeing your unfinished website.

What content is displayed in Under construction mode can be changed from Appearance -> Editor -> Patterns -> General -> Under construction page.

Configure dynamic content

In your WordPress admin dashboard, navigating to ska -> ska-blocks allows you to edit plugin options as well as to configure Tailwind.

ska-blocks -> Dynamic content allows you to set up commonly used data so that you can keep it all in once place. You can set an e-mail, phone, social media addresses or other custom data:

User interface for editing dynamic content option values

Read more about dynamic content

Configure Tailwind

Under ska -> ska-blocks you can also configure Tailwind by clicking on the Tailwind icon:

Button in the WordPress Block Editor for opening Tailwind configuration user interface

The most common settings that you may wish to modify initially are:

  • Colors -> Theme palette – You can set up your primary, secondary and link colors.
  • Typography -> Font family – You can modify the default sans family to include a Google Font, so that it is used site-wide, or you can add custom fonts that you can apply using the Tailwind font-{font slug} class name.
  • Borders -> Border radius – For example if you don’t want any rounded corners in your site design set the DEFAULT border radius from 0.25rem to 0, then any pre-existing template that is already using the rounded class will no longer apply border-radius.
Example of using Inter font with ska-blocks
Using “Inter” from Google Fonts.

Read more about configuring Tailwind

Set up menus

Navigate to Appearance -> Menus and create a menu that you will use for main navigation.

Then go to Appearance -> Editor -> Patterns -> Template parts -> Header to edit the header template, click on the main menu block (which by default renders a “placeholder” menu with 4 items) and swap out the placeholder for the menu you just created.

Selecting a classic WordPress navigation menu in the Menu block controls

Then you’ll also want to do the same at Template parts -> General -> Mobile menu, to change which menu is rendered in the sidebar.

Now whenever you make changes to the menu at Navigation -> Menus the changes will reflect in both places. The change the appearance of the menu, you can simply edit the Tailwind classes on the block.

You can also try using the official Navigation block as a menu, how ever due to still being new and having different shortcomings they are not used with this theme by default.

4. Create your content

The Tailwind block allows to convert Tailwind HTML directly to blocks. There are lots of pre-made Tailwind components out there that you can try, maybe even ask an AI for some Tailwind HTML. The theme also comes with some bundled block patterns to get you started.