WPGridBuilder has recently added further support for Oxygen by adding some new components for adding both Facet’s & Grids. It means we no longer need to add shortcodes and makes it a bit more convenient to work when inside the builder, especially when using together with Repeaters or Easy Posts.

WPGridBuilder with Repeaters

If you’re using a repeater for your posts and using WPGridBuilder to filter and add more posts, one thing you may notice is that if you’re adding some dynamic Oxygen components that use JS inside of the repeater or are adding your own with code blocks, the new content that is appended onto the page may not pick up the same functionality. You may need to adapt your code slightly to account for new elements that didn’t exist on the page when the page first loaded.

This is the case with both the Lightbox & the Read More / Less components.

WPGridBuilder documentation provides JS events that trigger when specific things occur. We can use the event ‘appended’ to listen for when the facets have been used to append new content inside the repeater and make surer these components function as they’re supposed to.

Support for Lightboxes & Read More components

You can add the following code to a code block. (Make sure the code block isn’t actually inside of the repeater that WPGridBuilder is using)..

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit );

function onInit( wpgb ) {
    wpgb.facets.on( 'appended', onAppended );
}

function onAppended( content ) {
    
    /* Lightbox */
    if (typeof doExtrasLightbox == 'function') {
    	doExtrasLightbox(jQuery(content));
    }
  
    /* Read More / Less */
    if (typeof doExtrasReadmore == 'function') {
    	doExtrasReadmore(jQuery(content));
    }
}

Should this just be built-in?

If WPGridbuilder starts to gain a lot of popularity for OxyExtras users (they’re currently offering Oxygen users a discount for their LTD), it may be a good idea in the future to add support for it out of the box. For now, as there are a few different methods for adding Oxygen components to a page dynamically, the priority was to make sure there was a way to use these components in AJAX loaded content regardless of which method you’re using.

These two new functions doExtrasLightbox($content) and doExtrasReadmore($content) provide a way to do that. You just need to pass the new AJAX-loaded content as the parameter ($content).

doExtrasLightbox(jQuery('.my-new-content'));

Where you add this will depend on the plugin you’re using to add the content, you’d need to refer to the plugin documentation.

Note – if you’re using our own Infinite Scroller component, then this is already working out of the box.

The carousel builder has been designed to accommodate many use cases and as a result, there may be settings or workflows that may not immediately make sense depending on what you’re trying to build.

A common confusion has been in setting the heights and widths with users sometimes running into issues where either the content is overflowing, or elements are being stretched.

The first thing to note is that apart from adding a width (if you want to shrink the carousel viewport to a specific width) there isn’t any need to try to adjust the styles of the carousel itself. It’s all about creating the carousel by styling the cells and choosing how the carousel behaves in the settings. The carousel, on the front end, will then use that information to build the carousel and set it’s height etc dynamically.

Regarding sizing the cells themselves.. there are different ways to go about it depending on the type of carousel you’re building..

Content slider, Testimonials etc

For these types of content carousels, the recommended workflow would be to set a cell width only, either by defining the width as a percentage or another unit, or choosing the number of cells you want visible inside the carousel.

By leaving the height blank, the cells will just naturally fit the content inside and the carousel will take the height of the cell with the largest height. If there’s a noticeable difference in heights between the cells, due to the content, there are two options available..

  1. Force the carousels to be equal heights. – This will make sure each cell has exactly the same height as the tallest cell. The benefit of this approach is that the carousel will feel stable as it moves. The negative is this is that if there is a significant difference in heights, there will be gap between the content and the page dots.
  2. Adaptive heights – This will make sure the carousel adjusts it’s overall height based on the currently selected cell. The benefit is there’s never going to be a gap. The negative is that it will be moving the content of the page below it due to the element changing height dynamically.

By not setting a height, you will avoid the same issue that setting a height would cause in lots of other situations in building responsive website – that the content will overflow the fixed height that you’ve set.

Image Galleries

Unlike content sliders, galleries have a unique problem when the images all have different dimensions. How to set a cell width or cell height when you don’t know what the width and heights of the image in the gallery will be? Which to prioritise?

In my opinion, galleries work better in the complete opposite way than standard content.

With responsive sites, we’re generally concerned with width of elements more than heights. We allow the content to flow naturally down the page without concern of the height of the containers or the page itself. (How often have you used the max-height media query compared with the max-width? Probably never.)

But with carousels, the content is being experienced horizontally, not vertically. With image galleries having no vertical content at all, the width of the carousel and the cells are usually not a concern, with the height being the priority and the widths just being automatically sized based on the aspect ratio.

With galleries in the carousel builder,we can choose to do it three different ways;

Prioritising the Heights

