[Resolved] Creating Simple Loop for Type (Custom) Post Listings Archive

[Author]

Posts

[ryanE-5]

I'm trying to create a simple view that displays archives/listings of a custom post type I've created. I'm having issues with the default loop returned when I try to set using the loop editor and I'm generally confused about "pad" "index" "wrap" etc. and how they impact the loop layout even after reading docs and examples. What I'm trying to achieve is a simple layout as follows:

One post displayed per row. Each row has a left-hand column with some information pulled from the post's content and custom fields, and the right-hand column will be used to add some buttons. So, something like:

<div class="row">
<div class="col-sm-6">post content goes here</div>
<div class="col-sm-6">buttons will go here</div>
<div>

My issue is I can't figure out what to change in the default structure the loop editor gives me. I've worked off an example similar to this: https://toolset.com/forums/topic/wordpress-archive-for-cpt-is-showing-last-entry-twice/ and tried changing to a one row with two columns but not sure how this should look. Other examples I found are similar, and I'm not sure what I need to change to get the desired layout. I have something like this:

<!-- wpv-loop-start -->
<div class="container-fluid wpv-loop js-wpv-loop">
<wpv-loop wrap="1" pad="true">
[wpv-item index=1]
<div class="row">
<div class="col-sm-6">[wpv-post-body view_template="Loop item in Listings Archive"]</div><div class="col-sm-6">CLICK HERE</div>
[wpv-item index=other]
<div></div></div>
[wpv-item index=pad]
<div class="row"></div>
[wpv-item index=pad-last]
<div class="row"></div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->

So, continuing on my first problem, the layout is not as expected. It's treating the entire listings as one row, and not separating the individual posts as rows. The post and button are starting in the right-hand column, with the button being pushed to a new row on the left-hand column.

The content and custom fields are showing and the button is showing, but the layout is off. Can you advise the correct loop code to use to fix this?

Thanks!

[ryanE-5]

I was able to use a clear element to get each item on one row, but the rows are nested within one another which I didn't expect. See screenshots illustrating this. I'm guessing because they are nested and each has a new parent element this has something to do with them each floating wider outside the main container element (very first <div class="row">) further to the left, as you can see in the screenshot. I'd like each row to fit in this main container the same way the first row does, so that they are all aligned.

[Beda]

Have you seen these DOC's?
https://toolset.com/documentation/user-guides/digging-into-view-outputs/#vmeta-wpv-loop-parameters
https://toolset.com/documentation/user-guides/view-layouts-101/
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-154381
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-154400

Seen from what you want to do in the ScreenShot the easiest for you should be to click on the Loop Wizard Button and choose a one column grid, and insert your fields.
Or even, just wrap your Fields in the required HTML manually as it seems you do want each post with fields in a new row.
That can be done by simply using a HTML row (if you use bootstrap) syntax.

Or, as suggested, use the Loop Wizard.

That should solve these issues.

[ryanE-5]

Yes, I've looked at the docs. I agree this should be easy, but the wizard wasn't being too helpful, let me explain what I mean. Taking your advice, in the loop editor I chose bootstrap grid with 1 column, checked add container, and selected "Compact HTML structure". Attached is a screenshot of the output the wizard generated. It doesn't contain the full snippet, as you can see, so for example the wrapping shortcodes for layout-start and items-found etc weren't added, and an extra div was added it looks like (highlighted in red in the screenshot toward the bottom) so it didn't even give me working code. So I deleted the extra div, and then attempted to wrap it with the necessary shortcodes/full snippet from examples, giving me this:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="1" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-12">
[wpv-post-title]
[types field="insurance"][/types]
[types field="sales-portal"][/types]
[types field="commission"][/types]
[types field="pay-cycle"][/types]
[wpv-post-taxonomy type="specialty"]
[wpv-post-taxonomy type="ancillary-type"]
</div>
</div>
[wpv-item index=other]
<div class="col-sm-12">
[wpv-post-title]
[types field="insurance"][/types]
[types field="sales-portal"][/types]
[types field="commission"][/types]
[types field="pay-cycle"][/types]
[wpv-post-taxonomy type="specialty"]
[wpv-post-taxonomy type="ancillary-type"]
</div>
[wpv-item index=pad]
<div class="col-sm-12"></div>
[wpv-item index=pad-last]
<div class="col-sm-12"></div>
</wpv-loop>
</div>

<!-- wpv-loop-end -->
[/wpv-items-found]

[wpv-no-items-found]
[wpml-string context="wpv-views"]No ancillaries were returned. Try another search or filter by all types and all specialties to find more ancillaries.[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

This is solving the issue and the rows are now aligned vertically and all fitting within the container. Eventually got there, I guess I just ended up tinkering with things unsuccessfully for a bit and understanding the structure wasn't quite intuitive at first. Just figured I'd explain a bit more so you understood where I was coming from, maybe I didn't follow the way the loop editor was supposed to work. But wasn't as simple as putting 1 row in the loop editor for me and letting it spit out the code. Was also hoping you might be able to simply direct me to the correct/fixed code, per above 🙂 or point to where in my original code I went wrong so I could see/understand what was happening . The loop editor just wasn't giving me the full output required and so I had to get there a different way...

[ryanE-5]

The layout I used previously does not appear to be working any longer. I'm seeing duplicate content in some sections but not others. The list items (posts from custom post type I created) are all the same and have the same fields. This has become pretty frustrating and I've followed the docs to try to fix, but to no avail. If you can provide a simple template for what I'm looking for that would be greatly appreciated:

1. I'd like to use Bootstrap to create and style my grid
2. Loop should display 1 row for each custom post type as follows for each item in the loop:
<row>
<div col-sm-6>whatever content from the post, custom fields etc. (easy to add in the loop editor)</div>
<div col-sm-3>some content</div>
<div col-sm-3>some content</div>
</row>

If there is an easy working example of this I can fill in the content. This is very simple html I'm trying to output but something within all the loop shortcode, closing/ending tags it must be causing an issue. I've followed the docs examples to no avail. If you can provide me the code for this simple example, it would be greatly appreciated.

[ryanE-5]

I have the following which seems to be producing the loop successfully, however for some reason certain fields are appearing twice. In the list of <span>s containing various fields, this section appears twice, but only in some posts and not others. There is no rhyme or reason to why this would happen, just that the fields are listed twice in a row for some posts. Any idea why this is happening?

<wpv-loop>
<div class="row post-listings-container">
<div class="col-sm-6 post-listing-content">
<h3 class="h-custom-headline man h3 ancillary-search-listing-h3">[wpv-post-title]</h3>
<div class="x-text ancillary-search-listing-text">
[wpv-post-body]
<span>Insurance: [types field="insurance"][/types]</span><br>
<span>Sales Portal: [types field="sales-portal"][/types]</span><br>
<span>Commission: [types field="commission"][/types]</span><br>
<span>Pay Cycle: [types field="pay-cycle"][/types]</span><br>
<span>States Excluded: [types field="states-excluded"][/types]</span><br>
<span>Specialties: [wpv-post-taxonomy type="specialty"]</span><br>
<span>Categories: [wpv-post-taxonomy type="ancillary-type"]</span>
</div>
</div>

<div class="col-sm-3 post-listing-cta ancillary-listings-columns align-middle">content here</div>

<div class="col-sm-3 post-listing-cta ancillary-listings-columns align-middle">content here</div>
</div>

</wpv-loop>

[Beda]

I suggest to file a new ticket with this, as there have been updates, and the issue probably changed

This ticket is resolved and Shane is assigned to it, I don't think he will reply here.

Please open a new ticket, then we can handle it