How to Create a Custom Sponsor Listing and Banner with Kadence Elements Templates and Meta Box

Kadence + Meta Box

Kadence Blocks Pro 1.7 introduced Meta Box support for WordPress site owners looking to create sites using dynamic content. In a recent iThemes Training webinar, Kadence Founder Ben Ritner provided an overview of how to use Meta Box, the Kadence Theme, and Kadence Blocks Pro to set up customized sponsorship displays. Using the new Travel Blog starter template, Ben showed how to use related sponsor data in posts to show sponsor logos with links. All of this was done without touching a single line of code; Kadence handles all of the dynamic relationships for you. 

You can watch the entire webinar here, and more details about how to implement this with Meta Box is below. 

Custom Sponsor Listing in WordPress Made Easy

Using custom post types is an excellent way to display the same content, stored once in your WordPress database, in multiple places. For this use case, we have a simple storage area for sponsor content and links, and we display this sponsor content in multiple places. For example, a sponsor could sponsor multiple posts on our site, but we only have to enter the content once and display the content in multiple places.

Tools for the Job

In order to use this implementation, you’ll need a few things. 

  • Kadence Blocks. This is the free plugin available on the repo. Go to Plugins > Add New and search for Kadence Blocks.
  • Kadence Theme. Search for Kadence under Appearance > Themes.
  • Kadence Blocks Pro. To access dynamic content tools, you’ll need the Pro version of Kadence Blocks. 
  • Kadence Theme Pro Plugin. Unlock the power of Kadence Elements to make no-code dynamic content simple.
  • Meta Box. Go to Plugins > Add New and search for Meta Box. This tutorial works with the free version of Meta Box. You can alternatively use Advanced Custom Fields to implement this similarly, though some of the steps will be different. 
  • CPT UI. If you’re not using the Pro version of Meta Box, you’ll need this free plugin to set up the custom post types in your WordPress site. 

Step 1: Setting up the Custom Post Types

Using the CPT UI plugin, set up the custom post types. Here, we set up the custom post type as sponsor/sponsors. 

setting up the custom post type with cpt ui

We can set an icon for our sponsor post type. This will show next to the post type on the wp-admin left sidebar.

cpt-ui menu icon

We scroll down to set the icon for the Sponsors post type, and we ensure that the post type uses Custom Fields. 

use custom fields

Step 2: Setting up Custom Fields with Meta Box

Next, we’ll set up our custom fields with Meta Box. Navigate to Meta Box > Custom Fields and Add New. We’ll set up two meta box custom field groups, Post Sponsor and Sponsor Settings.  For our example, we’re limiting the number of fields, but you can definitely expand the fields for sponsors to contain many different content types. 

meta box field groups

For the Post Sponsor field group, this will show the sponsor information on the WordPress site’s blog posts.

meta box post

For the Sponsor Settings, this will set up two fields for the sponsor link and a sponsor small image. We’ll use the featured image for the sponsor posts themselves. 

meta box sponsor settings

Step 3: Adding the Sponsor Content

Once you have your custom fields set up, adding new content is as easy as adding a blog post. In our example, we’ve got the sponsor name entered in the space for the blog post title, a sponsor description entered in the blog post content area, plus the additional fields of the sponsor small logo, the sponsor link, and we’ll be using the featured image for the large logo. If we wanted the sponsor featured image to be something else, we could have easily added a large logo field instead. 

sponsor page enter data

Step 4: Kadence Templating Makes This Easy

This is where the fun begins. Now that we’ve got our content entered into WordPress via our custom field set up, we can easily — with just a few clicks — ensure that this content is displayed on our site where we want it. We also have the added benefit of being able to quickly add sponsors to new content, move sponsorships to older posts without having to re-add the content back in. Kadence Elements Templating gives you all of the tools you need in order to easily add sponsorships to various areas of your site quickly and easily. 

We’re adding our sponsorship banners to our posts, and then we’re using the same content to create a template for our sponsor pages as well. All of this can be managed in Kadence Elements Templates. 

To use Kadence Elements Templates, make sure you’ve got Kadence Theme Pro plugin installed, and then ensure you’ve got the Kadence Hooked Elements toggle turned on.

hooked elements on

Step 5: Adding Sponsor Banners to Posts

Because we’re adding sponsor banners to our posts, we’ll be adding inline content to posts we’ve already got created. As such, we’re selecting Kadence Elements Content Section. This tells Kadence to place the content on already existing posts/pages within our site. 

Navigate to Appearance > Kadence > Elements to get started with Kadence Elements Templates. Click Add New, then choose Content Section from the dialogue that comes next.

Kadence Elements Templates

Title your template something that makes sense to you. We entitled it Single Post Sponsor Banner. Next, you’ll want to choose one of the posts to model your sponsor banner for this. You’ll do this under “Preview Settings.”

sponsor post preview settings

Once this is set, we can begin to set up our sponsor banner to look the way we’d like. The most important elements we need to set are position and display. For our example, we are setting our banner to show up before the inner title area (in Placement Settings) and on all single posts (in Display Settings).

Step 6: Assigning Banners to the Sponsored Posts

There are a number of ways we can easily choose the posts on which our sponsor’s banner will appear. The easiest way is to choose the individual posts on our element’s display settings. We’ll choose “Show On” to show “Single Posts, and then “Select Post By” set to individual. Then, click the “Select Items” button to open a dialogue on which we can easily choose the posts we’d like to show this particular element on.

If we opt to work this way, we’ll have a separate element content section for every banner.

Alternatively, we can have one content section for all banners, and set the display using conditional login for each block.

conditional logic by block

You’ll need to decide how you’d like to organize your sponsor banners in a way that makes sense for your site and your team.

Step 7: Setting up our Sponsor Post Templates

Each sponsor banner is set to link to a sponsor page. We set up our sponsor page as a Kadence Elements Template. First, select a sponsor to preview the single post template. Here, we select Hotwire.

sponsor single post preview

Next, we set our Kadence Elements Template settings for placement to “Replace Single Post Content” and Display Settings to Single Sponsors.

We can then build out our template using dynamic content to pull in the specific sponsor information from the content entered into our Sponsor custom post type. Our “View Sponsor Site” links to the sponsor link in our Sponsor custom post type.

This will dynamically add our sponsor pages to our site that our banners on our sponsored posts will link to before sending our site visitors to our sponsor’s site.

Adding Dynamically Generated Pages is Easy with Kadence

No matter what type of custom post type generation tools you use, adding dynamically generated content to your WordPress site is easy using Kadence Elements templating and content sections. We hope this tutorial gave you more ideas of how to use Kadence Elements to build custom sites easily and quickly without ever touching a line of code.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.