Dynamic Content

Load dynamic content into your layouts and create site-wide templates for categories and posts using the YOOtheme Pro page builder.

YOOtheme Pro allows you to load content, which is managed in WordPress, from the database into your layouts. This can be the post's title or featured image. Whenever that content changes, it will be automatically updated across your entire website. This is not limited to post fields. Any content from WordPress can be loaded into your layouts.


Content Sources

All builder elements are able to load dynamic content. First, you need to select a content source which defines fields available for mapping. It can be selected in the Advanced tab of an element under Dynamic Content.

Dynamic content field

For elements which have multiple content items, for example the Grid or the Slideshow element, the Dynamic Content option can be found in the Advanced tab of each item and not of the element itself. This way each item can have a different content source.

The options under Dynamic Content are grouped depending on where the source comes from.

Type Description
Page Content sources which are provided by the page you are browsing. On a single post page, it's the post itself, and on the category page, it's the category itself and its posts.
Custom Content sources which are custom queried. They are independent of the current page. For example, you can load the latest posts or all blog categories into a page.
Site A content source with general fields of your site.

Content sources

In general, a content source can be a Page, Posts, Categories, Tags or Users as well as any custom post type or taxonomy. YOOtheme Pro also differentiates between a source which contains a single item or multiple items. In addition, a source can have related content sources, for example the post author or tags. Let's go into details.


Page Sources

Depending on the page you are browsing WordPress provides different content sources. These sources are used when creating templates for those pages. For example, the template for the single post page will render different post content depending on which singe post you are browsing.

Here is an overview of all supported pages and their content sources.

Page Sources
Single Page The Page itself
Single Post The Post itself
Posts Archive All Posts
Category Archive The Category itself and all its Posts
Tag Archive The Tag itself and all its Posts

Pages with a Posts source are usually divided into separate pages. The number of posts displayed per page can be set under Blog pages show at most in the Reading Settings in WordPress.

Note that Posts is a multiple items source, while all other page sources only contain a single item.


Custom Sources

Custom sources allow you to load custom queried content which is not automatically available on the page you are browsing. For example, you can load the latest posts or all blog categories into a page. Unlike page sources, custom sources are not divided into separate paginated pages.

Following custom sources are available.

Source Type Description
Custom Page Single Manually select a page or load a page by setting the offset.
Custom Pages Multiple Load all pages.
Custom Post Single Manually select a post or use filter options to specify which post should be loaded dynamically. Only post from the selected terms is loaded. Posts from child terms are not included. Use the shift or ctrl/cmd key to select multiple terms.
Custom Posts Multiple Posts are only loaded from the selected terms. Posts from child terms are not included. Use the shift or ctrl/cmd key to select multiple terms. If no term is selected, all posts will be loaded.
Custom Category Single Manually select a category.
Custom Categories Multiple Categories are only loaded from the selected parent category.

Custom post


Multiple Items Sources

Most builder elements can only render a single item. Multiple items elements, on the other hand, for example the Grid or the Slideshow element, have the ability to render multiple content items. The content item of the element will render as many items as available in the content source.

Multiple items element

If you select a content source which has multiple items, there are two options available to define which items are rendered.

Option Description
Start Set the starting point. If the value is 1, it starts with the first item.
Quantity Limit the number of items. If the value is left empty, all items will be loaded. This option is disabled for elements which can only render a single item.

Start and quantity

The combination of the Start and Quantity options allows you to split content source items into different visual layout parts. For example, you can show a number of posts in a hero slideshow followed by a grid showing the rest of the posts.

Note When templating an index or a category page, the Quantity option should only be used when splitting content sources. This is because the number of posts on those pages is already defined in WordPress.

Order and Direction

Custom sources have additional options to order their items. Mind that the item order of page sources are defined by WordPress. Depending on whether the custom source is a post or a category, there are different order options available.

Order Description
Id Order by the id
Date Order by published date
Modified Order by modified date
Alphabetical Order alphabetically
Hits Order by hits
Author Order by author
Random Order randomly
Custom Fields Order by any custom field

Set the order direction of the items.

Direction Description
Descending Start with the last item.
Ascending Start with the first item.

Order and direction


A source can have related content sources, for example the post has a related author and tags. Fields of all related content sources which contain a single item, like the author, are available for mapping together with the fields of the chosen content source. On the other hand, related content sources with multiple items, like post tags, have to be selected under the Multiple Items Source option.

Multiple items source

Following related content sources are available for a post.

Related Source Type Description
Author Single The post author
Categories Multiple The categories the post belongs to
Tags Multiple The tags the post belongs to

Related post sources

Following related content sources are available for a category.

