One common problem while creating WordPress templates with MB Views is how to create template parts and including them in multiple views. Think about it like get_template_part in a WordPress theme. This helps to reduce the duplication across views and when you need to update, you have to do that in one place.

Fortunately, since version 1.3.0 of MB Views, you’re able to do that easily. In this tutorial, I’ll show you how to use this feature to build your templates faster.

Setup

Assuming you’re creating a view for the Event post type. And you need to display event thumbnail, date, and location on both singular and archive pages. Also, on singular event pages, you need to display more details like Google maps, speaker info.

You can see this video and this tutorial to see in details how everything is setup. It’s not required but it’s helpful to walk through the previous tutorials in this series. The code for the previous tutorials is available on Github.

In this tutorial, we’ll split the section that displays event thumbnail, date, and location into a template part. And then, we’ll include it into the single and archive templates.

So, let’s do it!

Creating a Template Part

Creating a template part in MB Views is as simple as creating a normal view. Each view is already a template part that is ready to include in other views.

Go to Meta Box → Views and click the Add New button to create a new view. Let’s name it “Event Basic Info”. In the editor of this view, let’s copy the code that displays event thumbnail, date, and location from the single event template:

<div class="flex">
    <img class="mr-6" src="{{ post.thumbnail.thumbnail.url }}" width="{{ post.thumbnail.thumbnail.width }}" height="{{ post.thumbnail.thumbnail.height }}" alt="{{ post.thumbnail.thumbnail.alt }}">
    <div class="flex-1">
        <strong>Date:</strong> {{ post.datetime | date( 'F j, Y' ) }}<br>
        <strong>Location:</strong> {{ post.location }}
        <div class="mt-3">
            {{ post.content }}
        </div>
    </div>
</div>

(Note that I’m still using TailwindCSS to style the event details quickly. It’s not required, though.)

event basic info - MB Views template editor

In the Settings meta box, I’ll set Type to Custom because we don’t use this view to render templates for any singular or archive pages. We only use it as a template part to include in other views.

template part settings - MB Views

Now click Publish to publish the view. After saving, you’ll see the view Name in the Settings meta box as in the screenshot above (which is event-basic-info). It’s the slug of the view. The view name is used to include in other views, so copy and save it into your notepad. We’ll need it in the next step.

Including a Template Part into Another View

Now edit the event single view. Replace the existing code for displaying event thumbnail, date, and location with this code:

<! – Using include tag – >
{% include 'event-basic-info' %}

or

<! – Using include function – >
{{ include( 'event-basic-info' ) }}

include a template part into another view

This statement simply includes the “Event Basic Info” template part that we already created above into the current view (single event). We use the view name (slug) in the include statement.

Now save it and view a single event on the front end:

single event on the front end

As you can see, it’s the same as in the previous tutorial. That means the include statement works and displays event thumbnail, date, and location properly.

Now edit the event archive view and replace the same code with this include statement.

Note: while you can use the include tag or function, Twig recommends using the function syntax. For more details, please see Twig documentation for include tag and include function.

Benefits of Template Parts

There are 2 obvious advantages of template parts:

  • They remove code duplication across views, and
  • It’s easy to update when you need to make changes as you need to edit only the template part that contains changes

But these are not the best things about template parts. When you include template parts in a view, they have access to the same context as the current view. This means that any variable defined in the main view will be available in the template parts.

For example: if you’re creating a template part to display posts in a custom category, like this:

{% set posts = mb.get_posts( args ) %}
<ul>
    {% for post in posts %}
        <li><a href="{{ mb.get_permalink( post ) }}">{{ post.post_title }}</a></li>
    {% endfor %}
</ul>

(To understand the syntax, please see the documentation for the mb proxy)

Then in a view, you can set the query args to show posts in a category ID 3:

{% set args = {post_type: 'post', posts_per_page: 10, cat: 3} %}
{{ include( 'custom-query' ) }}

In another view, you can show posts in a category ID 5:

{% set args = {post_type: 'post', posts_per_page: 10, cat: 5} %}
{{ include( 'custom-query' ) }}

You can even do more with the include syntax like conditionally including a template part:

{% include ajax ? 'ajax' : 'not-ajax' %}

(this syntax is available only for include tag, not include function)

or include a template inside a for loop to render each item in the loop:

{% for post in posts %}
    {{ include( 'post' ) }}
{% endfor %}

Conclusion

Template parts are an important feature for MB Views and it’s really useful to remove duplicated code in your templates. Using it the right way, you can manage your templates as similarly as template parts in your theme. We strongly recommend you to use this feature in your views. And if you have any questions, please let us know in the comments.

Leave a Reply

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