[Resolved] Integrating Toolset Types and custom fields with GeneratePress [Solved]

[Ian]

Displaying custom fields in theme templates, seems to be a common query, that can easily be solved with the new GeneratePress Elements, and shortcodes (no PHP required!) by using the Custom Content Shortcode plugin.

Option 1: Post Custom fields only

If you are using a post’s build-in custom field, you will need the Custom Content Shortcode plug-in to access the field values as follows:

• Go to Posts, and click Add new
• Make sure that Screen Options (top right) has Custom Fields checked.
• At the bottom of the page, in the Custom Fields section, add your custom field (a name and value). Unfortunately WordPress lets you add this meta data, but it won’t let you display it.
• For example, we might create a field named “Link” and give it a Bitly.com short URL value, eg. “2MONFuM”
• Now we use GeneratePress Elements to specify how and where to display our new custom field
• Select Appearances | Elements
• Select Add New, an Element type of “Hook”, and enter a relevant title
• In main editing area, enter your mixture of text and Toolset Types shortcodes, eg:
  <div style="mylink">More: <a href="https://bit.ly/[field Link]">link</a></div>
• Make sure the “Execute Shortcodes” checkbox is checked
• Select a Hook location, eg. “after-content”
• Then in display rules, select a location, eg. Post
• Click Save, or Update

Now when I display my posts, my custom field appears at the bottom of the page as:
More: link

Option 2: Custom post types and fields using Toolset Types

The default Post custom fields lets you add only text fields with no validation. If you want different types fields, eg. numeric, date, etc, then Toolset Types v2 is required (you could also use Advanced Custom Fields (ACF)). It has its own shortcodes, so you don’t need the Custom Content Shortcode plug-in, but the latter does provide addition shortcodes such as [loop][if], which are also available in Toolset Pro.

For example, using Toolset Types v.2, I have a number of new post fields:

• Select Appearances | Elements
• Select Add New, an Element type of “Hook”, and enter a relevant title
• In main editing area, enter your mixture of text and Toolset Types shortcodes, eg:

  <div style="myseason">[types field="season"][/types]</div>
  <div style="mydate">Date: [types field="date" format="D j M Y - g:ia"][/types]</div>
  <div style="myvenue">Venue: [types field="venue"][/types]</div>
  <div style="mytickets">Tickets: [types field="tickets"][/types]</div>

• You can optionally add Custom Content Shortcodes too
• Make sure the “Execute Shortcodes” checkbox is checked
• Select a Hook location, eg. “after-entry-title”
• Then in display rules, select a location, eg. your custom post (mine was called Event)

Custom Content Shortcodes can also be used in posts and pages, and includes shortcodes such a [loop][if] etc, to generate conditional output.

[Tom]

Awesome! Thanks so much for sharing this 🙂

[Author]

Posts