Here we are setting a height and leaving the widths blank. The result is the carousel will fit neatly into the area, the different aspect ratios of the images isn’t a concern as they will just fit naturally horizontally as the widths are auto.

Prioritising the Widths

Here we are choosing the number of cells to be exactly three visible inside the carousel viewport. We can see the images have different dimensions so they are now different heights. The carousel will take the height of the very largest cell. We can set the vertical alignment of the images to be centered, top or bottom.

Prioritising disabled.

Sometimes you may need the gallery to fit a very particular height/width to fit into a specific layout. The issue when giving a fixed width and height is that the image could stretch to fit the cell size. There are two options to solve it.. either aligning the image inside of the cell or changing the object-fit.

This first example shows that we’re centering the images inside of the cell. The result is each image will take up the same height, but the width will change within the cell and we center align it. The cells are 100% width, but each image inside will have it’s own width. The benefit here is the original aspect ratio of each image is preserved.

This second example is using the new object-fit setting. If you wish to set both height and width and wish to crop the images to make sure they fit into the entire area.

Here we’re setting both the width and the height as 240px to create a square, and then to avoid the image stretching we’re setting the object-fit property to ‘cover’. It will then make the images act more like background images and cover the square.

There has been a fairly big changelog for v1.3.2, new components, new features, a few bug fixes from previous components.

A changelog can be useful, but here are a few highlights with some more information about some of the changes and new features…

Mega Menu can be used in any Custom Headers

Up until now, the mega menu has been built more as an extension to the header builder, mainly to ensure consistency by always functioning inside the same structure.

We’ve now added support for being able to use inside any header. The mega menu component now appears inside the Extras component list as any other component. The only thing that is needed from the div or section that you are using to build your custom header is to ensure it has a ‘header’ tag (but you were doing that anyway, right?)

Carousel Builder Gallery improvements

The carousel gallery feature has had a few improvements. You now change the alignments of images inside of the cells. Up until now the cells would just be the same heights & widths of the images inside. This is useful for when you wish to specify both the width & heights, this gives a way to do so without stretching the images inside.

If you’re unsure of exactly how the height / widths and alignments for the gallery works. Take a quick read through cell dimensions explanation.

There’s also an improvement on the fullscreen mode for galleries, where you can now choose to preserve the aspect ratio. So instead of keeping the same widths as set in the carousel cell settings, when in the full screen mode, the actual cells will jump to 100% and 100% fullscreen, whilte the images inside will fit with their original aspect ratio.

ACF gallery source

The ACF gallery images can be now be used to fetch ACF galleries from other pages or options page by changing the ACF field source.

Lastly, regarding the carousel, full support has been added for using Carousels inside of repeaters. So if you have ACF galleries inside post types and are using the repeater to show the posts, you can use a carousel inside that CPT repeater as you would anywhere else on the page.

Lightbox & Read More

Some users were needing to use some components inside AJAX loaded content on the page. Namely inside repeaters that are inside of the Infinite Scroller component or by using a third-party plugin such as WPGridBuilder, FacetWP etc.

With AJAX loaded content, often you need to retrigger some of the JS when the new elements are added, as the elements didn’t exist on the page when the page first loaded.

The main two components where this was an issue, was the Lightbox & the Read More component. We’ve now adapted these components to work out of the box when inside the Infinite Scroller. For using them inside AJAX loaded content via WPGridBuilder see Using WPGridBuilder facets with OxyExtras components.

New Components – Hotspots & Popovers

Two new components are popovers & hotspots. These are two seperate components that can be used together to create image hotspots or the popover component can be used seperately by itself.

By adding the popovers inside of the hotspot container, they can be used as markers to highlight certain points on images, carousels or any elements with a fixed aspect ratio (still videos?)

The documentation will cover all the functionality & settings, we’ll write up a tutorial showing some of the use cases. For now, here are some highlights;

When you install OxyExtras, you might have noticed that none of the components are enabled out of the box.

It is strongly recommended to only enable the components that you actually want to use and keep others disabled.

Note that we are talking about the number of components being available in the +Add panel of Oxygen, not the number of elements in the page Structure.

The reason for this is due to the way shortcodes are parsed by an internal WordPress function and the way Oxygen processes shortcode depth. Oxygen team is looking into ways to fix this.

Note – you’re unlikely to actually come across any issue unless you are using multiple addons, meaning you would be having large numbers of active component at one time. But for best practice, disabling the components you won’t be using is recommended.

To open up as many uses as possible, in some of OxyExtras components you’ll find a ‘manual’ or ‘custom’ setting that allows you to take advantage of the provided functionality outside of the pre-configured options.

With the lightbox component, it can be found within the lightbox content dropdown. It’s ‘manual’ because you’re no longer specifying the content from within the lightbox settings, it’s done manually from the links on the page using the ‘href’ attribute.

