OxyExtras - WordPress Plugin

How to Set Up OxyExtras for Oxygen Classic

OxyExtras is a collection of add-on components for the classic Oxygen Builder. It is best treated not as "just another plugin," but as an extension of your working toolkit inside the visual builder. In this guide, we will look at how to approach installation, which components to enable first, how to build a practical setup with Off Canvas, Table of Contents, Carousel Builder, and Lightbox, and how to validate the result without putting a live page at unnecessary risk.

This guide is written for the point where you have already read the short product description above. The goal here is not to repeat the feature list, but to explain the mechanics: where OxyExtras appears in WordPress and Oxygen, why components should be enabled selectively, how to connect settings to the front-end result, and which symptoms help you quickly spot a bad configuration.

Throughout the guide, you will see exact interface labels. Treat them as reference points, because panel placement can vary slightly across different WordPress and Oxygen setups. If a feature is missing in your version, do not assume the site is broken. First check whether the related OxyExtras component is enabled, and confirm that you are using Oxygen Classic rather than the new standalone Oxygen product.

What OxyExtras Adds to the Oxygen Workflow

The main practical value of OxyExtras is that it moves tasks that were often handled with code, shortcodes, or separate third-party plugins into Oxygen's familiar visual interface. The OxyExtras developer describes it as a premium add-on for classic Oxygen, and the documentation shows a component library that includes Off Canvas, Mega Menu, Carousel Builder, Lightbox, Dynamic Tabs, Table of Contents, Fluent Form, Social Share, Reading Progress Bar, Mini Cart, and other elements.

This is not a set of ready-made design templates. It is important not to expect OxyExtras to generate a finished page out of the box. The plugin gives you building blocks that must be enabled, placed into the Oxygen structure, configured, and styled for a specific project. This approach is especially useful for people who already work confidently in Oxygen and want to rely less on custom code for common interface tasks.

The key principle of OxyExtras is to enable only the components you actually need. The getting-started documentation states that components are disabled by default so Oxygen is not burdened with unnecessary elements and assets inside the builder. That means proper setup starts not with adding everything to a page, but with selecting a focused set for the current task.

What it handles best

The official component list shows several clear strengths:

• Site navigation and headers: Mega Menu, Header Search, Slide Menu, Horizontal Slide Menu, Animated Burger Trigger, Off Canvas.
• Content pages: Table of Contents, Reading Progress Bar, Reading Time, Post Modified Date, Author Box, Adjacent Posts, Post Terms.
• Interactive content blocks: Dynamic Tabs, Pro Accordion, Content Switcher, Hotspots and Popovers, Read More / Less, Lightbox.
• Dynamic carousels and showcases: Carousel Builder for Repeater, Easy Posts, Product List, Related Products, and manual cells.
• Forms and conversions: Fluent Form styling, Login Form, Mini Cart, Cart Counter, Content Switcher for switching between options.
• Media and visual effects: Lottie Animation, Pro Media Player, Circular Progress, Animated Counters, Infinite Scroller.

For a typical WordPress site, that means OxyExtras is usually used in targeted places rather than "everywhere at once": for example, in a post template for the table of contents and reading progress, in the header for navigation and search, on a landing page for a testimonial carousel, on a product page for a content switcher, or in a gallery for Lightbox.

Where it may be unnecessary

If the site is not built on Oxygen Classic, OxyExtras is not a universal replacement for Elementor widgets, Gutenberg blocks, or separate WooCommerce add-ons. On the official page, the developer explicitly notes that the plugin is for classic Oxygen, not the new standalone Oxygen. That is an important limitation: before installing it, you need to know which builder the site is actually using.

OxyExtras can also be excessive if you only need one narrow feature that is already handled reliably by a dedicated plugin. For example, a complex form system is still better built in Fluent Forms itself, with OxyExtras used only for visual styling inside Oxygen. The same applies to galleries, advanced catalogs, and payment flows: OxyExtras helps integrate and present the interface, but it should not replace specialized business logic.

Who This Component Set Fits, and Who May Want Another Approach

OxyExtras works best in the hands of someone who understands how Oxygen is structured: sections, divs, classes, templates, repeaters, dynamic data, and global styles. If you are already building sites in Oxygen and want to speed up work with common interactive elements, the plugin can significantly reduce the amount of manual work involved.

