Skip to main content

Combining Shortcode Examples

This article offers various examples demonstrating how to effectively combine field connections to grant you greater freedom and flexibility over the output. This includes the ability to wrap the field connection within HTML tags and apply custom CSS classes.

Post Title with Custom HTML & CSS​

To display a post title into your layout, the easiest approach involves utilizing a Heading module with the Post Title field connection.

In the following code example, we have made use of the Post Title and Post URL field connections, alongside custom HTML markup and CSS, to generate the Post Title with a personalized HTML structure and CSS classes.

<h1 class="my-post-title">

  <a href="[wpbb post:url]" class="my-post-title-link" title="[wpbb post:title]">
    [wpbb post:title]
  </a>

</h1>

Output​

<h1 class="my-post-title">

  <a href="https://my-website.com/hello-world/" class="my-post-title-link" title="Hello World">
    Hello World
  </a>

</h1>

It's possible to use multiple field connections to output the featured image. As a result, you have more control over the HTML structure and can use your own CSS classes.

<img src="[wpbb post:featured_image size='large' display='url']" class="my-feat-img" alt="[wpbb post:featured_image display='alt']">

Output​

<img src="https://my-website.com/wp-content/uploads/2023/08/image.jpg" class="my-feat-img" alt="My Post's Featured Image">

Post Title & Post Author​

In this particular example, the Post Title and Author Name field connections are used, with the word "by" inserted between them. This allows for displaying both the post title and author within a single heading tag.

<h3>[wpbb post:title] by [wpbb post:author_name type='display' link='no']</h3>

Output​

Hello World by Beaver Builder

Categories or Tag Name as CSS Class​

In this example, the Post Term List field connection is used to implement the category slug as a CSS class name. This proves beneficial for customizing individual categories, like assigning unique colors or adding category-specific icons.

<h3>
  <a href="[wpbb post:url]" class="[wpbb post:terms_list taxonomy='category' html_list='no' display='slug' separator=', ' limit='1' linked='no']-category">
    [wpbb post:title]
  </a>
</h3>

Output​

<h3>
  <a href="https:://my-website.com/blog/hello-world" class="movies-category">
    Some Movie Title
  </a>
</h3>

In this example, the Featured Image field connection is applied as an inline CSS value for the CSS background-image property. This allows you to set the post's featured image as a background image, which can be conveniently overlaid with additional content, like the post title. This provides a great example of how to use field connections as inline CSS values.

info

Some custom CSS is required to make this display the featured image correctly. The CSS code is not included in this example.

<div class="featured-image-bg" style="background-image: url([wpbb post:featured_image size='large' display='url'])">

  <h3 class="featured-img-heading">[wpbb post:title]</h3>

</div>