CODEWITHSUNDEEP
wordpresstwigadvanced-custom-fieldstimber
Yan White
Yan White

Reputation: 13

How to set up custom post types and ACF fields in Timber

I am new to Timber/Twig/PHP and have a fairly specific requirement. I have a page-home.php / page-home.twig which displays a couple of ACF fields, testimonials as a custom post type, and the latest 3 blog posts.

I'm mostly fine with the Twig frontend part, but having difficulties with setting up the php template files.

I've read the Timber docs and got the impression that ACF is baked in, so that the field can just be called directly in Twig. Also checked Github and SO for similar issues but did not find an answer. There is a video on youtube that covers custom post types, but it is within a loop of only posts.

This is my page-home.php

echo 'page-home.php';

$context = Timber::get_context();
$context['page'] = new Timber\Post();

$templates = array('page.twig');
if (is_front_page()){

    $context['posts'] = Timber::get_posts('post_type=post&posts_per_page=3');
    $context['testimonials'] = Timber::get_posts('post_type=testimonials');

    // add your twig view to the front of the templates array
    array_unshift($templates, 'page-home.twig');
}

Timber::render( $templates, $context );


$image = get_field('hero_image');

echo '<pre>';
    var_dump( $image );
echo '</pre>';

page-home.php is showing 3 blog posts as expected, but returning a NULL value for the ACF field var_dump.

If I comment this line // $context['posts'] = new Timber\PostQuery($args); I get the var_dump of my image array, though it doesn't render in the Twig file.

This is the image in page-home.twig <div class="image image-overlay" style="background-image:url({{ Image(post.meta('hero_image')).src }})"></div> which returns blank.

Blog posts are being called as:

{% for post in posts %}
  {% include "blogpost-card.twig" %}
{% endfor %}

I am also unsure how to call a separate custom post type (testimonials) on the same page since the documentation does not provide that example.

I'm using the starter-theme installed through Composer. It would be great if the theme or the documentation provided an example of a page containing posts, custom posts and ACF fields since I guess this is a very common scenario. At least for those like myself who need a little extra help with the PHP side.

Upvotes: 0

Views: 2655

Answers (2)

Gchtr
Gchtr

Reputation: 2794

If you have {{ Image(post.meta('hero_image')).src }} in your Twig file, then Twig will look for the post variable. In your case, you define a post variable when you loop through your posts to display them as cards. 

{% for post in posts %}
    {% include "blogpost-card.twig" %}
{% endfor %}

However, you probably didn’t define a custom field called hero_image for your posts, but on the page where you display them. So, when you define your context and add the currently displayed post under page in the context, then you later need to access it through page as well, and not through post.

$context = Timber::get_context();
$context['page'] = new Timber\Post();

<div
     class="image image-overlay"
     style="background-image:url({{ Image(page.meta('hero_image')).src }})"
></div>

Upvotes: 0

Frizzant
Frizzant

Reputation: 768

As for the ACF variables, you simply add this to your functions.php and you should be rocking it - someone correct me if i am wrong.

  class StarterSite extends Timber\Site {
        /** Add timber support. */
        public function __construct() {
            //maybe you already have this part in your functions file
            add_action( 'after_setup_theme', array( $this, 'theme_supports' ) );
            add_filter( 'timber_context', array( $this, 'add_to_context' ) );
            add_filter( 'get_twig', array( $this, 'add_to_twig' ) );
            add_action( 'init', array( $this, 'register_post_types' ) );
            add_action( 'init', array( $this, 'register_taxonomies' ) );
            parent::__construct();
        }

        public function add_to_context( $context ) {
            //left side: define how the variable is named to grab them in the TWIG files
            //right side: grabing the ACF variable-name
            $context['site'] = $this;
            $context['menu'] = new Timber\Menu("Main Menu");
            $context['something'] = new Timber\Menu("something_acf_name");
            $context['foo'] = new Timber\Menu("bar");
            $context['my_custom_button_name'] = new Timber\Menu("acf_custom_button_name");
            // Posts with the category name "featured" for the slideshow

            //
            return $context;
        }
    }

So let us assume we are in the index.twig file (or any other one, aslong as you have defined it in the functions.php file), you can just get your variable like this:

<div>
{{ foo }}
</div>

I hope this is what you were looking for. You could also just assign the variables within the index.php file for example, then they won't be globally (on every page) available. This might be good to keep your variable-mess under control. Really depends on what you are building.

Upvotes: 0

Related Questions