1. Check selected template on single post

Go to the Oxygen Section of the post that is displaying a 404 and check that the "Render Page Using Template field" Displays the template you set up for the page:

image

2. Check Template Display Condition

Got to: Oxygen > Template > {select your template}

Check in your section "WHERE DOES THIS TEMPLATE APPLY?" that the correct post type is selected. For Single Post Templates make sure you select your post type under the dropdown "Singular".

image

3. Resave Permalinks

Got to: Settings > Permalinks

Scroll down on the Permalinks page can click "Save Changes". This will resave permalinks for your new post type and replace old settings in your .htaccess file.

image

4. The usual Oxygen Builder troubleshooting steps

Isotropic has a good guide on troubleshooting Oxygen Builder:

1. Back up you website

2. Regenerate CSS (Oxygen > Settings > CSS Cache TAB )

image

2. Resign Shortcodes (Oxygen > Settings > Security TAB )

image

Still need help? Get in touch with me to get help with your oxygen builder project.

I recently came across an issue where I was trying to use an advanced image field from Meta Box inside an Oxygen Builder repeater. However, after I selected the dynamic data values in Oxygen the field was not displaying. Oxygen Builder support made clear that this was an existing issue and that it needed a workaround as they did not know when it would get fixed.

Therefore I thought I might share my solution here in a step-by-step tutorial in case you are having the same issue.

Create the Meta Box Pro fields

1. Create a Meta Box Pro ‘group’ field for your post type

Make sure the ‘Group’ field is clonable, this allows you to populate the filed group on the post.

2. Create an ‘Image Advanced’ field

Once you have created the Group field in step one you need to add an ‘Image Advanced’  inside the Meta Box Group field. Remember the ID you named the ‘Advanced Image’ field. In our example, the id is 'section_image'.

Add the custom code

According to Oxygen support, you can use global ‘$meta_box_current_group_fields;’ to get the current group inside the Oxygen Repeater.

Therefore I created the following function and added it with the Code Snippets plugin to the functions.pho: 

function get_oxygen_repeater_section_image_id() {

    global $meta_box_current_group_fields;

    // Get the image ID

    // Replace ‘section_image’ with your image ID

    $image_id = $meta_box_current_group_fields['section_image'][0];

    return $image_id;

}

Make sure you replace the image ID ‘section_image’ with your own image ID. Once you are done save and activate the snippet. 

Query the image ID in the oxygen repeater

Set up the repeater

Select ‘Query’ in the repeater settings, tick the ‘Use Meta Box Group’ box and select your Meta Box Group field below.

select meta box aio group field in oxygen builder
select meta box aio group field in oxygen builder

Add the image element

Drag the image element inside the repeater element. Select ‘Media Library’ in the primary settings of the image element.

Query the image ID

  1. Select the ‘data’ option inside the ID field. 
    add dynamic meta box data to oxygen repeater
  2. Select ‘PHP Function Return value’ and the advanced dynamic data settings
    select ‘php function return value’ und the advanced dynamic data settings
  3. Insert the name of the function we previously created: ‘get_oxygen_repeater_section_image_id’
    enter function name calling meta box aio field

Save your edits, clear the cache and reload the page. The image from your Meta box group field should display now.

This article explains why the oxygen menu items does not wrap it's children into a new row when they are overflowing the screen. To understand this article you will require a basic understanding on flex-box. You can watch this video by Kevin Powell or read about flexbox on the MDN Docs.

The 'issue' with the native menu in oxygen

The Oxygen menu's ol element is set up as a flex-box, but does not contain a 'flex-wrap:wrap', which allows flex elements that would horizontally overflow

  1. Create a stylesheet in Oxygen Builder
  2. Add this code to your style sheet:

  3. /*Target ul selector of the relevant menu class swap .menu--footer for relevant menu class or #selector*/
    .menu--footer ul {
    flex-wrap:wrap;
    }

    /*Target li selector withing the list targeted above swap .menu--footer for relevant menu class or #selector*/
    .menu--footer ul li{
    width: fit-content !important;
    }
  4. Apply the class '.menu--footer' to your menu element in the Oxygen editor
responsive horizontal oxygen builder navigation menu
responsive horizontal oxygen builder navigation menu
/*Replace .menu with your menu class*/
.menu--footer ul {
flex-wrap:wrap;
}


.menu--footer ul li{
width: fit-content !important;
}

Start your project today

Get in touch
Contact Form
crosschevron-left