In other words, the lightbox will find the links and use the href attribute to determine the content to display. The link could be to an image, a youtube video, a URL to another page, a link to a PDF file etc etc.

When to use Manual Mode

There are many situations where the links that you wish to use as the click triggers to pop open the lightbox don’t exist as Oxygen components. Instead, they are inside existing structures or inside of other components.

For example;

In these examples, we may have control over the markup of the links but we have no way to wrap the lightbox around them like we would with a typical Oxygen element that we’re wishing to use as the click trigger.

How to use Manual Mode

With manual mode, the only things we need is to know is the selector for the links and the type of content we are trying to display.

Here is a common example;

Adding a Lightbox to a Gallery Carousel

With the carousel builder, we’re often building by placing elements inside of the carousel, so we can usually place a lightbox inside without issue.

The exception to this rule is when adding galleries. In this case, we just set up where the gallery is coming from and the carousel will automatically output the images for us.

There is a setting for add links to these image, for the purpose of being able to use with the lightbox component.

Now the carousel gallery images will be wrapped in links.

In order to add a lightbox to these links, we can place a lightbox component anywhere on the page (ideally just underneath if you like to keep things organised) and set to manual.

The class for the links in the gallery, which can be found by inspecting the page, is ‘oxy-carousel-builder_gallery-image’. We’ll give our carousel a class as well, to make it unique from any other carousels we may have on the page ‘my-carousel’.

Now we can add our link selector in the lightbox settings to make sure it targets just these links. The full selector would be ‘.my-carousel .oxy-carousel-builder_gallery-image’.

That’s it. Now when these links are clicked, it will load up the lightbox with the images.

It would be the same workflow for links inside of an Easy Posts or a code block. You can give the links any class you want, and then use that class as the link selector to tell the lightbox which links to look out for.

Here’s another example;

Adding a Lightbox to the Products List Component

In the Oxygen Woocommerce addon, we can loop through the products using the Products List component. It’s a convenient component for quickly building product grids, but unlike the repeater, we don’t have direct access to the individual elements inside the component.

So.. if we wanted to add a lightbox to show some content from the product page, for eg, this is where the manual mode could be helpful.

The Products Lis component already has links to the product page wrapped around both the product image and the product title. Clicking these would usually take the user to the product page.

We could use either of those links to be the click triggers so that instead of taking the user to the actual product page, the lightbox would be loaded up instead showing the product info or whichever part of the page we want.

We can find the selector for the link easily by using Chrome dev tools. The class that is added to the image link in this case is ‘woocommerce-loop-product__link’.

Let’s use that in a lightbox..

That’s it. Now if the user clicks the image link inside the products list component, it will now open up a lightbox showing the contents of that page (or part of the page, depending how you configure it)

The only difference with this second example is that because the link are pointing to another page, (not an image or video) we just need to use the force content type to tell the lightbox whether we want to use AJAX or iFrame as the method for fetching the content.

This tutorial provides the steps to set up a mobile responsive menu in Oxygen’s header using Burger Trigger and Slide Menu components of OxyExtras.

Live Demo

Step 1

If you have not already, enable Burger Trigger and Slide Menu components in OxyExtras’ settings.

Step 2

Edit your site wide Main catch all template with Oxygen.

Manual setup instructions follow. 1-click paste codes are provided near the end.

Add a Header Builder component if there’s not one already.

Add a Header Row with your logo at the left and Menu component at the right, if not already present.

Add a Burger Trigger component in Row Right below the Menu.

Burger Scale: 0.7.

Since we want this to only appear at a lower breakpoint, set its display to none (Advanced > Layout).

Decide on the breakpoint at which you would like the (expanded) menu to collapse to a hamburger. Let’s say it is 1120px. Switch to this breakpoint and set the display of Menu to none and display of Burger Trigger to block.

Add another Header Row and add a Slide Menu component in the center row. Select your menu if you have multiple. Set width to 100%.

Settings from the demo site:

1120px breakpoint:

Set “State on page load” to Hidden.

That’s it!

If you would like to paste the entire pre-built Header Builder from the demo site, install Hydrogen Pack or Hydrogen Paste, copy the code below and paste in your Template.

