Related posts. Query_posts in WordPress with ACF Advanced Custom Fields select taxonomy dropdown

This article was written by in October 4, 2013, & may not be posted on other sites!
Original source url for this article: Related posts. Query_posts in WordPress with ACF Advanced Custom Fields select taxonomy dropdown

How to get values and query_posts with WordPress Plugin ACF Advanced Custom Fields select taxonomy dropdown.
Code example below shows you how to use ACF – Advanced Custom Fields plugin, to add a taxonomy > select dropdown menu to each post. In your posts you can then select a specific tag or category and in the single.php query related posts by selected tag or category. This will work even if the post has multiple other categories or tags assigned to it through the default Category or Tags panels on the right when editing a post.

This tutorial shows you how to add ONE speceific dropdown, tag OR categories, to add TWO dropdowns for both tags and categories, read this post instead:
Advanced Custom Fields get field taxonomy. Query related posts by tag and category

 

Install the ACF – Advanced Custom Fields Plugin

  1. Go to Plugins > Add new and search for plugin “Advanced Custom Fields”.
  2. Click “install” to install the Advanced Custom Fields plugin, and then activate it.

 

Add a taxonomy > select dropdown (by tag or category) to every post with Advanced Custom Fields plugin

Related posts. Query_posts in WordPress with ACF Advanced Custom Fields select taxonomy dropdown

  1. Go to Custom fields > Custom fields.
  2. Add a new fieldgroup and name it, for example “Posts”.
  3. Under Location, Choose : Show this field group if > Post type > is equal to > post. This means that all the extra fields you add in this fieldgroup “Posts”, will show on all posts.
  4. Click +Add field – button to add the taxonomy > select dropdown.
  5. Fill in the fields as follows:
    Field label: The name of this field is seen as a small header above the field inside the post.
    Field name: This is the name called from within your template / single.php to get the selected value.
    Field type: select “Taxonomy”
    Field instructions: The text in this field is seen as a small helptext inside the post.
    Required? : Well, set this to “no” to begin with
    Taxonomy: Select “Categories” or “Tags” depending on how you want to query related posts, by tag or by category?
    Field type: set this to “Select” to get the dropdown menu.
    Allow Null? : Set this to “yes” to begin with, meaning that you will have the option “none” in the taxonomy dropdown in addition to all the categories or tags.
    Return value: Set this to “Term ID”, this will return the ID number of the tag or category.
  6. Save or update your new “select taxonomy dropdown menu” for all posts.
  7. This extra “select taxonomy dropdown menu” is now seen inside all posts. Simpy edit or add a new post, and select a tag/category value from your new taxonomy dropdown menu. If the dropdown is empty you need to add som categories or tags to your posts (since the dropdown is showing existing tags or categories). You can add as many categories or tags to a post as you wish in the default Tags / Categories panels to the right. This will not interfere with the dropdown functionality.

Query_posts in WordPress with ACF - Advanced Custom Fields select taxonomy dropdown

 

How to query_posts by selected Tag to create a “related posts” section on all single post pages.

Ok, we have everything set up by now. Create som posts with one or several different tags. Choose a tag from the new “Select Taxonomy Dropdown”. Save or update post.

In this example we are working with the single.php file to list related posts by tag only on single post pages. But you can add this functionality to any template or file in your theme. Always work with a custom or childtheme in WordPress! Ok here we go:

  1. Open your single.php file in a text editor or inside wordpress admin > Appearance > editor.
  2. Add a <div> or a wrapper to hold your “related posts” content and place it wherever you want inside the loop, meaning after <?php while ( have_posts() ) : the_post(); ?> but before <?php endwhile; // end of the loop. ?>
  3. All following code should go inside this <div> or wrapper.
  4. To put the ID number of your selected tag inside a variable, use code:
    $tagValue = get_field('special_tag');
    ‘special_tag’ must match the “Field name” you wrote in your field group.
  5. To query_posts from selected tag and print out related posts as links, use this complete code below. A new query like this is not interfering with the main loop. Just copy and paste this complete code somewhere inside the loop:
    <div id="related-posts">
    <h1>Related posts</h1>
    <?php

    $tagValue = get_field('special_tag');
    if($tagValue){ //check if a tag is selected in the post
    $args=array(
    'tag_id' => $tagValue,
    'posts_per_page'=>5, // Number of related posts to display
    'orderby'=>'rand' //query random posts
    );
    $my_query = new wp_query( $args );
    while( $my_query->have_posts() ) {
    $my_query->the_post();
    ?>
    <div class="related-post-link">
    <a href="<? the_permalink()?>">
    <?php the_title(); ?>
    </a>
    </div>
    <?php
    }
    wp_reset_query();
    }else{ //if no tag is selected
    echo("no Tag is selected in the Taxonomy Dropdown menu");
    }
    ?>
    </div>

 

How to query_posts by selected Category to create a “related posts” section on all single post pages.

Ok, we have everything set up by now. Create some posts with one or several different categories. Choose one category from the new “Select Taxonomy Dropdown”. Save or update post.

In this example we are working with the single.php file to list related posts by category only on single post pages. But you can add this functionality to any template or file in your theme. Always work with a custom or childtheme in WordPress! Ok here we go:

  1. Open your single.php file in a text editor or inside wordpress admin > Appearance > editor.
  2. Add a <div> or a wrapper to hold your “related posts” content and place it wherever you want inside the loop, meaning after <?php while ( have_posts() ) : the_post(); ?> but before <?php endwhile; // end of the loop. ?>
  3. All following code should go inside this <div> or wrapper.
  4. To put the ID number of your selected category inside a variable, use code:
    $categoryValue = get_field('special_category');
    ‘special_category’ must match  the “Field name” you wrote in your field group.
  5. To query_posts from selected category and print out related posts as links, use this complete code below. A new query like this is not interfering with the main loop. Just copy and paste this complete code somewhere inside the loop:
    <div id="related-posts">
    <h1>Related posts</h1>
    <?php
    $categoryValue = get_field('special_category');
    if($categoryValue){ //check if a category is selected in the post
    $args=array(
    'cat' => $categoryValue,
    'posts_per_page'=>5, // Number of related posts to display
    'orderby'=>'rand' //query random posts
    );
    $my_query = new wp_query( $args );
    while( $my_query->have_posts() ) {
    $my_query->the_post();
    ?>
    <div class="related-post-link">
    <a rel="external" href="<? the_permalink()?>">
    <?php the_title(); ?>
    </a>
    </div>
    <?php
    }
    wp_reset_query();
    }else{ //if no category is selected
    echo("no Category selected in the Taxonomy Dropdown menu");
    }
    ?>
    </div>

 

How to Show related posts with a thumbnail + title

You can show the related posts as you wish using WordPress codex, by post titles, excerpt or images. To show the related posts with a thumbnail image and the post title, simply change this code:
<div class="related-post-link">
<a href="<? the_permalink()?>">
<?php the_title(); ?>
</a>
</div>

And replace it with this code instead:
<div class="related-post-link>
<a href="<? the_permalink()?>">
<?php the_title(); ?><br />
<?php the_post_thumbnail('thumbnail'); ?>
</a>
</div>

Spread the word

Facebooktwittergoogle_pluslinkedinmail

2 thoughts on “Related posts. Query_posts in WordPress with ACF Advanced Custom Fields select taxonomy dropdown

Leave a Reply

Your email address will not be published. Required fields are marked *