Related Source Type Description
Parent Category Single The parent category of the category
Child Categories Multiple The child categories of the category
Parent Category: Child Categories Multiple The child categories of the parent category

Related category sources


Field Mapping

Once a content source is selected, its fields are available for mapping. To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

Dynamic button

Select the content field to map it to the element's field. For example, you can map the post’s title and featured image to the title and image fields of the Panel element.

Field mapping

Instead of the former field, the dynamic field with its name and source is shown.

Dynamic field

The following actions are available.

Action Description
Dynamic Button Opens a dropdown with all content fields available for mapping.
Edit Icon Opens the available field options.
Delete Icon Removes the field mapping. The former field is shown again.

Content Fields

YOOtheme Pro can load fields from a Page, Post, Category, Tag, User, Attachment as well as any custom post type and taxonomy. Custom fields from 3rd party plugins are available for mapping as well. While most fields like title, date or an image simply render their content, some fields are pseudo-fields, which means there is no actual field to fill out. Their content is provided by WordPress or depends on different fields.

Pseudo-fields Description
Teaser Renders the intro text if the more tag is present, otherwise the whole post content. There is an option to prefer the excerpt over the intro text.
Meta Renders the date, author and comment count fields as well as a term list of categories or tags in a formatted string. Author, comment count and terms are automatically linked to their pages.
Categories Renders a comma-separated list of all categories which are automatically linked to their category page.
Tags Renders a comma-separated list of all tags which are automatically linked to their tag page.
Link Renders the link to the item's page.

Important Mind that the Content and Teaser fields should only be mapped on templates and not on individual page layouts. This is because these fields are used to store the actual page content and the builder layout itself.


Field Options

There are several options available to manipulate the content of a field. Some field types have additional options.

Field options

Note The order in which the options are applied is: Date Format → Content Length → Search and Replace → Before and After

Before and After

All fields have options to add text before and after their content.

Option Description
Before Add text before the field value. For example, if it's an email address, for example info@example.com, and you add mailto: to the Before option, the created link mailto:info@example.com, will open the user's email program.
After Add text after the field value. For example, if it's a pricing number, for example 20, and you add a unit like to the After option, the price 20€ will be displayed in your layout.

Note Text in the Before and After fields can be translated by using the WPML String Translation plugin.

Search and Replace

All fields have options to perform a search and replace on their content. This is very powerful and allows advanced manipulation of the field content.

Option Description
Search Select a predefined search pattern or enter a custom string or regular expression to search for. The regular expression has to be enclosed between slashes. For example my-string or /ab+c/.
Replace Enter the replacement string which may contain references. If left empty, the search matches will be removed.

