looping through Wordpress posts - php

i am trying to get wordpress posts, 3 at a time, this is the code i'm using:
<?php while ( have_posts() ) : the_post() ?>
<?php if(get_post_meta($post->ID, 'feature', true) != true) {; ?>
<div class="show_col">
<?php for ($i = 1; $i <= 3; $i++) { ?>
<div class="set">
<a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<img class="image" src="http://localhost/portpress/wp-content/themes/myTemp/portfolio/<?php echo get_post_meta($post->ID, 'intro_thump', true); ?>.jpg" width="300px" alt="AUREL #<?php the_ID(); ?>" />
</a>
<?php the_content("<P class='more'> Read More » </p>"); ?>
</div>
<?php }; ?>
</div>
<?php }; ?>
<?php endwhile; ?>
i know this loop is echoing ONE post THREE times - but what i really want is this end result
<div class="show_col">
<div class="show_col"> post1 </div>
<div class="show_col"> post2 </div>
<div class="show_col"> post3 </div>
</div>
<div class="show_col">
<div class="show_col"> post4 </div>
<div class="show_col"> post5 </div>
<div class="show_col"> post6 </div>
</div>
<!-- and so on -->
i am doing this as the height of each post varies - therefore i add something like
.show_col{clear:both} so that the next three posts go under neath
i hope you could help
thanks

This is the code you need (I corrected some of your syntax):
<?php $i = 0; ?>
<?php while ( have_posts() ): the_post();?>
<?php if(get_post_meta($post->ID, 'feature', true) != true): ?>
<div class="show_col">
<?php if(($i%3) == 0): ?>
</div>
<div class="show_col">
<?php endif;?>
<div class="set">
<a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<img class="image" src="http://localhost/portpress/wp-content/themes/myTemp/portfolio/<?php echo get_post_meta($post->ID, 'intro_thump', true); ?>.jpg" width="300px" alt="AUREL #<?php the_ID(); ?>" />
</a>
<?php the_content("<P class='more'> Read More » </p>"); ?>
</div>
</div>
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
Also you seem to add a semicolon after closing the function ( }; ), don't do that, there is no need for it.

Related

Code shows nothing on wordpress: while (have_posts()) {the_post();?>

I've put this code to the index.php on wordpress, but it doesn't show up anything. I thought it should shows all the posts latest to newest. Anyone can solve this?
<div class="card">
<div class="card-image">
<a href="<?php echo the_permalink(); ?>">
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID); ?>" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
<div class="card-meta">
Đăng bởi <?php the_author(); ?> vào <?php the_time('j F, Y') ?> trong <?php echo get_the_category_list(',') ?>
</div>
<p>
<?php echo wp_trim_words(get_the_excerpt(), 30); ?>
</p>
Tìm hiểu thêm
</div>
</div>
<?php }
wp_reset_query();
?>
Thank you very much.
You're missing half of a loop pretty much ...
If you want to use the post template that you have in you question, then you can do something like this:
<?php if ( have_posts() ):
$i = 0;
while ( have_posts() ):
$i++;
if ( $i > 1 ):
echo '<hr>';
endif; ?>
<div class="card">
<div class="card-image">
<a href="<?php echo the_permalink(); ?>">
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID); ?>" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
<div class="card-meta">
Đăng bởi <?php the_author(); ?> vào <?php the_time('j F, Y') ?> trong <?php echo get_the_category_list(',') ?>
</div>
<p>
<?php echo wp_trim_words(get_the_excerpt(), 30); ?>
</p>
Tìm hiểu thêm
</div>
</div>
<?php
endwhile;
endif; ?>
Should be working.

How to add posts in the home page same as blog page with me selecting static page for each?