eyJzb3VyY2UiOiJodHRwczovL3NsaWRlbWVudS53cGRlbW8uZGV2IiwiY29tcG9uZW50IjpbeyJpZCI6MiwibmFtZSI6Im94eV9oZWFkZXIiLCJvcHRpb25zIjp7ImN0X2lkIjoyLCJjdF9wYXJlbnQiOjAsInNlbGVjdG9yIjoiX2hlYWRlci0yLTIyNSIsIm9yaWdpbmFsIjp7InN0aWNreS1tZWRpYSI6InBhZ2Utd2lkdGgiLCJzdGlja3lfc2Nyb2xsX2Rpc3RhbmNlIjoiMzAwIiwicGFkZGluZy10b3AiOiIxMCIsInBhZGRpbmctYm90dG9tIjoiMTAiLCJib3JkZXItdG9wLXdpZHRoLXVuaXQiOiIiLCJib3JkZXItcmlnaHQtd2lkdGgtdW5pdCI6IiIsImJvcmRlci1sZWZ0LXdpZHRoLXVuaXQiOiIiLCJib3JkZXItdG9wLXdpZHRoIjoiMCIsImJvcmRlci1yaWdodC13aWR0aCI6IjAiLCJib3JkZXItYm90dG9tLXdpZHRoIjoiMSIsImJvcmRlci1sZWZ0LXdpZHRoIjoiMCIsImJvcmRlci1ib3R0b20tY29sb3IiOiIjZGRkIiwiYm9yZGVyLWJvdHRvbS1zdHlsZSI6InNvbGlkIn0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwibmljZW5hbWUiOiJIZWFkZXIgd2l0aCBUb3AgTGluZSIsIm1lZGlhIjp7InBhZ2Utd2lkdGgiOnsib3JpZ2luYWwiOnsicGFkZGluZy10b3AiOiIxOCIsInBhZGRpbmctYm90dG9tIjoiMTgifX19fSwiY2hpbGRyZW4iOlt7ImlkIjoxMCwibmFtZSI6Im94eV9oZWFkZXJfcm93Iiwib3B0aW9ucyI6eyJjdF9pZCI6MTAsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJfaGVhZGVyX3Jvdy0xMC0yMjUiLCJvcmlnaW5hbCI6eyJzdGFjay1oZWFkZXItdmVydGljYWxseSI6InBob25lLXBvcnRyYWl0In19LCJjaGlsZHJlbiI6W3siaWQiOjExLCJuYW1lIjoib3h5X2hlYWRlcl9sZWZ0Iiwib3B0aW9ucyI6eyJjdF9pZCI6MTEsImN0X3BhcmVudCI6MTAsInNlbGVjdG9yIjoiX2hlYWRlcl9sZWZ0LTExLTIyNSJ9LCJjaGlsZHJlbiI6W3siaWQiOjEyLCJuYW1lIjoiY3RfbGluayIsIm9wdGlvbnMiOnsiY3RfaWQiOjEyLCJjdF9wYXJlbnQiOjExLCJzZWxlY3RvciI6ImxpbmstMTItMjI1IiwiY2xhc3NlcyI6WyJhdG9taWMtbG9nbyJdLCJvcmlnaW5hbCI6eyJ1cmwiOiIvIiwidXJsX2VuY29kZWQiOiJ0cnVlIn0sIm1lZGlhIjp7InBob25lLWxhbmRzY2FwZSI6eyJvcmlnaW5hbCI6eyJtYXJnaW4tdG9wIjoiMTIiLCJtYXJnaW4tYm90dG9tIjoiMjQifX19LCJhY3RpdmVzZWxlY3RvciI6ImF0b21pYy1sb2dvIn0sImNoaWxkcmVuIjpbeyJpZCI6MTMsIm5hbWUiOiJjdF9pbWFnZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjEzLCJjdF9wYXJlbnQiOjEyLCJzZWxlY3RvciI6ImltYWdlLTEzLTIyNSIsIm9yaWdpbmFsIjp7InNyYyI6Imh0dHBzOi8vYXRvbWljLm94eS5ob3N0L3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy80MS8yMDE4LzAzL294eWdlbi1sb2dvLWJsdWUucG5nIiwiaGVpZ2h0IjoiMzAifSwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6ZmFsc2V9XSwiZGVwdGgiOiIyIn1dLCJkZXB0aCI6MX0seyJpZCI6MTQsIm5hbWUiOiJveHlfaGVhZGVyX2NlbnRlciIsIm9wdGlvbnMiOnsiY3RfaWQiOjE0LCJjdF9wYXJlbnQiOjEwLCJzZWxlY3RvciI6Il9oZWFkZXJfY2VudGVyLTE0LTIyNSIsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjF9LHsiaWQiOjE1LCJuYW1lIjoib3h5X2hlYWRlcl9yaWdodCIsIm9wdGlvbnMiOnsiY3RfaWQiOjE1LCJjdF9wYXJlbnQiOjEwLCJzZWxlY3RvciI6Il9oZWFkZXJfcmlnaHQtMTUtMjI1In0sImNoaWxkcmVuIjpbeyJpZCI6MTcsIm5hbWUiOiJveHlfbmF2X21lbnUiLCJvcHRpb25zIjp7ImN0X2lkIjoxNywiY3RfcGFyZW50IjoxNSwic2VsZWN0b3IiOiJfbmF2X21lbnUtMTctMjI1Iiwib3JpZ2luYWwiOnsibWVudV9yZXNwb25zaXZlIjoicGFnZS13aWR0aCIsIm1lbnVfcmVzcG9uc2l2ZV9wYWRkaW5nX3NpemUiOiIwIiwibWVudV9yZXNwb25zaXZlX2ljb25fc2l6ZSI6IjI0IiwiZHJvcGRvd25zIjoib24iLCJtZW51X2Ryb3Bkb3duX2Fycm93Ijoib24iLCJtZW51X2lkIjoiMyIsIm1lbnVfY29sb3IiOiJjb2xvcigzKSIsIm1lbnVfZm9udC1zaXplIjoiMTYiLCJtZW51X2ZvbnQtd2VpZ2h0IjoiNTAwIiwibWVudV9sZXR0ZXItc3BhY2luZyI6IjEiLCJtZW51X3RleHQtdHJhbnNmb3JtIjoidXBwZXJjYXNlIiwibWVudV9wYWRkaW5nLXRvcCI6IjIwIiwibWVudV9wYWRkaW5nLWJvdHRvbSI6IjIwIiwibWVudV9wYWRkaW5nLWxlZnQiOiIyMCIsIm1lbnVfcGFkZGluZy1yaWdodCI6IjIwIiwibWVudV9ob3Zlcl9iYWNrZ3JvdW5kLWNvbG9yIjoiY29sb3IoMykiLCJtZW51X2FjdGl2ZV9ib3JkZXItYm90dG9tLXdpZHRoIjoiMiIsIm1lbnVfZHJvcGRvd25zX2hvdmVyX2JhY2tncm91bmQtY29sb3IiOiJjb2xvcigyKSIsIm1lbnVfZHJvcGRvd25zX2hvdmVyX2NvbG9yIjoiY29sb3IoMSkiLCJtZW51X3Jlc3BvbnNpdmVfZHJvcGRvd25zIjoib2ZmIiwibWVudV9ob3Zlcl9jb2xvciI6ImNvbG9yKDEpIiwibWVudV9ob3Zlcl9ib3JkZXItYm90dG9tLXdpZHRoIjoiMCIsIm1lbnVfanVzdGlmeS1jb250ZW50IjoiZmxleC1zdGFydCIsIm1lbnVfLXdlYmtpdC1mb250LXNtb290aGluZyI6ImFudGlhbGlhc2VkIiwibWVudV9hY3RpdmVfY29sb3IiOiJjb2xvcigyKSIsIm1lbnVfZHJvcGRvd25zX3BhZGRpbmctdG9wIjoiMTYiLCJtZW51X2Ryb3Bkb3duc19wYWRkaW5nLWJvdHRvbSI6IjE2IiwibWVudV9yZXNwb25zaXZlX2ljb25fY29sb3IiOiJjb2xvcigzKSIsIm1lbnVfcmVzcG9uc2l2ZV9pY29uX2hvdmVyX2NvbG9yIjoiY29sb3IoNikiLCJtZW51X3Jlc3BvbnNpdmVfbGlua19jb2xvciI6ImNvbG9yKDMpIiwibWVudV9yZXNwb25zaXZlX2hvdmVyX2xpbmtfY29sb3IiOiJjb2xvcig2KSIsIm1lbnVfcmVzcG9uc2l2ZV9wYWRkaW5nX3RvcCI6IjEyIiwibWVudV9yZXNwb25zaXZlX3BhZGRpbmdfYm90dG9tIjoiMTIifSwiY3RfbmF2X21lbnUiOiJ0cnVlIiwiaG92ZXIiOnsibWVudV9iYWNrZ3JvdW5kLWNvbG9yIjoiY29sb3IoMykiLCJtZW51X2Ryb3Bkb3duc19iYWNrZ3JvdW5kLWNvbG9yIjoiY29sb3IoMikiLCJtZW51X2Ryb3Bkb3duc19jb2xvciI6ImNvbG9yKDEpIiwibWVudV9jb2xvciI6ImNvbG9yKDEpIiwibWVudV9ib3JkZXItYm90dG9tLXdpZHRoIjoiMCIsIm1lbnVfcmVzcG9uc2l2ZV9pY29uX2NvbG9yIjoiY29sb3IoNikiLCJtZW51X3Jlc3BvbnNpdmVfbGlua19jb2xvciI6ImNvbG9yKDYpIn0sIm1lZGlhIjp7InBhZ2Utd2lkdGgiOnsib3JpZ2luYWwiOnsicGFkZGluZy10b3AiOiIyMiIsInBhZGRpbmctbGVmdCI6IjIyIiwicGFkZGluZy1yaWdodCI6IjIyIiwicGFkZGluZy1ib3R0b20iOiIyMiIsImRpc3BsYXkiOiJub25lIn19fSwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6ZmFsc2V9LHsiaWQiOjYwLCJuYW1lIjoib3h5LWJ1cmdlci10cmlnZ2VyIiwib3B0aW9ucyI6eyJjdF9pZCI6NjAsImN0X3BhcmVudCI6MTUsInNlbGVjdG9yIjoiLWJ1cmdlci10cmlnZ2VyLTYwLTEwIiwib3JpZ2luYWwiOnsib3h5LWJ1cmdlci10cmlnZ2VyX3RleHQiOiJNZW51Iiwib3h5LWJ1cmdlci10cmlnZ2VyX3NsdWdfaGFtYnVyZ2VyYm94X21hcmdpbl9yaWdodCI6IjUiLCJveHktYnVyZ2VyLXRyaWdnZXJfc2x1Z19oYW1idXJnZXJib3hfX19idXJnZXJfc2l6ZSI6IjAuNyIsImRpc3BsYXkiOiJub25lIn0sIm1lZGlhIjp7InBhZ2Utd2lkdGgiOnsib3JpZ2luYWwiOnsiZGlzcGxheSI6ImJsb2NrIn19LCJ0YWJsZXQiOnsib3JpZ2luYWwiOnsiZGlzcGxheSI6ImJsb2NrIn19fSwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6ZmFsc2V9XSwiZGVwdGgiOjF9XSwiZGVwdGgiOjF9LHsiaWQiOjY1LCJuYW1lIjoib3h5X2hlYWRlcl9yb3ciLCJvcHRpb25zIjp7ImN0X2lkIjo2NSwiY3RfcGFyZW50IjoyLCJzZWxlY3RvciI6Il9oZWFkZXJfcm93LTY1LTEwIn0sImNoaWxkcmVuIjpbeyJpZCI6NjYsIm5hbWUiOiJveHlfaGVhZGVyX2xlZnQiLCJvcHRpb25zIjp7ImN0X2lkIjo2NiwiY3RfcGFyZW50Ijo2NSwic2VsZWN0b3IiOiJfaGVhZGVyX2xlZnQtNjYtMTAiLCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjoxfSx7ImlkIjo2NywibmFtZSI6Im94eV9oZWFkZXJfY2VudGVyIiwib3B0aW9ucyI6eyJjdF9pZCI6NjcsImN0X3BhcmVudCI6NjUsInNlbGVjdG9yIjoiX2hlYWRlcl9jZW50ZXItNjctMTAifSwiY2hpbGRyZW4iOlt7ImlkIjo2MSwibmFtZSI6Im94eS1zbGlkZS1tZW51Iiwib3B0aW9ucyI6eyJjdF9pZCI6NjEsImN0X3BhcmVudCI6NjcsInNlbGVjdG9yIjoiLXNsaWRlLW1lbnUtNjEtMTAiLCJvcmlnaW5hbCI6eyJveHktc2xpZGUtbWVudV9leHRyYV9tZW51X2xpbmtfcGFkZGluZ19wYWRkaW5nLWJvdHRvbSI6IjEyIiwib3h5LXNsaWRlLW1lbnVfZXh0cmFfbWVudV9saW5rX3BhZGRpbmdfcGFkZGluZy10b3AiOiIxMiIsIm94eS1zbGlkZS1tZW51X2V4dHJhX3NsaWRlX21lbnVfc3VibWVudV9tYXJnaW5fbWFyZ2luLWxlZnQiOiI0MCIsIndpZHRoLXVuaXQiOiIlIiwid2lkdGgiOiIxMDAiLCJveHktc2xpZGUtbWVudV9zdGFydCI6ImhpZGRlbiIsIm94eS1zbGlkZS1tZW51X3NsdWdfb3h5c2xpZGVtZW51bGlzdGN1cnJlbnRtZW51aXRlbWFfY29sb3IiOiJjb2xvcigzKSJ9LCJtZWRpYSI6eyJwYWdlLXdpZHRoIjp7Im9yaWdpbmFsIjp7Im94eS1zbGlkZS1tZW51X2V4dHJhX21lbnVfbGlua19wYWRkaW5nX3BhZGRpbmctbGVmdCI6IjEwIiwib3h5LXNsaWRlLW1lbnVfZXh0cmFfbWVudV9saW5rX3BhZGRpbmdfcGFkZGluZy1yaWdodCI6IjEwIn19fSwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6ZmFsc2V9XSwiZGVwdGgiOjF9LHsiaWQiOjY4LCJuYW1lIjoib3h5X2hlYWRlcl9yaWdodCIsIm9wdGlvbnMiOnsiY3RfaWQiOjY4LCJjdF9wYXJlbnQiOjY1LCJzZWxlY3RvciI6Il9oZWFkZXJfcmlnaHQtNjgtMTAiLCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjoxfV0sImRlcHRoIjoxfV0sImRlcHRoIjoxfV0sImNsYXNzZXMiOnsiYXRvbWljLWxvZ28iOnsia2V5IjoiYXRvbWljLWxvZ28iLCJwYXJlbnQiOiJhdG9taWMiLCJvcmlnaW5hbCI6eyJvcGFjaXR5IjoiMC44IiwidHJhbnNpdGlvbi1kdXJhdGlvbiI6IjAuNSIsInRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uIjoiZWFzZSIsInRyYW5zaXRpb24tcHJvcGVydHkiOiJhbGwifSwiaG92ZXIiOnsib3BhY2l0eSI6IjEifX19LCJjb2xvcnMiOnsiMyI6eyJpZCI6MywibmFtZSI6IkhpcHBpZSBCbHVlIiwidmFsdWUiOiIjNjc5OWIyIn19fQ==

