{"id":124,"date":"2024-02-04T09:38:14","date_gmt":"2024-02-04T09:38:14","guid":{"rendered":"https:\/\/sinukoduleheabi.ee\/docs\/?p=124"},"modified":"2025-08-28T18:06:28","modified_gmt":"2025-08-28T18:06:28","slug":"getting-started-with-ska-theme","status":"publish","type":"post","link":"https:\/\/sinukoduleheabi.ee\/docs\/ska-theme\/getting-started-with-ska-theme\/","title":{"rendered":"Getting started"},"content":{"rendered":"\n<p class=\"lead\"><strong>ska-theme<\/strong> is a WordPress theme designed to be used in combination with the <strong>ska-blocks<\/strong> 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.<\/p>\n\n\n\n<p>Files you should have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>ska-blocks.zip<\/code><\/li>\n\n\n\n<li><code>ska-icons.zip<\/code> <em>(optional)<\/em> <a href=\"https:\/\/sinukoduleheabi.ee\/docs\/ska-icons.zip\" target=\"_blank\" rel=\"noreferrer noopener\">[download]<\/a><\/li>\n\n\n\n<li><code>ska-theme.zip<\/code><\/li>\n\n\n\n<li><code>ska-theme-child.zip<\/code> <em>(<strong>highly <\/strong>recommended)<\/em> <a href=\"https:\/\/sinukoduleheabi.ee\/docs\/ska-theme-child.zip\" target=\"_blank\" rel=\"noreferrer noopener\">[download]<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. Installing the prerequisite plugins<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Login to your WordPress Admin Dashboard.<\/li>\n\n\n\n<li>Go to <strong>Plugins -&gt; Add New Plugin<\/strong>.<\/li>\n\n\n\n<li>In the top left corner of the plugin installation page click <strong>Upload Plugin<\/strong>.<\/li>\n\n\n\n<li>Select <code>ska-icons.zip<\/code> from your computer and hit <strong>Install Now<\/strong>.<\/li>\n\n\n\n<li>After installation, click <strong>Activate Plugin<\/strong>.<\/li>\n\n\n\n<li>Repeat step 3 but this time select <code>ska-blocks.zip<\/code> plugin.<\/li>\n\n\n\n<li>After activation, when prompted for the license key, enter it.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">2. Installing the theme and child theme<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to <strong>Appearance -&gt; Themes<\/strong>.<\/li>\n\n\n\n<li>In the top left corner click <strong>Add New Theme<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Upload Theme<\/strong>, choose <code>ska-theme.zip<\/code> file from your computer and hit <strong>Install Now<\/strong>.<\/li>\n\n\n\n<li>Once installed, <em>do not<\/em> activate the theme, instead press <strong>Go to Themes page<\/strong>.<\/li>\n\n\n\n<li>Click Add New Theme again, how ever this time choose the <code>ska-theme-child.zip<\/code> file.<\/li>\n\n\n\n<li>Once the child theme is successfully installed, press <strong>Activate<\/strong> and enter your license key if needed.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"first-steps\">3. First steps<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Configure the theme<\/h3>\n\n\n\n<p>Theme options are always available in the block editor under <strong>ska-blocks -&gt; Theme<\/strong> 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 <strong>ska -&gt; ska-theme<\/strong> in your WordPress admin dashboard.<\/p>\n\n\n\n<p>As the first thing, you may wish to enable the <strong><a href=\"https:\/\/sinukoduleheabi.ee\/docs\/ska-theme\/under-construction-mode\/\" data-type=\"post\" data-id=\"482\">Theme -&gt; General -&gt; Under construction<\/a><\/strong> option, to prevent people from seeing your unfinished website.<\/p>\n\n\n\n<p>What content is displayed in Under construction mode can be changed from <strong>Appearance -&gt; Editor -&gt; Patterns -&gt; General -&gt; Under construction page<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configure dynamic content<\/h3>\n\n\n\n<p><strong>ska-blocks -&gt; Options -&gt; Dynamic content<\/strong> 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:<\/p>\n\n\n\n<a data-pswp-height=\"658\" data-pswp-width=\"602\" data-ska-pswp=\"ska-pswp-1\" href=\"https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/03\/image-111.png\" class=\"block max-w-96 wp-block-ska-image image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/03\/image-111.png\" alt=\"Options under ska-blocks -&gt; Options -&gt; Dynamic content\" width=\"602\" height=\"658\" srcset=\"https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/03\/image-111.png 602w, https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/03\/image-111-274x300.png 274w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/a>\n\n\n\n<p><a href=\"https:\/\/sinukoduleheabi.ee\/docs\/ska-blocks\/dynamic-content\/\" data-type=\"post\" data-id=\"417\">Read more about dynamic content<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configure Tailwind<\/h3>\n\n\n\n<p>Under <strong>ska -&gt; ska-blocks -&gt; Tailwind<\/strong> you can also configure the Tailwind theme:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"279\" src=\"https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/02\/image-13.png\" alt=\"\" class=\"wp-image-1479\" srcset=\"https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/02\/image-13.png 279w, https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/02\/image-13-150x150.png 150w\" sizes=\"(max-width: 279px) 100vw, 279px\" \/><\/figure>\n\n\n\n<p>The most common settings that you may wish to modify initially are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Theme colors<\/strong> &#8211; You can set up your primary, secondary and link colors.<\/li>\n\n\n\n<li><strong>Typography -&gt; Font family<\/strong> &#8211; You can modify the default <code>sans<\/code> 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 <code>font-{font slug}<\/code> class name.<\/li>\n\n\n\n<li><strong>Custom theme<\/strong> &#8211; For example if you don&#8217;t want any rounded corners in your site design change <code>--radius<\/code> variable <code>var(--radius-sm)<\/code> to <code>0<\/code>, then any pre-existing template that is already using the <code>rounded<\/code> class will no longer apply border-radius.<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/sinukoduleheabi.ee\/docs\/ska-blocks\/configuring-tailwind\/\" data-type=\"post\" data-id=\"317\">Read more about configuring Tailwind<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Set up menus<\/h3>\n\n\n\n<p>Navigate to <strong>Appearance -&gt; Menus<\/strong> and create a menu that you will use for main navigation.<\/p>\n\n\n\n<p>Then go to <strong>Appearance -&gt; Editor -&gt; Patterns -&gt; Template parts -&gt; Header<\/strong> to edit the header template, click on the main <a href=\"https:\/\/sinukoduleheabi.ee\/docs\/ska-theme\/menu-block\/\" data-type=\"post\" data-id=\"283\">menu block<\/a> (which by default renders a &#8220;placeholder&#8221; menu with 4 items) and swap out the placeholder for the menu you just created.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"344\" src=\"https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/02\/image-4.png\" alt=\"Selecting a classic WordPress navigation menu in the Menu block controls\" class=\"wp-image-132\" srcset=\"https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/02\/image-4.png 419w, https:\/\/sinukoduleheabi.ee\/docs\/wp-content\/uploads\/2024\/02\/image-4-300x246.png 300w\" sizes=\"(max-width: 419px) 100vw, 419px\" \/><\/figure>\n\n\n\n<p>Then you&#8217;ll also want to do the same at <strong>Template parts -&gt; General -&gt; Mobile menu<\/strong>, to change which menu is rendered in the sidebar.<\/p>\n\n\n\n<p>Now whenever you make changes to the menu at <strong>Navigation -&gt; Menus<\/strong> the changes will reflect in both places. The change the appearance of the menu, you can simply edit the Tailwind classes on the block.<\/p>\n\n\n\n<p>You can also try using the official <strong>Navigation<\/strong> block as a menu, how ever due to still being new and having different shortcomings they are not used with this theme by default.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Create your content<\/h2>\n\n\n\n<p>The <a href=\"https:\/\/sinukoduleheabi.ee\/docs\/ska-blocks\/tailwind-block\/\" data-type=\"post\" data-id=\"217\">Tailwind block<\/a> 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 <a href=\"https:\/\/sinukoduleheabi.ee\/docs\/ska-theme\/patterns\/\" data-type=\"post\" data-id=\"561\">block patterns<\/a> to get you started.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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: 1. Installing the prerequisite plugins 2. Installing the theme and&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-124","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/posts\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":5,"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":1644,"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/posts\/124\/revisions\/1644"}],"wp:attachment":[{"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sinukoduleheabi.ee\/docs\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}