Oxygen Builder Walkthrough

You are here:
< Back

Oxygen builder is a WordPress plugin that allows you to build entire themes and does away with themes altogether.  I guess if you got this far you probably know that already and want some tips on how to build a property theme that makes use of the properties from WP Property Feed.

Archive Page – Property search and results listing

Probably the most important template you will need it a property search and results listing page.  The good news is that this is relatively simple with Oxygen.  First you need to go to wp-admin > Oxygen > Templates and click the “Add New Template” button to start building your template.  Give you template a name (I suggest “Properties”) and then click on “Archive” in the “Where does this template apply?” section.  In the options here tick the “Post Types” option and select “wppf_property” from the dropdown

 

Now you can “Publish” that template which will then reload the page with the “Edit with Oxygen” option available – click that and lets edit the template!

There are two key elements we suggest you use for building your search and results page, a search form and a results grid.  For the search form we are going to use our wppf_quicksearch shortcode, so click “Add” and find the “Shortcode” option and add that to your template.

In the shortcode options add the [wppf_quicksearch] shortcode and you will see the quicksearch form appear.

NOTE: To style the quicksearch shortcode layout we suggest you use css to override our base styles, you can also edit the layout of the quicksearch by editing the underlying template – see our Templates documentation for more details.

Okay so we have a search form, now we need a results section below to display the matching properties.  For this we will add a “Repeater” element (in the Helpers section).  Once added to your template you do not need to change the “Query” section as by default the results will be controlled by our search and results logic, but feel free to change any of the layout and pagination options.  Finally we need to add our property content to the template in whichever layout you determine.

In the repeater we would suggest that you add the Post featured image (main property image), Post Title (name of the property) and Post Excerpt (brief description of the property).  You can then add any of the property attributes which are stored as Post meta data.  In most cases when you add or edit an element there is an option to “Insert Data”

Which is turn gives you the options to select the type of data

and finally if we are after specific property attributes we can select the attribute from the dropdown options

Using the “Insert Dynamic Data” we can pick out all the property features you may want for the results template.

Once you have your template complete you can view the search and results page by going to the standard wppf_property archive page https://www.yoursite.com/property (obviously change www.yoursite.com to the address of your site!).

Property Page

So to complete the search and results listing we need a single page for the property details.  So return to the wp-admin and Oxygen > Templates and “Add New Template”.  For this walkthrough I am calling my template “Property” and selecting the “Singular” from “Where does this template apply?” and selecting “Properties” so that this template only applied to property post types.  After publishing the template you can then “Edit with Oxygen” and as with the repeater on the archive page you can add Titles, text and meta data using the various Oxygen elements and “Insert Dynamic Data” options in those elements.

Picture Gallery, Floorplans and EPCs

There is one special case where we need to Oxygen a little help to pick up the correct data and that is to get the picture gallery, floorplans and EPCs.  We want all these images to be available to the gallery element in Oxygen and to do that follow these steps.

On your template add a “Gallery” element.   You will be presented with the options with seemingly no way of selecting the property picture gallery, floorplans or EPCs as the only “Gallery Source” options are “Media Library”, “ACF” and “WooCommerce” with no option to select “Insert Dynamic Data” (hopefully this will change in future Oxygen versions).  So in order to work around this issue we have added some filters that look for specific “Image IDs” text.  So to use the property pictures leave the “Gallery Source” unselected or select “Media Library” and then in the Image IDs enter either “pictures”, “floorplans” or “epcs” and this will immediately populate the gallery with the relevant images.

Once you have designed and completed your property template you will have a fully functioning property search and and results in place using all the data supplied via our WP Property Feed plugin.

We hope this was helpful!