Table of Contents
Philosophy
Our WordPress Design System consists of various components. We have prepared everything to create the ideal starting point for launching projects with different designs and for different clients.
The prepared structure and existing patterns serve not just as a starting point. It is important that project-specific customizations retain the core philosophy to avoid long-term compatibility issues.
Core Theme
The Core Theme uses the features of the WordPress core. It forms the foundation for every project and is delivered without custom code. The Core Theme alone is used when working 100% core-compatible and 100% no-code. All customizations can then be made via the Site Editor by modifying (not extending) the prepared structure.
Custom Theme
The Custom Theme includes everything the Core Theme covers and extends it with features that require custom code, as well as templates for easier customization. These theme-specific extensions include patterns that require custom JS and CSS – e.g. complex header implementations or sliders – as well as features for performance and security.
Patterns
Both the Core and the Custom Theme include numerous patterns prepared for building entire content sections. All patterns are categorized by their intended use on the website (Purpose First). The following categories are available:
- Orientation – Patterns that help users navigate the website and understand the context.
- Information – Patterns that convey content, facts, or explanations.
- Marketing – Patterns intended for promoting products or services with an advertising focus.
- Trust – Patterns designed to build trust.
- Navigation – Patterns intended for movement within a subpage or within the website.
- Action – Patterns intended to prompt the user to take an action.
- Media – Patterns that include images, videos, or interactive elements.
Custom Styles
We use Section and Block StylesOpens in new tab when the functionality stays the same but the appearance should change. Both in the core and custom theme, custom styles are prepared in the /styles folder – e.g. for boxes, semantic sections, or lists.
Block Variations
We use Block Variations when a core block needs to be customized or extended. This means: there is already a standard block that we modify to meet general or project-specific requirements. Typical use cases are customizations to the Button block or Loop block.
Variations are located in /block-variation/variation-name.php and we have prepared some in our custom build.
Plugins
We develop plugins when we need a self-contained combination of frontend and backend that is only used in a few projects and represents an independent feature. Typical use cases are filters, post types including custom templates, etc.
Installation & Minimum Requirements
We require the latest WordPress version and the server requirementsOpens in new tab for that WordPress version.
Functions
The custom functions of the custom build are described here:
| Theme | File | Description |
|---|---|---|
| Core & Custom | add-pattern-categories.php | Registers custom block pattern categories in the block editor |
| Core & Custom | load-textdomain.php | Loads the theme text domain for translation support |
| Core & Custom | render-copyright-comment.php | Outputs a copyright HTML comment with branding in the document head |
| Core & Custom | setup-logo.php | Enables custom logo support and provides a fallback SVG logo |
| Custom | accessibility.php | Accessibility enhancements: external link icons, screen reader text, and text-scale meta tag |
| Custom | add-menu-highlighting.php | Adds active parent class to navigation items when viewing child pages |
| Custom | appicons.php | Replaces default WordPress favicon with custom favicon, Apple Touch Icon, and web manifest |
| Custom | back-to-top.php | Injects the back-to-top button pattern into the footer |
| Custom | comments.php | Completely disables comments site-wide (frontend, admin, dashboard, admin bar) and adds a privacy checkbox to the comment form |
| Custom | dashboard.php | Adds custom post type counts to the “At a Glance” dashboard widget |
| Custom | editor.php | Block editor customizations: removes default patterns, disables Block Directory, restricts block locking UI, and extends block bindings |
| Custom | load-icons.php | Outputs the SVG icon sprite in the document body for inline SVG usage |
| Custom | load-scripts.php | Enqueues theme and Swiper scripts; applies defer loading to jQuery |
| Custom | load-styles.php | Enqueues all stylesheets (main, critical inline, Swiper, print, login, editor) and defers WooCommerce styles on non-shop pages |
| Custom | localize-vars.php | Passes translated strings to JavaScript for menu, search, navigation, and share functionality |
| Custom | login.php | Customizes the login page: logo, logo link, and error message |
| Custom | media.php | Disables automatic JPEG compression on upload and image editing |
| Custom | modify-accordion-icon.php | Replaces the default accordion toggle icon with custom SVG chevrons from the sprite |
| Custom | post-excerpt.php | Prevents auto-generated excerpts and removes empty excerpt block markup on pages |
| Custom | post-type-page.php | Adds excerpt support to the page post type |
| Custom | remove-default-skip-link.php | Removes the default WordPress skip link in favor of a custom pattern |
| Custom | rest-api.php | Restricts sensitive REST API endpoints to authenticated users with edit permissions |
| Custom | security.php | Security hardening: disables XML-RPC and blocks user enumeration |
| Custom | setup.php | Reserved for future setup functions (currently empty) |
| Custom | utilities.php | Utility functions: phone number sanitization |
| Custom | woocommerce.php | Adds WooCommerce theme support and removes upsells/related products from product pages |
Custom Utility Classes
There are some utility classes to optimize the layout in targeted ways when the WordPress block editor reaches its limits. We remove utility classes when WordPress incorporates the functionality into core.
| Class | Purpose | Effect / Notes | Typical Use |
|---|---|---|---|
.is-style-all-unset | Removes all inherited/UA styles | all: unset; box-sizing: border-box; Resets the element to a clean initial state. | Base for custom components in block content. |
.is-style-expanded-click-container | Prepares a wrapper for an expanded click area | position: relative; isolation: isolate; Required for the expand-click pseudo-element variants. | Parent element that should provide the click/outline area. |
.is-style-expand-click-after | Makes the first link/button/label fill the wrapper (after) | Inserts an absolutely positioned ::after over the wrapper, shows outline on :focus-visible. Works directly on interactive elements or on a wrapper (then first child a/button). | Cards or list items that should be fully clickable, including keyboard focus. |
.is-style-expand-click-before | Same as above, but with ::before | Functionally identical, but with ::before. Use only one variant per component to avoid conflicts. | Alternative depending on stacking/order needs. |
.is-style-hide-scrollbar | Hides native scrollbars (scrolling remains possible) | scrollbar-width: none; -ms-overflow-style: none; ::-webkit-scrollbar { display: none; }. | For aesthetic overflow areas (carousels, chips). |
.is-style-hyphens-auto | Better hyphenation of long words | hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; | Narrow columns, cards, long URLs. |
.is-style-icon | Normalizes icon size/behavior (default) | fill: currentColor; flex-shrink: 0; Size via --wp--custom--icon--size (default 1.5rem). | Inline SVGs in buttons, menus, badges. |
.is-style-icon-small | Smaller icon variant | Same as above, size via --wp--custom--icon--size--small (default 1.25rem). | Dense UIs, secondary actions. |
.is-style-overflow-clip | Clips overflow hard without scrollbars | overflow: clip; (no scroll, content outside is not visible). | Decorative masking, tightly cropped media. |
.is-style-text-balance | Balances uneven lines | text-wrap: balance; (browser distributes lines more evenly). | Multi-line headlines/subheadings. |
.is-style-text-overflow-ellipsis | Truncate with ellipsis (single line) | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; | Titles, labels, chips that must not wrap. |
.is-style-visually-hidden | Visually hidden, visible to assistive technology | 1×1 px off-screen, clipped. Does not become visible automatically on focus. | Non-visual labels, screen reader text. |
.is-style-flex-grow-0 | No flex growth | flex-grow: 0; | Item retains intrinsic width. |
.is-style-flex-grow-1 | Flex growth allowed | flex-grow: 1; | Item fills remaining space. |
.is-style-flex-grow-99999 | Very strong growth | flex-grow: 99999; dominates over other items. | One item should take up maximum space. |
.is-style-flex-shrink-0 | No shrinking | flex-shrink: 0; | Item stays uncompressed (e.g. icons). |
.is-style-flex-shrink-1 | Shrinking allowed | flex-shrink: 1; | Default behavior. |
.is-style-justify-content-center | Centers along main axis (flex) | justify-content: center; Only for flex containers. | Center content in row/column. |
.is-style-justify-items-center | Centers items in grid cells | justify-items: center; Only for grid containers. | Center grid children horizontally within their track. |
.is-style-order--1 | Changes layout order | Sets order value to -1 | Manual order adjustment |
.is-style-order-0 to .is-style-order-9 | Changes layout order | Sets order value to 1 – 9 | Manual order adjustment |
Slider Utility Classes
The sliders are implemented with Swiper JSOpens in new tab. The standard Swiper classes are therefore in use and prepared in the slider patterns. Specifically, the following classes must be ensured for everything to work:
.swiper | Must be applied to a parent element of the slider wrapper to initialize the slider |
.swiper-wrapper | The direct parent container that holds the elements to be moved |
.swiper-slide | The individual element that is moved. This class is added automatically. |
Translation
The text domain is kb. In both themes the *.po files are located in the /languages folder.
Preparing WordPress themes for multilingualism and translations
Performance
Styles are loaded in the following order:
- WP Core blocks (inline)
- Custom Critical CSS (inline)
- Globally customized styles (inline)
- Block Variations (inline)
Performance Edge Cases
- Demo 1Opens in new tab (Lots of text, few images)
- Demo 2Opens in new tab (Many images, few JS components)
- Demo 3Opens in new tab (Many images, many JS components, JS above the fold)
- Demo 4Opens in new tab (Many images, few JS components)
- Demo 5Opens in new tab (WooCommerce, Lots of text, few images, JS)
WooCommerce Setup
If WooCommerce is to be used, the following points should be considered:
- Install WooCommerce and run the setup wizard if applicable
- Replace the header with one designed for WooCommerce (Design > Templates > Template Parts > Header
- Set up the »My Account« page. Since WooCommerce does not provide a template here, a group (full width) with a nested group (wide width) must wrap the shortcode for »Account«.
- Link the privacy policy page in the settings.
Gravity Forms
We typically use Gravity Forms for forms and have prepared the form styles accordingly. In the CSS file of the custom theme there is a code block that centrally and uniformly controls the styling of all HTML form elements, WooCommerce form elements, and Gravity Forms elements.