For an agency or a developer maintaining multiple sites, OxyExtras is convenient because components can be standardized. For example, you can enable the same set across client sites: Table of Contents for blog posts, Off Canvas for mobile navigation, Header Search for the site header, Carousel Builder for testimonials, and Lightbox for portfolio items. Styles can then be saved as presets and moved between projects, as long as OxyExtras is also active on the destination site.

Good-fit scenarios

• The site is already built on Oxygen Classic, and the team is not planning to switch builders anytime soon.
• You need to add interactive elements inside Oxygen rather than through third-party shortcodes.
• The project depends on visual style control for buttons, menus, carousels, popups, tables of contents, and forms.
• You manage several similar projects where presets, classes, and component structures can be reused.
• You want control over markup and asset loading without writing JavaScript for every block.

When to be more cautious

If the site content is managed by someone with no Oxygen experience, OxyExtras will not make the interface simpler on its own. The components expose many settings, and some of them require a solid understanding of selectors, classes, page structure, and behavior across different screen widths. This is especially noticeable with Off Canvas, Mega Menu, Lightbox, and Carousel Builder, where a wrong selector or incorrect nesting causes an immediate visible failure.

Another nuance is the dependency on the Oxygen Classic ecosystem. Official materials from both OxyExtras and Oxygen emphasize that the new Oxygen is a separate product, while classic Oxygen continues to be supported separately. That does not mean an existing site must be rebuilt right away. But for a new project, it is worth deciding up front whether you are intentionally choosing Oxygen Classic as the foundation.

What to Check Before Installing on a Live Site

Before installing OxyExtras, it is worth doing a short round of preparation. This does not replace a backup or a staging site, but it does save time on diagnosing obvious conflicts. The plugin adds components to Oxygen, so most checks are not about WordPress in general, but about whether the specific project is ready for new builder elements.

Platform and dependency checks

First, make sure the page or template is actually edited in Oxygen Classic. If the project is partially built in Gutenberg, Elementor, Bricks, or another system, OxyExtras will only be useful in the areas where Oxygen is in control. That is normal for mixed sites, but it is important not to expect the component to appear inside the WordPress block editor.

Next, check whether the site relies on additional plugins for specific components. For example, the OxyExtras Fluent Form component requires WP Fluent Form to be active, and Dynamic Tabs works with ACF Repeater data or a cloneable Meta Box group. If the dependent plugin is inactive or the required fields do not exist, the component may appear but still fail to produce the expected result.

Mini checklist before enabling components

• Create a backup or work on a site copy if you are changing the header, menus, post templates, or product blocks.
• Confirm that Oxygen Classic is active and the page opens in its editor.
• Decide which 3 to 5 components you actually need for the immediate use case instead of enabling the full library at once.
• If you use caching and optimization, be ready to clear cache after saving the page.
• Check which elements must work from the keyboard: Off Canvas, Lightbox, Mega Menu, Dynamic Tabs, and forms all need separate focus testing.
• For WooCommerce use cases, test Mini Cart, Cart Counter, and product carousels with a sample product rather than on a real purchase flow.

Practical check: if a component will affect the header, menu, form, cart, or post template, add it to a separate test page or temporary template first. That makes it much easier to tell a configuration mistake from a conflict with the current page.

Installation and First Launch Without Extra Overhead

OxyExtras is installed like a standard WordPress plugin: upload the ZIP archive under Plugins - Add New - Upload Plugin, then activate it. This guide does not cover purchasing, licensing, or activation workarounds. The practically important part starts after installation: enable the components you need and make sure they appear in the Oxygen panel.

According to the OxyExtras documentation, new components are disabled by default. That is a useful architectural hint: the library should not turn into a warehouse of unused elements. Start with a small set tied to the next task. For example, for a post template, Table of Contents, Reading Progress Bar, Author Box, and Social Share may be enough. For navigation, you might start with Header Search, Off Canvas, Animated Burger Trigger, and Mega Menu if needed.

Where to find components after enabling them

Once enabled, components are available in the +Add panel inside the Oxygen editor under the Extras group. If a component does not appear, do not jump straight to reinstalling the plugin. Check three things first: the component is enabled in OxyExtras settings, changes were saved with Save Changes, and the Oxygen editor was reloaded after saving.

For a clean verification pass, create a temporary page, add one section, and insert the simplest component from your selected set. A Reading Progress Bar or Social Share is a good starting point. If the element appears in the structure and outputs styles on the front end, the basic integration is working. After that, you can move on to more complex components where selectors, dynamic data, and nesting matter.

How to choose your first components

You do not need to enable the whole set "just in case." It is better to work from the use case:

This approach keeps the site lighter and easier to understand. If you need another block later, you can enable it separately, add it to a test page, verify it, and only then move it into the live template.

Configuring OxyExtras Components After Installation

The most important part of setup is not the license screen, but choosing and configuring components for a specific page. OxyExtras follows Oxygen's logic: each element lives inside the page structure, has its own primary controls, style controls, classes, visibility conditions, and responsive behavior. So the setup flow should follow a chain: enable the component, place it in the right spot in the structure, define the data source or selector, configure behavior, style it, and then verify the front-end result.

Enable components in task-based groups

Start with a functional group. For example, if you are building a post template, enable Table of Contents and Reading Progress Bar. If you are creating an interactive content section, add Dynamic Tabs or Pro Accordion. If you are working with a gallery or portfolio, evaluate Carousel Builder and Lightbox together, because one controls motion across items while the other handles the expanded view.

Do not configure every group in one pass. Otherwise, when something breaks, it becomes difficult to tell whether the issue comes from Off Canvas, cache, a bad selector, a script conflict, or a responsive setting in Oxygen. Enable a group, test it, and only then move to the next one.

Choose the correct location in the structure

For many OxyExtras components, placement in the structure affects behavior. The documentation recommends placing Off Canvas at the root level instead of nesting it inside a Header, Footer, Section, or Div. That lowers the risk of inherited styles, container clipping, or unpredictable behavior with fixed positioning.

Lightbox works differently: the trigger can live inside the component, while content is often loaded dynamically when it opens. Carousel Builder requires you to understand what counts as the container and what counts as the cells: Repeater, Easy Posts, Product List, Related Products, or manually added elements with the cell class. Table of Contents depends on the selector for the container that actually holds the headings.

Validate the selector before styling

The selector is a common failure point. In Off Canvas, the opening selector must match the class of the button, link, or burger trigger. In Table of Contents, the selector points to the container that holds the headings. In Lightbox manual mode, the selector tells the component which page links should open in Lightbox. If the selector is wrong, good styling will not save it because the element still will not find the target it is supposed to act on.

A reliable sequence looks like this:

1. Add the component to the structure and define the minimal selector.
2. Add a test button, link, or container with a simple, obvious class.
3. Save the page and open the front end outside the Oxygen editor.
4. Test the interaction without custom animations or elaborate styling.
5. Only after that should you adjust transitions, dimensions, colors, spacing, and responsive settings.

Save presets where styles repeat

The official OxyExtras page specifically mentions preset import and export. That is useful for agency work: configure a component's visual style once, then move it between projects or pages. This is especially valuable with Fluent Form, Social Share, Table of Contents, and Carousel Builder, where colors, spacing, border radius, typography, and hover states often repeat.

But a preset should not be treated as a blind copy. Before reusing it, check the context: container width, content type, fixed header behavior, Oxygen global classes, breakpoints, and caching. The style may be reusable, but the selector, source, and behavior almost always need to be reviewed again.

Navigation, Off Canvas, and Mega Menu: Where Problems Usually Start

OxyExtras navigation components deliver strong value because menus, slide-out panels, and search typically involve several moving parts at once: a trigger, closing behavior, focus handling, page scrolling, responsiveness, nested content, and styling. If you build all of that manually, it is easy to end up with an interface that looks good but feels awkward to use. OxyExtras moves much of that logic into settings, but it still requires discipline.

Off Canvas as a general-purpose panel

Off Canvas can slide in from different sides of the screen, start open or closed on page load, use a trigger selector, and hold any elements inside. That makes it suitable not just for mobile navigation, but also for lead forms, filters, login panels, support navigation, or supplemental information.

The main settings worth checking are:

• Open / Close Trigger Selector - this must match the class of the button, link, or burger trigger.
• Slide in From - choose this based on the panel's role: side menus usually come from the left or right, while notifications may open from the bottom.
• Site Scrolling When Open - disable page scrolling if the open panel should hold attention and avoid horizontal scroll issues.
• Esc key when focus in offcanvas closes it - useful for accessibility and quick keyboard closing.
• Move focus when opened and Focus Trap - especially important when the panel contains forms, search fields, or interactive links.

If the panel seems to "push" the entire site in push mode, check which container is being moved. The documentation describes a setup with a separate site container. If a sticky header lives inside that same container, it may shift with the content and look broken. In that case, it is usually better to move the header outside the shifting container or switch to slide behavior instead of push.

Mega Menu as a structure, not a single element