With every new component, we’ll create a few demos that showcase some of the features, so you can preview them inside different browsers and get a better idea of what the features are for.

Many of the previews will have a small ‘copy’ button that appears as you hover over the section. This is to allow you to copy the component to your clipboard, with it’s pre-configured settings (and sometimes other elements inside of it included), directly into a page or template in Oxygen.

Hydrogen Copy & Paste

To provide this option to copy, we’re taking advantage of Hydrogen Pack‘s Copy & Paste functionality. However, there is a free version in the WP repository called ‘Hydrogen Paste‘, which will provide the ‘paste’ option that you need to be able to paste in the components once they have been copied.

Workflow

Notes

You’ll notice some of the settings are applied with CLASS, some are applied with an ID. The ‘style controls’ are generally applied to the class of the element, the ‘option control’ that apply functionality will be using the ID.

This is because the functionality can’t be shared between each component in the same way that styles can with a class.

One of of the updates made to the infinite scroller component in OxyExtras v1.3.0 was to add support for using with libraries such as Isotope & Masonry.

So if you’ve added a custom solution for filters using isotope, or are applying your own masonry layout using Easy Posts or Repeaters, the infinite scroller component will respect the layouts when loading the new posts.

For the most part this will work out of the box, as long as you choose the correct library that you’re using from the settings.

