# WordPress The Loop Issue

**URL:** <https://forum.pinegrow.com/t/wordpress-the-loop-issue/427>\
**Category:** WordPress\
**Tags:** custom-wp-query\
**Created:** [November 28, 2016, 12:23pm UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427 "2016-11-28T12:23:40Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![24degrees](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/24degrees/32/136_2.png) [@24degrees](https://forum.pinegrow.com/u/24degrees)\
**Post date:** [November 28, 2016, 12:23pm UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/1 "2016-11-28T12:23:40Z")

</div>

Hi there,

I’m a bit confused with the loop here. I have a page, called single-services.php, which shows, of course, 3 services. The whole idea is the following:

1 service will be big 100% width and is the current post selected, the 2 remaining will be displayed under it, bot 50% width.

# ========= ====1====

# ==2===3==

The html code is Bootstrap, and looks like follows:  
Row  
- col-md-12: The Big Post (1)  
- col-md-6: First Small Post (2)  
- col-md-6: Second Small Post (3)

The problem is that the layout above now is repeated for each post (1, 2 and 3):

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/ee075fb3a9f6b9d7759e502bbe44a0d8811f8885.png)

This is the loop:  
 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/c2a3ae42aa9d3cfd71fbf2fee31c382d823ec562.png)

Anyone knows how to fix this? I already tried with ‘the loop item’, ‘Add to the loop’ but it isn’t working ☹

---

<div class="post-metadata">

**Author:** ![Cheope](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cheope/32/340_2.png) [@Cheope](https://forum.pinegrow.com/u/Cheope)\
**Post date:** [January 10, 2017, 12:07am UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/2 "2017-01-10T00:07:22Z")

</div>

I had a similar problem: I had to show the first post bigger than others like many news sites do. In the Loop action pane, there is a property called “Classes for the first item”.  
Uh… don’t forget the column element inside the row, right? You’re using Bootstrap as far I can see. 😉

---

<div class="post-metadata">

**Author:** ![24degrees](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/24degrees/32/136_2.png) [@24degrees](https://forum.pinegrow.com/u/24degrees)\
**Post date:** [January 10, 2017, 7:35am UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/3 "2017-01-10T07:35:03Z")

</div>

Hi @Cheope,

I also discovered that you can create a simple loop for the first object. Then, create a second loop for the rest of the items and check ‘continue previous loop’.

---

<div class="post-metadata">

**Author:** ![Cheope](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cheope/32/340_2.png) [@Cheope](https://forum.pinegrow.com/u/Cheope)\
**Post date:** [January 10, 2017, 9:14am UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/4 "2017-01-10T09:14:36Z")

</div>

I didn’t konw it! Thank you! 😅

---

<div class="post-metadata">

**Author:** ![dakiriki](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dakiriki/32/324_2.png) [@dakiriki](https://forum.pinegrow.com/u/dakiriki)\
**Post date:** [January 11, 2017, 5:07pm UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/5 "2017-01-11T17:07:39Z")

</div>

You should avoid making multiple loops when you can, especially for just one post.  
You can set a counter in php, and when counter is 1 to show different column size, that is very simple to do.

---

<div class="post-metadata">

**Author:** ![24degrees](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/24degrees/32/136_2.png) [@24degrees](https://forum.pinegrow.com/u/24degrees)\
**Post date:** [July 23, 2017, 9:38am UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/6 "2017-07-23T09:38:02Z")

</div>

Hi @Cheope, after all the research and looking at examples, I’m still not sure what’s the correct way of doing this. Using the “add class to first element” sounds interesting, but with bootstrap columns you’ll end up having a double definition of col-md-xx, being numbers 4 and 12 in my case.

---

<div class="post-metadata">

**Author:** ![Cheope](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cheope/32/340_2.png) [@Cheope](https://forum.pinegrow.com/u/Cheope)\
**Post date:** [July 24, 2017, 1:05am UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/7 "2017-07-24T01:05:54Z")

</div>

Not sure to have understood your problem. You should put the loop just in the first element and set the others you see as “placeholders”. I don’t remember how this functionality is called, but it allows you to set them as parts of your WYSIWYG but won’t be rendered in the final WP template.  
I’m on the brand new PG4 and I’m not able event to start a new WP project… #!\*%

---

<div class="post-metadata">

**Author:** ![24degrees](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/24degrees/32/136_2.png) [@24degrees](https://forum.pinegrow.com/u/24degrees)\
**Post date:** [July 24, 2017, 7:51am UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/8 "2017-07-24T07:51:47Z")

</div>

Hi Christina,

Well, my problem with “add to the first class” is all about a single.php page where you show the “active” custom post type (permalink) in big (col-md-12), and all the other custom post types a bit smaller (col-md-4).

But let’s put my problem aside and focus on yours: why can’t you install PG 3? Can I help you with that? I’m quite an active tester of PG3 and you should have it, it’s way better than version 2 😉

Just let me know if I can help!

Michaël Martens  
24 Degrees

24@24degrees.be [mailto:24@24degrees.be](mailto:24@24degrees.be)  
www.24degrees.be [http://www.24degrees.be/](http://www.24degrees.be/)  
016 41 43 12

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/15b716f3d3dc1740dc30050eb2249686c6752f81.jpg)

---

<div class="post-metadata">

**Author:** ![Cheope](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cheope/32/340_2.png) [@Cheope](https://forum.pinegrow.com/u/Cheope)\
**Post date:** [July 24, 2017, 9:20am UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/9 "2017-07-24T09:20:17Z")

</div>

Sorry, I wrote PG4 but I meant PG3 and I have both on my computer.  
Found! It’s called “dont’ export”. In the [loop video](http://www.youtube.com/watch?v=jn9ElHylb74&t=0m47s) at 0:46 they say:

> The first article element will define the structure of all posts. We don’t need the other articles elements so add “Don’t Export” action from the Misc section to each of them

But if you have different post types, probably It’s all about WP, not about PG I think. 😉

As dakiriki said, the best solution is to simply add a counter in your code to switch your column classes.  
Or you can do two different queries (loops): the first (the standard single.php loop) where you select the current post, the second where you select all the posts but the current one.

---

<div class="post-metadata">

**Author:** ![texxsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/texxsmith/32/1201_2.png) [@texxsmith](https://forum.pinegrow.com/u/texxsmith)\
**Post date:** [June 15, 2018, 2:53pm UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/10 "2018-06-15T14:53:56Z")

</div>

There’s some great stuff in this thread!

---

<div class="post-metadata">

**Author:** ![Gauravk](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@Gauravk](https://forum.pinegrow.com/u/Gauravk)\
**Post date:** [April 4, 2020, 10:50am UTC](https://forum.pinegrow.com/t/wordpress-the-loop-issue/427/11 "2020-04-04T10:50:13Z")

</div>

But there’s no answer to the question… I’m also looking for the answer. How do you override the col-md4 class?
