How to use custom post types with Timber for WordPress

I am trying to use a Custom Post Type with Timber that I have created. I have created a custom post type using the CPT UI plugin. I have assigned the fields I want to this custom post type using ACF Pro. The trouble I am having is rendering this custom post type onto the page using Timber.

functions.php file:

function add_to_context( $context ) {
        $context['foo'] = 'bar';
        $context['stuff'] = 'I am a value set in your functions.php file';
        $context['notes'] = 'These values are available everytime you call Timber::get_context();';
        $context['menu'] = new TimberMenu();
        $context['site'] = $this;
        // Social Media Links CPT (Main)
        $context['social_media_links__main'] = Timber::get_posts('post_type=social_media_link');
        return $context;
    }

On my page if I do:

{{dump(social_media_links__main)}}

I will get this:

class Timber\Post#1092 (58) {
    public $ImageClass =>
    string(12) "Timber\Image"
    public $PostClass =>
    string(11) "Timber\Post"
    public $TermClass =>
    string(11) "Timber\Term"
    public $object_type =>
    string(4) "post"
    public $custom =>
    array(20) {
      '_edit_last' =>
      string(1) "1"
      'social_media_links_0_social_media_url' =>
      string(7) "youtube"
      '_social_media_links_0_social_media_url' =>
      string(19) "field_5a8ad0ba8f0db"
      'social_media_links_0_social_media_icon' =>
      string(14) "fab fa-youtube"
      '_social_media_links_0_social_media_icon' =>
      string(19) "field_5a8ad0d68f0dc"
      'social_media_links' =>
      string(1) "4"
      '_social_media_links' =>
      string(19) "field_5a8ad08b8f0da"
      '_edit_lock' =>
      string(12) "1519061667:1"
      'social_media_links_1_social_media_url' =>
      string(7) "twitter"
      '_social_media_links_1_social_media_url' =>
      string(19) "field_5a8ad0ba8f0db"
      'social_media_links_1_social_media_icon' =>
      string(14) "fab fa-twitter"
      '_social_media_links_1_social_media_icon' =>
      string(19) "field_5a8ad0d68f0dc"
      'social_media_links_2_social_media_url' =>
      string(8) "linkedin"
      '_social_media_links_2_social_media_url' =>
      string(19) "field_5a8ad0ba8f0db"
      'social_media_links_2_social_media_icon' =>
      string(18) "fab fa-linkedin-in"
      '_social_media_links_2_social_media_icon' =>
      string(19) "field_5a8ad0d68f0dc"
      'social_media_links_3_social_media_url' =>
      string(8) "facebook"
      '_social_media_links_3_social_media_url' =>
      string(19) "field_5a8ad0ba8f0db"
      'social_media_links_3_social_media_icon' =>
      string(17) "fab fa-facebook-f"
      '_social_media_links_3_social_media_icon' =>
      string(19) "field_5a8ad0d68f0dc"
    }

I can see the content I need, however I cannot figure out the correct syntax to loop through and retrieve the data I need. I am using a repeater field in ACF and the fields I need are called social_media_url & social_media_icon.

Thank you for the help in advance, I greatly appreciate it.

Cheers, Robert

Solution

Did you already have a look at the ACF Guide in the official documentation?

If you’re getting your posts through $context['social_media_links__main'] = Timber::get_posts('post_type=social_media_link');, then you will have an array of posts that you need to loop through. And for each post, you’ll loop through the repeater fields. I guess this might work for you:

Twig

{% for post in social_media_links__main %}
    {% for link in post.meta('social_media_links') %}
        <a href="{{ link.social_media_url }}">
            <span class="{{ link.social_media_icon }}"></span>
        </a>
    {% endfor %}
{% endfor %}

But, do I understand it right that you only have one post for your custom post type and inside that post you have defined repeater fields for your links to social media profiles? If it’s really only one post that you’re using, an ACF Options Page might be more suitable for what you want to achieve.