I'm new to WordPress, and I've created a custom template, I'm facing a problem when I try to fetch the posts to the front page (homepage).
In (dashboard->Reading) I set my homepage displays as a Static page and selected Home page as (home) and Post page as (posts).
In the index.php the code that's showing the posts in Posts page is :
<section class="recent-posts" id="recent-posts">
<div class="container">
<div class="title text-center">
<h1 class="title-blue">posts</h1>
</div>
<div class="row">
<?php
while(have_posts()) {
the_post();
?>
<div class="col-lg-6">
<div class="single-rpost d-sm-flex align-items-center" data-aos="fade-right"
data-aos-duration="800">
<div class="post-thumb">
<img class="img-fluid" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="post-1">
</div>
<div class="post-content text-sm-right">
<time datetime="<?php the_time('l, jS/n/Y'); ?>">
<?php the_time('l, jS/n/Y'); ?>
</time>
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<p class="post-excerpt">
<?php echo wp_trim_words(get_the_excerpt(), 10); ?>
</p>
<p>
<!-- <a href="#"> -->
<?php echo get_the_category_list(' ') ?>
<!-- </a> -->
</p>
<a class="post-btn" href="<?php the_permalink(); ?>">
<i class="fa fa-arrow-left"></i>
</a>
</div>
</div>
</div>
<?php
}
wp_reset_query();
?>
</div>
<!-- Posts Navigation -->
</div>
</section>
<!-- Paginate through pages -->
<div class="pagination">
<?php echo paginate_links(); ?>
</div>
It works fine in posts page but when I copy the same code in page-home.php file it doesn't work and fetches no posts at all.
Sorry I'm a beginner, but I need help.
Thanks.
Try this
<?php
global $paged, $wp_query, $wp;
$args = wp_parse_args($wp->matched_query);
if ( !empty ( $args['paged'] ) && 0 == $paged ) {
$wp_query->set('paged', $args['paged']);
$paged = $args['paged'];
}
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('paged='.$paged.'&showposts=10&cat='.get_option('prototype_blog_cat'));
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="col-lg-6">
<div class="single-rpost d-sm-flex align-items-center" data-aos="fade-right"
data-aos-duration="800">
<div class="post-thumb">
<img class="img-fluid" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="post-1">
</div>
<div class="post-content text-sm-right">
<time datetime="<?php the_time('l, jS/n/Y'); ?>">
<?php the_time('l, jS/n/Y'); ?>
</time>
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<p class="post-excerpt">
<?php echo wp_trim_words(get_the_excerpt(), 10); ?>
</p>
<p>
<!-- <a href="#"> -->
<?php echo get_the_category_list(' ') ?>
<!-- </a> -->
</p>
<a class="post-btn" href="<?php the_permalink(); ?>">
<i class="fa fa-arrow-left"></i>
</a>
</div>
</div>
</div>
<?php endwhile; ?>
<span >
<?php echo paginate_links( array(
'prev_text' => '<span>Previous</span>',
'next_text' => '<span>Next</span>'
)); ?>
It should solve the problem.

How Do I Add More Latest Post To Homepage

