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.
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.
Hi Sridhar, great tutorial! Thanks.
Is it possible to order the categories? Now the newest is on top, I guess. I would like to choose which is first.
Kind regards.
Hi Kitty,
I updated the tutorial and added an Addendum at the bottom. Follow that.
Hi Sridhar, I am using Enterprise Pro and this is not working for me. The archive page displays the code. Here is the page: https://www.staging.childrensresourcegroup.com/resource-page/.
Does that Page appear fine when you do not apply the Template?
Yes, it looks like a blank regular page in the default mode. Any thoughts on why it wouldn’t display properly in the category_groups template?
https://www.staging.childrensresourcegroup.com/resource-page/
One other thing, my CSS does not like the use of fr unit, like in the CSS you provided above. It says its an error and may break the site. Is there something special you have to do to get the site to recognize it as common CSS?
Thank you!!
Will need to log in and take a look. Can you send me your WP and FTP/cPanel logins via https://sridharkatakam.com/contact?
The code editor used by WordPress is not up to date to support the modern CSS properties like CSS Grid (fr etc.). You can safely ignore those errors.
Yes, I just submitted them. Let me know if you need anything else.
Thank you!!
<
in the opening PHP tag was missing.I added it and https://www.staging.childrensresourcegroup.com/resource-page/ appears fine now.