标签： templating

Templating

Advanced Custom Fields

Oxygen integrates with Advanced Custom Fields / Advanced Custom Fields Pro.
If Advanced Custom Fields is installed and fields are present for the item being edited or previewed, fields created in ACF for that item will integrate with Oxygen's dynamic data functionality and automatically appear in the Insert Dynamic Data dialog.
Once the Insert Dynamic Data dialog is open, click Advanced Custom Fields to see the available fields.
Oxygen tries to keep the user interface clean by only showing fields present for the post type or item you are editing or previewing, but sometimes this may not show you fields you need to use. To to force the display of all fields, go to Oxygen -> Settings -> General in the WordPress admin area and enable the Show all ACF fields in the Dynamic Data Dialog setting.

Dynamic Data

Dynamic Data allows you to link design elements created in Oxygen to data from your WordPress database.
For example, you can link a heading element in your blog post template to the Post Title in the database. The title for each blog post will be placed in the heading element. Similarly, you can link a text element to your post content or link an image or section background to your post's featured image.
Inserting Dynamic Data
Text
To insert dynamic data into any text-based element, double click the text to edit it.
Then click Insert Data in the top toolbar to open the Insert Dynamic Data Dialog.
Property Values
Certain properties can be set with Dynamic Data. These properties have a data button on the right side of their input box. Click this button to open the Insert Dynamic Data dialog.

This functionality allows you to do things like setting a section background image URL to the post featured image, or an image's alt attribute to the value of a Custom Field.
+Add -> WordPress -> Dynamic Data
Shortcuts to insert the most common dynamic data points are available at +Add -> WordPress -> Dynamic Data.
Available Dynamic Data Points
Available data points are dependent on the page element or property they are being linked to. For example, when setting an image URL, Featured Image, Author Pic, and User Pic will be available as data points, but when setting the value of a text element, these data points will not be available.
Data points shown in the Insert Dynamic Data dialog are as follows:

Title
Content
Excerpt
Date (with various formatting options)
Categories, Tags, & Taxonomies (with various formatting options)
Custom Fields
Comments Number (with various formatting options)
Featured Image Title, Caption, Alt, and URL
Author Display Name, Bio, Pic, and Custom Fields
Current User Display Name, Bio, Pic and Custom Fields
Site Title, Site Tagline, and other bloginfo()
Archive Title & Description

PHP Function Return Value
To accommodate support for dynamic data points not shown in the Insert Dynamic Data dialog, use the PHP Function Return Value option.
Specify any PHP function that will return the data, such a custom function written in a plugin or a WordPress API function.
Arguments provided to this function should not contain quotation marks or spaces. For example:
argument_1,argument_2,argument_3
The value returned by this function will be inserted.

Meta Box

Oxygen integrates with Meta Box / Meta Box Pro.
When Meta Box is installed, fields present on the currently viewed post or fields present on a Meta Box Settings Page are accessible via Oxygen's dynamic data functionality and automatically appear in the Insert Dynamic Data dialog.
Once the Insert Dynamic Data dialog is open, click Meta Box to see the available fields.
Oxygen's Meta Box integration includes support for cloneable groups as Oxygen Repeater data sources.

Other Templates

In addition to the options in Singular and Archive templates, WordPress and Oxygen provide a few other places which your template can be applied. You can find these options on the Oxygen -> Templates -> Edit screen inside the Other subsection under Where Does This Template Apply?
Front Page
WordPress has a special page that displays when the root URL is called. This is the Front Page of a website, and WordPress uses its own template for this.
https://codex.wordpress.org/Creating_a_Static_Front_Page
Blog Posts Index
The Blog Posts Index is a Posts archive in WordPress that displays a paginated list of your blog posts.
Search Results
The Search Results template is used to display the results of a search done with the WordPress search form.
Further reading: https://codex.wordpress.org/Creating_a_Search_Page
404
When a user tries to access a page that does not exist on your website, a 404 page not found error is returned. Use this template to customize the display of your 404 error pages. If the template isn't displaying correctly when you visit a page that doesn't exist, please set a higher priority on the 404 template.
Inner Content
By default, the Inner Content element within any other template uses WordPress content. However, you can create an Oxygen template to be applied to all Inner Content elements across the entire website.
Catch All
The Catch All template will be applied by default if no other specific template is used. This is useful for template inheritance and to ensure the header and footer are consistent throughout the entire website.