I can work pretty good with CSS and HTML but know nothing about PHP. I'm working on a wordpress client project and he wants more than one Latest Post/Recent Post to display on the static homepage. I'm pulling my hair out trying to figure this out. From the posted code, can someone show me what to delete and what to replace it with to make 5 of the most latest post appear? I really appreciate everyone's help.
<?php
/**
* Template Name: Homepage
*/
?>
<?php $mts_options = get_option(MTS_THEME_NAME); ?>
<?php get_header(); ?>
<?php if ($mts_options['mts_banner_show'] == '1') { ?>
<div class="b_first">
<div class="main-container">
<div class="container">
<div class="blog_first">
<!--first content-->
<div id="first_b">
<div class="b_right" <?php if ( isset( $_GET['mailchimp_signup'] ) || !empty( $_GET['aweber_signedup'] ) ) echo 'style="display:none;"'; ?>>
<h2 class="front-view-title">
<?php echo $mts_options['mts_banner_title']; ?>
</h2>
<div class="front-view-content">
<?php echo $mts_options['mts_banner_texts']; ?>
</div>
<?php if(!empty($mts_options['mts_button_text'])) { ?>
<div class="readMore" style="background:<?php echo $mts_options['mts_banner_button_bg']; ?>">
<?php echo $mts_options['mts_button_text']; ?>
<?php if(!empty($mts_options['mts_arrow_image'])) { ?>
<div class="b_dollor">
<img src="<?php echo $mts_options['mts_arrow_image']; ?>">
</div>
<?php } ?>
</div>
<?php } ?>
</div>
<!--Rightside Content-Option-1-->
</div>
<div id="second_b" <?php if ( !isset( $_GET['mailchimp_signup'] ) && empty( $_GET['aweber_signedup'] ) ) echo 'style="display:none;"'; ?>>
<div class="blog_first_alternative">
<h2 class="front-view-title">
<?php echo $mts_options['mts_banner_title']; ?>
</h2>
<div class="form_wrap">
<?php if(!empty($mts_options['mts_form_image'])) { ?>
<div class="form_wrap_left">
<img src="<?php echo $mts_options['mts_form_image']; ?>">
</div>
<?php } ?>
<div class="form_wrap_right">
<?php dynamic_sidebar('Home Subscribe Widget'); ?>
</div>
</div>
</div>
<!--Rightside content alternative option-->
<script type="text/javascript">
function hide_b() {
jQuery('#first_b').hide();
jQuery('#second_b').show();
}
</script>
</div>
</div>
<!--End of first content-->
</div>
</div>
</div>
<?php } ?>
<div class="main-container">
<div id="page">
<div class="artcl article">
<div id="content_box">
<?php if ($mts_options['mts_banner2_show'] == '1') { ?>
<!--Second Content-->
<div class="blog_second">
<div class="b_left">
<h2 class="front-view-title">
<?php echo $mts_options['mts_social_title']; ?>
</h2>
<?php if ( !empty($mts_options['mts_banner_social']) && is_array($mts_options['mts_banner_social'])) { ?>
<div class="social-icons">
<ul>
<?php foreach( $mts_options['mts_banner_social'] as $header_icons ) : ?>
<?php if( ! empty( $header_icons['mts_banner_icon'] ) && isset( $header_icons['mts_banner_icon'] ) ) : ?>
<li><span class="fa fa-<?php print $header_icons['mts_banner_icon'] ?>"></span></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php } ?>
</div>
<div class="b_right">
<h2 class="front-view-title">
<?php echo $mts_options['mts_books_title']; ?>
</h2>
<div class="b_readings">
<ul>
<?php if(!empty($mts_options['mts_books_image'])){ ?>
<?php foreach( $mts_options['mts_books_image'] as $slide ) : ?>
<li> <?php echo wp_get_attachment_image( $slide['mts_book_image'], false, array('title' =>'') ); ?></li>
<?php endforeach; ?>
<li class="more-books"><?php echo $mts_options['mts_more_book_text']; ?><i class="fa fa-angle-double-right"></i></li>
<?php } ?>
</ul>
</div>
</div>
</div>
<?php } ?>
<?php if(!empty($mts_options['mts_featured_posts']) && !empty($mts_options['mts_featured_post_cat'])) { ?>
<div class="home_article">
<?php
$featured_cat = implode( ",", $mts_options['mts_featured_post_cat'] );
$featured_query = new WP_Query('cat='.$featured_cat.'&posts_per_page=5');
if ($featured_query->have_posts()) : while ( $featured_query->have_posts() ) : $featured_query->the_post(); ?>
<article class="latestPost featuredpost excerpt">
<!--Featured Post-->
<header>
<h3 class="title front-view-title"><?php echo get_the_category_by_ID($featured_cat); ?></h3>
<?php if(has_post_thumbnail()) { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>" id="featured-thumbnail">
<div class="featured-thumbnail">
<?php the_post_thumbnail('steadyincome-featured',array('title' => '')); ?> <?php if (function_exists('wp_review_show_total')) wp_review_show_total(true, 'latestPost-review-wrapper'); ?>
</div>
</a>
<?php } ?>
</header>
<div class="latestpost_wrap">
<h2 class="front-view-title">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>
"><?php the_title(); ?></a>
</h2>
<?php mts_the_postinfo( 'home' ); ?>
<div class="front-view-content">
<?php echo mts_excerpt(45); ?>
</div>
<?php mts_readmore(); ?>
</div>
</article>
<?php endwhile; wp_reset_query(); endif; ?>
<?php $j = 0;
if (get_query_var('page') > 1) {
$paged = get_query_var('page');
} elseif (get_query_var('paged')) {
$paged = get_query_var('paged');
} else {
$paged = 1;
}
$args= array('paged' => $paged, 'post_type' => 'post');
query_posts($args);
if ( have_posts() ) : while ( have_posts() ) : the_post();?>
<?php if($j ==0){ ?>
<article class="latestPost latestpost excerpt">
<!--Latest Post-->
<header>
<h3 class="title front-view-title"><?php _e('Latest Post','steadyincome'); ?></h3>
<a href="<?php the_permalink() ?>" title="Menu widget article" id="featured-thumbnail">
<div class="featured-thumbnail">
<?php the_post_thumbnail('steadyincome-featured',array('title' => '')); ?>
<?php if (function_exists('wp_review_show_total')) wp_review_show_total(true, 'latestPost-review-wrapper'); ?>
</div>
</a>
</header>
<div class="latestpost_wrap">
<h2 class="front-view-title">
<?php the_title(); ?>
</h2>
<?php mts_the_postinfo( 'home' ); ?>
<div class="front-view-content">
<?php echo mts_excerpt(40); ?>
</div>
<?php mts_readmore(); ?>
</div>
</article>
<?php } ?>
<?php $j++; endwhile; wp_reset_query(); endif; ?>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
Looks like you might have some setting in your theme settings. However if you have no setting there.
You can see this line that is limiting latest posts to just one Post:
<?php if($j ==0){ ?>
You may try to change it to number you want to try and see if it loops more posts there:
<?php if($j < 5){ ?>
This should allow the loop to run for five posts now. Give it a try and see if it helps.

Shortcode is moving the_content outside of the article container in WordPress

I've made a shortcode function that returns some Advanced Custom Fields depending on which repeater field is chosen. It displays correctly and in the right order however any content typed underneath the shortcode is moved outside of its <article> container element.
Here is the code:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
</div>
</div>
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
Can anyone help solve this mystery? Many thanks.
You have two extra closing <div>'s in your code.
Try this:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
<!--/div>
</div-->
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');

WordPress limit posts in category page

This is my WordPress loop code... :)
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php if (is_category('instagram')) {?>
<?php
$__width = '225';
$__height = '225';
?>
<div id="instagram-photos">
<a href="<?php the_permalink() ?>"class="instagram-photo">
<div class="photo"><?php custom_get_post_attachments(get_the_ID(), $__width, $__height, get_the_title()); ?> </div>
</a>
</div>
<?php }elseif(is_category('runway')) { ?>
<?php
$__width = '298';
$__height = '500';
?>
<div id="runway-category">
<a href="<?php the_permalink() ?>" class="runway-category-posts">
<div class="photo"><?php custom_get_post_attachments(get_the_ID(), $__width, $__height, get_the_title()); ?><div class="runway-title"><?php the_title(); ?></div></div>
</a>
</div>
<?php } elseif(is_category('')){?>
<article <?php post_class(); ?>>
<div class="latest-posts">
<div class="latest-posts-info">
<div class="title"><h1><?php the_title(); ?><h1></div>
<div class="text">
<?php the_excerpt(); ?>
</div>
<div class="post-share">
<div class="facebook-like" style="float:left;">
<img src="<?php echo get_template_directory_uri(); ?>/images/facebook-icon.png" />
</div>
<div class="twitter-follow" style="float:left;">
<a href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink() ?>" target="_blank" ><img src="<?php echo get_template_directory_uri(); ?>/images/twitter-icon.png" /></a>
</div>
<div class="google-share">
<a href="https://plus.google.com/share?url=<?php the_permalink() ?>" target="_blank" ><img src="<?php echo get_template_directory_uri(); ?>/images/google-icon.png" /></a>
</div>
</div>
<div class="clear"></div><div class="post-read-more">Read More</div>
<div class="clear"></div>
</div>
<div class="latest-posts-img">
<?php //echo get_the_post_thumbnail(); ?>
<?php custom_get_post_attachments(get_the_ID(), $__width, $__height, get_the_title()); ?>
</div>
<div class="clear"></div>
</div>
</article>
<?php }?>
<?php endwhile; else: ?>
<div class="content">
<p class="not-found-p">No articles found!</p>
</div>
<?php endif; ?>
As you see I have few conditions as is_category('instagram').
The thing is: I need to limit the post quantity in exact category, not at all them.
How can I do that?
i am uncertain if we can do this in a wordpress way .. but here is the workaround --
$no_of_posts = 5;
$post_counter = 0;
if(is_Category('instagram') && ($no_of_posts<=$post_counter)) {
// bunch of code
$post_counter++;
}
untested but something like could get you going

Categories