I have the following code:
<?php
$args = array(
'category__in' => array(3),
'posts_per_page' => 3
);
$loop = new WP_Query( $args );
while ($loop->have_posts() ) : $loop->the_post();
?>
<div class="col-md-4 col-sm-4 col-xs-12" style="padding-left:0; padding-right:0;">
<a style="text-decoration:none" href="<?php echo get_permalink(); ?>">
<div class="postsize" style="background:#242930; color:white !important;">
<?php echo get_the_post_thumbnail( $page->ID, 'categoryimage', array('class' => 'faqposts')); ?>
<div class="contentfaq" style="padding: 0 20px 20px; min-height:235px;">
<h3 style="color:white !important;"><?php the_title(); ?></h3>
<div style="color:white";>
<p><?php echo content2(15); ?></p>
</div>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
Which gets my latest posts, and displays them in blocks.
Now, I am trying to make the second block background white, but can not target it, well I am unsure on how to.
Is there a quick way to target this?
Create a variable and check if you're in second step in loop.
$i = 1;
while ($loop->have_posts() ) : $loop->the_post();
?>
<div class="col-md-4 col-sm-4 col-xs-12" style="padding-left:0; padding-right:0;">
<a style="text-decoration:none; color:white;" href="<?php echo get_permalink(); ?>">
<div class="postsize" style="<?php echo $i == 2 ? 'background: white; color: black;' : 'background: #242930; color: #fff !important'; ?>">...
...
<?php
$i++;
endwhile;
?>
Related
I'm trying to use the Infinite Scroll plugin for Wordpress. I set it up and it doesn't work.
Screen of settings:
Template file
<div id="posts-wrapper" class="row main">
<?php $counter = 1; ?>
<?php if ( have_posts() ){ while ( have_posts() ){ the_post(); ?>
<?php $url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' ); ?>
<div class="single-post <?php if( $counter == 5 ) { echo "col-xs-12 col-sm-12 col-md-8 col-lg-8"; } else { echo "col-xs-12 col-sm-6 col-md-4 col-lg-4";} ?>">
<div class="thumbnail">
<div class="category-wrapper"><?php the_category(', ');?></div>
<a class="href-overlay" href="<?php the_permalink(); ?>"><div class="wrapper">
<div class="<?php if( has_term( 'hot', 'hot', $post->ID ) ){ echo "inside inside-hot"; } else { echo "inside";} ?>"><div class="image-cover" style="background-image: url(<?php echo $url[0]; ?>)"></div></div>
</div></a>
<div class="post-wrapper">
<p class="post-created-by">Napisane przez <strong><span class="special"><?php echo get_the_author(); ?></span></strong> | <i class="glyphicon glyphicon-comment"></i> <?php comments_number( '0' , '1' , '%' ); ?></p>
<h2 class="post-title"><?php the_title(); ?></h2>
</div>
</div>
</div>
<?php $counter++ ; ?>
<?php }else{ ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php } ?>
</div>
<div id="paginacja">
<?php next_posts_link('wczytaj więcej »')?>
</div>
What am I doing wrong?
I want to show 5 posts, first one is bigger and has a other class around itself.
I've found a few other posts which are basically the same, but none of them shows how to 'wrap' the first post and 'wrap' all the other posts together.
I've made an example with html/css how it should look.
Hope someone can help me with this. :)
<?php
$args = array(
'post_type' => 'services',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post();
if ($loop->current_post == 0) {
echo '<div class="col-md-6">';
the_post_thumbnail();
the_title();
echo '</div>';
}
else {
echo '<div class="col-md-6">';
the_post_thumbnail();
the_title();
echo '</div>';
}
endwhile; wp_reset_postdata(); ?>
.col-md-6 {
width: 50%;
padding: 0 !important;
float: left;
}
img {
width: 100%;
height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="col-md-6">
<img src="http://placehold.it/100x100" alt="">
</div>
<div class="col-md-6">
<div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
<div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
<div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
<div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
</div>
</section>
<?php
$args = array(
'post_type' => 'services',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post();
echo '<div class="some-div">';
if ($loop->current_post == 0) {
echo '<div class="col-md-6">';
the_post_thumbnail();
the_title();
echo '</div>';
echo '</div>'; // close .some-div
echo '<div class="other-div">';
}
else {
echo '<div class="col-md-6">';
the_post_thumbnail();
the_title();
echo '</div>';
}
echo '</div>'; // close .other-div
endwhile; wp_reset_postdata(); ?>
I've fixed this the way I want.
Here's the code I've uesd if someone's looking for something like this.
<section class="no-gutter">
<?php
$args = array(
'post_type' => 'services',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post(); ?>
<?php if ($loop->current_post == 0) : ?>
<!-- large -->
<div class="col-md-6 large">
<a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
<div class="wrapper">
<?php the_post_thumbnail(); ?>
<span><?php the_title(); ?></span>
</div>
</a>
</div><!-- end large -->
<!-- small -->
<div class="col-md-6">
<?php else : ?>
<div class="col-md-6">
<a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
<div class="wrapper">
<?php the_post_thumbnail(); ?>
<span><?php the_title(); ?></span>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_postdata(); ?>
</div><!-- end small -->
I'm trying to get 2 different styled posts to show up one after the other and then back around. So it should look like
DB
Uncategorized
DB
Uncategorized
etc
And to have them both styled differently. I'm not great with PHP and the best I got so far was all in one category and then all in the other.
<section class="home-middle">
<div class="container">
<div class="row">
<div class="col-sm-8">
<?php
$args = array('category_name' => 'designer backstage',
'post_status' => 'publish',
'posts_per_page' => '3' );
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<div class="stylists-book">
<div class="image">
<div class="meta-designer">
<div class="pro-pic"><img src="images/stylists-pro1.jpg"></div>
<h3>Designer<hr></h3>
<p><?php the_author(); ?></p>
<span><?php the_date(); ?></span>
</div>
<img><?php the_post_thumbnail(); ?>
</div>
<?php
$args = array('category_name' => 'uncategorized',
'post_status' => 'publish',
'posts_per_page' => '3');
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<div class="look" style="max-height: 200px">
<div class="row">
<div class="col-md-4">
<div class="team-modster">
<span><?php the_author(); ?></span>
<?php the_title(); ?>
</div>
</div>
<div class="col-md-8">
<a href="<?php the_permalink() ?>">
<img style="height:200px" src="<?php echo catch_that_image() ?>" />
</a>
</div>
</div>
</div>
<?php endwhile; else: >
Oops, there are no posts.
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
</div>
</div>
</section>
A co-worker took a look at it and got it working. Figured I would post the solution.
<?php
$args = array('category_name' => 'designer-backstage',
'post_status' => 'publish',
'posts_per_page' => '5' );
$designer_posts = new WP_Query($args);
$args = array('category_name' => 'uncategorized',
'post_status' => 'publish',
'posts_per_page' => '5' );
$uncategorized_posts = new WP_Query($args);
if ($designer_posts->have_posts() && $uncategorized_posts->have_posts()) :
// If a new category is added, add it to this array
$category_posts = [$designer_posts, $uncategorized_posts];
$cat_posts_idx = 0;
$new_category_posts = [];
$post_count = 0;
$max_posts = 10;
// Alternate categories and store into a new posts array
while ($post_count < $max_posts) {
// Iterate the post
$category_posts[$cat_posts_idx]->the_post();
// get_the_category() returns an array with one item in this case
$category = get_the_category()[0];
if ($category->slug == 'designer-backstage') { ?>
<div class="stylists-book">
<div class="image">
<div class="meta-designer">
<div class="pro-pic"><img src="images/stylists-pro1.jpg"></div>
<h3>Designer<hr></h3>
<p><?php the_author(); ?></p>
<span><?php the_date(); ?></span>
</div>
<img><?php the_post_thumbnail(); ?>
</div>
<?php }
else if ($category->slug == 'uncategorized') { ?>
<div class="look">
<div class="row">
<div class="col-md-4">
<div class="team-m">
<span><?php the_author(); ?></span>
<?php the_title(); ?>
</div>
</div>
<div class="col-md-8" style="max-height: 225px; overflow: hidden;"><img style="" src="<?php echo catch_that_image() ?>" /></div>
</div>
</div>
</div>
<?php }
else:
?>
Oops, there are no posts.
<?php
endif;
?>
I have create a custom blog page template but the problem is that i am not able to insert pagination links yet i want to display pagination links next and previous on the bottom of blogs what should i do....
here is my code
<?php /*
Template Name: My Blog Page
*/
?>
<div class="col-md-9 col-sm-9">
<!-- Blog Post -->
<?php
$args = array('post_type' => 'post', 'posts_per_page' => 10, 'ignore_sticky_posts' => 1, 'category_name' => 'blog', );
$post_type_data = new WP_Query($args);
while ($post_type_data->have_posts()):
$post_type_data->the_post();
global $more;
$more = 0; ?>
<div class="row blog-row" style="padding: 20px 0;border- bottom: 1px solid #A9A9A9;">
<div style="width: 50%;float: left">
<div class="feature-image img-overlay">
<?php if (has_post_thumbnail()): ?>
<?php $default = array('class' => 'img-responsive');
the_post_thumbnail('wl_blog_img', $default); ?>
<?php endif; ?>
</div>
</div>
<div class="feature-content" style="padding-left: 15px;display: inline-block;width: 50%">
<h3 class="h3-blog-title">
<?php echo the_title(); ?>
</h3>
<span style="padding-right: 5px"><i class="icon-picture"></i></span>
<span style="padding-right: 5px"><i class="icon-time"></i><?php echo get_the_date('j'); ?> <?php echo the_time('M'); ?>, <?php echo the_time('Y'); ?></span>
<span style="padding-right: 5px"><i class="icon-user"></i><?php echo get_the_author(); ?></span><br><br>
<?php the_excerpt(); ?>
<a class="my-btn" href="<?php echo the_permalink(); ?>">Read More</a>
</div>
<div class="feature-details1">
</div>
</div>
<?php endwhile; ?>
<!-- //Blog Post// -->
</div>
Use following code for pagination
<?php /*
Template Name: My Blog Page
*/
?><div class="col-md-9 col-sm-9">
<!-- Blog Post -->
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('post_type' => 'post', 'posts_per_page' => 2, 'ignore_sticky_posts' => 1, 'category_name' => 'blog', 'paged' => $paged );
$post_type_data = new WP_Query($args);
set_query_var('page',$paged);
while ($post_type_data->have_posts()):
$post_type_data->the_post();
global $more;
$more = 0; ?>
<div class="row blog-row" style="padding: 20px 0;border- bottom: 1px solid #A9A9A9;">
<div style="width: 50%;float: left">
<div class="feature-image img-overlay">
<?php if (has_post_thumbnail()): ?>
<?php $default = array('class' => 'img-responsive');
the_post_thumbnail('wl_blog_img', $default); ?>
<?php endif; ?>
</div>
</div>
<div class="feature-content" style="padding-left: 15px;display: inline-block;width: 50%">
<h3 class="h3-blog-title">
<?php echo the_title(); ?>
</h3>
<span style="padding-right: 5px"><i class="icon-picture"></i></span>
<span style="padding-right: 5px"><i class="icon-time"></i><?php echo get_the_date('j'); ?> <?php echo the_time('M'); ?>, <?php echo the_time('Y'); ?></span>
<span style="padding-right: 5px"><i class="icon-user"></i><?php echo get_the_author(); ?></span><br><br>
<?php the_excerpt(); ?>
<a class="my-btn" href="<?php echo the_permalink(); ?>">Read More</a>
</div>
<div class="feature-details1">
</div>
</div>
<?php endwhile; ?>
<div class="nav-previous alignleft"><?php previous_posts_link('« Newer posts');?></div>
<div class="nav-next alignright"><?php next_posts_link( 'Older posts »', $post_type_data->max_num_pages ); ?></div>
<!-- //Blog Post// -->
</div>
I'm trying to paginate a current category. But when I go to the next page, wordpress not show only all post of the current category, wordpress show all post of all categories. Somebody can help me?
Category.php
<!-- loop -->
<?php $cat_ID = get_query_var('cat'); ?>
<?php query_posts('&cat=<' . $cat_ID . '&showposts=6'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-sm-12 col-md-6 col-xs-12 col-lg-4">
<div class="thumbnail">
<article>
<?php the_post_thumbnail('photo-thumbnail') ?>
<div class="caption">
<h3><?php the_title(); ?></h3>
<!-- añade custom field autor del relato -->
</div>
</article>
</div>
<div class="thumbnailFooter">
<div class="pull-left" style="margin-bottom: 4px;">
<?php echo get_avatar(get_the_author_meta('ID'), 32); ?>
</div>
<div class="smallFont pull-left" style="margin-left: 5px; width: 270px;">
<span class="blue bold"><?php the_author(); ?></span>
</div>
<div class="verySmallFont pull-left" style="margin-left: 5px; margin-top: -3px;">
en <?php the_category(none); ?> el <?php the_date(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php my_pagination(); ?>
<?php else : ?>
<?php endif; ?>
<!-- / fin del loop -->
Function.php
<?php
if (!function_exists('my_pagination')) :
function my_pagination() {
global $wp_query;
$big = 999999999; // need an unlikely integer
echo paginate_links(
array(
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
'format' => '?paged=%#%',
'current' => max(1, get_query_var('paged')),
'total' => $wp_query->max_num_pages,
'prev_text' => __('« Anterior'),
'next_text' => __('Siguiente »'),
)
);
}
endif;
EDIT::::::::::
After do suggested changes (but don't works). Wordpress not limit 5 post per page and the paginator not appear.
<!-- loop de post -->
<?php
$project_category = wp_get_post_categories($post->ID); ?>
<?php $query = new WP_Query(array('posts_per_page' => 5)); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-sm-12 col-md-6 col-xs-12 col-lg-4">
<div class="thumbnail">
<article>
<?php the_post_thumbnail('photo-thumbnail') ?>
<div class="caption">
<a href="<?php the_permalink(); ?>">
<h3 style="font-weight:bold; margin-top: 0px; line-height: 1.3;"><?php the_title(); ?></h3>
</a>
<!-- añade custom field autor del relato -->
</div>
</article>
</div>
<div class="thumbnailFooter">
<div class="pull-left" style="margin-bottom: 4px;">
<?php echo get_avatar(get_the_author_meta('ID'), 32); ?>
</div>
<div class="smallFont pull-left" style="margin-left: 5px; width: 270px;">
<span class="blue bold"><?php the_author(); ?></span>
</div>
<div class="verySmallFont pull-left" style="margin-left: 5px; margin-top: -3px;">
en <span class="bold gray"><?php the_category(none); ?></span>
el <?php the_date(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<div style="text-align: right; padding-right: 12px;">
<?php my_pagination(); ?>
</div>
<?php else : ?>
<?php endif; ?>
<!-- / fin del loop -->
You seem to have a left angle bracket < inside your query_posts function. Try removing that.