Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

A Simple Toolset (Views) Grid Loop without Bootstrap

I use Toolset all the time.  One thing that constantly annoys me is when I need to create a simple grid loop.  For some reason, Toolset loves to stick with tables as a grid format, unless you’re using Bootstrap.  Well, I don’t want to use Bootstrap. I use Genesis.

So here’s a simple way to get your grid loop working with Genesis and any other theme for that matter.

What Views Gives You

When you go into views, and you’re getting ready to create a loop, you get the options of “Unformatted, List, Table Grid, Bootstrap Grid, etc.”  Bootstrap grid, however, is blocked out because it knows that you’re not using Bootstrap.  You’re damn right I’m not! (I like bootstrap, but I use Genesis)

So when you select the table grid, here’s the mess that Views gives you.

Gross right.

Let’s fix it and use the classes that are already included in the Genesis Framework.

Yay!! Now it’s clean. Here’s a quick explanation of how this grid works.

How The Grid in Views Works

The first part of the grid looks like this:
[wpv-item index=1]
That means that it’s the first cell or the first place in your grid. So if you’re doing a grid with 3 columns, this indicates that it’s the first placement of your grid.

The second key factor in this setup is
[wpv-item index=other]

This is equal to all the in-betweens in your grid set up. So if you have 5 columns, 10 columns, or 3, the index=other is everything in between the first and last column.

Next, you have
[wpv-item index=3]

The three in this fancy little shortcode is the last column. You can make it whatever number you want, but keep in mind that this will be the last column in the grid.

I’m going to group the next two gems together. They are:
[wpv-item index=pad]
[wpv-item index=pad-last]

This little gem is the filler for when your grid ends. If you have a grid with three columns, but you only have 7 items. That’s going to throw the grid off.

So pad, once again, is the in between fluff. Similar to index=other except that, it’s empty. You may have already guess what pad-last is, but if not, it’s the last empty shell in your grid.

The point of the padding is if you have a background color or things that you need to clear, you can do it in the last empty column and continue the look of your grid without having it break the grid itself.

Isn’t views awesome! 😀

I’m using this exact method through my site. You can see it on my podcast page and also on the membership page if you purchased my course. Here’s a quick photo sample:

Have any other cool methods for a grid? Let me know in the comments. Otherwise, enjoy!

What’s that? You don’t have the classes! No problem, here you go!

Advertisement
About the Author
What's UP! This is my site, I write 99% of the articles on here. I'm also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I've made courses and have a membership as well to help get you on your feet!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top