Mega Menu is built inside the Oxygen header builder. The documentation describes it as a container for the full menu, with dropdown elements added inside it. Each dropdown can include any elements or WordPress menu items. In mobile settings, you define the width at which the menu switches to mobile mode, and a burger trigger is required to open the mobile version.

A common beginner mistake is to style only the outer container without thinking through the dropdown structure. It is better to map the menu first: how many top-level items you need, which ones open dropdowns, where a simple link without a dropdown is enough, and which blocks inside the expanded area should follow the same pattern. Only after that should you work on width, animation, background, spacing, and hover states.

Header Search and Slide Menu together

Header Search is useful when search needs to be part of the header, whether as a dropdown form, a full-screen search, or an overlay. Slide Menu helps output items from a WordPress menu and can work inside more complex navigation structures. If you are using Mega Menu, Slide Menu often solves the problem of placing WordPress menu items inside a visually assembled structure, while Header Search adds a separate search flow without requiring another plugin.

Short takeaway: OxyExtras navigation components are best configured on a temporary copy of the header template. A header mistake affects the entire site, so first verify opening, closing, focus handling, mobile behavior, and scrolling, and only then move the solution into the main template.

Dynamic Blocks: Carousel Builder, Lightbox, and Tabs

The most interesting OxyExtras components show their value when you need to connect a dynamic content source to a visual result. Carousel Builder, Lightbox, and Dynamic Tabs all work differently, but they share one principle: define the content source first, then configure the container and behavior, and only after that worry about animation.

Carousel Builder: edit mode and preview mode

The Carousel Builder documentation separates work inside Oxygen into Edit and Preview. In edit mode, cells remain fully available for configuration: you can add elements, change styles, and build the content structure. In preview mode, the carousel is initialized so you can see how it moves, but some layout settings are hidden or are no longer meant for editing.

This matters for troubleshooting. If you try to drag the carousel in preview mode, it is easy to confuse motion with editing behavior. To change width, height, and internal styling, switch back to Edit. To verify grouping, autoplay, drag, wrap around, contain, adaptive height, and transitions, use Preview and the live page.

Cells and data sources

Carousel Builder supports different sources: Repeater, Easy Posts, Product List, Related Products, Product Upsells, or manual custom elements. If you choose manual elements, they need the cell class so the component knows which children should be treated as cells. For dynamic lists, configure the data source first and only then move on to the carousel layout.

A practical rule is to build one ideal cell before you add the carousel. Check the image, text, button, dynamic fields, and responsive layout first. Then connect Carousel Builder and adjust the number of visible cells, width, gaps, arrows, and dots. This helps separate a data query problem from a carousel behavior problem.

Lightbox: choosing the right content source

Lightbox in OxyExtras works with images, video, inline content, AJAX-loaded page fragments, iFrame content, and manual mode by selector. The documentation makes it clear that for each lightbox, you should answer three questions: what acts as the trigger, what content should be shown, and which source type is the best fit.

If the content already exists on the current page and needs to open quickly, choose inline. If you need to show part of another page and plain HTML is enough, AJAX is a good fit. If the content includes dynamic elements that depend on the original page's scripts and styles, iFrame is often the safer choice. If you already have a gallery, repeater, or carousel with linked items, manual mode lets you attach Lightbox behavior to the selector of those existing links.

Dynamic Tabs and accessibility

Dynamic Tabs is designed for dynamic data from ACF Repeater or a cloneable Meta Box group. The component supports keyboard navigation, hash linking, and switching to an accordion layout at mobile widths. That makes it useful for FAQ content, specifications, course outlines, blocks like "features - shipping - warranty," and similar content where an editor fills in fields and Oxygen renders the structure.

If you want vertical tabs on desktop, the documentation includes a CSS example. You can use it as a starting point, but the classes and breakpoint still need to be adapted to your design. Add the code in Manage - Stylesheets or another safe location for CSS, not in plugin files.

@media (min-width: 992px) {
  .oxy-dynamic-tabs_inner {
    display: flex;
    align-items: stretch;
  }

  .oxy-dynamic-tabs_tab-group {
    flex: 0 0 28%;
    flex-wrap: wrap;
  }

  .oxy-dynamic-tabs_panel-group {
    flex: 1 1 72%;
  }
}

After adding the CSS, test the page on desktop and at mobile width. If the tabs are supposed to collapse into an accordion, make sure your CSS does not break the mobile behavior. Rolling back is simple: temporarily disable the stylesheet or remove the snippet.

Practical Use Cases by Page Type

