-
Display Side Editor in Hybrid Theme
Place this in function.php or use Scripts Organizer Code Snippet. We’ll let WordPress think it’s a block theme so the Editor shows up, but we’ll override template loading to use PHP templates like index.php. In your functions.php, override the block template resolution like this: This forces WordPress to always use index.php for rendering the front-end…
Category: Gutenberg
-
Disable default block theme patterns
To disable the default block patterns in WordPress (so only your custom patterns are available), use the following method in your custom blank theme: Add this to the functions.php or you can use code snippet editors.
Category: Gutenberg -
Countdown time with Tailwind CSS and JavaScript
A countdown timer is a great way to create urgency for an upcoming event, product launch, or special occasion. In this post, we will walk through a simple countdown timer using HTML, TailwindCSS for styling, and JavaScript for the countdown logic. HTML Structure Our HTML consists of a simple layout with four boxes to display…
Category: WordPress -
Load Gutenberg Styles inside plugin settings page
When creating a plugin settings page using @wordpress/scripts components, you may notice that the styles of your components do not match those in the Gutenberg editor. This happens because the Gutenberg editor styles are not automatically loaded outside the editor interface. To ensure consistency in appearance, you need to manually load the necessary styles when…
Category: Gutenberg -
Tailwind Starter Config files
Prepared config files to get you started fast with best practices
Category: Tailwind -
-
Load Scripts Organizer CSS/SCSS inside Gutenberg editor
If you want to load your theme.css file inside Gutenberg editor you need to create special function for that. Create one file that has CSS/SCSS and write your theme style there. Then you will need one more code block to load styles css inside Gutenberg editor Create Code Block and assign Trigger location > Everywhere…
-
Custom Dashboard with Metabox
Great tutorial from John Aperture on how to create Admin Dashboard with Bricks and Metabox inspired by our previous tutorial Custom Dashboard with Visual Builders.
Category: MetaBox -
Custom Dashboard with Visual Builders
This can be used with Gutenberg, Oxygen, Bricks, Elementror or any other visual builder. This code is optimized for Scripts Organizer. I can not guarantee that it will work in other code plugins. Create code block Scripts Organizer settings: Inside the php replace iFrame SRC with your own url
Category: WordPress -
Style Oxygen Menu Element with Tailwind
Video Tutorial Basic oxygen structure with:div.container > list wrapper (with image inside) + menu element Front end preview Front end preview for mobile
-
Add class to link in wp_nav_menu
By the default WP does not allow you to add class to link (“<a href=”>Link</a>”). If you are using tailwind with the Winden Plugin, you probably want to have it so you don’t need to target it with parent and write [&_a]:class. 1: Step: add this in functions.php You can use Scripts Organizer and place…
-
Enable Winden with conditions
Are working on the online shop or live website? Is always pain to migrate customers? You want to migrate page by page and not to redo entire website at once? In scenario where you have existing website and want to partially rebuild it and migrate to tailwind we are offering option to enable Winden only…
Category: Tailwind -
Read time without the plugin
According to Medium, people read about 200 words per minute. Medium also adds 12 seconds for each inline image, but I didn’t get that fancy. Use Scripts Organizer to add this code. Set it as “Everywhere” since that is same as functions.php After you register a function call it in code block Result Article found…
Category: WooCommerce -
Deregister Gutenberg Inline Styles
If you are working with Gutenberg and FSE you will notice that every element will create separate inline CSS. If you want to disable that you can deregister element by element. Locate inside the header section name of the element and dequeue it. Inside dequeue only paste wp-[blocka-name] without “-inline-css”.
Category: WordPress -
Category: jQuery
-
Tailwind Fluid Type Calculator
This will give you preview of entire Fluid Typography. Create it as shortcode and paste it one one dedicated page for preview. Once you preview the page it will give you: Preview text in real size Calculated font size in pixels (regardless what font value you used px, rem, em) Font size will be recalculated…
Category: Tailwind -
Dequeue Oxygen CSS
If you are importing frameworks such as Bootstrap, Tailwind CSS, Bulma, Materialize … you may not want that Oxygen Builder defaults overwrite some of frameworks styles. Thats why we offering solution do remove Oxygen CSS. Keep in mind that if you disable Oxygen CSS non of Oxygen CSS’s will be added on the website: Oxygen…
Category: OxygenTags: CSS -
Remove Gutenberg Duotone Filter
This is nice feature but in most of the cases you will not want to have it so the clients do not go off brand and mess up with styling. Also its loading on front end so it’s extra load.
Category: WordPress -
Fluid Type Preview shortcode
Get the code Get entire preview with class names and measured font size in PX If you are using Tailwind and doing fine tuning you need to have easy preview of entire typography scale. It’s created as shortcode so you can use in Oxygen, Bricks or even Gutenberg and reuse on every project. Shortcode is…
Category: Tailwind
3rd party plugins admin after_body Alt archive Blocks Category clean up composite elemenets core CPT CSS Custom Custom Post Dashboard flexslider Front End FSE full site editing Gallery hook HTML Image load styles Must Have notice Oxygen Password Permalink plugins Post List Publish Date repeater settings page share single product Taxonomy Taxonomy Term themes Tips Topbar WooCommerce wordpress WP Admin WPML