Reusable Parts

Reusable parts allow you to use the same page part in multiple pages.
You may edit the reusable part in one place, and it will be updated everywhere it is used as a single.
Creating a reusable part
To make an element reusable, follow these steps:

Click the Structure button at the top to display the Structure panel.
Click the hamburger menu icon next to the element title and select Make re-usable.

Assign a component name in the pop-up window, then click OK.

Editing The Reusable Part
Click the reusable part, anywhere it is used.

Then, click Edit with Oxygen to edit the reusable part.
The changes affect all the pages that include this reusable part as a single.
You can also find all your reusable parts on the Oxygen > Templates screen.
Using the reusable part
To insert the reusable part on your page, click +Add > Reusable, and then select the reusable part.
Then, select the way of using the reusable part: as single or as editable.

Single
Edits made to the original reusable part will take effect for all instances of the reusable part that have been added as Single.
Editable
The reusable part is converted to normal Oxygen elements and can be edited directly where it is used. Edits made to the Oxygen elements will not affect the original reusable part. Edits made to the original reusable part will not affect the page where it was added as Editable.

Singular & Archive Templates

Singular templates display one item at a time - for example one post, one page, or one instance of a custom post type.
For example, a Singular template would be used to display the following:

A blog post
A page
A WooCommerce product

Archive templates are used to display many items on the same page.
For example, an Archive template would be used to display the following:

A paginated list of all your blog posts
A paginated list of all your WooCommerce products
A paginated list of all your blog posts in a particular category

Singular Templates
On the Oxygen -> Templates -> Edit screen, the options for Singular templates are in the Singular subsection under Where Does This Template Apply?
You can apply the template to:

All Post Types
Posts
Pages
Any Custom Post Types present on your site

Filtering Options

only apply if taxonomized as all of the following - instead of applying the template to all instances of the checked post types, it will only be applied to instances taxonomized as specified
only apply if parent ID is one of the following - instead of applying the template to all instances of the checked post types, it will only be applied if the instance's parent ID matches one of the specified IDs

Archive Templates
On the Oxygen -> Templates -> Edit screen, the options for Archive templates are in the Archive subsection under Where Does This Template Apply?
You can apply the template to:

All archives
Taxonomy archives for the specified taxonomies
Post Type archives for the specified post types
Author archives for the specified authors
Date archives

Further Reading
What is a custom post type?
WordPress can store and display numerous types of content - blog posts, pages, products, and much more. The two main post types that are default with WordPress are Post, and Page. Additional post types can be added to your site by you and the plugins that you install. For example, the WooCommerce plugin adds a Product custom post type. Plugins for real estate listings often add a Property Listing custom post type.
https://codex.wordpress.org/Post_Types
What is a taxonomy?
Taxonomies are ways of categorizing or tagging content. For example, you may have a shoe store with multiple product categories, e.g. men's shoes, women's shoes, boys shoes, girls shoes. You may have a real estate website with multiple listing types, e.g. for rent, for sale, off market, foreclosure. You may have a car dealership website with cars categorized by their condition: new or used.
Product categories, list types, and car condition are all examples of taxonomies.
https://codex.wordpress.org/Taxonomies
Oxygen replaces the WordPress template hierarchy
Normal WordPress themes rely on template files placed in /wp-content/themes/ to display the content on your site. Oxygen simply provides a visual replacement for the normal WordPress template hierarchy, allowing you to design every part of your site visually, inside WordPress, without requiring a theme or any theme files.

Template Hierarchy

Templating Overview

Templates are designs created in Oxygen that are applied to multiple places on your website. They can be managed inside the WP admin from Oxygen > Templates.
You can create templates that apply to pages, blog posts, WooCommerce products, member portals, bbPress, search results, custom post type archives, and every other part of your site.
Creating a Template & Applying It To Content