OxyExtras is easiest to plan not as a long component list, but as a set of use cases for specific templates. In Oxygen, there are usually several global areas: header, footer, single post template, archive template, landing page, WooCommerce template, and standalone form or portfolio pages. If you assign components to those areas in advance, setup becomes calmer and more predictable: each element gets a clear location, a clear data source, and a clear result to validate.

Post templates and knowledge bases

For long-form articles, documentation, and knowledge bases, three things usually matter most: section navigation, a sense of content length, and smooth transitions to related pages. This is where Table of Contents, Reading Progress Bar, Reading Time, Social Share, Adjacent Posts, and Author Box work well. Table of Contents builds the structure from headings inside the content container, Reading Progress Bar tracks how far the reader has moved through the article, and Social Share can be styled to match the site without needing a separate share plugin.

A practical setup looks like this: first give the article container a consistent class, such as article-content. Then both Table of Contents and Reading Progress Bar should point to that container. If the table of contents or progress indicator is aimed at body, it may include the footer, related posts, comments, or other blocks, which gives the user a false signal about the article length. This becomes especially noticeable in a knowledge base: the reader finishes the article, but the progress bar still suggests there is much more page left.

In this scenario, Social Share usually works better after the first meaningful content block or closer to the end, rather than being forced into the first screen at any cost. If you enable printing through Social Share, decide in advance which elements should disappear in print view: buttons, a related carousel, a sidebar, or popup blocks. For that, x-print-no-print and targeted print CSS are useful.

Header, mobile navigation, and search

The header template is the riskiest place for experiments because any mistake is visible site-wide. That is why Off Canvas, Mega Menu, Header Search, Slide Menu, and Animated Burger Trigger are best assembled first in a separate temporary header or on a test page. The interaction flow should be defined before configuration begins: which menu opens on desktop, which one appears on mobile width, which element triggers Off Canvas, whether the panel closes on outside click, whether a search form is needed, and what happens to focus.

For a simple site, Off Canvas and a burger trigger are often enough. For a catalog, education portal, or service site, you may need a Mega Menu where each dropdown holds not just links, but descriptive blocks, icons, columns, or cards. Do not overload the first menu level. If a dropdown contains too many elements, give it internal structure: group headings, short descriptions, and a separate block for an important CTA link. OxyExtras Mega Menu lets you place any elements inside a dropdown, but that is not a reason to turn the menu into a separate page.

Header Search should be tested separately from the menu. If search opens full screen or over the header, make sure it does not conflict with the Off Canvas overlay and does not leave focus outside the form. For the mobile flow, test the sequence in order: the user taps the burger, opens the menu, switches to search, enters a query, and closes the form. If one of those steps requires an unpredictable click on empty space, the interface should be simplified.

Landing pages, testimonials, and content showcases

On landing pages, OxyExtras is often used for Carousel Builder, Content Switcher, Lottie Animation, Hotspots and Popovers, Read More / Less, and Lightbox. The main risk here is turning the page into a bundle of effects. For each interactive block, define in advance what it improves: does it save space, support comparison, reveal extra detail, help users choose a plan, bring media to life, or surface dynamic posts?

Carousel Builder is useful for testimonials, logo rows, service cards, featured posts, and products. But a carousel should not hide critical content if users may never swipe or click through it. For important selling points, standard sections are usually better, with the carousel reserved for secondary collections. If you enable autoplay, verify the speed, hover pause, and navigation accessibility. If users cannot read a card before the slide changes, the setting is harmful.

Lightbox on a landing page works well for video, enlarged images, case studies, and expanded card details. The right Lightbox source depends on the content: video can open as image/video content, basic detail blocks fit inline, part of another page may fit AJAX, and complex dynamic content is often better in an iFrame. If a Lightbox contains a form, test submission, focus handling, and closing behavior after a successful action. Do not put a form inside a Lightbox just for aesthetics if it makes the form less usable.

WooCommerce and commercial blocks

In WooCommerce setups, OxyExtras can help with visual presentation: Mini Cart, Cart Counter, Product List inside Carousel Builder, Related Products, Product Upsells, Lightbox for quick details, and Content Switcher for toggling terms or variants. But it is not a replacement for store testing. Any configuration around cart or product behavior should be tested with a sample product, across different cart states, and with caching enabled.

If you are displaying products in a carousel, start with a standard Product List or Related Products layout without motion. Make sure images, pricing, buttons, and status labels display correctly. Only then add Carousel Builder and decide what to hide inside the carousel: sorting controls, the results count, certain buttons, or extra fields. The Carousel Builder documentation mentions extra WooCommerce carousel options that allow you to remove elements not needed inside the carousel.

