-
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
-
Category: WordPress
-
Pause Oxygen Slider on Hover
If you need to pause the Oxygen Slider Element on hover, it is not there by default. Just use the below Javascript (jQuery) in a code-block on the and add the below code to JS section. Note : Just comment the PHP/HTML content middle Line.
Category: Oxygen
Tags: Tips -
Remove Widget Title Conditionally
If you want to remove the widget title conditionally just use the below code-snippet. I’m using Scripts Organizer to add it, you can also do it via any Code Snippet or functions.php if you are using a theme. Steps to use it in Scripts Organizer : Add a new code block, Set Trigger Location to…
-
Disable FOUC on Oxygen Slider Element
The Oxygen slider element shows all slides once in a flash on page load then go correct styling. This is called FOUC (Flash Of Unstyled Content). If you are facing the same issue, here is the solution. Just follow steps. Copy your slider element ID in somewhere like notepad and add an extra class to…
Category: OxygenTags: Tips -
Replace Post’s publish date with a MetaBox custom field value (date picker)
If for any reason you need the Post’s publish date to be replaced by the value of a date-picker custom field. This has been made to work with MetaBox plugin, I cannot guarantee it will work easily with ACF or other equivalents. I used it because WP natively orders posts by publish date. On a…
Tags: Publish Date -
Replace backend Post list titles with custom fields / taxonomy
If you ever ran across the problem of auto-generated post titles – that look like this : “(no-title-1)” – then you might be interested in a snippet that will pull your custom fields / taxonomies to re-name all existing and to-be-created posts.
Category: WordPress
-
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…
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