Sridhar Katakam

Genesis and WordPress Tutorials

Themes

  • Home
  • About
  • Archive
    • By Child Theme
  • Membership
    • FAQ
  • Forums
    • Members-only
      • Tutorial Requests
    • Paid Support
  • Contact
  • Login

Custom Page Template to show posts grouped by selected categories using ACF’s Taxonomy field in Genesis

March 16, 2018 by Sridhar Katakam 2 Comments Favorited: 0 times

Recently a user enquired:

Hi Sridhar,

I have a quick question for you (possible new project). I noticed that this site (drupal) https://www.switchbacktravel.com/outdoor-gear-reviews breaks its archive pages into section.
I wanted to know if something like that was possible in wordpress.

to which I replied:

Yes possible.

The easiest way would be to create a custom widget area, display it on a Page (using a Page Template) and drop several Genesis Featured Posts widgets with each widget showing posts from a specific category.

and he came back saying:

Thanks for getting back. I have a question from a management perspective. I will probably need 10+ of these type of pages so trying to manage the widgets areas from the Wordpress widget area could become cumbersome. Is there a way to have the widgets areas in the page editor? So when I edit the page using the custom templ to change the widgets. Hope that makes sense.

I wrote him:

In that case, the best way would be to use ACF to set up a custom category selector meta box in the Page editor and code the custom Page Template to output posts grouped by the selected categories.

This tutorial provides the steps to set up a Taxonomy custom field using Advanced Custom Fields Pro attached to Pages and when one or more categories is/are selected, a specific number of posts from the selected category/categories will be made to appear on the Page below the existing content using a custom Page Template in Genesis.

We shall use CSS Grid to arrange the posts in each group in a 3-column grid.

Step 1

Install and activate Advanced Custom Fields Pro.

Create a field group named say, "Page Meta" having a Category Selector taxonomy field.

Set the Taxonomy to category. Set Term Object as the return value.

Field group export file.

Step 2

Add the following in child theme's functions.php:

/**
 * Custom excerpt length.
 *
 * @link http://stackoverflow.com/a/17177847
 *
 * @param int $limit The number of words.
 */
function excerpt( $limit ) {
    return wp_trim_words( get_the_excerpt(), $limit );
}

Step 3

Create a file named say, template-category-groups.php in the child theme directory having the following:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

 
 
Forgot Password

Filed Under: Genesis, Premium Content Tagged With: ACF, ACF Pro, custom loop, Custom Query, Taxonomy Field

Recent Comments

  • Sridhar Katakam on BrowserSync in Laravel Valet
  • Bharti on How to add a new website in Google Analytics
  • Chuck Smith on BrowserSync in Laravel Valet
  • arunkumar on BrowserSync in Laravel Valet
  • Craig Simpson on BrowserSync in Laravel Valet
  • Sridhar Katakam on BrowserSync in Laravel Valet
  • arunkumar on BrowserSync in Laravel Valet
  • Vajrasar on BrowserSync in Laravel Valet
  • fatcatdesign on Multiple Rotating Background images with Ken Burns Effect in Altitude Pro
  • admin@heyitsfree.net on How to load Font Awesome 5 in WordPress

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new tutorials by email.

Join 1,042 other subscribers

Categories

Tags

ACF ACF Pro Agency Pro Altitude Pro Background Video Backstretch Centric Pro CPT CSS Grid Digital Pro dynamik equal heights featured image fixed Fixed header Flexbox font awesome footer footer widgets Genesis Sample grid header Infinity Pro Isotope jQuery lightbox Masonry Metro Pro minimum-pro Monochrome Pro Outreach Pro page template parallax Parallax Pro portfolio pre_get_posts responsive search Showcase Pro slider Soliloquy sticky Video Background widget area WooCommerce
Follow @srikat

Recent Posts

  • BrowserSync in Laravel Valet
  • How to dynamically load posts on click using Ajax in Genesis
  • Multiple Rotating Background images with Ken Burns Effect in Altitude Pro
  • Secondary logo on scroll in Business Pro
  • Site Title – Custom Menu – Primary Menu in Genesis
  • Rotating Background Images for Page Header section using Featured Galleries and Backstretch in Business Pro
  • Header Right widget area in Genesis Sample 2.6.0
  • Utility Bar in Genesis Sample
  • CSS Grid with Float Fallback
  • Font Awesome 5 SVG icons above menu items in Genesis

Find my tutorials helpful and wish to donate?

© 2018 · Genesis Sample Theme on Genesis Framework