Using ACF Pro to create Posts Grid

• atef_wagih

• September 10, 2016 at 2:53 am

Hi,

I am trying to find a way to create grids of posts using ACF Pro.

Ideally I’d want to specify some taxonomy in ACF fields, then ACF can query the posts that fulfill the criteria, then returns them in a Grid format.

Say I have 5 posts that are in “cars” category, and 12 posts that have “sedan” tag.

So if i create a post and fill in the “cars” and “sedan”, then the resultant is a post containing a grid of the posts that are from the “Cars” category, and have “sedan” as a tag.

Then I can style the output to look modern.

I have a plugin that does this called “Essential Grid”, but it is a very heavy plugin that loads a lot of javascript for options that I don’t use.

Any Idea how I can setup this?

Thanks in advance

• John Huebner

• September 10, 2016 at 9:17 am

You can create the relationship, but ACF will not do the work of returning the posts for you. For example, you can create a taxonomy field to select the category then use the value of the field to do a query to get the posts. Then you can use the results of that query to build your “Grid”

You might also use a relationship field, this would allow you to select the specific posts that you want displayed rather than a category and this would return a list of posts and then you could use this list to build the grid.

ACF does not provide any “Front End” functionality except for the ability to get the values of the fields that are saved.

• atef_wagih

• September 10, 2016 at 4:04 pm

Hi John,

Thank you very much for your reply.

Sorry if my question was not clear enough.

I am not after a “front end” functionality.

I am trying to use the “advanced example in this tutorial but in a different way:

https://www.advancedcustomfields.com/resources/query-posts-custom-fields/

In this example, the function searches for posts that have custom fields populated with “red” and “orange”, and returns an array of them.

This will be fine for a small scale, but i am trying to replace more that 400 grids. this means 400 function like this.

I already achieved putting 2 multi select taxonomy ACFs. one for categories and one for tags.

What I am trying to to is to alter the function in the tutorial to say:

– inspect the taxonomy IDs in the 2 fields of the post i am editing
– query the database based on these taxonomy IDs
– return an array.

That way, i have only one function, and change the values per post, and get the corresponding array.

then we worry about how to show them as a grid.

Please advise if you need more information.

Very much appreciated.

• John Huebner

• September 10, 2016 at 11:20 pm

You’re right, I misunderstood.

You need to get the values of the fields and then add a tax query when queying posts. Since you are looking at possibly multiple taxonomies then it will be a little complicated.

Set your fields to return term ID

The basic code would look something like this

$categories = get_field('my_category_field');
// make sure it is an array, if only one is
// selected it may return a single value
if (!is_array($categories)) {
  $categories = array($categories);
}
$tags = get_field('my_tags_field');
if (!is_array($tags)) {
  $categories = array($tags);
}
$args = array(
  'post_type' => 'post',
  'posts_per_page' => -1,
  'tax_query' => array(
    'relation' => 'OR',
    array(
      'taxonomy' => 'category',
      'terms' => $categories
    ),
    array(
      'taxonomy' => 'post_tag',
      'terms' => $tags
    )
  )
);
$query = new WP_Query($args);

For more information on tax_query see https://codex.wordpress.org/Class_Reference/WP_Query#Taxonomy_Parameters

• atef_wagih

• September 11, 2016 at 5:37 am

Hi John,

Thank you very much for the code.

Please accept my apology if my question is novice, as this is my first trial with ACF PRo.

I have modified the code to contain the field names and wrapped it in php and put it in a page template where I want to show the grid, but when i refresh the page I get a blank screen.

Do I need to add more code than the php wrap to get it to work?

I have done the test of adding a simple the_field function to test that the template is able to read ACF.
When I did so, the page returned the id number of the category and tag that i specified, so it is able to read ACF.

I appreciate your help.

Thanks

• John Huebner

• September 11, 2016 at 10:17 am

That white screen means there is probably a syntax error in your code. When working on PHP code you should enable wp debugging https://codex.wordpress.org/WP_DEBUG

Also I notices that there is an error in what I posted

<?php

$categories = get_field('my_category_field');
// make sure it is an array, if only one is
// selected it may return a single value
if (!is_array($categories)) {
  $categories = array($categories);
}
$tags = get_field('my_tags_field');
if (!is_array($tags)) {
  $tags = array($tags);
}
$args = array(
  'post_type' => 'post',
  'posts_per_page' => -1,
  'tax_query' => array(
    'relation' => 'OR',
    array(
      'taxonomy' => 'category',
      'terms' => $categories
    ),
    array(
      'taxonomy' => 'post_tag',
      'terms' => $tags
    )
  )
);
$query = new WP_Query($args);

// loop reuslts here to display posts

?>