[Geschlossen] How to group posts by category

[Author]

Artikel

[Adriano]

How to posts by category

Views lets you to create a list of posts, also a list of taxonomies. So you could insert any Views shortcode as you want inside of the loop, including the one to show the taxonomy of the current post. But, how to group displayed posts by its taxonomy?

We had a lot of questions in our forum about how to design this format. So, I wanted to write this tutorial to help any other user about how to accomplish it, step by step. Hope you enjoy it.

What should we do to achieve that?

It will be needed two views for this:

1. One to list all taxonomies
2. A second one to list all posts inside of each taxonoy

How should I configure my site to follow this tutorial?

See below everything that will be needed for this:

1. Views in latest version
2. WordPress 3.9.1 (I will use native Views functions, so it should works fine in any other WordPress version 3. above of 3.9.1, but it is the one I’m using right now)

I will use default Categories and Posts on this tutorial. So you don’t need to create anything else until now.

1. Creating Posts list

Let’s go to create the list of posts that will be grouped by each category.

1. Create a new View and choose “Display all results?? option, let’s call this View as “Posts List??. Now let’s fill some options in the View edit page.
2. In “Content selection?? choose “Posts?? radio button, also “Posts?? checkbox, then hit Update button
3. Scroll down to “Query filter?? then add a new filter
4. Choose the Taxonomy filter by Categories
5. Choose “Value set by shortcode attribute??
6. Let “Taxonomy name?? selected
7. Insert “wpvcategory?? in the Shortcode attribute field
8. Then hit Save button
9. Scroll down to “Layout HTML/CSS/JS?? section. The code there should be:

[wpv-layout-start]
[wpv-items-found]
<ul>
<wpv-loop>
<li>[wpv-post-link]</li>
</wpv-loop>
</ul>
[/wpv-items-found]
[wpv-layout-end]

Well, this View is done. Next step is to create the list of categories.

2. Creating Taxonomies list

Let’s go to create the first view you will need, it is the list of Categories.

1. Create a new View and choose “Display all results?? option, let’s call this View as “Categories List??. Now let’s fill some options in the Views edit page.
2. In Content selection choose “Taxonomy?? radio button, then choose “Categories??.
3. Scroll down to “Layout HTML/CSS/JS?? section. Insert the code below there:

[wpv-layout-start]
[wpv-items-found]
<wpv-loop>
<h3>[wpv-taxonomy-link]</h3>
[wpv-view name="posts-list" wpvcategory="[wpv-taxonomy-title]"]
</wpv-loop>
[/wpv-items-found]
[wpv-layout-end]

3. Creating a Page to show the result

We are almost there, everything is done already, we just need to display the result of it. Create a new page, then insert this: [wpv-view name="Categories List"]

Of course you could customize this layout as you want, I have just used

, <h3> and
• as example, you could open both views and edit them as you want.

  If you have some comments, suggestions or fixes about this tutorial, please let a comment.