Select Oxygen > Templates in the WordPress admin panel, then click Add New Template.
Enter a name for the template, and then click Publish.
Specify where the template applies using the options under WHERE DOES THIS TEMPLATE APPLY?, then click Update to save your changes.
Click Edit with Oxygen to design the template.

Inner Content
Display the content that your template applies to using the Inner Content element.
To add an Inner Content element to a template, click +Add > Basics > Other > Inner Content.
The area covered by the Inner Content will be editable with Oxygen for each item the template is applied to.
If no inner content is created with Oxygen, the WordPress content will be used instead - whether it is a post, page, WooCommerce product, bbPress forum topic, or anything else created within WordPress.
For example, when you apply a template containing a header, Inner Content, and a footer to all pages of your site, the Inner Content area is editable on all pages. You can then use Oxygen to design the Inner Content area for each page or post, while the header and footer will remain the same.
Dynamic Data
Dynamic Data is used to link the design elements within your template to live data from from your WordPress database.
For example, you can link a Heading element in your blog post template to the Post Title in the database. Each blog post displayed with the template will have its title placed in the Heading element. Similarly, you can link a Text element to your post content, link an image or section background to your post's featured image, and much more.
Inheritable Templates
Templates containing an Inner Content element can be inherited by other templates.
Select the template you wish to inherit from Inherit design from other template list. Then save the template.
The editable area of the inheriting template will be nested inside the Inner Content area of the template which is being inherited.
For example, you may have a "Main Template" with a header, Inner Content, and footer. You now want to create a "Blog Post Template" which uses the same header and footer.
Set the "Blog Post Template" to inherit the "Main Template", and it will pull in the header and footer from the "Main Template", and the area editable on the "Blog Post Template" will be the Inner Content area.
Template Priority
When your template settings mean multiple templates could apply to the same content, the template with the highest priority number is used.
To set the priority, specify the Template priority number.
Previewing Content The Template Is Applied To
When editing a template which has been applied to content at Oxygen -> Templates -> Edit, you can preview the content which the template is applied to directly inside Oxygen's visual editor.
Choose the content you wish to preview from the Previewing dropdown menu.
Note: this dropdown may be blank if you haven't yet applied the template to any available content.
Manually Applying Templates
You can manually apply a template to any individual post, page, or custom post type.
To apply the Oxygen template to a specific item on your site, follow these steps:

In the WordPress admin panel, go to the Edit screen for the post/page/CPT you wish to apply the template to.
Select the template from Render page using template list, then save the page.

Example Template Structure
Here is an example structure which could be found on a site with pages, blog posts, and WooCommerce products.

Main template - has header, footer, and Inner Content area. Applies everywhere using Other -> Catch All.
Page template - inherits Main template, has Inner Content area. Applies to all Pages using Singular -> Page.
Blog Post template - inherits Main template, applies to all Posts using Singular -> Post. Instead of an Inner Content area, this template uses Dynamic Data to display post title and content.
Generic Archive template - inherits Main template, applies to all archives using Archives -> All Archives. Instead of an Inner Content area, this template uses an Easy Posts element to list all the posts displayed by the archive.
WooCommerce Product template - inherits Main template, uses Inner Content area to display the WooCommerce product. Applies to all Products using Singular -> Products.
WooCommerce Shop/Archive template - inherits Main template, applies to the WooCommerce shop page which is an archive, and all WooCommerce categories, using Archive -> Post Types -> Products and Archive -> Taxonomies -> Product Categories. Because the Generic Archive template already applies to all archives, this template must have a higher priority number to override it.

Toolset

Oxygen integrates with Toolset.
If Toolset is installed and fields are present for the item being edited or previewed, fields created in Toolset will integrate with Oxygen's dynamic data functionality and automatically appear in the Insert Dynamic Data dialog.
Once the Insert Dynamic Data dialog is open, click Toolset to see the available fields.
Toolset Views
To insert a Toolset View, use the Toolset View element that appears at +Add -> WordPress when Toolset is installed, or use the shortcode element.