WordPress The Loop Issue

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):

This is the loop:

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

1 Like

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. :wink:

2 Likes

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’.

3 Likes

I didn’t konw it! Thank you! :sweat_smile:

1 Like

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.

1 Like

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.

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… #!*%

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 :wink:

Just let me know if I can help!

Michaël Martens
24 Degrees

24@24degrees.be mailto:24@24degrees.be
www.24degrees.be http://www.24degrees.be/
016 41 43 12

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 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. :wink:

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.

There’s some great stuff in this thread!

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