Note, I feel I must point out that even though this was added as a feature, after being requested, it’s not actually something I recommend for too many use cases. To quote David DeSandro who is behind both the infinite scroll library and isotope “..just because even though you can use these features together, maybe you should not”

In other words, using both filtering and limiting the posts visible by infinite scroll or pagination, although it’s possible. If there aren’t many posts in each category/filter result, it can sometimes lead to a confusing experience for the user. For example if the next batch of posts to be loaded don’t fit the filter criteria, nothing will show, which can be odd. Depending on what you’re creating, a dedicated facet search/filter plugin may work better for your use case.

Isotope filters & infinite scroll

If you’re adding filters to a repeater component using Isotope, (assuming you’re using the same method as shown in this tutorial.. Using Isotope To Sort & Filter Posts In WordPress With Oxygen), there’s just one extra step to ensure the filters will function correctly.

In Elijah’s Javascript code, on lines 12-17, he’s adding the categories as a class on the elements so they can be correctly filtered.

The classes are being added when the page first loads, when the document is ready.

We just need this to happen again when the new posts have loaded

The solution is to add this.. (using the append.infiniteScroll event to trigger the same classes to be added once the new posts are appended)

jQuery('.grid').on( 'append.infiniteScroll', function( event, body, path, items, response ) {
    
    jQuery('.category').each( function() {
    
      jQuery(this).closest('.grid-item').addClass(jQuery(this).text().toLowerCase());
      jQuery(this).remove();

    });
    
  });

