Hello.
I'd like to output taxonomy related posts on my sidebar (Travels is the taxonomy designation).
I want to display 6 or 8 posts in a two column layout (as the mockup attached) with just the fields below:
- Featured Image
- Post url and title
What's the best way to do this? Is it with views? And how do I set it up to make it two column in wide screens and just one column in mobile devices?
Many thanks.
Hello, yes you will create a View to display a grid of posts like this in the sidebar. There is a WP Views widget you can drag into the sidebar builder in Appearance > Sidebars, then select the View you want to display.
First you must create the View. The process depends on whether you are using the new Blocks editor or the legacy classic Views editor. In the Blocks experience, you would first create a new Content Template and leave it unassigned. Then edit that template with the Block Editor and drag a View block into the design. Create a new View in the View block, and configure it to display a grid in the loop. You can use the responsive features at the top of the editor to configure different column counts at different screen sizes. You can display the featured image by inserting a Toolset Image block, and you can display a link to the post using the Single Field block.
Then you must add a Query Filter to display only Travels posts. Use the Block Navigation menu at the top of the screen to select the top-level View block. Then you can find Query Filter settings in the right column of configurations for the View block. Add a taxonomy filter and select your Travel taxonomy.
If you're using the classic View experience, you would create a new View in Toolset > Views. Use the Loop Wizard to design a grid, and insert your Featured Image and Post title with link or URL in the loop wizard. Add a Query Filter to filter by taxonomy, and select your Travels taxonomy in the filter configurations. If you cannot see the Query Filter panel, scroll to the top right corner of the screen and click to open the "Screen Options" tab. You can enable the Query Filter panel here.
Once you have created the View, you can add it to your sidebar using the WP Views widget. Let me know if you have questions about either process and I can give you more guidance.
Hi Christian,
Thanks for your help.
I'm using the classic views. So, I've got the view to display, but I've also got some problems:
1 - I've chosen to display 6 posts, but it displays 12 (I suspect this is related to point 3 below)
2 - Using the query I've chosen NOT to display items from a particular category and it still does
3 - Column A and Column B are showing the same item across every row
Many thanks.
This is the code I've got in the loop
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="1" pad="true">
[wpv-item index=1]
<div class="row">
<div class="col-sm-1 col-md-6">[wpv-post-body view_template="Loop item in Related Posts sidebar"]</div>
<div class="col-sm-1 col-md-6">[wpv-post-body view_template="Loop item in Related Posts sidebar"]</div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"][/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Hello, a few tweaks to the loop code should fix your comments #1 and #3:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="2" pad="true">
[wpv-item index=1]
<div class="row">
<div class="col-sm-12 col-md-6">[wpv-post-body view_template="Loop item in Related Posts sidebar"]</div>
[wpv-item index=2]
<div class="col-sm-12 col-md-6">[wpv-post-body view_template="Loop item in Related Posts sidebar"]</div>
</div>
[wpv-item index=pad-last]
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"][/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
For comment #2, please open all the Query Filters applied to the View so that the configurations are visible, and take a screenshot of the filters. Please include that in your next reply and I will take a closer look.
Hi Christian,
Thanks for that!! I think the other issue is now solved and it's working fine.
Related to this. How do I make the widget title dynamic, so it matches the taxonomy? For example, if I'm reading a post about Iceland, the widget title would be something like: Travel to: Iceland (this bit would be created dynamically).
How do I make the widget titles display the last children of a post taxonomy? Is it with the views the same way?
Travel to: [taxonomy term will go in there dynamically ]
Not sure if this belongs to the this thread, if not I can open a new one.
Thanks.
The title area for a WP Views widget is not capable of displaying shortcodes, so there isn't an easy way to make that dynamic. The simplest way is to recreate the widget title inside the View itself, and use Views and Types shortcodes to display dynamic information. To display information about the terms associated with the post being displayed, you can use the wpv-post-taxonomy shortcode. Place it in the View somewhere outside the loop tags so it's not repeated for each post in the grid. Documentation for the wpv-post-taxonomy shortcode:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-taxonomy
If you'd like more information about using this shortcode, feel free to create a ticket to discuss in more detail. Thanks!
Thanks Christian!
It's resolved then. I'll open another thread for another issue.
