I'm creating a theme, and I used a condition to create an additional div with the class of "row" after 3 posts/columns are created. It works as expected, except when I minimize the screen to 1024x768, the columns have no margin in between them. And then they finally goes one under another one as expected on a smaller viewport. Not sure what to do, here's the code ...
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="row ">
<?php
if (have_posts() ):
$counter = 0;
while (have_posts() ) : the_post();
$counter++; ?>
<div class="col-sm-4">
<div class="card">
<div class="card_img_container">
<?php the_post_thumbnail( array(450, 450), array('alt' => get_the_title(), 'class' => 'card_image img-responsive') ); ?>
<span class="card_readmore">View Post</span>
</div>
<div class="card_excerpt">
<p class="content_category1"> <?php the_category( ', ' ); ?></p>
<?php the_excerpt(); ?>
<p> <span class="read_more">Read More</span> </p>
</div>
</div>
</div>
<?php if ($counter % 3 == 0) {
echo '</div><div class="row">';
} ?>
<?php
endwhile;
endif;
?>
</div> <!--Inner div ROW-->
</div> <!--Main Div ROW-->
</div> <!--Main Div ROW-->
</div> <!--Container-->
<?php // get_sidebar(); ?>
<?php get_footer(); ?>
I'd probably do it like this:
<div class="col-md-4 col-sm-12">
content
</div>
Remember that the classes can be stacked on top of each other to get widht of 4 in MD-sized screen, and full width (12) in SM-Sized screen.
I hope I understand your problem.
Related
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 have this page in Wordpress:
link
CODE PHP:
<?php
query_posts('cat=16');
$count = 0;
while (have_posts()) : the_post();
$count++;
if ($count == 1) { ?>
<div class="row">
<div class="col-lg-6 col-height" >
<div class="text-box-right">
<div class="title-home"><?php the_title(); ?></div>
<div class="content-home"><?php the_content(); ?></div>
</div>
</div>
<div class="col-lg-6 col-height" >
<div class="prod-box-left">
<?php the_post_thumbnail('news'); ?>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4"><div class="content-home"><?php the_content(); ?></div></div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<?php } else { ?>
<?php $count = 0; ?>
<div class="row">
<div class="col-lg-6 col-height" >
<div class=" prod-box-right">
<?php the_post_thumbnail('news'); ?>
</div>
</div>
<div class="col-lg-6 col-height">
<div class="text-box-right">
<div class="title-home"><?php the_title(); ?></div>
<div class="conteont-home"><?php the_content(); ?></div>
</div>
</div>
</div>
<?php } ?>
<?php endwhile; ?>
The problem is that some items are displayed twice ... and I just want to be displayed at the bottom.
I put a picture to better understand what I mean.
What is wrong with my function?
Do you think you can help me solve this problem please?
Thanks in advance!
When your if statement is true for if ($count == 1) the block of code that is used has the function the_content() twice. I imagine this is why you're getting duplicate content. Remove one of those functions to eliminate the repetion.
you would normally see the latest 10 posts. If you want to show only 2 posts, you can use query_posts() like so:
<?php
query_posts( 'posts_per_page=2' );
?>
So you have use like this.
query_posts( 'cat=16&posts_per_page=2' );
For more reference, see the Wordpress function query_posts() documentation at following link -https://codex.wordpress.org/Function_Reference/query_posts.
I have the following problem: i need to create really simple layout, on each line i would like to have 3 box all of the same size, and if i understood right, in order to achieve this i need to construct a structure like the following:
<div class="row">
<div class=" news col-md-3 col-centered">
</div>
<div class=" news col-md-3 col-centered">
</div>
<div class=" news col-md-3 col-centered">
</div>
</div>
This is my php script in the index.php:
<?php while(have_posts()) : the_post();?>
<div class="row">
<div class=" news col-md-3 col-centered">
<h4><?php the_title();?></h4>
<p><?php the_excerpt(); ?> </p>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
With this code, each box get a <div class="row"> element like the following:
<div class="row">
<div class=" news col-md-3 col-centered">
</div>
</div>
...
How can i fix this?
This is what i get now: if a box as more height than another, it leave the space under it without any element.
the height of the box depends on the content. what i would like to have is something like this:
Just move the row outside of The Loop, so that it's not repeated:
<div class="row">
<?php while(have_posts()) : the_post(); ?>
<div class="news col-md-4 col-centered">
<h4><?php the_title(); ?></h4>
<p><?php the_excerpt(); ?> </p>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
Also, you need to change your column width to col-md-4, since Bootstrap uses a 12-column grid, and you want 3 columns per row.
If you need to actually close out each row after 3 columns are shown, you need to use a counter:
<div class="row">
<?php $i = 1; while(have_posts()) : the_post();?>
<div class="news col-md-3 col-centered">
<h4><?php the_title();?></h4>
<p><?php the_excerpt(); ?> </p>
</div>
<?php if ( $i % 3 === 0 ) { echo '</div><div class="row">'; } ?>
<?php $i++; endwhile; wp_reset_query(); ?>
</div>
This last example will ensure that all floats are cleared, and that each row of elements are on their own lines.
this is the code of my custom post.I am not so expert in php.So Please help me in this matter.
<?php $featuresitems=new WP_Query(array( 'post_type'=>'scbleftfeatures' )); ?>
<?php while( $featuresitems->have_posts()) : $featuresitems->the_post(); ?>
<div class="col-md-6 left-grid">
<div class="features-grid1">
<div class="feature">
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
<div class="icon5">
<?php the_post_thumbnail('features_icon_size'); ?>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 right-grid">
<div class="features-grid1">
<div class="feature">
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
<div class="icon5">
<?php the_post_thumbnail(); ?>
</div>
<div class="clearfix"></div>
</div>
</div>
<?php endwhile; ?>
Question is a little vague but I'm assuming what you actually want to do is just change the classes left-grid and right-grid for every second div. In that case you don't have to repeat the whole divs, just change the classes. This can done with help of a "counter" ($i).
<?php
$featuresitems = new WP_Query(array(
'post_type' => 'scbleftfeatures'
));
$i = 0;
?>
<?php
while( $featuresitems->have_posts()) : $featuresitems->the_post();
$i_is_even = ($i % 2 == 0);
?>
<div class="col-md-6 <?php if ($i_is_even) {echo 'left-grid'; } else { echo 'right-grid'; }; ?>">
<div class="features-grid1">
<div class="feature">
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
<div class="icon5">
<?php the_post_thumbnail('features_icon_size'); ?>
</div>
<div class="clearfix"></div>
</div>
</div>
<?php
$i ++;
endwhile;
?>
If you're curious about the % operator I suggest you check out the Modulus operator on http://php.net/manual/en/language.operators.arithmetic.php
And if you actually want to alter between different divs you can put the whole divs inside the if/else blocks instead of just the classes.
Edit:
Not sure why you'd want this as it seems you're using the bootstrap grid anyways.
when you go to:
http://dageniusmarketer.com/
you will see the posts have 2 images. I'm trying to remove the one on the bottom.
I initially added
<?php the_post_thumbnail( $size, $attr ); ?>
for the main post image, as I wasn't getting the placement I wanted, which was ABOVE the post statistics. Now that I have it above the statistics, I still have the original image, and I want to remove it.
I'm trying to play with the class .wp-image,
but that isn't giving me any sort of luck. I just want to remove the 2nd duplicate image underneath the statistics and keep whatever other images I may wish to write into my post body in the future. How do I do this?
edit: here is my php code:
<?php get_header(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- item -->
<div class="item entry" id="post-<?php the_ID(); ?>">
<div class="itemhead">
<h1>
<?php the_title(); ?>
</h1>
<?php the_post_thumbnail( $size, $attr ); ?>
<div class="postStatsContainer">
<div class="postViews">100 Views</div>
<div class="slash"></div>
<div class="postShares">100 Shares</div>
<div class="slash"></div>
<div class="postComments">100 Comments</div>
<div class="slash"></div>
<div class="date"><?php the_time('M jS, Y') ?></div>
</div>
<div style="clear: both"></div>
<!--<div class="readMore_Container">-->
<?php the_content('Read More »'); ?>
<div class="postCounter">
<i class="fa fa-pencil-square-o fa-2x"></i>#200
</div>
<div class="metadata" style="clear:both;">
<div class="TagIcon"></div>
Filed under
<span class="category"><?php the_category(', ') ?></span> |
<?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('Comment (0)', ' Comment (1)', 'Comments (%)'); ?>
</div>
<div style="clear:both;"></div>
<div style="clear:both;"></div>
</div>
</div>
<!-- end item -->
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
<p> </p>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
<!-- end content -->
</div>
<div id="primary">
<?php include(TEMPLATEPATH."/l_sidebar.php");?>
</div>
<div id="secondary">
<?php include(TEMPLATEPATH."/r_sidebar.php");?>
</div>
<?php get_footer(); ?>