Good morning, I have found myself in a bit of a dilemma! I am creating a Wordpress theme using Twitter Bootstrap and I am generating the members for the "Meet the Team" page via Wordpress "Posts" I can only fit 3 entries in 1 row... I.E
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
But anymore than 3 entries per a row will break the row, so I need to generate a new row for every 3 entries. How can I do this?
Here is my PHP code for outputting the entries.
<?php query_posts('category_name=members&orderby=date'); ?>
<div class="row-fluid">
<ul class="thumbnails">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li class="span4">
<div class="thumbnail">
<?php // check if the post has a Post Thumbnail assigned to it.the_post_thumbnail();
?>
<div class="pad">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
Try this
<?php query_posts('category_name=members&orderby=date'); ?>
<div class="row-fluid">
<ul class="thumbnails">
<?php
$cnt =0;
if ( have_posts() ) : while ( have_posts() ) : the_post();
if($cnt%3==0){
echo "</ul></div><div class='row-fluid'><ul clsas='thumbnails'>";
}
?>
<li class="span4">
<div class="thumbnail">
<?php // check if the post has a Post Thumbnail assigned to it.the_post_thumbnail();
?>
<div class="pad">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div>
</li>
<?php
$cnt++;
endwhile; ?>
</ul>
</div>
<?php endif; ?>
Related
Using bootstrap in wordpress, I'm trying to get my blog page to have the 1st latest post as a col-sm-12 (which is working) and then have the remaining posts fall into 2 columns where all the even # posts show up in the left column and the odd # posts show up in the right column. My left column loop is working but my right column isn't pulling the odd posts starting at the 3rd post ... please help! http://dev.starship.capital/blog/
<div class="container">
<div class="row">
<h2 style="color: white; text-align: center;">Latest Posts</h2>
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
<?php endif; endwhile; else: ?>
<div class="col-md-6 entry blog-menu">
<article class="entry">
<a href="<?php the_permalink(); ?>">
<div class="blog-overlay"></div>
<?php if ( has_post_thumbnail()) the_post_thumbnail('excerpt-thumb'); ?>
</a>
<div class="entry-content clear">
<div style="padding: 1% 15%;">
<?php the_category(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<p>Posted on: <?php the_time(get_option('date_format') ); ?> By <?php the_author(); ?> | <?php $totalcomments = get_comments_number(); echo $totalcomments; ?> Comments</p>
</div>
</div>
</article>
<?php endif; ?>
</div>
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<?php endif; endwhile; else: ?>
<div class="col-md-6 entry blog-menu">
<article class="entry">
<a href="<?php the_permalink(); ?>">
<div class="blog-overlay"></div>
<?php if ( has_post_thumbnail()) the_post_thumbnail('excerpt-thumb'); ?>
</a>
<div class="entry-content clear">
<div style="padding: 1% 15%;">
<?php the_category(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<p>Posted on: <?php the_time(get_option('date_format') ); ?> By <?php the_author(); ?> | <?php $totalcomments = get_comments_number(); echo $totalcomments; ?> Comments</p>
</div>
</div>
</article>
<?php endif; ?>
<?php endwhile; ?>
</div>
</div>
to learn wordpress development, I'm building a wordpress theme from scratch .
Now i want to add pagination on my category page but the problem is:
when i click on older-post-link the url change from "http://localhost/wordpress4/category/bloc1/" to "http://localhost/wordpress4/category/bloc1/page/2/" but it take me to a blank page instead of showing the other posts.
this is the code on the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
if(have_posts()) : while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-6 text-left">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-6 text-right">
<?php previous_posts_link('Newer post >>'); ?>
</div>
<?php
endif;
?>
</div>
</div>
<?php get_footer(); ?>
I noticed that if i add the code below to my index.php the pagination work also on the category page.
but the second category page("http://localhost/wordpress4/category/bloc1/page/2/") will take the markup of index.php so the posts will not be in a grid format like the first category page.
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
also on the category page the older post-link show up between rows instead of showing at the bottom of the pages.
finally this is the code on my index.php
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<?php
if(have_posts()):
while(have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<h3><?php the_title(); ?></h3>
<small><?php the_category(); ?></small>
</a>
<p><?php the_content(); ?></p>
<hr/>
<?php endwhile;
endif;
?>
</div>
<div class="col-xs-12 col-sm-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Thank You.
Use this code, may be it will solve your problem
<?php
// the query to set the posts per page to 3
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 3, 'paged' => $paged );
query_posts($args); ?>
<!-- the loop -->
<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
<!-- rest of the loop -->
<!-- the title, the content etc.. -->
<?php endwhile; ?>
<!-- pagination -->
<div class="row">
<div class="col-xs-12>"
<div class="col-xs-6 text-left"><?php next_posts_link(); ?></div>
<div class="col-xs-6 text-right"><?php previous_posts_link(); ?></div>
</div>
</div>
<?php else : ?>
<!-- No posts found -->
<?php endif; wp_reset_postdata(); ?>
for more details, check this link https://codex.wordpress.org/Pagination
After a lot of searching i was able to find a solution .
The problem was that the The "Blog pages show at most" in the wordpress reading settings was interfering with the "posts_per_page=4" that i declared through the query_posts().
The solution :
I deleted the "query_posts()" because it is best to use the WP_Query() or the pre_get_posts filter.
for me even with using wp_query i couldnt get the pagination to work so i tried using the pre_get_posts filter and it worked .
so in the category.php i deleted the query_posts and used just the normal loop.
this is my new code in the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
if(have_posts()) :
while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-12 text-left ">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-12 text-right ">
<?php previous_posts_link('Newer post >>'); ?>
</div>
</div>
<?php
endif;
?>
</div>
<?php get_footer(); ?>
Then I added the pre_get_posts action on my function.php
this is the code:
add_action( 'pre_get_posts', function ( $q )
{
if ( !is_admin() // Very important, otherwise back end queries will be affected as well
&& $q->is_main_query() // Very important, we just need to modify the main query
&& $q->is_category() // Only target category pages
) {
$q->set( 'posts_per_page', 2 );
}
});
I hope my answer will help someone who have the same problem i had even if my answer is not so well explained.
for more info search for something like this:
using pagination with the wp_query
using pre_get_posts to set pagination for a custom page.
It will be so nice if a developer could explain my solution in more details and give us more information about using pre_get_posts to set pagination for a custom page.
I created my own template in WordPress, but the loop entries does not work. I would like to entries work on one of the subpages. I also added entries.
This is my code of my subpage. Please help me. I don't know what is wrong. I added a picture under the code.
<?php include 'header.php'; ?>
<main class="subpage-blog">
<div class="subpage-banner">
<div class="container">
<h3>BLOG SIDEBAR</h3>
<div class="breadcrumbs">
</div>
</div>
</div>
<aside class="side-menu col-md-4">
<div class="search">
<h4>Search blog</h4>
<input type="text" value="Search">
</div>
<!-- .search -->
<div class="categories">
<h4>Blog Categories</h4>
<ul class="categories-blog-ul">
<li>Inspirtation</li>
<li>Work</li>
<li>Tech</li>
<li>Creative</li>
</ul>
</div>
<!--.categories-->
<div class="recent-posts">
<h4>Recents posts</h4>
<ul>
</ul>
</div>
<!-- .recent-posts-->
<div class="tags-spot">
<h4>Tags</h4>
<div class="tag"></div>
</div>
<!-- .tags-spot-->
</aside>
<!-- .side-menu-->
<article class="content">
<div class="container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="news-box">
<div class="news-list-content">
<a href="">
<h3><?php the_title(); ?></h3>
<?php the_content('czytaj dalej'); ?>
</a>
</div>
<!-- .news-list-content-->
<div class="image-box-news">
<img src="<?=get_template_directory_uri(); ?>/images/ikona-wpisu.png" alt="" />
</div>
</div>
<!-- .news-box-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<!-- .container-->
</article>
<!-- .content-->
</main>
<?php include 'footer.php'; ?>
The problem is that:
if (have_posts()) : while (have_posts()) : the_post();
is using the current page's have_posts query.. That means that it probably will just show whatever that current page template's content would be.
Instead, you'll want to create an entirely new query object and call these functions on it like so:
<?php
$the_query = new WP_Query( array('posts_per_page' => 10 ) ); //Create our new custom query
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="news-box">
<div class="news-list-content">
<h3><?php the_title(); ?></h3>
<?php the_content('czytaj dalej'); ?>
</div>
<!-- all your other markup goes here.... -->
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php wp_reset_postdata(); //Restore the original postdata for this page, if needed later ?>
I am working on a custom theme and on one of the pages i need to style the posts pages as follows: http://gyazo.com/e1f7cfc03c7ba3981188077afcdf0314
The grey box is an image and the red box is content. I need to use perhaps an odd/even Li/Ul pseudo class/selector but i have no idea how to do it.
Could anyone offer me a way to start it up? I was thinking of using the Odd/Even pseudo class on UL to change the divs names however i can't think how to do it or where to start.
Thanks!
Edit: I am thinking perhaps odd/even selector combined with jquery prepend/append?
Edit2: this is what i have however it is displaying all the Odds first then all of the Evens instead of alternatively.
PHP:
<?php $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="section group">
<div class="col span_1_of_2 blue doubleheight">
<?php the_post_thumbnail('large'); ?>
</div>
<div class="col span_1_of_3_30 blue doubleheight">
<h2><?php the_title(); ?></h2>
<div class="post-text"><?php the_excerpt(); ?></div>
</div>
</div>
<?php echo $i; ?>
<?php endif; endwhile; ?>
<?php while(have_posts()) : ?>
<?php $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="section group">
<div class="col span_1_of_3_30 blue doubleheight">
<h2><?php the_title(); ?></h2>
<div class="post-text"><?php the_excerpt(); ?></div></div>
<div class="col span_1_of_2 blue doubleheight">
<?php the_post_thumbnail('large'); ?>
</div>
</div>
<?php echo $i; ?>
<?php endif; endwhile; ?>
Since you are in the loop, you can use the build in loop counter ($wp_query->current-post) to add a different class to all odds or all evens or both
There is no need to run two loops. Here is an example of how I use this in my website to create two post columns
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* Start the Loop */ ?>
<div class="entry-content-<?php if( $wp_query->current_post%2 == 1 ){ echo ' left-post';}else{ echo ' right-post';} ?>">
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php endwhile; ?>
EDIT
I misunderstood you in my original answer, but you can still use the same idea as I used there. Here is something you can try. Just replace all your code with this
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* Start the Loop */
if($wp_query->current_post%2 == 1 ) { ?>
<div class="section group">
<div class="col span_1_of_2 blue doubleheight">
<?php the_post_thumbnail('large'); ?>
</div>
<div class="col span_1_of_3_30 blue doubleheight">
<h2><?php the_title(); ?></h2>
<div class="post-text">
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php }else{ ?>
<div class="section group">
<div class="col span_1_of_3_30 blue doubleheight">
<h2><?php the_title(); ?></h2>
<div class="post-text">
<?php the_excerpt(); ?>
</div>
</div>
<div class="col span_1_of_2 blue doubleheight">
<?php the_post_thumbnail('large'); ?>
</div>
</div>
<?php }
<?php endwhile; ?>
<?php endif; ?>
So I managed to query my posts however they break/not aligned properly underneath after the first 2 columns. So I want to insert 2 posts per row, sorry if my explanation is really bad.
$loop = new WP_Query( array( 'post_type' => 'team') ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<!-- <div class="large-6 columns"> -->
<div class="row">
<div class="large-3 columns">
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<?php echo get_the_post_thumbnail($page->ID, 'medium'); ?>
<?php else: // use this image to fill the thumbnail ?>
<img src="http://placehold.it/350x150">
<?php endif; ?>
</div>
<div class="large-9 columns">
<div class="panel radius">
<h3><?php the_title(); ?></h3>
<p><?php the_content(); ?></p>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</div>
</div>
<!-- </div> -->
<?php endwhile; ?>
Not a zurb user, but i expect you need to start a new row every 2 posts:
$loop = new WP_Query( array( 'post_type' => 'team') );
$counter=0;
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); $counter++;?>
<div class="row">
<div class="large-3 columns">
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<?php echo get_the_post_thumbnail($page->ID, 'medium'); ?>
<?php else: // use this image to fill the thumbnail ?>
<img src="http://placehold.it/350x150">
<?php endif; ?>
</div>
<div class="large-9 columns">
<div class="panel radius">
<h3><?php the_title(); ?></h3>
<p><?php the_content(); ?></p>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</div>
</div>
<?php
//close row div and start another every 2 posts
if ($counter%2==0):?>
</div><div class="row">
<?php endif;?>
<?php endwhile; ?>