That’s it. The full code, adding this part to Elijah’s is here..

https://gist.github.com/wplit/7e4e38528475ed52140fac5ecdf4de62

5mins

Easy to implement testimonial carousel using the new Carousel builder. Currently the carousel will work as a wrapper around the repeater component so any post type can be used.

This component will soon work with Woocommerce components like the product list component aswell as others.

We changed the folder name from oxyextras to oextras by mistake in v1.1.6 update.

That zip file has been deleted from the server and a correct one uploaded.

If you have already updated the plugin before seeing this message, please download the latest zip file from your account on and install it over your current plugin.

Sorry about the inconvenience.

One thing we’ve been asked a number of times is how to add scroll animations to alert boxes to reveal them only as the user scrolls the page. The common use case being when the alert is fixed to the viewport and the element needs to show as the user scrolls to a particular point on the page.

The Issue with Scroll Animations

You may have noticed that the built-in scroll animations won’t work when applying it to the alert box directly. Actually, the scroll animations won’t work on any component that has been built with Oxygen’s Elements API. You will find this is also true for the Pro Menu component, the Shape Divider component and all the official Woocommerce components.

That said, it doesn’t mean we can’t still take advantage of the built in scroll library. The way around it is to simply wrap the alert box in a div. We can then position the div as fixed to the viewport, instead of the alert box and then apply the scroll animations to the container div instead of the alert box inside.

