Author: Marko Krstić

  • Getting started

    After purchasing DevKit, you will have access to the plugin. You can download the latest version from your Customer Dashboard. Installation To install DevKit, please follow the instructions in the WordPress Plugin Installation Guide. After installing and activating DevKit, you will see a new menu item in the WordPress admin menu called DevKit. DevKit Features…

  • Plugins upload

    Upload area You can drag and drop one or multiple files into the upload area; it works the same regardless of the number of files. Alternatively, if you prefer not to drag and drop, you can click the ‘Upload a File’ button to open your system’s file browser and select a zip file. Activate plugin…

  • Plugins download

    You don’t need FTP Applications anymore. Use dropdown list and select what plugin you want to download and you will get it as .Zip file. Single download Click on the input field, and a dropdown list will be presented. In this list, you will find the names and version numbers of the plugins. You can…

  • Getting Started

    Welcome to the introduction of the Self-Hoster plugin. This new tool offers a self-hosting solution for WordPress plugin developers who face limitations on the WordPress.org platform. Self-Hoster enables developers to manage and distribute their own plugins independently. Challenges with WordPress.org Using WordPress.org to distribute plugins comes with several restrictions: Features of Self-Hoster Self-Hoster addresses these…

  • Installation

    Installing the Self-Hoster plugin follows the standard process for installing any WordPress plugin. Below is a step-by-step guide to help you get started: Step 1: Upload the Plugin Step 2: Activate the Plugin Step 3: Configure License Once these steps are completed, your Self-Hoster plugin will be fully operational, allowing you to manage and distribute…

  • Create Plugin Update

    After activating your Self-Hoster plugin license, you can begin distributing your custom plugins or themes across multiple websites. Below, we outline the process of creating, updating, and managing your first plugin named “Global Team,” intended for distributing CSS globally. Step 1: Create Your First Download Step 2: Configure Plugin Details Step 3: Add and Configure…

  • GitHub

    This tutorial will guide you through the process of creating a new GitHub repository for a WordPress plugin called “Info Block,” which allows you to distribute your custom block across various websites using GitHub and Self-Hoster plugin integration. Create GitHub Repository Create Gutenberg block Open a terminal and prepare your plugin directory: Exclude Unnecessary Files…

  • Plugin Assets

    To improve the user experience and strengthen your plugin’s brand identity, integrating visual elements and consistent styling is crucial. Here’s how you can enhance your plugin’s appearance using a Figma template for design and asset management. Step 1: Design Your Plugin’s Visual Assets Create or Update the Design in Figma: Step 2: Preview and Export…

  • Download Buttons

    Plugin is shipping two custom blocks “Download Button”. Static and Dynamic. Dynamic Button Is no more then permalink to your download file. Use it in Query or in the single post template where you instead of getting link to the post you will get link to the post => download file. Static Button With Static…

  • Styling Download Page

  • Custom Block Category

    New category “Gutenberg Studio” is added by the default and you can assign any new custom block to it. Rename Category New category in Editor When you open add new block you will see new category as on top of all groups

  • Changelog

  • Scripts Organizer

    Scripts Organizer

    Start making workflow where scrips work for you. Schedule them and sit back and relax. They will be activated/deactivated regardless if you are sleeping, taking a coffee break, or on vacation.

  • Font Hero vs Block Theme Fonts

    In this video, we dive deep into the world of web fonts, comparing Google Fonts installation with the free Block themes font option introduced in WordPress 6.5. We’ll explore differences in performance, font formats, and font loading techniques. Join us to find out whether the new offering from WordPress can outperform Font Hero, helping you…

  • Migration to 2.0

    After upgrade steps Once you migrate from version 1 to version 2 your config will be different. Do not worry you didn’t lost it, it’s just due to new code structure, its located on another location. That is why we made simple plugin to convert your data to the new location. Installation Make sure you…

  • Custom Menu Items

    You can now create new custom menu links inside the dashboard and optimise experience for you or your users. Create new menu item To get started: Menu item option Icon picker preview Edit and Delete To edit or delete a menu item, you need to click on the “Edit” button within the “Register Items” link.…

  • Changelog

  • Changelog

  • Themes upload

    Upload area You can drag and drop one or multiple files into the upload area. it works the same regardless of the number of files. Alternatively, if you prefer not to drag and drop, you can click the ‘Upload a File’ button to open your system’s file browser and select a zip file. Why multiple…

  • Introduction

    No Code Font Manager. GDPR way to add Self host Fonts for any WordPress Builder or Theme Our beautiful plugin with visualized panel lets you easily add self–hosted, static, and variable fonts to any Visual Builder or WordPress theme without any coding knowledge required. No need to dig into code snippets that need to be maintained with builder updates. The plugin settings are located under Appearance and it…

  • Installation

  • Register Font Family

    With Font Hero you can register fonts in WordPress in tree ways. Google Fonts Google Fonts is an extensive library of free, open-source fonts provided by Google. It offers a diverse collection of typefaces that cater to various design needs, from classic and elegant to modern and quirky. Google Fonts is widely used by web…

  • Register Google Font

  • Register Custom Font

    Starting from version 2.0, we will be renaming this feature as “Register Custom Font” to provide greater clarity to our users. This change is necessary as we have added the option to register Google Fonts as well. In this blog post, we’ll walk you through the process of adding your first delightful font family for…

  • Why Tailwind CSS

    Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, dark:bg-blue, and rotate-90 that can be composed to build any design, directly in your HTML. Some highlighted features of Tailwind CSS:

  • Winden: How does it work?

    The Winden implements the CDN for the development inside the Oxygen, Bricks and Gutenberg editor and the Worker to generate the CSS cache for production. CDN Prior to Tailwind CSS v3.0 (v2.0 or earlier), the CDN provided is a giant CSS file that contains pre-generated CSS classes for every default class that is available in…

  • Production

    Once you are ready with your website development it’s end of puling robust framework and it’s time replacing it with optimised one. Compile our production ready CSS. Now Winden will start pulling optimised production ready CSS and you will not see warning in the console that “cdn.tailwindcss.com should not be used in production. To use…

  • Import plugins

    Why we moved to ESM import? ECMAScript Modules (ESM) represent the modern standard for structuring and packaging JavaScript code, offering native support in both browsers and Node.js. ESM’s adoption brings several benefits, including native module loading without the need for additional tools, efficient code splitting through dynamic imports, and improved optimization possibilities such as tree…

  • Getting started

    After purchasing Plain Classes Oxygen, you will have access to the plugin. You can download the latest version from your Customer Dashboard. Installation To install Plain Classes Oxygen, please follow the instructions in the WordPress Plugin Installation Guide. After installing and activating Plain Classes Oxygen, you will see a new sub menu item under Oxygen menu called…

  • Installation

  • Migration from v1.1 and bellow

    The plugin has been rebuilt from the ground up, and we’ve changed the entire logic. This means that existing fields in version 1.1 have been changed in version 1.2. If you haven’t migrated classes from the Plain Classes database, you will not see them, but that does not mean you have lost them. Migration Process:…

  • Themes download

    You don’t need FTP Applications anymore. Use dropdown list and select what plugin you want to download and you will get it as .Zip file. Single download Click on the input field, and a dropdown list will be presented. In this list, you will find the names and version numbers of the plugins. You can…

  • Changelog

  • Reset WordPress installation

    Reset database This will completely clear your database, just like when you first started your WordPress, but without the tedious steps involved in the famous 5-minute setup. There’s no need to fill in the Site title, Username, Password, Email, Database host, or Table Prefix again. We already have this information, so we just simplify it…

  • Fluid Typography

    NPM Link: https://www.npmjs.com/package/tailwindcss-fluid-typography New to ESM import?

  • Autocomplete

    Oxygen Classes The Oxygen Selector System stores class names in a database collection. When you enable this feature, it will autocomplete values. Winden Due to the large number of classes in Tailwind CSS, we have decided to enhance performance by storing class names outside of the database in a .JSON file. Winden, by default, does…

  • Copy Paste Classes

    Since we are now syncing with the Oxygen Class system, you can use the copy and paste functionality for classes within a page, across tabs, windows, or even different websites. When you select another element and hit ‘Paste,’ it will completely replace any current classes assigned to that element. We will first clear all existing…

  • Patching Oxygen (Deprecated)

    Important notice: As of version 1.2.0, Plain Classes Oxygen no longer requires oxygen patching.

  • Server Information

    This feature is located on the System Info page. To assist you in your debugging process, we display basic information about the server and WordPress limitations, giving you a headstart.

  • Debug options

    Hide DevKit plugin A common practice for debugging is to disable all plugins and then enable them one by one. Since the DevKit should not be the issue, we’ve made it invisible in the plugins list. This allows you to perform a bulk disable of other plugins without affecting the DevKit. Enable debug To understand…

  • Error Log

    Reload Error Log Instead of reloading the entire browser, we have added the CTRL (Command) + R shortcut to help you refresh the list. Date and Time To ensure the log is up-to-date, we have added the date and time of the latest update to the log. Error log content By default, the error log…

  • Files Manager

    Files List This tab is always present and cannot be closed, as it is the starting point of the Files Manager feature. Here, you can view all files and folders inside the WordPress root directory. From here, you can open files and folders, create files and folders, and upload ZIP files. Create File and Folder…

  • Changelog

  • WP Admin Cleaner

    Choosing to use the WP Admin Cleaner plugin can drastically enhance your experience and productivity while using WordPress. This powerful tool offers increased flexibility and control over your admin interface, allowing you to personalize your dashboard and menu elements, hide specific plugins, and even secure your login URL. Its robust customization options, from adding a…

  • Flowbite

    Flowbite Configuration Link: https://flowbite.com/docs/getting-started/quickstart/ New to ESM import?

  • Changelog

  • Register TypeKit Fonts

  • Advanced Conditions – Exclude

    Advanced Conditions – Exclude

    This feature will finally allow you to have the option to select the entire website except: “Post types, Handpicked single posts, Taxonomies, or Terms.” This feature is disabled by default as not everyone needs it. It’s located under Template settings and you can enable it with toggle. Exclude settings By choosing different settings for “Template”…

  • Intro video

    Please take a look at this video to get you started Or read documentation for all the details

  • Changelog

  • Database Manager

    With DevKit, you can access a comprehensive database manager without needing to use cPanel or other server management tools. This feature is powered by AdminerEvo, a web-based database management interface designed with an emphasis on security, user experience, performance, functionality, and compactness. AdminerEvo is ready to use with various databases, including MySQL, MariaDB, PostgreSQL, SQLite,…

  • Changelog

  • Code Block Editor Interface

    User Interface first look UI is heavily inspired by the Gutenberg editor that is the future of the WordPress. Top Bar WordPress Icon Is the same in Gutenberg. It will take you back to the Code Blocks. + Add new Will create new Code Block or SCSS Partial depending on the location you are. Read…

  • DaisyUI

    DaisyUI Configuration Link: https://daisyui.com/docs/config/ New to ESM import?

  • Hide menus for current user only

    Hide WordPress Admin menus for current user only The primary functionality of the WP Admin Cleaner plugin is to customize the visibility of admin elements based on individual users. To demonstrate this, we’ll consider the roles of two admins: a designer and a developer, alongside an editor. Upon logging in as the designer in Safari…

  • Hide menus per user role

    One of the most requested features since the launch of WP Admin Cleaner has been the ability to apply different settings for different roles. To demonstrate this, let’s log in as a designer and an admin. When setting up configurations for the administrator role, all administrators except the super admin will be affected. For instance,…

  • Menu order for current user only

    The WP Admin Cleaner also allows users to customize the order of menu items, but it’s essential to note that any changes made will only apply to the current user. To illustrate, let’s say you want the ‘Menu’ and ‘Scripts Organizer’ at the top of your menu because you work with them most frequently. After…

  • Menu order per user role

    This feature allows you to customize menu orders for different roles such as Admins, Editors, Customers, or Users. Rather than instructing each individual on how to customize their menu, you can now set it up for them according to their user role. Select Role To begin, choose the user role you wish to edit. Drag…

  • Hide Plugins

    The WP Admin Cleaner plugin includes a feature to hide certain plugins from users, excluding the super admin. The super admin is visibly distinguished for clarity. This function is particularly useful when you don’t want your client or other users to view sensitive information displayed by a plugin or interfere with plugin updates. To illustrate…

  • WP Admin login page

    Design custom WordPress login page The WP Admin Cleaner plugin offers a feature that allows you to restyle the WordPress login page, which by default looks a bit outdated. First, you can adjust the page’s text color which will affect the labels and other text. Additionally, you can modify the background color, form background color,…

  • Custom user redirect after login

    To prevent users from accessing the WordPress Dashboard, you can redirect them to a specific page upon login. This redirection can be achieved using WP Admin Cleaner 1.6.3, which allows you to set different redirections based on user roles. The reason for implementing these features is to restrict users’ access to the Dashboard while still…

  • Custom WordPress Dashboard

    The video above uses Gutenberg as an example since it is a free builder. However, you can use any theme or visual builder such as Oxygen, Bricks, Beaver Builder, or any other of your preference. You will need to create a new template that does not have a header and footer, and design it based…

  • Font Priority

    is important in HTML and CSS loading because it directly impacts the visual consistency, performance, user experience, and accessibility of a web page. By carefully managing the order in which fonts are loaded and ensuring timely display of text content, developers can create a seamless and engaging browsing experience for users. If you change font…

  • Disable Font Face or Family

    When developing a website, it’s beneficial to load the entire font family initially and disable font faces that are not immediately needed. This approach reduces HTTP requests, utilizes caching for faster subsequent page loads, ensures consistency in typography, provides flexibility for future design changes, and streamlines development without sacrificing performance.

  • Dark Themes

    WordPress admin, Gutenberg editor dark themes and custom admin CSS The WP Admin Cleaner plugin also supports per-user exceptions. For instance, if you want to enable an admin dark theme, it will apply only to your user interface and not to other admins. After enabling the dark theme, all aspects of your admin panel, from…

  • Gutenberg Dark Theme

    Enjoy in lightweight Gutenberg dark theme that is only 2kb. Save your eyes and focus on the content. This theme is separated from WP Admin and Post Classic view. Some users disable Gutenberg and we didn’t want to include it with the rest if Gutenberg is disabled. Theme does not interact with the content. Oxygen…

  • Font Files Upload Options

    Understanding Font File Formats: WOFF2, WOFF, and TTF As you explore various font file formats for your web projects, you may notice that we only display the WOFF2 format by default. We have chosen this approach to ensure that our interface remains clean and uncluttered, while still addressing most of your font needs. In this…

  • Enable System Fonts

    In addition to uploading custom fonts, we also offer the option to register system fonts on our platform. By default, this feature is disabled, but you can easily enable it by going to the “Features” section and checking the “System Fonts” box, then saving your changes. Once enabled, the font faces and families of system…

  • Winden

    Integrating Custom Fonts with Tailwind CSS using Font Hero In this tutorial, we will be exploring how to integrate custom fonts with Tailwind CSS using Font Hero. Font Hero is a web-based tool that allows you to create and customize font pairings for your website. First, we need to open the Tailwind documentation and navigate…

  • Gutenberg

    Integrating Custom Fonts in Gutenberg Integrating custom fonts into your Gutenberg editor is a straightforward process. This guide will show you how to add and use new font families in the Gutenberg editor, even if you’re not using the latest WordPress version. We will also cover the steps to install and activate the necessary Gutenberg…

  • Oxygen Builder

    Using Custom Fonts with Oxygen Builder In this tutorial, we will guide you through the process of using custom fonts with Oxygen Builder. We will be installing one of Oxygen Builder’s design sets, disabling Google fonts, registering a custom font, and applying it globally within Oxygen. Step 1: Install a Design Set Begin by installing…

  • Bricks Builder

    Enhancing Performance with BRICKS Integration and Font Hero Introduction: Font Hero offers users the option to self-host their fonts, providing greater control over font files and improved performance. By inspecting individual font faces, users can access several valuable features, such as the font display and swap options. The font swap option is particularly useful as…

  • Beaver Builder

    In this blog post, we will be discussing the integration of Beaver Builder with Font Hero, a tool that allows users to access a wide variety of fonts for their website. We will also demonstrate how to use Font Hero within Beaver Builder to change the font family of your website. Firstly, let’s take a…

  • Generate Press & Generate blocks

    GeneratePress have it’s own font manager but it’s limited. Register fonts in the Font hero as for any other project. Google Font, Adobe Font or custom font. Generate press customiser Add font to Typography System Assign fonts globally Move down to the next section Typography Manager Assign fonts in blocks Font Hero have integration with…

  • Optimise Fonts File Size

    Font Optimization: A Guide to Reducing Font File Size for Web Design Font optimization is an essential aspect of web design, as it can significantly reduce the file size of the fonts used on a website, leading to faster loading times and a more responsive user experience. In this guide, we will discuss the importance…

  • Convert Variable Font

    Variable fonts have become increasingly popular in recent years because of their flexibility and ability to adapt to different sizes and styles. However, they are not always compatible with all devices and platforms. One solution to this problem is to convert variable fonts from TTF to Woff2 format, which is more widely supported. In this…

  • Inline Font Declarations CSS

    When it comes to web development, there are various ways to add custom fonts to your website. One of the most popular methods is to use CSS @font-face rule to specify a font file and then apply it to your HTML elements. However, the question arises as to whether to include the CSS code inline…

  • How to Target Selectors

    Introduction: In some cases, you might find yourself working with a contact form that does not offer configuration options for certain elements. In this blog post, we’ll walk you through a simple process to customize a form’s label to match the font family of a sub-headline using CSS. This technique can be applied to target…

  • Disable plugin in production

    Hey there! In this post, I’m going to show you how to disable Font Hero and use CSS and other fonts instead. This is perfect if you’re finished designing your website and don’t want to deal with plugin updates anymore. So, let’s say you’ve already designed your typography and you’re ready to move your website…

  • CSS Preview

    Followed by the explanation on how to disable plugin and reuse resources once you are ready for website delivery we made a feature to easily copy CSS code.

  • Disable plugin for production

    How to Disable Font Hero Plugin and Optimize Your Website Are you looking to optimize your website’s performance by disabling unnecessary plugins? One such plugin is Font Hero, which can be disabled once you have finished designing your website and no longer require any further edits. In this blog post, we will walk you through…

  • Font Pairing Collection

    Enhance Your Design with Custom Font Pairings Introduction: Are you looking for a way to make your website stand out with unique font pairings? We have a solution for you! We offer the option to self-host custom fonts and provide 16 beautiful, professionally crafted font pairings. Each font pairing comes with three font families to…

  • Introduction

    Features ⚛️ Scripts manager : Register or enqueue Script libraries and CSS Frameworks from CDN Self-host Registered or enqueued Script libraries and CSS Frameworks ⚡️Convert HTML to Bricks Builder Elements : Use your favorite IDE (VS, Sublime …) to write HTML and paste as Bricks Elements Copy the code from any website and paste it as Bricks…

  • Installation

  • Scripts Manager

    Enable the feature This feature is disabled by the default.Check Enable Scripts Manger and save changes. Add new script Navigate to the Swiss Knife Bricks > Scripts Manager and press “+ Add New Script” Scripts Configuration Script Name To make it easier to recognize, choose a unique and descriptive name. Script Type Script types you…

  • Tailwind Animations

  • Fluid Tailwind

    Visit Fluid Tailwind Website → You can also create your own font sizes: Size fail is connected with the accessibility violation. And at this point you can not bypass that. Issue regarding this matter is already open. You can read more about that on their github issues: https://github.com/barvian/fluid-tailwind/issues/11

  • CDN Version Rollback

    What to do if library stop working? Recently we had incident where Fluid Typography was working one day and just stop working. So where to start??? Always console log first! Bellow you can see how I investigated console log and that the error is inside Fluid Typography Library. Go to the GitHub and investigate the…

  • Scripts Organizer

    While Winden provides built-in integration, we also provide a collection of custom integration snippets that you can copy-paste into your themes’ function.php file or use the Code Snippets plugin. Scripts Organizer – ACF Gutenberg Addon Scripts Organizer – ACF Gutenberg Addon is an add-on for Scripts Organizer plugin that allows you to Create Gutenberg blocks…

  • Oxygen Autocomplete Suggestion

    While Tailwind CSS’ classes name convention has a simple pattern and is easy to remember, it’s may convenient and faster to write the classes name with the support of autocomplete suggestions. The Windens’s autocomplete suggestion generator is based on the tailwindcss-classnames package which running on our generated autocomplete file. The Winden plugin has a built-in autocomplete integration…

  • Paste HTML as Bricks elements

    Revolutionary feature for bricks that will allow you to create an entire website page or template with just a couple of clicks. Copy entire page. Paste into bricks. Connect the framework or add your classes system and you are up and running. Enable the feature This feature is disabled by the default.Check Paste HTML and…

  • HTML Editor

    This feature is enabled with HTML Paste feature as it’s using the same Clipboard function. After the feature is enabled you will get “Code inside Clipboard” icon inside Bricks Topbar. Once clicked you will get a code editor with overlay popup to write HTML.

  • Copy-paste classes

    If you are using utility classes or you have already added content, styling should be easy. At the moment, you need to The biggest problem is that you must repeatedly repeat steps 1, 2, and 3. Focus should be on visuals. Coping the classes is also beneficial: the action can be repeated until you don’t…

  • Multiselect

    Multi-select, Multi-edit Enable Copy/Paste action This feature is disabled by the default.Check Enable Multi-Select and save changes. Use Multi-select Once feature is activated you can hold Shift + Click on elements inside Bricks Structure panel. Use Multi-select Edit Once you select multiple elements you can:

  • Plain Classes

    Enable the feature This feature is disabled by the default.Check Enable Plain Classes and save changes. Usage Once activated it will be displayed above Bricks Builder Classes every time you select some Bricks Builder element. Plain Classes vs Bricks Classes Writhing classes and editing them is much easier if the class is plain text and…

  • Visual Enhancements

    This feature just started. It will be a group of UX improvements where does it have sense. Left Sidebar without enabled feature Left Sidebar out enabled feature The idea is that elements should be the same size. So if you start resizing you should have more elements per row.

  • Plain Classes Gutenberg Start

  • Page Development with Oxygen Builder

    In this tutorial, you will learn best practices on how to use Tailwind. This will be done in Oxygen, but you can apply it in other Visual builders or Gutenberg as well. Will will cover how to create an entire design by extending and reusing Tailwind styles. Subscribe and be notified when the next video…

  • Tailwind Design Kits

    Featured Nintu RELIABLE, SCALABLE, CONSISTENT WEB SOLUTIONS.Well crafted premium design kit for Bricks Builder and Winden. Free daisyUI This is quite an interesting addition to this list. You’ll first notice that daisyUI uses a custom – simpler – syntax for its components. In fact, whereas you’d need to write several utilities to style a button…