{"id":59,"date":"2025-09-26T08:50:57","date_gmt":"2025-09-26T08:50:57","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/getting-started-2\/"},"modified":"2025-09-30T16:41:02","modified_gmt":"2025-09-30T16:41:02","slug":"getting-started-with-ska-theme","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/getting-started-with-ska-theme\/","title":{"rendered":"Getting started"},"content":{"rendered":"\n<p class=\"lead\"><strong><a href=\"https:\/\/ska-blocks.com\/ska-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">ska-theme<\/a><\/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 class=\"mb-2!\">You should have:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>ska-theme.zip<\/code><\/li>\n\n\n\n<li class=\"[&amp;_em]:text-sm [&amp;_em]:not-italic\">Your license key <em>(<a href=\"https:\/\/ska-blocks.com\/ska-theme\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">buy license from here<\/a>, if you already haven&#8217;t)<\/em><\/li>\n<\/ol>\n\n\n\n<div class=\"flex flex-row gap-2.5 items-start px-4 py-3 text-base\/none text-info-text bg-info-background rounded border border-info-border wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"shrink-0 mt-1 mb-0! w-6 h-auto text-current wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9 4.5C9.33486 4.5 9.62915 4.72198 9.72114 5.04396L10.5343 7.89015C10.8903 9.13593 11.8641 10.1097 13.1099 10.4657L15.956 11.2789C16.278 11.3709 16.5 11.6651 16.5 12C16.5 12.3349 16.278 12.6291 15.956 12.7211L13.1098 13.5343C11.8641 13.8903 10.8903 14.8641 10.5343 16.1099L9.72114 18.956C9.62915 19.278 9.33486 19.5 9 19.5C8.66514 19.5 8.37085 19.278 8.27886 18.956L7.46566 16.1099C7.10972 14.8641 6.13593 13.8903 4.89015 13.5343L2.04396 12.7211C1.72198 12.6291 1.5 12.3349 1.5 12C1.5 11.6651 1.72198 11.3709 2.04396 11.2789L4.89015 10.4657C6.13593 10.1097 7.10972 9.13593 7.46566 7.89015L8.27886 5.04396C8.37085 4.72198 8.66514 4.5 9 4.5Z\" fill=\"currentColor\"><\/path>\n\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 1.5C18.3442 1.5 18.6441 1.73422 18.7276 2.0681L18.9865 3.10356C19.2216 4.04406 19.9559 4.7784 20.8964 5.01353L21.9319 5.27239C22.2658 5.35586 22.5 5.65585 22.5 6C22.5 6.34415 22.2658 6.64414 21.9319 6.72761L20.8964 6.98647C19.9559 7.2216 19.2216 7.95594 18.9865 8.89644L18.7276 9.9319C18.6441 10.2658 18.3442 10.5 18 10.5C17.6558 10.5 17.3559 10.2658 17.2724 9.9319L17.0135 8.89644C16.7784 7.95594 16.0441 7.2216 15.1036 6.98647L14.0681 6.72761C13.7342 6.64414 13.5 6.34415 13.5 6C13.5 5.65585 13.7342 5.35586 14.0681 5.27239L15.1036 5.01353C16.0441 4.7784 16.7784 4.04406 17.0135 3.10356L17.2724 2.0681C17.3559 1.73422 17.6558 1.5 18 1.5Z\" fill=\"currentColor\"><\/path>\n\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 15C16.8228 15 17.1094 15.2066 17.2115 15.5128L17.6058 16.6956C17.7551 17.1435 18.1065 17.4949 18.5544 17.6442L19.7372 18.0385C20.0434 18.1406 20.25 18.4272 20.25 18.75C20.25 19.0728 20.0434 19.3594 19.7372 19.4615L18.5544 19.8558C18.1065 20.0051 17.7551 20.3565 17.6058 20.8044L17.2115 21.9872C17.1094 22.2934 16.8228 22.5 16.5 22.5C16.1772 22.5 15.8906 22.2934 15.7885 21.9872L15.3942 20.8044C15.2449 20.3565 14.8935 20.0051 14.4456 19.8558L13.2628 19.4615C12.9566 19.3594 12.75 19.0728 12.75 18.75C12.75 18.4272 12.9566 18.1406 13.2628 18.0385L14.4456 17.6442C14.8935 17.4949 15.2449 17.1435 15.3942 16.6956L15.7885 15.5128C15.8906 15.2066 16.1772 15 16.5 15Z\" fill=\"currentColor\"><\/path>\n<\/svg><\/div>\n\n\n\n<p class=\"m-0 mb-0! leading-tight\"><strong>Quick tip<\/strong> &#8211; if you&#8217;re experienced with WP you can skip &#8220;1. Installing the theme&#8221; part, simply <strong>install<\/strong> and <strong>activate<\/strong> the <code>ska-theme.zip<\/code> and follow the instructions that appear.<br>Child theme and required\/optional plugin installation will be handled for you.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"installing-ska-theme\">1. Installing the theme<\/h2>\n\n\n\n<ol class=\"wp-block-ska-element\">\n<li class=\"wp-block-ska-text ska-text\">Login to your WordPress Admin Dashboard.<\/li>\n\n\n\n<li class=\"wp-block-ska-text ska-text\">Navigate to <strong>Appearance -&gt; Themes<\/strong>.<\/li>\n\n\n\n<li class=\"wp-block-ska-text ska-text\">In the top left corner click <strong>Add Theme<\/strong>.<\/li>\n\n\n\n<li class=\"wp-block-ska-text ska-text\">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 class=\"wp-block-ska-element\">\n<span class=\"wp-block-ska-text ska-text\">After installation click <strong>Activate<\/strong>.<br>Once activated, you should see the <strong>ska-theme setup<\/strong> notice:<\/span>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"418\" data-pswp-width=\"846\" data-ska-pswp=\"ska-pswp-1\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-22.png\" class=\"mt-2 max-w-lg ring ring-site wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-22.png\" alt=\"ska-theme setup wizard that installs a child theme, required plugins and optional plugins\" width=\"846\" height=\"418\" loading=\"lazy\" class=\"w-full h-full object-cover rounded-[inherit] aspect-[inherit]\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-22.png 846w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-22-300x148.png 300w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-22-768x379.png 768w\" sizes=\"(max-width: 846px) 100vw, 846px\" \/><\/a>\n<\/li>\n\n\n\n<li class=\"wp-block-ska-text ska-text\">Check the boxes that apply to you and hit <strong>Perform selected actions<\/strong>. <\/li>\n\n\n\n<li class=\"wp-block-ska-element\">\n<span class=\"wp-block-ska-text ska-text\">Once the setup is completed, you&#8217;ll be prompted for the license key which you received in an e-mail after purchasing the theme &#8211; enter it and press <strong>Activate License<\/strong>:<\/span>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"424\" data-pswp-width=\"533\" data-ska-pswp=\"ska-pswp-2\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-23.png\" class=\"mt-2 max-w-sm ring ring-site wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-23.png\" alt=\"ska-theme Freemius license key input\" width=\"533\" height=\"424\" loading=\"lazy\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-23.png 533w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-23-300x239.png 300w\" sizes=\"(max-width: 533px) 100vw, 533px\" \/><\/a>\n<\/li>\n\n\n\n<li class=\"wp-block-ska-element\">\n<span class=\"wp-block-ska-text ska-text\">If you also wanted to import a demo, make your way to <strong>ska-theme options page<\/strong> (if you&#8217;re not already there) from <strong>ska -&gt; ska-theme<\/strong> in the left menu of the WP admin dashboard or from <strong>Edit Site -&gt; Theme options<\/strong> from the WP admin bar and press the <strong>Import demo<\/strong> button:<\/span>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"769\" data-pswp-width=\"916\" data-ska-pswp=\"ska-pswp-3\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-25.png\" class=\"mt-2 max-w-sm ring ring-site wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-25.png\" alt=\"ska-theme theme settings page\" width=\"916\" height=\"769\" loading=\"lazy\" class=\"w-full h-full object-cover rounded-[inherit] aspect-[inherit]\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-25.png 916w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-25-300x252.png 300w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-25-768x645.png 768w\" sizes=\"(max-width: 916px) 100vw, 916px\" \/><\/a>\n\n\n\n<p>Read more: <a href=\"https:\/\/ska-blocks.com\/docs\/importing-a-demo\/\" data-type=\"post\" data-id=\"13\">importing a demo<\/a>.<\/p>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"first-steps\">2. 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:\/\/ska-blocks.com\/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 aria-label=\"View image in full screen\" data-pswp-height=\"658\" data-pswp-width=\"602\" data-ska-pswp=\"ska-pswp-4\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-111.png\" class=\"block max-w-96 ring ring-site wp-block-ska-image image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-111.png\" alt=\"Options under ska-blocks -&gt; Options -&gt; Dynamic content\" width=\"602\" height=\"658\"\/><\/a>\n\n\n\n<p><a href=\"https:\/\/ska-blocks.com\/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<img decoding=\"async\" class=\"ring ring-site wp-block-ska-image image\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-27.png\" alt=\"ska-blocks plugin Tailwind configuration options\" width=\"280\" height=\"471\" loading=\"lazy\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-27.png 280w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-27-178x300.png 178w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/>\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:\/\/ska-blocks.com\/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 (shortcut <strong>WP admin bar -&gt; Edit Site -&gt; Header<\/strong>), click on the main <a href=\"https:\/\/ska-blocks.com\/docs\/ska-theme\/menu-block\/\" data-type=\"post\" data-id=\"283\">menu block<\/a> (which by default renders placeholder menu items) and swap out the placeholder for the menu you just created.<\/p>\n\n\n\n<img decoding=\"async\" class=\"ring ring-site wp-block-ska-image image\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-26.png\" alt=\"Swapping out a menu that is used with ska\/menu block\" width=\"266\" height=\"721\" loading=\"lazy\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-26.png 266w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-26-111x300.png 111w\" sizes=\"(max-width: 266px) 100vw, 266px\" \/>\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. To 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\" id=\"create-content\">3. Create your content<\/h2>\n\n\n\n<p>The <a href=\"https:\/\/ska-blocks.com\/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 bundled <a href=\"https:\/\/ska-blocks.com\/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. You should have: 1. Installing the theme 2. First steps Configure the theme Theme&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-59","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":4,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":410,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/59\/revisions\/410"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}