Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Michael Rossi
Michael Rossi
1,129 Points
Posted by Michael Rossi
Michael Rossi
1,129 Points

Create new ROW after every 3rd blog post excerpt.

So I'm going crazy over here trying to figure out how to create a new row after every 3rd blog post excerpt on my blog landing page. My code on my content.php file reads as follows:

<?php

global $wpscom_framework;

echo '<article '; post_class('col-md-4'); echo '>'; echo '<div class="article-drop-shadow">'; echo the_post_thumbnail(); echo '<div class="entry-summary">'; wpscom_title_section( true, 'h2', true );

    echo get_the_excerpt();
    echo '<br><br>';
    echo the_author_posts_link(),  the_time('  •  F jS, Y');
    echo $wpscom_framework->clearfix();
echo '</div>';

echo '</div>'; echo '</article>';

Is it possible to create a function that will close and create a new row after every 3rd post? I'm sorry if my question is confusing, I'm trying my best to word this the best way I can, haha.

Any help is MUCH appreciated!

Cheers!

7 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points

Hahaha, yeah, I mostly do custom theme builds and the two starter themes I use are _s and sometimes Sage. It just depends on what you want to do. _s is solid, built by automattic and very customizable. The example I shared is a _s page.php file.

for quickly, depends on what you are building. depending on how good your Sass skill set is, I would think about Using _s with ACF and building the site that way, but it depends on what you are doing of course.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Side not you can still use the loop in your current theme, and write HTML in the page. if the issue is just the blog page, I would write a blog-page.php file then if your theme is using template parts folder write a template part in regular HTML/PHP, use WP_Query to get the posts, and style it accordingly.

Jacob Mishkin
Jacob Mishkin
23,118 Points

right on.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Okay cool man, So first thing, do you have a .gitignore file on this? if not here is a great base for one from a solid dev .gitignore file So What are you having trouble with?

Jacob Mishkin
Jacob Mishkin
23,118 Points

are you still having issues with the row of posts?

Michael Rossi
Michael Rossi
1,129 Points
Michael Rossi
Michael Rossi
1,129 Points

Yeah, I'm having trouble figuring out how to close and create a new row after every third blog post.

Jacob Mishkin
Jacob Mishkin
23,118 Points

So before we debug this thing, do you have a staging server set up? if so what's the url? also to find out what this theme is doing you will need to download a plugin called Show Current Template. this will tell us what template parts the theme is using on any post/page of the site. after you get that running let me know and we will debug this theme.

Jacob Mishkin
Jacob Mishkin
23,118 Points

It looks like the blog posts are coming in at 3 in a row. What was the issue again?

Michael Rossi
Michael Rossi
1,129 Points
Michael Rossi
Michael Rossi
1,129 Points

yeah I think I figured that out, haha. I'm currently trying to figure out how to add a filter option at the top of the page. Back to the drawing board, haha.

Jacob Mishkin
Jacob Mishkin
23,118 Points

well, right on man! if you need any help let us know.

Michael Rossi
Michael Rossi
1,129 Points
Michael Rossi
Michael Rossi
1,129 Points

Thanks for your help my man! I'll definitely hit you up if I can't figure out this filter business.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Anytime man!

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

hey, just curious what theme are you using? you can do this by using CSS or you can loop through three blog posts, so every three blog posts are grouped into there own ul.

Michael Rossi
Michael Rossi
1,129 Points
Michael Rossi
Michael Rossi
1,129 Points

Hey Jacob,

I'm using Compound (what used to be Shoestrap 3).

Jacob Mishkin
Jacob Mishkin
23,118 Points

Thats cool. Just some basic questions. Are you using Sass, and gulp, or just CSS? What you have above, is that the general syntax of the theme, are they echoing out HTML like above? Is what you want to be displayed a Custom Post type, or a post? Lastly, are you comfortable using WP_Query? Are you trying to output just divs, or list items? and Lastly what you can do is give the wrapper div a max-width and then each div inside a width that will make it so they only span to three divs inside the wrapper to one row. I take it you want them to be centered? is so, Use margin-right and left, set that to auto on the wrapper div. Are you using any CSS/Sass frameworks?

PS you should not be echoing out HTML like that, 

/**
 * The template for displaying The Work page.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package 
 */

get_header(); ?>

    <div class="wrap">
        <div class="primary content-area">
            <main id="main" class="site-main" role="main">

                <?php
                while ( have_posts() ) : the_post();

                    get_template_part( 'template-parts/content', 'work' );

                    // If comments are open or we have at least one comment, load up the comment template.
                    if ( comments_open() || get_comments_number() ) :
                        comments_template();
                    endif;

                endwhile; // End of the loop.
                ?>

            </main><!-- #main -->
        </div><!-- .primary -->
    </div><!-- .wrap -->

<?php get_footer(); ?>

Here is a sample page.php file. If your themes page.php does not look similar please let us know.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Also when using bootstrap, You need to have a wrapper div with the class row.

Michael Rossi
Michael Rossi
1,129 Points
Michael Rossi
Michael Rossi
1,129 Points

Yeah, I'm starting to regret using this theme, haha. They have a ton of different custom queries and stuff going on. I'll probably just start from scratch and build my own theme. Honestly, I'm wasting more time trying to dissect their theme.

Any suggestions for building your own theme quickly? I've used http://underscores.me/ in the past, I'm not sure if that's still a good source to with.

Michael Rossi
Michael Rossi
1,129 Points
Michael Rossi
Michael Rossi
1,129 Points

Ok, sweet! Thanks man. Yeah, I'll probably just spend the weekend messing with _s and seeing how quickly I can recreate my theme I'm currently building. It'll honestly probably go MUCH smoother.

Thanks for your feedback! Hope you have an awesome day!

Jacob Mishkin
Jacob Mishkin
23,118 Points

Yeah man any time, but if its just that page you are having issues with you can also do this:

Side note you can still use the loop in your current theme, and write HTML in the page. if the issue is just the blog page, I would write a blog-page.php file then if your theme is using template parts folder write a template part in regular HTML/PHP, use WP_Query to get the posts, and style it accordingly.

Michael Rossi
Michael Rossi
1,129 Points
Michael Rossi
Michael Rossi
1,129 Points

Hey Jacob Mishkin I had a quick question for you. Is it possible to send you the two files that I'm working out of and you see if you can make sense of it? haha. I'm seriously about to pull my hair out over here.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Yeah man, sure. Do you have a repo? if not just use workspaces and I'll fork it.