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 WordPress Theme Development Custom Post Type Templates in WordPress The Portfolio Single Page

Dave House
Dave House
789 Points
Posted by Dave House
Dave House
789 Points

Trouble with layout around PHP blocks

I've used this section as a guide for my own site. I am making a "Music" section and have successfully created the custom fields. However when it comes to layout I'm finding it very confusing.

My music.php file contains this section:

<div class="row"> <div class="col col--1-1">

                    <?php /* The loop */ ?>
                    <?php while ( have_posts() ) : the_post(); ?>

                        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                            <header class="entry-header">
                                <h1 class="entry-title h2"><?php the_title(); ?></h1>
                            </header><!-- .entry-header -->

                            <div class="entry-content">
                                <?php the_content(); ?>                     
                            </div><!-- .entry-content -->

                        </article><!-- #post -->


                    <?php endwhile; ?>

                </div>  
        </div>

        <div class="row">

                    <?php 
                        $args = array(
                            'post_type' => 'music',
                            'orderby' => 'title',
                            'order' => 'ASC'
                        );
                        $the_query = new WP_Query( $args );         
                    ?>


                            <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> 

                            <?php get_template_part( 'content', 'music' ); ?>

                    <?php endwhile; endif; ?>

        </div>

I have used my own CSS layout grid system.. I have wrapped the PHP tag for the content-music.php inside a row (see above)

I then put the column part of the grid inside the content-music.php file

        <div class="col col--1-2">


            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>


                <header class="entry-header">

                    <h1 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                    <h2><?php the_field('album_name'); ?></h2>
                    <p><?php the_field('release_year'); ?></p>

                </header><!-- .entry-header -->

                <div class="entry-content">

                    <div class="row">
                        <div class="col col--1-2">

                            <img class="album_cover" src="<?php the_field('album_cover'); ?>" alt="Cover of <?php the_title(); ?>">

                        </div>

                        <div class="col col--1-2">

                            <?php the_field('record_label'); ?>

                            <?php the_field('pressing_info'); ?>

                            <a href="<?php the_field('purchase_link'); ?>"><button>Listen</button></a>  

                        </div>
                    </div>      


                </div><!-- .entry-content -->   


            </article><!-- #post -->

        </div>

Which is ok... except for the fact that it means that the content displayed in single-music.php will also be (50%) wide. Also on music.php If I have 3 items the third will sit under the second if the content is shorter than the first. I need to start a row every two items.

I appreciate this might be confusing but any advice of how to structure this type of column requirements would be great. I'm totally new to any kind of PHP.