Mini Cart and Cart Counter should be tested after adding a product, changing quantity, and emptying the cart. If the site uses full-page caching, make sure cart fragments and the dynamic counter do not show stale state. OxyExtras can style and display the interface, but cart correctness still depends on WooCommerce, caching, the theme, and other store extensions.

Forms, lead capture, and offline checks

The OxyExtras Fluent Form component is useful when the form already exists in WP Fluent Form and you want it to visually match the site inside Oxygen. Do not start with appearance. First verify that the form submits correctly, notifications arrive, required fields work, anti-spam is enabled in Fluent Forms, and the success message is clear. Then insert the form through OxyExtras and configure fields, stepped forms, payment summaries, checkable grids, progress bars, and other visual parts if your form includes them.

If the form sits inside Off Canvas or Lightbox, there is another layer to validate. The user should be able to open the panel, land on the first field, complete the form, see an error or success message, and close the interface without losing context. If form errors appear outside the visible area, increase internal spacing or adjust panel height. If submission works on a normal page but breaks inside Lightbox, temporarily disable script optimization and check the Lightbox source.

Practical Example: A Post Template with TOC, Reading Progress, and Material Cards

Let us walk through an example that shows what OxyExtras is really for: improving a long-form article template in Oxygen Classic. The goal is to add a table of contents, a reading progress indicator, a related materials carousel, and a Lightbox for viewing extra details. This is not an abstract bundle of components, but a connected user flow: the reader sees the article structure, understands the length of the content, jumps between sections, and opens extra cards without leaving the page.

Goal

Build a post template that makes long content easier to read without turning the page into a heavy showcase. The table of contents should be generated from headings inside the article container, the reading progress bar should track that same content, the carousel should display related posts or selected cards, and the Lightbox should reveal details on click.

Preparation

Before configuring anything, create or select a single post template in Oxygen. Inside the main content block, add a class such as article-content. Both Table of Contents and Reading Progress Bar will need that class. If headings come from Gutenberg and do not have IDs, use the Table of Contents setting that adds unique IDs to detected headings.

In OxyExtras settings, enable Table of Contents, Reading Progress Bar, Carousel Builder, and Lightbox. If related materials are rendered through Repeater or Easy Posts, prepare the query first and confirm that the post list works before you turn it into a carousel.

Configuration steps

1. Add Table of Contents beside the article content or above it. In the content selector field, enter .article-content, choose headings h2,h3,h4, and click apply params.
2. If the page uses a fixed header, configure the smooth scroll offset so anchor navigation does not hide headings beneath the header.
3. Add Reading Progress Bar to the template, ideally before or after the main content. In the article selector field, point it to the same .article-content container if progress should be calculated only for the article rather than the whole page.
4. Create the related materials block with Repeater or Easy Posts. Configure one card first: title, image, short text, and link.
5. Wrap the list in Carousel Builder or choose the appropriate source inside the component. Under Cells, define cell widths for desktop and mobile. Under Carousel, verify grouping, contain, and adaptive height.
6. Use Lightbox for details: if the card links to a separate page, decide whether AJAX or iFrame is the better fit. If the details already exist on the current page, use inline.
7. Save the template, clear cache, and test the live page outside the Oxygen editor.

Validating the result

The table of contents should detect only headings inside the main content, not headings from the sidebar, footer, or related material cards. The progress indicator should reach the end exactly when the article ends, not after comments or the footer. The carousel should show a predictable number of cards at different widths without causing horizontal page scroll. Lightbox should open the correct content, keep focus contained, and return the user to the previous position after closing.

Nuance: if Table of Contents is not generating anything, start with the selector and heading IDs rather than the design. If the Carousel looks broken on load, temporarily add overflow: hidden to the carousel itself or to the section around it, as the documentation recommends to prevent hidden cells from spilling out during initialization.

Video for a closely related practical workflow

The Carousel Builder documentation includes a specific OxyExtras video that shows how to build a testimonial carousel from start to finish. It is useful for the intent cluster "how to use OxyExtras Carousel Builder" because it demonstrates not just the finished slider, but the actual working flow inside Oxygen: building cells, checking preview mode, and validating carousel behavior.

Checking the Result: Performance, Accessibility, and Responsiveness

OxyExtras promises conditional component loading only where components are used, but that does not remove the need for manual page testing. Any interactive element can still be configured in a way that gets in the user's way: covering content, creating horizontal scroll, breaking keyboard focus, loading a heavy video too early, or conflicting with script optimization.

