Oxygen Builder - How to custom order posts by ID

Quick Answer if you are already familiar with editing plugins in WordPress

Keep reading for detailed guide.

This is for Oxygen Builder 3.5. To add custom ordered posts we modify the dynamic-list.class.php file in the oxygen builder's plugin folder. The file is located in component-framework/components/classes/ and add the following code to line number 3876.

<div class="oxygen-select-box-option"
ng-click="$parent.iframeScope.setOptionModel('query_order_by','post__in');"
title="<?php _e("Set order by", "oxygen"); ?>">
<?php _e("Order Given in Query", "oxygen"); ?>
</div>

Once the code is added there will be a new option in the "Order" dropdown of the repeater element labelled "Order Given in Query". This option will order your posts by order you type them in the Query section of the repeater.

**New option "Order Given in Query" after we save the custom code**

IDs 80 and 79 will be displayed in that order in this repeater.

Detailed step by step guide

First a warning!

You will be editing plugin files. This has the potential of breaking your website. Highly advisable that you backup any files being modified. If you do not have direct access your websites files via FTP or other means do not attempt this.

If it does break your website delete the oxygen plugin from the plugin folder and reinstall Oxygen Builder.

Edit the Oxygen Builder Plugin

Log into your WordPress back end and go to the plugin editor. Plugins -> Plugin Editor

From the top right after "Select plugin to edit:" click on the drop menu and select "Oxygen" then click on Select.

The Oxygen plugin folder structure should appear below this section.

Navigate to the dynamic-list.class.php by going to Component Framework -> Components -> Classes -> dynamic-list.class.php.

This should open the file in the editor on the left. Search for Menu Order. This is simply to get us to the right section of the file to past the code we need in. You will see multiple div starting with <div class="oxygen-select-box-option" some code in between and then ending </div> tag.

We want to past our code in the last of these the last of these </div> tags. In Oxygen Builder 3.5 this is on line 3875, Place the cursor after the <div> hit enter and type in the following code

<div class="oxygen-select-box-option"
ng-click="$parent.iframeScope.setOptionModel('query_order_by','post__in');"
title="<?php _e("Set order by", "oxygen"); ?>">
<?php _e("Order Given in Query", "oxygen"); ?>
</div>

Section where we want the code pasted, code is highlighted

Once the code is pasted in click on Update File below the editor.

To write this code I learned about the wp_query command from wordpress.org, read the article to see what else is possible. WordPress.org: wp_query.

How to use our new option

The repeater component in Oxygen Builder lets us query posts to be displayed by ID already unfortunately no matter what order you type them they will be ordered by ascending ID value. For example, if you query the post IDs 80,79 in that order the repeater will serve them up in ascending order 79, and 80.

Our code adds in a new option in the Order section of the repeater component labelled "Order Given in Query". When selected from the drop down menu, the repeater will serve the posts in whatever you order you placed in the "manually specify IDs" input of the Query.

I've seen the lack of this feature mentioned on forums and groups, hopefully this can help someone else that needs it. If Oxygen Builder updates their plugin to include this page will be updated to provide that information.

If you have any questions contact me at martin@ionws.com

Bonus

If you would like the posts to be displayed in random order, past the following code right after the code previously pasted.

<div class="oxygen-select-box-option"
ng-click="$parent.iframeScope.setOptionModel('query_order_by','rand');"
title="<?php _e("Set order by", "oxygen"); ?>">
<?php _e("Random", "oxygen"); ?>
</div>