#30 Wordpress Loop posts in Bootstrap 3 grid layout | Grid post page on Wordpress with Bootstrap

No video

#30 Wordpress Loop posts in Bootstrap 3 grid layout | Grid post page on Wordpress with Bootstrap

Рет қаралды 9,433

Күн бұрын

WordPress post grid code
Advanced WordPress Theme Development | Wordpress theme development course
wordpress post grid code
bootstrap grid wordpress loop
bootstrap grid wordpress plugin
bootstrap thumbnail grid
wordpress display posts in 2 columns
wordpress bootstrap grid
bootstrap card
wordpress post loop grid
bootstrap grid wordpress plugin
----- SUBSCRIBE TO CHANNEL - www.youtube.co...
** Full Playlist **
codeytek.com/c...
** Github repo **
github.com/imr...
Please star my repo to support my work 🙏
****** Social Links *******
Please follow 🙏
Twitter - @codeytek
/ codeytek
Github - imranhsayed
github.com/imr...
****** Other Playlist *****
==== REACT TUTORIALS ====
codeytek.com/c...
==== REDUX TUTORIALS ====
codeytek.com/c...
==== REACT WITH WORDPRESS TUTORIALS ====
codeytek.com/c...
==== WEBPACK TUTORIALS ====
codeytek.com/c...
#wordpress #bootstrap #grid

Пікірлер: 25

@Yuri-ns9wt 3 жыл бұрын

I know that is not a elegant code (I'm noob) but this works well for the chronological post list without any loop: ---> this classes control the columns Imran I love this course, very thanks!!!!

@WebWithZaheb 2 жыл бұрын

then why did he use loop?

@anaschoudhary6080 Жыл бұрын

it should be like this

@LittlePropheteer 3 жыл бұрын

If you're having issues with columns try using class="row" inside the conditional instead of class="col..." Then, wrap the title and excerpt in a column class. Also: If you use class="col-lg-{echo floor(12/$no_of_cols)} col-md-6 col-sm-12" - You will then be able to change the variable in the declaration to determine the number of columns you want per row on a large screen

@anuraagtech2974 Жыл бұрын

Column Solution : row - while - div col - template part , remove the variables and if condition inside while and everything else is same, WordPress will take care of everything

@haruhamoo5378 2 жыл бұрын

If you see only one column, you may have less than 4 posts. We need more than 7 posts saved on admin Posts page to display 3 columns, because it's made to display 3 posts per column.

@jdmgeek3992 4 ай бұрын

yes, the posts are ordered from top to bottom in each column, not left to right as if it were a row

@mikheilbeldishevski2776 3 жыл бұрын

Great Tutorial. Many thanks. I think here you are grouping by three entries per column. And three columns are done by Bootstrap.

@hekmatbeigverdi 11 ай бұрын

Actually in bootstrap no needed to extra controlling loop by index. Every thing goes well with one row outside loop & one another inside loop.

@ray84851 Жыл бұрын

Thanks for the great tutorial series! The only thing is I had a small issue here which took me a hard time to identify. I tried to validate the html markup from the page source and I got an unclosed div warning for the page . After thorough investigation I’ve found out that closing div for the column doesn’t print if we have a TOTAL number of posts which is not divisible by 3. Look closely at 7:26 : if loop stops at index % 3 !== 0 (due to the total post number) than this condition is not met and we have an unclosed div in the final markup. To fix this issue I’ve added an extra check after the loop on line 60 and the warning was gone: if (0 !== $index % $no_of_columns) { ?>

@gaborom 3 жыл бұрын

Hi, Imran. Great tutorials so far. I am running to some issues. I have 3 posts and all of 'em are displayed in one column. Is not spreading to columns 2 and 3. I have all classes required but is not working for laptop (2 cols) and desktop (3 cols), it just does for mobile. I also copy and paste the code from your repo in case I forgot something but I get the same result. What could be missing? Thanks in advance. All the best from Argentina.

@CynthiaSotoCaballerolYEAHl 3 жыл бұрын

I think you are not running into issues. His logic in the code works that way. There are always be 3 columns, but they arrange in blocks of 3 posts each column, according to his logic (determined by $no_of_columns). Try assigning the variable $no_of_columns = 1.

@MrPanzerDragoon 2 жыл бұрын

@@CynthiaSotoCaballerolYEAHl thanks for this! this worked. But I still don't get why it works though. Is it that 1 column contains three at a time? Is that why we are changing it to "1" instead of "3"?

@CynthiaSotoCaballerolYEAHl 2 жыл бұрын

@@MrPanzerDragoon Hi!. Well I took a look here because of your question, and I refactored the code a little bit. I think none of those variables are necessary because the number of columns (one, two or three) is already defined with the Bootstrap class, so this code worked for me: I think Imran applied some logic, so I tried to understand but I don't get well why the use of those two variables, so I tried to simplify it a little bit

@CynthiaSotoCaballerolYEAHl 2 жыл бұрын

When I said "Try assigning the variable $no_of_columns = 1" above, in that time (10 months ago) I just tried to make it work using the variables index and no_of_colums. But I think they are not necessary.