Menu icon Foundation
Can I get some help with creating Wordpress posts with my Foundation theme?

Hey!

I hope this is an appropriate question. The problem simply comes from my inexperience with Wordpress, but is linked with Foundation.

I'm using the Nouveau framework for Wordpress (which basically just means I can use Foundation, doesn't have any template, so I'm making everything from scratch). I have very little experience with Wordpress or PHP, but am slowly learning.

I want it so that my customer can create a new post, and then that will be displayed on a page which is linked to a blog-page template. Here is the blog page currently: http://workwear-sussex.co.uk/recent-projects/

So the header and footer are templates, and the title etc is being displayed by PHP, using code I've found online and modified for my purposes, all being displayed using Foundation rows and columns etc.

Now because I've put everything into Foundation rows and columns, specifically each post has "large-4 columns", and 12 columns makes a full row, everytime I have more than 3 posts on the page, it just starts to stack on top of each other. The behaviour that I'd want is, when it gets to 3 posts, it starts a new row. I have no idea how to achieve this.

Here is the PHP code I'm using currently:

If anyone can help this work as described (3 posts in a row, then the next posts go to a whole new row, then after that it displays a "previous posts" link) I would be really grateful!

Thank you!

wordpressPHPFoundation

Hey!

I hope this is an appropriate question. The problem simply comes from my inexperience with Wordpress, but is linked with Foundation.

I'm using the Nouveau framework for Wordpress (which basically just means I can use Foundation, doesn't have any template, so I'm making everything from scratch). I have very little experience with Wordpress or PHP, but am slowly learning.

I want it so that my customer can create a new post, and then that will be displayed on a page which is linked to a blog-page template. Here is the blog page currently: http://workwear-sussex.co.uk/recent-projects/

So the header and footer are templates, and the title etc is being displayed by PHP, using code I've found online and modified for my purposes, all being displayed using Foundation rows and columns etc.

Now because I've put everything into Foundation rows and columns, specifically each post has "large-4 columns", and 12 columns makes a full row, everytime I have more than 3 posts on the page, it just starts to stack on top of each other. The behaviour that I'd want is, when it gets to 3 posts, it starts a new row. I have no idea how to achieve this.

Here is the PHP code I'm using currently:

If anyone can help this work as described (3 posts in a row, then the next posts go to a whole new row, then after that it displays a "previous posts" link) I would be really grateful!

Thank you!

Chris M over 5 years ago

Here is the PHP code I'm currently using!

<div class="row">
    <div class="large-12 columns">

  <article>

    <?php // Display blog posts on any page @ http://m0n.co/l
    $temp = $wp_query; $wp_query= null;
    $wp_query = new WP_Query(); $wp_query->query('showposts=5' . '&paged='.$paged);
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

    <div class="large-4 columns text-center recentprojects_post">

<?php the_post_thumbnail( 'thumbnail' ); ?>
    <h5><strong><?php the_title(); ?></strong></h5>
    <?php the_content(); ?>

    </div>
    <?php endwhile; ?>

</div>
</div> <!-- end row -->


<div class="row">
    <div class="large-12 columns">

    <?php if ($paged > 1) { ?>

    <nav id="nav-posts">
      <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
      <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
    </nav>

    <?php } else { ?>

    <nav id="nav-posts">
      <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
    </nav>

    <?php } ?>

    <?php wp_reset_postdata(); ?>

  </article>


<br>
 </div>
        </div>

Esa Rantanen over 5 years ago

Hi Chris,

it's the 'block-grid' you want to use:
http://foundation.zurb.com/docs/components/block_grid.html

Loop example:

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-3">

    <?php // Display blog posts on any page @ http://m0n.co/l
    $temp = $wp_query; $wp_query= null;
    $wp_query = new WP_Query(); $wp_query->query('showposts=12' . '&paged='.$paged);
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

    <li class="text-center recentprojects_post">
    <?php the_post_thumbnail( 'thumbnail' ); ?>
    <h5><strong><?php the_title(); ?></strong></h5>
    <?php the_content(); ?>
    </li>

    <?php endwhile; ?>

</ul>

Chris M over 5 years ago

Esa, you are a genius! Thank you, I didn't consider using a block grid, but that makes perfect sense.

Check out the result: http://workwear-sussex.co.uk/recent-projects/

Thanks again!

Malou Geurts over 5 years ago

You should probably put article inside the loop btw. Currently only the title and content will be displayed as 4 columns. You should also name it small-4 as foundation is mobile first and it will inherit the classes if larger viewport classes aren't provided.

Chris M over 5 years ago

Hey Malou,

Thanks for your reply! I had a hanging tag which I hadn't noticed before, so I've just deleted that, thank you for pointing it out. This is my code now:

<div class="row">

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">

    <?php // Display blog posts on any page @ http://m0n.co/l
    $temp = $wp_query; $wp_query= null;
    $wp_query = new WP_Query(); $wp_query->query('showposts=6' . '&paged='.$paged);
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

    <li class="text-center recentprojects_post">
    <?php the_post_thumbnail( 'thumbnail' ); ?>
    <h5><strong><?php the_title(); ?></strong></h5>
    <?php the_content(); ?>
    </li>

    <?php endwhile; ?>

</ul>

</div> <!-- end row -->

<div class="row">
    <div class="large-12 columns">

    <?php if ($paged > 1) { ?>

    <nav id="nav-posts">
      <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
      <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
    </nav>

    <?php } else { ?>

    <nav id="nav-posts">
      <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
    </nav>

    <?php } ?>

    <?php wp_reset_postdata(); ?>

 </div><!--end 12 columns -->
        </div><!-- end row -->

