0

I'm experiencing something really strange, that I just can't seem to figure out. I'm busy writing my own theme. It's nothing special or super advanced, just wanted a fun project and get a little custom.

On the homepage, I want the posts displayed in a masonry style, pinterest clone card UI. I've set up the HTML and the CSS using Foundation. Everything works 100% as it's supposed to before I use the WP loop to pull in posts.

Here is how it look when I hardcode the HTML:

Hardcoded HTML

Here is how it looks when I use the WP loop to pull in from content.php:

With WP Loop

I've also moved the contents of content.php inside the loop on index.php, and I get the same issue. Can't really figure this out.

Home Page Code:

<?php get_header(); ?>
<div class="row" id="content">
    <div class="medium-9 columns">
        <article>
            <?php
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                       get_template_part( 'content' );
                    endwhile;
                else :
                    echo wpautop( 'Sorry, no posts were found' );
                endif;
            ?>
        </article>
    </div>
    <?php get_sidebar(); ?>
</div><!-- End row-->

Content Code:

<section class="animated fadeIn">
<div class="ribbon"><span>Eat This</span></div>
<img src="<?php echo the_post_thumbnail(); ?>" />
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<div class="cats-block">
    <?php
        $posttags = get_the_tags();
        if ($posttags) {
            foreach($posttags as $tag) {
                echo '<span class="category label">' . $tag->name . '</span> '; 
            }
        }
    ?>
</div>

CSS:

.bob article {
  -moz-column-width: 13em;
  -webkit-column-width: 13em;
  column-width: 13em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}

.bob section {
  position: relative;
  display: inline-block;
  margin: 0.25rem;
  padding: 1rem;
  width: 100%;
  background: #E5E5E5;
  border-radius: 5px;
}

Getting a little frustrated. Any help would be much appreciated.

9
  • Do you have a public URL we can look at?
    – iguanarama
    Commented Jan 3, 2017 at 15:33
  • Just local at the moment. Can set it up if it will help. Commented Jan 3, 2017 at 15:36
  • Depends how frustrated you get. :) My guess is that something you're bringing in is styled to be 100% of a wider div or the window width, but without seeing all the code, it's all guesswork.
    – iguanarama
    Commented Jan 3, 2017 at 15:39
  • That's genuinely all the code. In the index.php, if i remove the have_posts , the_post code, and only leave the html, it renders fine. But as soon as I add the wp php stuff, it breaks. My entire home page and entire content code is listed above. Commented Jan 3, 2017 at 15:43
  • What about all the CSS that styles the content? Something could be forcing itself wider.
    – iguanarama
    Commented Jan 3, 2017 at 15:44

2 Answers 2

0

I assumed that you have the static page works well before you sliced up and make it into wordpress theme development.

I had the same problem, But I managed to solve this by doing some hints:

  • Check the slicing of the element you're about to loop. Only loop the element of the post. Perhaps you missed some div elements that included into the loop.

maybe try this :

<?php get_header(); ?>
<div class="row" id="content">
    <div class="medium-9 columns">
            <?php
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                       get_template_part( 'content' );
                    endwhile;
                else :
                    echo wpautop( 'Sorry, no posts were found' );
                endif;
            ?>
    </div>
    <?php get_sidebar(); ?>
</div><!-- End row-->

Content Code :

<article>
<section class="animated fadeIn">
<div class="ribbon"><span>Eat This</span></div>
<img src="<?php echo the_post_thumbnail(); ?>" />
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<div class="cats-block">
    <?php
        $posttags = get_the_tags();
        if ($posttags) {
            foreach($posttags as $tag) {
                echo '<span class="category label">' . $tag->name . '</span> '; 
            }
        }
    ?>
</div>
</section>
</article>
2
  • So if I copy and paste the content php code into the index php page, effectively just replacing the get_template_part with the actual content, I still get the same issue. If I remove all the WP code, then it works. I'll try moving the article into the content, but the article is the container for the sections. I don't see how it might fix this. Commented Jan 3, 2017 at 15:23
  • Nah, still nothing. Does that get_template_part add any markup? Like a margin or a padding or osmething? Commented Jan 3, 2017 at 15:34
0

The issue wasn't with WP, or Foundation, but rather with the amount of posts I was displaying. More than 3, actually build the masonry grid layout and forces the columns to line up alongside each other.

4
  • I do not see you use masonry: masonry.desandro.com
    – prosti
    Commented Jan 3, 2017 at 16:03
  • "More than 3" has no sense.
    – prosti
    Commented Jan 3, 2017 at 16:04
  • Not using the library. CSS. Commented Jan 4, 2017 at 8:06
  • OK, :) can you provide the URL so we can tweak the CSS? @DarkoArnautovic
    – prosti
    Commented Jan 4, 2017 at 9:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.