Oxygen

https://oxygenbuilder.com/documentation/
Admin
Oxygen is a visual website builder for WordPress that provides developers with clean code, full...
Tokens:32,779
Snippets:713
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Send PHP Code to WPCodeBox

Source: https://oxygenbuilder.com/documentation/integrations/wpcodebox

This example shows how to send custom PHP code from an Oxygen element to WPCodeBox. Ensure WPCodeBox v1.1.1+ is installed. The integration allows you to reuse code across different pages or templates.

```php
OxygenWPCodeBoxrunSnippet(3);
```

--------------------------------

### Get current Taxonomy and Term for Query

Source: https://oxygenbuilder.com/documentation/dynamic-data/loops/queries/array-query

This example constructs a query to fetch any post type belonging to the taxonomy and term of the currently viewed object. It dynamically retrieves the taxonomy and term ID.

```PHP
$taxonomy = get_queried_object()->taxonomy;
$term = get_queried_object()->term_id;
return [
    'post_type' => 'any',
    'tax_query' => array(
        array(
            'field' => 'id',
            'taxonomy' => $taxonomy,
            'terms' => $term,
        )
    ),
];
```

--------------------------------

### Tax Query for Current Queried Term on Archive

Source: https://oxygenbuilder.com/documentation/dynamic-data/loops/queries/array-query

This example demonstrates a tax_query to retrieve posts of type 'product' that belong to the term currently being queried on an archive page. It uses get_queried_object()->term_id to get the current term's ID.

```PHP
return [
  'post_type' => 'product',
  'tax_query' => array(
    array(
      'taxonomy' => 'product_cat',
      'terms' => get_queried_object()->term_id
    )
  )
];
```

--------------------------------

### Overlay Container Class

Source: https://oxygenbuilder.com/documentation/builder/basics/creating-a-video-background

Add this class to the container element that will sit above the video to hold content.

```html
video-background-overlay
```

--------------------------------

### Accessing Parent Element Data in Child Element

Source: https://oxygenbuilder.com/documentation/developers/element-studio

Use the `$parentPropertiesData` array to access property data from a parent element within a child element. This example shows how to retrieve a product ID, with a fallback to null if the data is not found.

```php
$productId = $parentPropertiesData['content']['content']['product'] ?? null;
```

--------------------------------

### Overlay Container Styles

Source: https://oxygenbuilder.com/documentation/builder/basics/creating-a-video-background

Apply these styles to the overlay container class to stretch it across the section and position content on top of the video. Includes an optional gradient for readability.

```css
.video-background-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 4.8rem;
    background: linear-gradient(
        to top right,
        rgba(13, 17, 23, 1) 0%,
        rgba(13, 17, 23, 0.9) 25%,
        rgba(13, 17, 23, 0.5) 50%,
        rgba(13, 17, 23, 0) 75%
    );
}
```

--------------------------------

### Show posts connected by Meta Box Relationship

Source: https://oxygenbuilder.com/documentation/dynamic-data/loops/queries/array-query

This query retrieves 'lesson' post types connected to the current post via a Meta Box Relationship field named 'courses'. It orders results by a specific meta key.

```PHP
return [
  'post_type' => 'lesson',
  'relationship' => [
    'id' => 'courses',
    'to' => get_queried_object()->ID
  ],
  'orderby' => 'meta_value',
  'meta_key' => 'select_2caoexzgghd',
  'order' => 'ASC'
];
```

--------------------------------

### Show posts from Search Query

Source: https://oxygenbuilder.com/documentation/dynamic-data/loops/queries/array-query

This snippet displays posts that match the current search query. It uses get_search_query() to retrieve the search term.

```PHP
return [
  's' => get_search_query()
];
```

--------------------------------

### Video Element Styles

Source: https://oxygenbuilder.com/documentation/builder/basics/creating-a-video-background

Apply these styles to the video element class to position it behind content and ensure it fills the section.

```css
.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
```

--------------------------------

### Enable WordPress Debugging

Source: https://oxygenbuilder.com/documentation/troubleshooting/errors

Add these constants to wp-config.php to enable debugging. Set WP_DEBUG_DISPLAY to false to prevent errors from appearing on the page. Errors will be logged to /wp-content/debug.log.

```php
define( 'WP_DEBUG', true ); 
define( 'WP_DEBUG_LOG', true ); 
define( 'WP_DEBUG_DISPLAY', false ); // keep errors out of the page output
@ini_set( 'display_errors', 0 );
```

--------------------------------

### Adding Javascript Code

Source: https://oxygenbuilder.com/documentation/reference/elements/advanced/javascript-code

Input your JavaScript code into the 'JavaScript Code' control. This code will be wrapped in a callback function that executes on `DomContentLoaded` and inserted before the closing `</body>` tag.

```javascript
console.log('Hello from Oxygen Javascript Code element!');
```

--------------------------------

### Video Element Class

Source: https://oxygenbuilder.com/documentation/builder/basics/creating-a-video-background

Add this class to the Video element placed inside the outer container.

```html
background-video
```
Tokens:
Raw