-
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 -
Display Screen Width if user is logged it
If you are fine tuning your design you need to check if you are targeting right size. With Scripts Organizer it’s easy to check if user is logged in since you probably don’t want to show this on the front end to everyone. Scripts Organizer Settings Use conditions and select: Header (CSS or SCSS) Footer…
Category: jQuery -
Element color background in repeater with ACF
Create ACF field group and assign it to posts. Create field label and name it color and choose field type Color picker. Assign color to each post Create a repeater in Oxygen builder Select first child of Repeater Add class to that element “data-color-bg” Go to advanced > attributes > Add attribute. First field needs…
-
Add script after body is open
One of the most common scripts include locations for analytics are inside header and after body is opened. In Scripts Organizer we didn’t wanted to bloat UI with this one as you can add it with simple code snippet. Scripts Organizer Settings Trigger location: EverywhereScript Location: PHP
Category: WordPress -
Animate header logo on scroll
Important here is that you add class .header to your header and class .brand to your logo. Code will add new class (.header-alt) to the header to the .header after user scrolls more then 1px. On the line 6 you can change scroll value to what you prefer (50px, 100px, etc). Add height to your…
-
Free WordPress Cookie Consent with Scripts Organizer
This is taken form Facebook conversation in the Official Oxygen Builder group. Follow up on the conversation.
3rd party plugins actions admin archive Blocks build Category composite elemenets compression core CPT CSS Custom Custom Post Dashboard Developer development editor Front End gutenberg hook Image img include js load styles loop Must Have notice npm Oxygen plugins publish repeater script scss settings page single product Taxonomy themes Tips WooCommerce wordpress WP Admin WPML