The front end matters more than the editor

Some components behave differently in the Oxygen editor and on the live page. Carousel Builder has Edit and Preview modes, Lightbox loads content on interaction, and Off Canvas may be hidden in the builder through in-builder visibility. That means final validation must happen not only inside Oxygen, but on the real page URL as well.

Check the page in a regular browser window, then in an incognito window, and then at mobile width. If the site uses caching, first test without aggressive optimization, then enable script combining and deferred loading one by one. That makes it much easier to see exactly when a problem appears.

Accessibility and keyboard behavior

Some OxyExtras components explicitly include focus-related settings: Off Canvas can move focus into the panel and trap it there, Lightbox by default moves focus to the first available element inside and returns it after closing, and Dynamic Tabs supports keyboard navigation. These settings matter not only for formal accessibility, but for actual day-to-day usability.

A simple test looks like this:

1. Open the page without using the mouse.
2. Move through the interactive elements with the Tab key.
3. Open Off Canvas, Lightbox, or the tabs.
4. Check whether focus escapes behind the hidden panel.
5. Close the element with the Esc key if that setting is enabled.
6. Make sure focus returns to the expected place.

Performance and asset loading

If the page becomes slower after adding interactive components, do not remove everything at once. Disable items one by one: first Lightbox with video, then the Carousel, then animations, then third-party optimizers. For video, it is usually better to use lazy loading or a Lightbox that opens the video on click instead of placing a heavy iframe in the first screen. For Carousel, keep an eye on image count and card size, because the component itself will not fix oversized media files.

It is not wise to promise a direct SEO boost from OxyExtras. The plugin can improve navigation, content structure, and page usability, but search performance still depends on content quality, speed, indexation, internal linking, and the site's technical condition. Use Table of Contents, Reading Progress Bar, and proper headings as user experience tools, not as a magic SEO switch.

Presets, Design Sets, and Moving Work Between Projects

OxyExtras is especially interesting if you build not one site, but a series of similar projects. The official page mentions saving and exporting presets, and the FAQ clarifies that OxyExtras elements can be used inside design sets as long as OxyExtras is also active on the site where the set is imported. That makes sense: the component settings can be transferred, but the component itself still has to exist on the destination system.

What can be moved safely

Visual rules and repeatable structures transfer best: Social Share styling, the appearance of a Table of Contents, Fluent Form styling, a base Off Canvas layout, a carousel card, standard hover states, and spacing patterns. These elements usually depend on classes, global colors, and Oxygen structure, so after import you should still verify that the classes do not conflict with what already exists.

Selectors tied to a specific page transfer much less cleanly: .article-content, .open-off-canvas, the ID of a hidden Lightbox block, the name of an ACF repeater, a Meta Box group ID, or an Easy Posts query. Those almost always need manual adjustment.

How to avoid breaking a project during import

• Import the design set onto a test page rather than directly into the header template or single template.
• Confirm that every OxyExtras component used in the set is enabled.
• Compare classes: if the new set uses names that are too generic, rename them before publishing.
• Check selectors and data sources: ACF, Meta Box, form ID, content selector, trigger selector.
• Save the page, clear cache, and verify the public URL.

This kind of reuse saves time, but it does not remove the need for editorial review. A finished component should match the site's content, responsive behavior, and brand, not just "work the same way it did last time."

Why a Component Is Not Working and How to Find the Cause Quickly

Most OxyExtras troubleshooting comes down to four areas: the component is not enabled, it is placed incorrectly in the structure, the selector does not match the real element, or the live page behaves differently from the editor because of cache, optimization, and conditional loading. Below is a practical symptom map.

The component does not appear in the +Add panel

Symptom: OxyExtras is active, but the required element is missing from the Extras group. Possible causes include the component not being enabled in OxyExtras settings, changes not being saved, the Oxygen editor having been opened before the settings were saved, or the site not actually running Oxygen Classic.

Open the OxyExtras settings tab, check the component, and click Save Changes. Then fully reload the Oxygen editor. If the component depends on another plugin, such as Fluent Form depending on WP Fluent Form, verify that dependency separately.

Off Canvas does not open on click

Symptom: the button is visible, but the panel does not open. Most often, the selector in Open / Close Trigger Selector does not match the class of the button, or the default .oxy-burger-trigger is being used without a real burger trigger. The Off Canvas documentation specifically notes that when using a custom trigger, you need to change the selector and assign that class to the chosen element.

