ska-theme
Tabs
ska-theme includes an Alpine.js component for creating tabs. For creating tabs, add the x-data=”skaTabs” attribute to the root element.The element that contains the buttons that change tabs should have the x-bind=”tablist” attribute and individual buttons that allow to select a tab should have the x-bind=”tabItem(‘tabId’)” attribute with a unique ID that matches the content.Content elements…
Accordion
ska-theme includes an Alpine.js component for creating an accordion. For creating an accordion, add the x-data=”skaAccordion” attribute to the root element.All direct children of that element should have the attribute x-bind=”item”.The item elements should have 2 child elements, one with x-bind=”toggle” and another with x-bind=”content”. There is 1 argument available for the skaAccordion component: exclusive.…
Under construction mode
ska-theme -> General -> Under construction option allows to enable “coming soon” mode for the website. When enabled, anyone who visits the site while not logged in will see the Under construction template instead of your front page. The mode is very rudimentary, simply designed to let any human visitors know that the website is…
Changing default heading sizes
By default the ska-theme h1-h6 headings use Tailwind 4xl to lg sizes and also include some fluidity for h1-h3 as these elements tend to take up quite a lot of space on mobile devices otherwise. To change the default values you can copy the variables from ska-blocks -> Tailwind -> Theme theme to Tailwind ->…
Enabling WordPress appearance controls
Should you wish to restore some of the default WordPress appearance controls that ska-theme disables edit the child theme’s theme.json file to include the following: This setup just enables changing text/background color and font size, but you can toggle things on-off and add values as needed. Because the theme disables a lot of the CSS…
Conditions block
The Conditions and Condition blocks can be used to render content when a certain condition applies. Condition The ska/condition block allows to set any whitelisted PHP function name as as the condition for rendering itself. For example, using the condition get_locale and value en_US allows to render content only when the current language is English.…
Post data block
The Post data block can render various data about the current post. ska/post-data is an alternative to WordPress core blocks such as Title, Excerpt and Categories. The block aims to produce cleaner markup than the aforementioned as well as support more customization options, such as using a different tag name and adding custom HTML attributes.…
Menu block
The Menu block renders a classic WordPress navigation menu. When using ska-theme, the legacy WordPress menus are re-enabled for a simpler alternative to the WordPress core Navigation block. The ska/menu block has an option to select one of these menus and render it in the editor. When you don’t have any menus yet, it can…
Slider block
The Slider block allows creating sliders using Swiper slider. Various controls for configuring Swiper are provided: Slides per view and Space between options can use Tailwind-like breakpoint syntax. When the controls are not enough, you can provide a custom JavaScript object with additional Swiper configuration: The slider is not functioning in the block editor, instead…
Lightbox block
The Lightbox block can be used to wrap images to give them lightbox capability. While the ska/image already has an option to enable lightbox, you can wrap multiple images (or combine with a Gallery) with the Lightbox block to have the images render in the same lightbox. To achieve that you should disable the “Lightbox”…