Andrea
Andrea

Reputation: 23

Timber use different template for custom post type

I am completely new to PHP, Wordpress and Timber. I have a custom post type called Projects, it uses the posts archive template and I am going crazy to create a specific Projects archive template so I can have a different layout for it.

This is what my index.twig looks like

{% extends "layouts/base.twig" %}

{% block content %}
  <div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 500; repeat: false">
{% for post in posts %}
    {% include "tease-post.twig" %}
{% endfor %}
  </div>
{% endblock %}

and this is the tease-post.twig

{% block content %}
<div>
    <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                    <a href="{{post.link}}"><img src="{{post.thumbnail.src('full')}}" alt=""></a>
            </div>
            <div class="uk-card-body">
                    <h3 class="uk-card-title"><a href="{{post.link}}" class="uk-button uk-button-text">{{post.title}}</a></h3>
                    <p>{{post.get_preview(25,false,false,true)}}</p>
            </div>
            <div class="uk-card-footer">
                    <a href="{{post.link}}" class="uk-button uk-button-text">Read more</a>
            </div>
    </div>
</div>
{% endblock %}

Any idea how it works? Can't find any related documentation..

Upvotes: 0

Views: 2010

Answers (1)

Jared
Jared

Reputation: 1734

There are a few diff't methods depending on what you're looking to achieve. It would seem the simplest is...

{% extends "layouts/base.twig" %}

{% block content %}
    <div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 500; repeat: false">
    {% for post in posts %}
        {% include "tease-'~ post.type ~'.twig" %}
    {% endfor %}
    </div>
{% endblock %}

You could then create a file called tease-project.twig (assuming that `project is the name of your custom post type's slug) that might look something like this...

{# tease-project.twig #}
<h2>My cool project is... {{ post.title }}</h2>

If you're looking to do something special with a CPT's specific archive page...

Check your archive.php file, if you're using the starter theme it should load a file called archive-projects.twig (assuming that projects is the name of the custom post type).

The logic is fully customizable so you can load any .twig files you want depending on the circumstance

Upvotes: 1

Related Questions