Is there something here you think I should change? Wasn't sure what you're referring to exactly. Thanks again :)

Chris M over 5 years ago

Thanks again Esa!

Yes there are definitely a few little validation issues to get sorted... at present I'm getting the actual design work sorted on this tester domain, when I get final client approval I'll get the nitty gritty sorted!

Not sure if I should open a new thread for this, or if it's even appropriate to ask about as it's not a Foundation-specific issue, but does anyone have any idea why, in Chrome, my top navigation menu is leaving little blue lines when you move your mouse over it? You move your mouse across the naviation bar to the right, then back across to the left, and it leaves little blue lines to the side of the links - which disappear when you scroll down at all (or mouseover the links again). Seems to work OK in IE, but visible in Chrome.

I've been trying to track down the cause but have had no luck so far. Anyone have any ideas?

Malou Geurts over 5 years ago

Hey Chris,

I've rewritten your code the way I would do it, like cleaning up your wp_query, you can find more about it on the codex.

<div class="row">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <?php // Query latest blog items
    $args = array( 
      'post_type' => 'post', // Regular posts, if you have a custom type you can enter the id here instead of 'post'
      'posts_per_page' => 6 
    );
    $blog_query = new WP_Query( $args );

    // Start the loop
    if ( $blog_query->have_posts() ) : while ( $blog_query->have_posts() ) : $blog_query->the_post(); ?>
      <li class="text-center recentprojects_post">
        <?php the_post_thumbnail( 'thumbnail' ); // If you leave the arhument blank and the img css to max-width 100% your images should look at their best (unless you have set the thumbnail to crop to make them square, in that case, leave as is.)?> 
        <h5><strong><?php the_title(); // Have you defined h5 strong? Otherwise I'd just stick to h5 and keep the markup as simple as possible. '?></strong></h5>
        <?php the_content(); ?>
      </li>

    <?php endwhile;
      // Always reset the loop after you're done with the loop
      wp_reset_postdata();
    else:  // In case no posts have been found?>
      <p><?php printf( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.','themename' ), admin_url( 'post-new.php' ) ); ?></p>
      <?php endif; ?>
  </ul>
</div> <!-- end row -->

<div class="row">
  <div class="small-12 columns"><!-- all screen sizes inherit from small -->
    <nav id="nav-posts">
        <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
        <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
    </nav>
  </div><!--end 12 columns -->
</div><!-- end row -->

Anyway you say you wanna get into the nitty gritty after the design has been approved. Which I highly recomment you DON'T do! If you need to mock something up just use html with foundation for a quick result and then insert php when you get to the actual building phase. Otherwise make sure you get your nitty gritty correct the first time! It'll save you a big hassle because trying to fix sloppy code takes a lot longer than building it anew.

Anyway, if you have further questions, let me know! :)

Chris M over 5 years ago

Hey Malou,

Just wanted to take a second to say thank you so much for doing all of that! I don't have access to what I need to update the site right now, but as soon as I'm back at work next week I will dig into it.

But it's really awesome of you to have written all of that, and I'm going to go through it all to make sure I understand it all fully. And great advice regarding the nitty gritty of the website - basically the overall design has been approved, but the various pages need to be finalised - however since I've never worked with Wordpress before this, I just wanted to make the functionality work as much as possible so I didn't promise something that I couldn't get to work. Once they're happy with how it's working I'll need to go and tidy everything up - definitely not an ideal way to work, and I won't do it like that again!

Thanks again for taking the time, you rule!

Mary Baum about 5 years ago

Thank you so much for this!

I've been struggling for two days to get this grid working in Genesis.

When I have it the way I want it, I'll post a link and the code.

But it wasn't until I pasted this code as-is, as a starting point, that I had any hope of making a grid of posts.

Thank you both for this thread!

Mary Baum

Mary Baum over 4 years ago

Was looking for something else and realized I promised the Genesis loop with Foundation markup. Fairly simple, actually:

add_action('genesis_before_loop', 'mbf_before_loop');

function mbf_before_loop(){
  echo '<div class="row">
        <ul class="small-block-grid-3 medium-block-grid-3 large-block-grid-3">';
}

add_action('genesis_before_entry', 'mbf_before_entry');

function mbf_before_entry(){
  echo '<li class="post">';
}

add_action('genesis_after_entry', 'mbf_after_entry');

function mbf_after_entry(){
  echo "</li>";
}

add_action('genesis_after_loop', 'mbf_after_loop');

function mbf_after_loop (){
  echo "</ul></div>";
}

Thanks for helping me start!

Kieren Trinder over 4 years ago

Malou - many thanks for that post! Saved my bacon no end!

Drew Miller over 2 years ago

Great post!  It was a big help :).  Here is an updated version for Foundation 6:

 

<div class="row small-up-2 medium-up-3 large-up-4">
	<?php 	// Query latest blog items
		$args = array(
			'post_type' => 'post', //Regular posts
			'posts_per_page' => 4
		);
		$blog_query = new WP_Query ( $args );

		// Start the loop
		if ( $blog_query->have_posts() ) : while ( $blog_query->have_posts() ) : $blog_query->the_post(); ?>
			<div class="column column-block">
				<a href="<?php the_permalink();?>"><?php the_post_thumbnail(); ?>
				<h5><?php the_title(); ?></a></h5>
				<?php the_excerpt(); ?>
			</div>

			<?php endwhile;
				//Reset the loop
				wp_reset_postdata();
			else: // When no posts have been found ?>

			<p><?php _e( 'Sorry no posts found.' ); ?></p>
	<?php endif; ?>
</div> <!-- end row -->