I'm making a WordPress theme. I made a grid structure shown below,
It contains two rows, and every row has three columns. I want to show random posts from my WordPress database in this grid.
This is my code
<div class="row">
<div class="col-xs-12">
<div class="rst-mediagrid">
<div class="div">
<?php
$args = array(
'posts_per_page' => 6,
'offset' => 0,
'category' => '2',
'category_name' => '',
'orderby' => 'date',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'post',
'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'post_status' => 'publish',
'suppress_filters' => true
);
global $post;
$post = get_post($args);
$next_post = get_adjacent_post( true, '', false, 'taxonomy_slug' );
?>
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<?php echo get_the_post_thumbnail($post->ID); //latest post thumbnail ?>
</div>
</div>
<?php //endif; ?>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="clear"></div>
</div>
<div class="div">
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
The above code repeats the same image that I want to show thumbnails for in a perfect order, like the first row has three columns, and the first column has the latest image second column has image of previous post and third column has image of previous of previous mean 3rd post from latest post and second row also has same things.
If you have better suggestion kindly tell me.
use this It does not need to use id of current post as argument.
<?php echo get_next_post(); ?>
at last i found a solution of my question if some one else have same issue then use this
<?php
global $post;
$loop = new WP_Query( array( 'posts_per_page' => 9,'orderby'=>rand) );
$posts = array();
while ( $loop->have_posts() ) :
$items = array();
$items['link']=wp_get_attachment_url( get_post_thumbnail_id( $post->ID ));
$items['Image'] = get_the_post_thumbnail($loop->the_post());
$items['LinkPost']=get_permalink($post->ID);
$items['Title']=get_the_title($post->ID);
$items['PostTime']=get_the_time('M d,Y', $post->ID);
array_push($posts, $items);
endwhile;
for($i = 1; $i< count($posts); $i++){
?>
<?php
if($i==1){
?>
<div class="div">
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
</div>
</div>
<?php //endif; ?>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i+1]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i+2]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
</div>
</div>
<div class="clear"></div>
</div><!-- end first row-->
<?php } //end if ?>
<?php
if($i == 2 ){
?>
<div class="div">
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i+1]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i+2]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
</div>
</div>
<div class="clear"></div>
</div><!--end second row-->
<?php
}//end if
}//end for loop ?>
if some have better suggestion kindly post you answer here and also any logical issue in my code then also tell me
Related
I'm messing around with my code. My goal is to display 4 custom post type on the homepage in the HTML layout I've created. Here's my code. Actually I can get the href but I can't loop the code not even achieve my scope.
<div class="roundedframe ">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<div class="project-name"> <?php // WP_Query arguments
$args = array(
'name' => 'case-studies',
'nopaging' => true,
'posts_per_page' => '4',
);
// The Query
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
?>
Project Name
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Assuming the post type you want is case-studies you should name the key post_type and not name. You also have to place the column inside the loop and close it afterwards. You also missed a </div> tag.
<?php $query = new WP_Query( [
'post_type' => 'case-studies',
'nopaging' => true,
'posts_per_page' => '4',
] ); ?>
<?php if ( $query->have_posts() ) : ?>
<div class="roundedframe ">
<div class="container-fluid">
<div class="row">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<div class="project-name">
<h2><?php the_title(); ?></h2>
</div>
</div>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
You should put your code in the looping area. What i can see, you missed the endwhile also.
<div class="roundedframe ">
<div class="container-fluid">
<div class="row">
<?php // WP_Query arguments
$args = array(
'name' => 'case-studies',
'nopaging' => true,
'posts_per_page' => '4'
);
// The Query
$query = new WP_Query($args);
while ($query->have_posts()):
$query->the_post(); ?>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php
get_the_permalink();
?>" title="<?php
get_the_title();
?>">
<div class="project-category text-faded">
Category
</div>
<div style="background-image: url('<?php
the_post_thumbnail_url();
?>');">
<div class="project-name">
Project Name
</div>
</div>
</a>
</div>
<?php
endwhile;
?>
</div>
</div>
</div><!--.roundedframe-->
Try this and let me know. It may help you. Before that you should learn about wp_query
https://codex.wordpress.org/Class_Reference/WP_Query
I merge wordpress with bootstrap and i want get something like this:
1|
| 2
3|
I check if there is post (there is 3 at that moment). Next is loop and showing the blogs... But its show empty boxes...
What i done wrong ?
Or maybe there is better way to do this?
<div class="wrapper">
<?php
$rest_query = new WP_Query(array(
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => array('post'),
'post_status' => 'publish'
));
if($rest_query->have_posts()):
?>
<?php while($rest_query->have_posts()): $rest_query->the_post(); ?>
<?php
if ($rest_query->current_post == 0)
{
echo '<div class="row">
<div class="col-md-6">
<div class="single first-post">
<div class="thumb"><?php the_post_thumbnail(); ?></div>
<div class="content">
<h1><?php the_title(); ?></h1>
<div class="data">
<p class="date"><?php echo get_the_date();s ?></p>
<p class="social">0 shares / 0 comments</p>
</div>
</div>
</div>
</div>
<div class="middleLine"></div>
<div class="col-md-6"></div>
</div>';
}
elseif ($rest_query->current_post == 1)
{ echo '<div class="row">
<div class="col-md-6"></div>
<div class="middleLine"></div>
<div class="col-md-6">
<div class="single secound-post">
<div class="thumb"><?php the_post_thumbnail(); ?></div>
<div class="content">
<h1><?php the_title(); ?></h1>
<div class="data">
<p class="date"><?php echo get_the_date();s ?></p>
<p class="social">0 shares / 0 comments</p>
</div>
</div>
</div>
</div>
</div>'; }
?>
<?php endwhile; ?>
<?php endif; ?>
</div>
I think you code has some error while showing in the page. While you use ECHO you should not use PHP tag inside it which is why it is not working in your case.
Revising your code:
<div class="wrapper">
<?php
$rest_query = new WP_Query(array(
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => array('post'),
'post_status' => 'publish'
));
if($rest_query->have_posts()):
?>
<?php while($rest_query->have_posts()): $rest_query->the_post(); ?>
<?php
if ($rest_query->current_post == 0)
{
echo '<div class="row">
<div class="col-md-6">
<div class="single first-post">
<div class="thumb">'.the_post_thumbnail().'</div>
<div class="content">
<h1>'.the_title().'</h1>
<div class="data">
<p class="date">'.get_the_date().'</p>
<p class="social">0 shares / 0 comments</p>
</div>
</div>
</div>
</div>
<div class="middleLine"></div>
<div class="col-md-6"></div>
</div>';
}
elseif ($rest_query->current_post == 1)
{ echo '<div class="row">
<div class="col-md-6"></div>
<div class="middleLine"></div>
<div class="col-md-6">
<div class="single secound-post">
<div class="thumb">'.the_post_thumbnail().'</div>
<div class="content">
<h1>'.the_title().'</h1>
<div class="data">
<p class="date">'.get_the_date().'</p>
<p class="social">0 shares / 0 comments</p>
</div>
</div>
</div>
</div>
</div>'; }
?>
<?php endwhile; ?>
<?php endif; ?>
NOTE: If you want to print any PHP variable then it should be used as i have have shown above code.
THank you
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 the following array:
<?php
$sets = array (
array (
'img' => 'file.png',
'heading' => 'Slide Title 1',
'lead' => 'Slide leadription 1',
),
array (
'img' => 'file.png',
'heading' => 'Slide Title 2',
'lead' => 'Slide leadription 2',
),
array (
'img' => 'file.png',
'heading' => 'Slide Title 3',
'lead' => 'Slide leadription 2',
),
array (
'img' => 'file.png',
'heading' => 'Slide Title 3',
'lead' => 'Slide leadription 2',
)
);
?>
Which provides the input for this
<?php
foreach ($sets as $set) {
?>
<!-- START THE FEATURETTES -->
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
</div>
<?php
}
?>
Now this is working perfectly but I want the md-7 HTML and md-5 HTML to alternate so every other one will now be
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<div class="col-md-5">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
</div>
So basically alternating between the picture and details left-right
UPDATE
As per Jhansen's suggestion This DOES NOT WORK. It will only take the first set, it won't alternate between the two.
<?php
foreach ($sets as $set) {
?>
<!-- START THE FEATURETTES -->
<?php $count = 1; ?>
<?php if( $count % 2 != 0 ): ?>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<div class="col-md-5">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
</div>
<?php else: ?>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
</div>
<?php endif; ?>`
<?php
}?>
If you're just wanting to alternate, why not encapsulate the html within a modulus statement?
IE,
<?php $count = 1; ?>
<?php if( $count % 2 != 0 ): ?>
... HTML for first arrangement ...
<?php else: ?>
... HTML for second arrangement ...
<?php endif; ?>`
If you want to switch all loops, the proposed jhansen is correct:
<?php
$count=1;
foreach ($sets as $set) { ?>
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<?php if($count % 2 != 0){ ?>
<div class="col-md-7">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<div class="col-md-5">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<?php }else{ ?>
<div class="col-md-7">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<?php } ?>
</div>
<?php $count++; } ?>
If you want to switch only the first should do something like this:
<?php
foreach ($sets as $k => $set) { ?>
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<?php if($k==0){ ?>
<div class="col-md-7">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<div class="col-md-5">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<?php }else{ ?>
<div class="col-md-7">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<?php } ?>
</div>
<?php } ?>
I have these tile elements on the top of my homepage:
<div id="tile-holder" class="group">
<div class="tile1">
<div class="tile-textbox" style="color: #22284f;">Just Some Title</div>
</div>
<div class="tile2">
<img class="post-image" src="images/sample-large-2.jpg"/>
<div class="tile-datebox">
<img src="images/video-icon.png" >
<p>2013/2/25</p>
<div class="tile-info"><h1>Title 1</h1></div>
</div>
</div>
<div class="tile3">
<img class="post-image" src="images/sample-mid-2.jpg"/>
<div class="tile-datebox">
<img src="images/image-icon.png" >
<p>2013/5/15</p>
<div class="tile-info"><h1>Title 2</h1></div>
</div>
</div>
<div class="tile4">
<img class="post-image" src="images/sample-mid-3.jpg"/>
<div class="tile-datebox">
<img src="images/text-icon.png" >
<p>2013/6/17</p>
<div class="tile-info"><h1>Title 3</h1></div>
</div>
</div>
<div class="tile5">
<div class="tile-textbox" style="color: #ffffff;">Another Title</div>
</div>
</div> <!-- END Tile Holder -->
and I want to show 3 most recent posts in tile 2, 3 and 4; just the title, date and an image of that that gets the url from custom fields that I defined, I tried using :
.
.
.
<?php query_posts("post_per_page=3"); the_post(); ?>
<div class="tile2">
<img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
<div class="tile-datebox">
<img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
<p><?php the_time('F jS, Y') ?></p>
<div class="tile-info"><h1><?php the_title(); ?></h1></div>
</div>
</div>
<div class="tile3">
<img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
<div class="tile-datebox">
<img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
<p><?php the_time('F jS, Y') ?></p>
<div class="tile-info"><h1><?php the_title(); ?></h1></div>
</div>
</div>
<div class="tile4">
<img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
<div class="tile-datebox">
<img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
<p><?php the_time('F jS, Y') ?></p>
<div class="tile-info"><h1><?php the_title(); ?></h1></div>
</div>
</div>
<?php wp_reset_query(); ?>
.
.
.
but it just gets one post and shows it there, what's wrong? what did I missed? please help, I'm new in the world of wordpress!
Here is one way to do it. If you're new you should read up on these essential topics: The Loop and WP_Query.
<?php
$query = new WP_Query( 'posts_per_page=3' );
// The Loop
if ( $query->have_posts() ) {
$i = 1;
while ( $query->have_posts() ) {
$query->the_post();
$i++;
?>
<div class="tile<?php echo $i ?>">
<img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
<div class="tile-datebox">
<img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
<p><?php the_time('F jS, Y') ?></p>
<div class="tile-info"><h1><?php the_title(); ?></h1></div>
</div>
</div>
<?php
}
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
<?php $args = array(
'numberposts' => 3,
'offset' => 0,
'category' => 0,
'orderby' => 'post_date',
'order' => 'DESC',
'include' => ,
'exclude' => ,
'meta_key' => ,
'meta_value' =>,
'post_type' => 'post',
'post_status' => 'draft, publish, future, pending, private',
'suppress_filters' => true );
$recent_posts = wp_get_recent_posts( $args, ARRAY_A );
//write loop here
?>