Create a simple test button with a unique class such as open-offcanvas-test, then set the selector to .open-offcanvas-test. If it works with the test button, the issue was not the component itself, but the original trigger.

Horizontal scrolling appears

Symptom: after configuring Off Canvas or Carousel, the page starts scrolling sideways. For Off Canvas in push mode, check the container that moves with the panel and the site scrolling setting when the panel is open. For Carousel, check overflow: the documentation recommends hiding overflow on the carousel or the surrounding section so hidden cells do not create extra horizontal spill during load.

Fix the issue on the specific container if you can identify the source rather than applying a global overflow-x: hidden to the whole site. Global hiding can mask the problem and make future layout work harder.

Table of Contents does not detect headings

Symptom: the table of contents block is empty or contains unwanted items. Check the content selector: it should point to the container that actually holds the article headings. If content comes from Gutenberg and headings have no IDs, enable unique ID generation for headings. If the table of contents is picking up the sidebar or footer, narrow the selector to the main content block.

Lightbox opens the wrong content

Symptom: clicking opens an empty window, the wrong page, or a badly styled block. First decide which source type you actually need: inline, AJAX, iFrame, image/video, or manual mode. AJAX works for simple HTML fragments, but if the content depends on scripts and page-specific CSS, iFrame or inline is often more reliable. If you use AJAX and styles do not apply, check whether those styles depend on IDs that load only on the source page.

The form looks correct, but submission does not work

Symptom: Fluent Form looks nicely styled through OxyExtras, but it does not submit or does not show the expected message. OxyExtras handles inserting and visually styling the form inside Oxygen, while the form logic still belongs to WP Fluent Form. Test the form in Fluent Forms without the OxyExtras wrapper first, then return to styling. If the issue appears only inside Off Canvas or Lightbox, check focus handling, script loading, and cache.

When it is better to roll back

Roll back the change if it affects global navigation, harms accessibility, breaks form submission, or creates horizontal scrolling at mobile width. Do not try to fix everything at once. Restore the previous template, disable the last component, or temporarily remove the trigger class, then re-enable pieces one at a time.

Safe Improvements Without Editing Plugin Files

OxyExtras already provides many settings inside Oxygen, so separate code is not always necessary. A good safe customization should be small, reversible, and tied to a real task. Do not edit OxyExtras, Oxygen, or theme files directly. For CSS, use Manage - Stylesheets in Oxygen, a child theme, or a reliable snippet tool.

Improving print output for Social Share

The Social Share documentation covers print settings and the x-print-no-print utility class, which excludes elements from the print version. If you added share buttons next to an article and want to hide secondary blocks in print as well, you can use a small CSS snippet.

@media print {
  .x-print-no-print,
  .article-sidebar,
  .related-carousel {
    display: none !important;
  }

  .article-content {
    max-width: 100%;
  }
}

Before using it, replace .article-sidebar and .related-carousel with the real classes from your template. Verification is simple: open the page, choose print in the browser, and review the preview. Rolling back means deleting or disabling the stylesheet.

Careful use of component classes

The Carousel Builder documentation mentions the dynamic selected, previous, and next classes for cells. That lets you style the active and neighboring cards without touching plugin code. But your core business logic should not depend on visual classes. Use them for presentation: scaling, shadow, opacity, emphasis. For data and conditions, it is better to rely on the native tools provided by Oxygen and the content source.

If your CSS depends on OxyExtras classes, add a note in the stylesheet explaining which component and page it was created for. A few months later, that will save time when the template needs an update.

When OxyExtras Is the Right Choice

OxyExtras is worth using if your site is genuinely built on Oxygen Classic and your current needs call for more than a one-off visual effect. If you need a set of visually configurable components such as menus, off-canvas panels, a table of contents, reading progress, carousels, lightboxes, tabs, forms, and interactive blocks, the plugin helps you keep that work inside Oxygen and reduces the amount of custom-built functionality you need to maintain.

Before rolling it out on a live site, choose one small use case, such as a post template with Table of Contents and Reading Progress Bar or a standalone page using Carousel Builder. Enable only the necessary components, then verify the selector, responsiveness, accessibility, and front-end result. If everything is stable, expand the set and save presets for reuse.

If that review confirms that this is the right library for your Oxygen project, you can move on to the download section and get the WordPress version for further testing on your site copy. Start with a safe page, keep track of which components are enabled, and do not move complex blocks into the global header or post template until you have validated them in a real browser.