The important thing is to not add any styles to the div itself, only change the position to ‘fixed’, position it relative to the viewport with the top/left/right/bottom where you need it and add the scroll animation effect. The width, height and all other styles should be on the alert box itself.

Revealing at a Certain Scroll Position

As our new container div will be fixed to the viewport, we’ll need to make use of the ‘anchor’ setting in the scroll animations to control exactly when the element is revealed.

This anchor would be the section or element on the page that the user would scroll to in order for the div (and the alert) to become visible.

This is what the settings would look like on our div element if we wanted the alert inside to be made visible when the user scrolls down to a specific section that we have given the class ‘.alert-trigger’.

The anchor placement being set at ‘top-center’ means that the animation will be triggered when the ‘top’ of this section reaches the ‘center’ of the viewport. This can be changed to however you want it to be, you can also add an offset if you want more precise control over the number of pixels scrolled.

That’s it

Although not the ideal solution, hopefully Oxygen will add support for scroll animations on these new components soon, this is a fairly simple way to get the end result you need.

This article provides the steps to set up a fixed Burger Trigger near the top left corner of the browser and appearing on top of the Off Canvas component having a Slide Menu.

We shall make the hamburger menu static from 768px to 1300px since it will be overlapping the logo during these widths when using the Atomic design set of Oxygen. These widths can be changed depending on your site’s header layout.

Here is the sample structure after you have implemented the steps below.

Step 1

Edit your Main catch all template with Oxygen and add a Burger Trigger component. In this example, let’s add it to the left of text link in Header Builder’s Header Row (bottom one).

Set the Burger Line Height to 3 to make the hamburger’s lines thinner.

Go to Button Styles and set a padding of 10px each on top, left and bottom and 15px on the right.

Background Color: #ffffff

Border Radius: 30px

Go to Button Text and add MENU text. If you would like to change the font size of this text, you can do so at Typography.

Go to Advanced > Layout.

Set Position to fixed with 20px top and left each.

Set Z-index of 1001.

Step 2

Add an Off Canvas component below all the other components.

Under Layout / Spacing you might want to add a value like 100px so that there will be space for the X icon.

Add a Slide Menu inside the Off Canvas and select your desired menu to be shown.

In our example site, we added 10px padding at the top and bottom under Menu Items / Spacing.

Then under Sub Menus / Spacing, added 20px left padding.

Step 3

Let us add some custom CSS at Manage > Stylesheets.

.admin-bar #-burger-trigger-59-29 {
	top: 52px; /* 20 + 32 */
}

@media only screen and (max-width: 782px) {
	.admin-bar #-burger-trigger-59-29 {
		top: 66px; /* 20 + 46 */
	}
}

.hamburger-box {
	transform: scale(0.5);
}

@media only screen and (min-width: 768px) and (max-width: 1300px) {
	#-burger-trigger-59-29 {
		position: static;
	}
}

Replace all instances of -burger-trigger-59-29 in the above with the ID of your Burger Trigger.

.admin-bar #-burger-trigger-59-29 {
	top: 52px; /* 20 + 32 */
}

@media only screen and (max-width: 782px) {
	.admin-bar #-burger-trigger-59-29 {
		top: 66px; /* 20 + 46 */
	}
}

will ensure that the fixed hamburger menu will be 20px from the top even when admin bar is visible. 32px is the height of the admin bar above 783px. 782px and below it is 46px tall.

.hamburger-box {
	transform: scale(0.5);
}

will reduce the size of the hamburger menu lines.

@media only screen and (min-width: 768px) and (max-width: 1300px) {
	#-burger-trigger-59-29 {
		position: static;
	}
}

will make the hamburger menu static during the viewport widths when it will be overlapping the logo. You may need to change these widths or make any other adjustments as needed.

1:06mins

Easy to implement header search functionality with three types of header search.

4:45 mins

Showcasing two AJAX Woocommerce components. The mini cart and the cart counter. Both can be used together or with existing components like the Offcanvas and the Modal.

Vid – 6mins

A quick over the shoulder on visually styling a polling Fluent Form using the fluent form component in OxyExtras.

chevron-down