The predefined URL Protocol pattern (/https?:\/\//) will remove the HTTP/HTTPS protocol from an URL, if the replacement string is left empty. For example https://yootheme.com will convert to yootheme.com. This pattern allows you to link to an external page and display a shortened URL with just one custom field.

Learn more about search and replace in the PHP preg_replace function documentation and about regular expressions in the MDN Regular expressions documentation. The best place to test regular expressions is Regex101.

Content Length

Text fields have an additional option to limit the content length.

Option Description
Content Length Limit the content length to a number of characters. All HTML elements will be stripped.

Content length option

Date Format

Date fields have an additional option to format the date.

Option Description
Date Format Select a predefined date format or enter a custom format, for example M j, Y (Aug 6, 1999) or m/d/Y (08/06/1999).

Date format option

Learn more about it in the PHP Date function documentation.

Content Field

The content field has an additional option to render the content without the intro text if the more tag is present.

Option Description
Intro Text Show or hide the intro text

Content field option

Teaser Field

The teaser field has an additional option to show the excerpt text instead of the intro text.

Option Description
Excerpt Prefer excerpt over intro text.

Teaser field option

Meta Field

Meta fields have additional options to display their content.

Option Description
Format Display the meta text in a sentence or a horizontal list.
Separator Set a separator between fields if the format is a list.
Link Style Set the link style.
Display Show or hide fields in the meta text. Additionally, you can choose from which taxonomy the term list is shown.
Date Format Select a predefined date format or enter a custom format, for example M j, Y (Aug 6, 1999) or m/d/Y (08/06/1999).

Meta field options

Categories and Tags Fields

Categories and tags fields have additional options to display their content.

Option Description
Separator Set a separator between categories or tags.
Link Show or hide linking categories or tags.
Link Style Set the link style.

Categories and tags fields options


Custom Fields

YOOtheme Pro supports custom fields created with the Advanced Custom Fields or the Toolset plugin. It can load custom fields from a Page, Post, Category, Tag and User as well as any custom post type and taxonomy.

Custom fields which contain a single item are available for mapping together with the default content fields and are grouped under the field group name.

Custom fields with single item

On the other hand, custom fields with multiple items have to be selected under the Multiple Items Source option. They are grouped under the field group name.

Custom fields with multiple items

Advanced Custom Fields

To add custom fields with Advanced Custom Fields, create a new field group. Set a rule under Location to determine which content type will use the custom fields. YOOtheme Pro only supports rules for Post Type (Post) , User Form (User) or Taxonomy (Forms). Add a custom field by clicking Add Field. Learn more in the ACF documentation.

Custom fields locations in ACF

Following custom fields are supported.

Name Type Description Documentation
Text Single Input field View
Text Area Single Textarea field View
Number Single Input number field
Range Single Input range field View
Email Single Input field
Url Single Input field
Password Single Password input field
Image Single Media picker field providing title and url View
File Single Media picker field providing title and url View
Wysiwyg Editor Single WYSIWYG editor field View
oEmbed Single Input field which generates markup to embed content View
Gallery Multiple Media picker field providing all Attachment fields View
Select Single/Multiple Select field providing label and value View
Checkbox Multiple Checkbox field providing label and value View
Radio Button Single Radio field providing label and value View
Button Group Single Button group field providing label and value View
True / False Single Checkbox field providing a boolean View
Link Single Link picker field providing title and url View
Post Object Single/Multiple Select field providing all Post fields View
Page Link Single/Multiple Page link picker field View
Relationship Multiple Advanced post picker field providing all Post fields View
Taxonomy Multiple Checkbox field providing all Taxonomy fields View
User Single/Multiple Select field providing all User fields View
Google Map Single Location picker field providing all Google Maps fields View
Date Picker Single Date picker field View
Date Time Picker Single Date and time picker field View
Time Picker Single Time picker field View
Color Picker Single Color picker field View
Repeater Multiple Repeat a customizable set of fields View

Important The Post Object and Relationship fields are only available for mapping if one post type is selected in the Filter by Post Type option.

Note The Gallery and Repeater fields are only available in the Advanced Custom Fields Pro plugin. The Flexible Content field is not supported.

Some fields, like the Repeater field, have an option to allow users to select one or multiple items. Depending on the option, the field will be available for mapping together with the default content fields or has to be selected under the Multiple Items Source option.

Enable multiple items in ACF

Toolset

To add custom fields with Toolset, choose the Post Type and click Add custom fields. Learn more in the Toolset documentation.

Following custom fields are supported.

Name Type Description
Audio Single/Multiple Media picker field
Checkboxes Multiple Checkbox field
Checkbox Single Checkbox field
Colorpicker Single/Multiple Color picker field
Date Single/Multiple Date picker field
Email Single/Multiple Link picker field
Embedded Media Single/Multiple Input field which generates markup to embed content
File Single/Multiple Media picker field
Image Single/Multiple Media picker field
Number Single/Multiple Input field
Phone Single/Multiple Input field
Radio Single/Multiple Radio field
Select Single Select field
Skype Single/Multiple Input field
Multiple Lines Single/Multiple Input field with multiple lines
Single Line Single/Multiple Input field with a single line
Url Single/Multiple Link picker field
Video Single/Multiple Media picker field
Wysiwyg Single WYSIWYG editor field
Post Reference Single Advanced post picker field providing all Post fields

Some fields, like the Image field, have an option to allow users to select one or multiple items. Depending on the option, the field will be available for mapping together with the default content fields or has to be selected under the Multiple Items Source option.

Enable multiple items in Toolset

Toolset allows you to connect posts to other post types using One-to-one, One-to-many and Many-to-many relationships. This way you can create additional related sources and map their fields into your layouts. Learn more on how to create relationships in the Toolset documentation.


Custom Post Types

By default WordPress comes with a few different post types, for example pages and posts. Posts have their own taxonomies, namely categories and tags. To better group and manage your content in the WordPress administration, you can register new custom post types with their own taxonomies. For example, if your website does movie reviews, you can create a custom post type called Movie.

Custom post types admin area

YOOtheme Pro fully supports registered custom post types and taxonomies. This means you can use the YOOtheme Pro page builder to create individual layouts for a custom post type or to create templates for their index, archive and single post pages and map their fields and custom fields into your builder layouts. Custom post types and their taxonomies are available as page and custom sources and can be used in the same way like the WordPress default post types.

Custom post types sources

Important When using the register_post_type() function the REST API base slug rest_base has to be set to the plural version of the post type key. For example, if the post type key is movie, use movies as REST API base slug. The same applies when using the register_taxonomy() function. For example, if the taxonomy name is movie_category, use movie_categories as REST API base slug.

We recommend the following WordPress plugins to use with YOOtheme Pro when working with custom post types and taxonomies.

Name Description Website
Custom Post Type UI Easily register and manage custom post types and taxonomies View
Toolset Easily register and manage custom post types and taxonomies View
Powerful Posts Per Page (PPPP) Change posts per page by custom post type or taxonomy View

Custom Post Type UI

With the Custom Post Type UI plugin you can easily register and manage custom post types and taxonomies. Open CPT UI in the WordPress administration menu, click Add/Edit Post Types and add a new post type by entering a Post Type Slug, for example movie, as well as Plural Label and Singular Label.

Add new custom post type in CPT UI

Important Set the REST API base slug to the plural version of the post type slug. For example, if the post type slug is movie, enter movies as REST API base slug.

CPT UI custom post types REST API

If the custom post type requires an index page for all its posts, set the Has Archive option to TRUE. It will allow you to apply templates to the Post Type Archive page of your custom post type.

Custom post types archive option in CPT UI

To create a new taxonomy, click Add/Edit Taxonomies and add a new taxonomy by entering a Taxonomy Slug, for example categories, Plural Label and Singular Label. Then attach your taxonomy to your created custom post type.

Add new custom taxonomy in CPT UI

Important Set the REST API base slug to the plural version of the taxonomy slug. For example, if the taxonomy slug is movie_category, enter movie_categories as REST API base slug.

CPT UI custom taxonomy REST API

If the taxonomy requires parent-child relationships, set the Hierarchical option to TRUE. Mind that all taxonomies are available as content sources in YOOtheme Pro but only hierarchical taxonomies are available as custom sources.

Custom taxonomy hierarchical option in CPT UI

Powerful Posts Per Page (PPPP)

By default, the number of posts displayed per page can be set under Blog pages show at most in the Reading Settings in WordPress. This option applies to all post types including custom post types.

WordPress reading settings

With the Powerful Posts Per Page (PPPP) plugin you can change the number of posts per page for each of your custom post types or taxonomies. After the plugin is installed and activated, you can set these numbers in the Reading settings too.

Powerful posts per page


Invalid Sources and Fields

There are cases in which content sources or mapped fields are invalid. For example, templates loaded from the layout library can use content sources or fields which don't exist in the current WordPress site. Or content sources or fields could also be deleted or renamed in WordPress but still be used in the layout.

Here is a list of all cases when a content source or a field is invalid.

  1. A selected page source doesn't exist on the current page.
  2. A selected custom source doesn't exist in the WordPress installation.
  3. A mapped field doesn't exist in the selected content source.
  4. A content source is selected but none of its fields are mapped.

Invalid content sources and fields are highlighted red. To quickly find those cases, the dynamic content status icon is also highlighted red in the YOOtheme builder.

Invalid sources and fields


Dynamic Conditions

Use conditional logic to display an element depending on a field of a chosen content source. Once a content source is selected, its fields are available under Dynamic Condition. Pick a field to which the condition should apply.

Dynamic conditions field

Set a condition, and the element will only be displayed if the condition is met. Some conditions require a value for comparison.

Condition and value

Condition Description
Is empty The content of the field is empty
Is not empty The content of the field is not empty
Is equal to The content of the field is equal to the entered value
Is not equal to The content of the field is not equal to the entered value
Contains The content of the field contains the entered value
Does not contain The content of the field does not contain the entered value
Less than The content of the field is less than the entered value
Greater than The content of the field is greater than the entered value

Learn more about the conditions in the PHP Comparison Operators documentation. Note that the string comparisons are case-sensitive.


3rd Party Integration

YOOtheme Pro has additional support for the following plugins which add more functionalities to your website.

Category Order and Taxonomy Terms Order

With the Category Order and Taxonomy Terms Order plugin you can order categories and all custom taxonomies terms using drag and drop. It is available as Term Order when setting the order for custom sources.

With the WordPress Popular Posts plugin you can order posts, pages and custom post types by the number of views or comments. This allows you to display your most popular posts.

To allow custom post types also to be ordered by popular posts, click the settings icon in the upper left. Add the name of your custom post type in singular, for example, if your custom post type is Movies, add movie after post,page.

WordPress Popular Posts

Custom post types in WordPress Popular Posts

Popular posts, pages and custom post types will be available as custom sources.

WordPress Popular Posts custom sources

These popular custom sources have the same settings as the default custom sources but with different options to order their items.

Option Description
Order Order posts by comments, total views or average daily views
Time Range Set the time range for sorting to last 24 hours, last 7 days, last 30 days or all-time

Order and time range

YOOtheme Pro Documentation