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.

  • Do you have a public URL we can look at? – iguanarama Jan 3 '17 at 15:33
  • Just local at the moment. Can set it up if it will help. – Darko Arnautovic Jan 3 '17 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 Jan 3 '17 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. – Darko Arnautovic Jan 3 '17 at 15:43
  • What about all the CSS that styles the content? Something could be forcing itself wider. – iguanarama Jan 3 '17 at 15:44
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>
  • 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. – Darko Arnautovic Jan 3 '17 at 15:23
  • Nah, still nothing. Does that get_template_part add any markup? Like a margin or a padding or osmething? – Darko Arnautovic Jan 3 '17 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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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