Relationship Field
Using Advanced Custom Fields and Ajax Load More to display featured posts
In this example:
Ajax Load More will load a featured set of posts using the Relationship field for Advanced Custom Fields and the ACF extension.
The Relationship field for Advanced Custom Fields allows you to select from pages, posts and custom post types to build an array of related content – Ajax Load More is used to loop over related item and display the results with infinite scrolling.
NOTE: When using the Relationship field remember to set orderby=”post__in” in your shortcode and select Post ID as the return type when creating your field in ACF – see this screenshot.
-
Ajax Load More Post Example
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare...
-
Donec id elit non mi porta gravida eget metus
Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus...
The following shortcode was used to create the Relationship Field example.
[ajax_load_more preloaded="true" preloaded_amount="2" post_type="ajax_more" posts_per_page="4" orderby="post__in" acf="true" acf_field_type="relationship" acf_field_name="alm_featured_posts"]
Note: In this example, alm_featured_posts is the name of the Relationship ACF Field Group. Ajax Load More will loop over each post item in this Relationship Content field to build the infinite scroll listing.
The following Repeater Template was used to create the Relationship Field example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<li class="alm-layout alm-2-col <?php alm_is_odd($alm_current); ?> alm-cta"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ) { ?> <?php the_post_thumbnail('alm-cta'); ?> <?php }?> <div class="details"> <h3><?php the_title(); ?></h3> <p class="entry-meta"> <?php the_time("F d, Y"); ?> </p> <?php alm_get_excerpt(24); ?> </div> </a> </li> |