My problem is that for some reason pages title and content prints upside down. And it prints searchbar twice. Can you please take look at coede bwlow
<?php get_header(); ?>
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="row text-center no-margin">
<?php
$currentPage = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 3,'post_type'=>'post', 'paged' => $currentPage);
new WP_Query($args);
if( have_posts() ): $i = 0;
while( have_posts() ): the_post(); ?>
<?php
if($i==0): $column = 12; $class = '';
elseif($i > 0 && $i <= 2): $column = 6; $class = ' second-row-padding';
elseif($i > 2): $column = 4; $class = ' third-row-padding';
endif;
?>
<?php the_content(); ?>
<div class="col-xs-<?php echo $column; echo $class; ?> blog-item">
<?php if( has_post_thumbnail() ):
$urlImg = wp_get_attachment_url( get_post_thumbnail_id( get_the_ID() ) );
endif; ?>
<div class="blog-element" style="background-image: url(<?php echo $urlImg; ?>);">
<!--<?php the_title( sprintf('<h1 class="entry-title">', esc_url( get_permalink() ) ),'</h1>' ); ?> -->
<h1 class="entry-title"><?php the_title(); ?></h1>
<small><?php the_category(' '); ?></small>
</div>
</div>
<?php $i++; endwhile; ?>
<div class="col-xs-6 text-left">
<?php next_posts_link('« Older Posts'); ?>
</div>
<div class="col-xs-6 text-right">
<?php previous_posts_link('Newer Posts »'); ?>
</div>
<?php endif;
wp_reset_query();
?>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
Maybe you were doing the Wordpress101 course in youtube. In the code you show there is not a search bar. The search bar is in the header that you called here using:
Maybe in the header was repeated the calling to the search form:
<div class="container">
<?php get_search_form(); ?>
</div>
Also, I had the problem that bootstrap wasn't rendering in a good way the menu, so I had to add also in the header.php (no matter if I also refer to the bootstrap in the functions.php file , as I assumed you did it in the tutorial) the lines on the Bootstrap CDN in this page:
http://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/
Copy this CDN links:
Latest compiled and minified CSS
Optional theme
Latest compiled and minified JavaScript
Related
I am trying to get latest posts to display through a template page i am building for pages, the loop is not running the latest post only one page
ok, I have a simple loop that gets latest post
my loop
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
and content.php
<div class="blog-post">
<h2 class="blog-post-title">
<?php the_title(); ?>
</h2>
<p class="blog-post-meta">
<?php the_date(); ?>by <?php the_author(); ?>
<a href="<?php comments_link(); ?>">
<?php printf(_nx('One Comment', '%1$s Comments', get_comments_number(), 'comments title', 'textdomain'), number_format_i18n(get_comments_number())); ?>
</a>
</p>
<?php if ( has_post_thumbnail() ) {?>
<div class="row">
<div class="col-md-4">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
<div class="col-md-6">
<?php the_excerpt(); ?>
</div>
</div>
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?>
</div>
when i run the loop in index.php i get my latest blog post, perfect.
however, i am building a template page, i try and include the loop in this page, i just get one page (not all posts).
my template
<div class="row">
<div class="col-sm-12">
// content bar
<?php get_template_part('advicecentre_bar', get_post_format()) ?>
// cmd driven content
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content_page', get_post_format());
endwhile; endif;
?>
// recent post
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
</div> <!-- /.col -->
</div> <!-- /.row -->
<?php get_footer(); ?>
If you are using multiple loops on the same page, you must use rewind_posts() like so:
<div class="row">
<div class="col-sm-12">
// content bar
<?php get_template_part('advicecentre_bar', get_post_format()); ?>
// cmd driven content
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content_page', get_post_format());
endwhile; endif;
?>
<?php rewind_posts(); ?>
// recent post
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
</div> <!-- /.col -->
</div> <!-- /.row -->
<?php get_footer(); ?>
This "resets" the loop to it's original state and allows you to look through the posts again. In your original code you scan through all the posts, and then in your second loop scan through nothing, as you have already scanned through all the posts!
Hmm I have found this solution using a for each rather than the while loop seems to work, but im not sure if its the best way around.
<ul>
<?php
$recent_posts = wp_get_recent_posts();
foreach( $recent_posts as $recent ){
echo '<li>' . $recent["post_title"].' </li> ';
}
wp_reset_query();
?>
</ul>
UPDATE
<?php
$args = array('numberposts' => 5);
$recent_posts = wp_get_recent_posts($args);
foreach ($recent_posts as $recent) {
$excerpt = wp_trim_excerpt($recent['post_content']);
$permalink = get_permalink($recent["ID"]);
$title = esc_attr($recent["post_title"]);
$thumbnail = get_the_post_thumbnail($recent["ID"], 'thumbnail');
echo '<li><a href="' . $permalink . '" title="Look ' . $title . '" >' . $thumbnail . $title . '</a></li>';
echo $excerpt;
}
?>
I need to have a different layout for the first post in every page, but don't know where to start. The code is the following:
<?php get_header(); ?>
<div class="row">
<section class="small-12 columns grid-style">
<?php $i = 0; $counter = range(0, 200, 3); ?>
<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = array('offset'=> 0, 'paged'=>$paged);
$all_posts = new WP_Query($args);
if (have_posts()) : while($all_posts->have_posts()) : $all_posts->the_post();?>
<?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ?
<!--Post -->
<article class="grid-style post" id="post-<?php the_ID(); ?>"
<div class="post-img">
<?php get_template_part( 'inc/postformats/grid-style' ); ?>
</div>
<div class="post-box">
<div class="post-title">
<h2><?php echo ShortenText(get_the_title(), 50); ?></h2>
</div>
<aside class="post_categories">
<?php the_category(', '); ?>
</aside>
<div class="post-content">
<?php echo ShortenText(get_the_excerpt(), 170); ?>
</div>
</div>
</article>
<!--/Post -->
<?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?>
<?php $i++; endwhile; ?>
<div class="small-12 columns">
<?php theme_pagination($all_posts->max_num_pages, 1, true); ?>
</div>
<?php else : ?>
<p><?php _e( 'Please add posts from your WordPress admin page.', THB_THEME_NAME ); ?></p>
<?php endif; ?>
</section>
</div>
<?php get_footer(); ?>
I need to use a different image size, so I need to output everything inside < ! - - Post - - > again for the first post only.
Are you trying to include div.row.journal to the first post?
If it's the case try doing this:
Replace <?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ? by the following: (It'll echo it only on the first page, for the first post)
<?php
if ($all_posts->current_post == 0 && !is_paged()) {
echo '<div class="row journal" data-equal=".post">';
}
?>
Doing the same for the closing div by replacing <?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?> by :
<?php
if ($all_posts->current_post == 0 && !is_paged()) {
echo '</div>';
}
?>
You have to define a counter and ask with if...else... inside the loop
$post_counter = 1;
while (start_loop):
if ($post_counter == 1){
echo "<div id='1'></div>";
else:
echo "<div id='2'></div>";
$post_counter += 1;
//end loop
I think that should help you.
This is the code I have now, I was able to output the HTML for the first post, and a different one for ALL the posts, but I am getting 2 first posts. One using the first layout and the second using the second layout
<?php
/*
Template Name: Blog - Grid Style
*/
?>
<?php get_header(); ?>
<div class="row">
<section class="small-12 columns grid-style">
<?php $i = 0; $counter = range(0, 200, 3); ?>
<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = array('offset'=> 0, 'paged'=>$paged);
$all_posts = new WP_Query($args);
$post_counter = 0;
if (have_posts()) : while($all_posts->have_posts()) : $all_posts->the_post(); $post_counter++;?>
<?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ?>
<?php if ($post_counter == 1){ ?>
<!--Layout Post 1-->
<div class="row">
<article class="grid-style post small-9 small-centered column" id="post-<?php the_ID(); ?>">
<div class="post-img">
<?php get_template_part( 'inc/postformats/grid-style' ); ?>
</div>
<div class="post-box">
<div class="post-title">
<h2><?php echo ShortenText(get_the_title(), 50); ?>1</h2>
</div>
<aside class="post_categories">
<?php the_category(', '); ?>
</aside>
<div class="post-content">
<?php echo ShortenText(get_the_excerpt(), 170); ?>
</div>
</div>
</article>
</div>
<!--/Layout Post 1-->
<?php } ?>
<!--Other Posts -->
<div class="row">
<article class="grid-style post small-9 small-centered column" id="post-<?php the_ID(); ?>">
<div class="post-img">
<?php get_template_part( 'inc/postformats/grid-style' ); ?>
</div>
<div class="post-box">
<div class="post-title">
<h2><?php echo ShortenText(get_the_title(), 50); ?></h2>
</div>
<aside class="post_categories">
<?php the_category(', '); ?>
</aside>
<div class="post-content">
<?php echo ShortenText(get_the_excerpt(), 170); ?>
</div>
</div>
</article>
</div>
<!--/Other Posts -->
<?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?>
<?php $i++; endwhile; ?>
<div class="small-12 columns">
<?php theme_pagination($all_posts->max_num_pages, 1, true); ?>
</div>
<?php else : ?>
<p><?php _e( 'Please add posts from your WordPress admin page.', THB_THEME_NAME ); ?></p>
<?php endif; ?>
</section>
</div>
<?php get_footer(); ?>
after adding the function of pagination to Functions.php and recall it in template-product-listing.php
there is nothing shown in result.
I have a big problom with this...
could you find and resolve the problem?
thnx
<article class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="single-head" class="sixteen columns">
<h1><?php the_title(); ?></h1>
<?php if (has_excerpt()) { the_excerpt(); } ?>
</div>
<div class="row">
<nav id="portfolio-filters" class="sixteen columns">
<?php _e('Show All', 'ci_theme'); ?>
<?php
$args = array(
'hide_empty' => 0
);
$skills = get_terms('product-category', $args);
?>
<?php foreach ( $skills as $skill ) : ?>
<?php echo $skill->name; ?>
<?php endforeach; ?>
</nav><!-- /portfolio-filters -->
</div>
<div id="portfolio-items" class="row">
<?php $ci_product_query = new WP_Query('post_type=product&posts_per_page=4'); ?>
<?php if ( $ci_product_query-> have_posts() ) : while ( $ci_product_query->have_posts() ) : $ci_product_query->the_post(); ?>
<?php $item_skills = wp_get_object_terms($post->ID, 'product-category'); ?>
<article class="<?php ci_e_setting('product_columns'); ?> columns <?php foreach ( $item_skills as $item_skill ) : echo $item_skill->slug.' '; endforeach; ?> columns portfolio-item">
<a href="<?php echo get_permalink(); ?>" title="<?php echo esc_attr(get_the_title()); ?>" class="fb">
<?php the_post_thumbnail('ci_portfolio_slider', array('class'=>'scale-with-grid')); ?>
</a>
<div class="portfolio-desc">
<h3><?php the_title(); ?></h3>
<p class="desc"><?php echo mb_substr(get_the_excerpt(), 0, 70); ?>...</p>
</div>
</article><!-- /portfolio-item -->
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div><!-- /portfolio-items -->
<?php get_template_part('part', 'call_to_action'); ?>
<?php endwhile; endif; ?>
<div class="pagination">
<?php wp_pagination(); ?>
</div>
</article>
if your sure there is a post_type called products and there is posts in it...
try:
<div id="portfolio-items" class="row">
<?php $ci_product_query = new WP_Query(array('post_type'=>'product', 'posts_per_page'=> 4); ?>
<?php if ( $ci_product_query-> have_posts() ) : while ( $ci_product_query->have_posts() ) : $ci_product_query->the_post(); ?>
You know you are starting a new wp_query for every post in have_posts() ? you might want to rethink what you are trying to achieve!
I'm trying to achieve a 3x3 grid view of all the WordPress posts on the "blog" page (index.php). I'm building the site based on Bootstrap 3.
Therefore the loop has to create the columns and rows with PHP.
I'd like to have it set up in rows, so that potential height differences are being reset every row. The bootstrap grid would look like this:
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
Lacking the PHP skills for setting up the loop properly, I tried hacking my way around, coming up with 3 times this (modifying the offsets):
<?php query_posts('posts_per_page=1&offset=0'); while (have_posts()) : the_post(); ?>
<div class="row">
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile; ?>
<?php query_posts('posts_per_page=1&offset=1'); while (have_posts()) : the_post(); ?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile; ?>
<?php query_posts('posts_per_page=1&offset=2'); while (have_posts()) : the_post(); ?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
</div>
<?php endwhile; ?>
It has obvious disadvantages:
a lot of unnecessary PHP requests/loops
filtering by categories, tags, etc doesn't work
Could you help me out with creating the PHP loop?
The most related question I found is this, but the column layout is somehow skewed!
Thanks a lot! Philipp
The easiest would be to use one container and put all the contetn items in it, then equal their height via js like that.
PHP
<?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile?>
JS:
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
$(document).ready(function() {
equalHeight($(".thumb"));
});
If thats no option, you could do sth. like that:
PHP
<div class="row">
<?php
$count=0;
query_posts('posts_per_page=9');
while (have_posts()) : the_post();
?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php
$count++;
if($count == 3 || $count == 6 ) echo '</div><div class="row">';
endwhile;
?>
</div>
Every three post objects must be contained within a row. So it will be like <div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div>
If you would like to do this in php, and still maintain proper 'rowage' your code could look something like this:`
<div class="container">
<?php
$countturtle = 0 ;
$countbang = 0 ;
$count_posts = wp_count_posts( 'portobello' )->publish;
$args = array( 'post_type' => 'portobello', 'posts_per_page' => 32 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $countbang++ ?>
<?php if ( $countbang >= 2 ) {
$countturtle = $countturtle + 1 ; } ?>
<?php if ( $countbang == 1 ) {
echo '<div class="row first-training">'; } elseif ( ( $countturtle % 3 ) == 0 ) {
echo '<div class="row">'; } ; ?>
<div id="post-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-sm-4" >
<header class="entry-header training-header">
<h1 class="entry-title train">
<?php the_title(); ?>
</h1>
</header><!-- .entry-header -->
<div class="entry-imogin">
ddd
</div><!-- .entry-imogin -->
</div><!-- #post -->
<?php if ( $countbang % 3 == 0 ) {
echo '</div>'; }
elseif ( $countposts == $countbang ) { echo '</div>';} ; ?>
<?php endwhile; ?>
</div>
Here a solution for 3 columns
layout :
1 | 2 | 3
4 | 5 | 6
7 | 8 | 9
...
<div class="row">
<div class="col-sm-4">
<?php $i = 1 ?>
<?php $posts = get_posts(array(
'post_type' => 'news',
'posts_per_page' => -1
));
foreach ($posts as $post) : start_wp(); ?>
<?php if ($i == 1): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<?php if($i == 3){$i = 1;} else {$i++;} ?>
<?php endforeach; ?>
</div>
<div class="col-sm-4">
<?php $i = 1 ?>
<?php $posts = get_posts(array(
'post_type' => 'news',
'posts_per_page' => -1
));
foreach ($posts as $post) : start_wp(); ?>
<?php if ($i == 2): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<?php if($i == 3){$i = 1;} else {$i++;} ?>
<?php endforeach; ?>
</div>
<div class="col-sm-4">
<?php $i = 1 ?>
<?php $posts = get_posts(array(
'post_type' => 'news',
'posts_per_page' => -1
));
foreach ($posts as $post) : start_wp(); ?>
<?php if ($i == 3): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<?php if($i == 3){$i = 1;} else {$i++;} ?>
<?php endforeach; ?>
</div>
</div>
Thanks to some answers on here, I've managed to distinguish my posts into the latest post and all the rest. However, it needs to be the oldest post. Here is my current loop:
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; $c=0;?>
<?php while (have_posts()) : the_post(); ?>
<!-- first post -->
<?php $c++;
if( $c == 1) :?>
<div class="container">
<div class="inner_box">
<ul>
<div class="title">
<a href="<?php the_permalink();?>">
<?php the_title(); ?>
</div>
<?php the_content(); ?>
</a>
</ul>
<div class="down">a</div>
</div>
</div>
<?php else :?>
<!-- second post -->
<div class="container">
<div class="inner_box">
<ul>
<div class="title">
<a href="<?php the_permalink();?>">
<?php the_title(); ?>
</div>
<?php the_content(); ?>
</a>
</ul>
<div class="up">b</div>
</div>
</div>
<?php endif; ?>`
I saw somewhere that you can use a while loop to target the last post from a post.length. However, I am unsure how to implement this.
Yes, you're right. Use count.
Suppose the total posts is 5 for $total_posts = count($posts);.
You'll have to check your $counter for total - 1 as the array is $posts[0], $posts[1], $posts[2], $posts[3], $posts[4].
<?php
if ( have_posts() ) :
$counter = 0;
$total_posts = count($posts) - 1;
while ( have_posts() ) :
the_post();
if( $counter == $total_posts ) {
?>
<div class="container"><?php // CUSTOM CODE FOR LAST ARTICLE ?></div>
<?php
} else {
?>
<div class="container"><?php // CUSTOM CODE FOR THE REST OF ARTICLES ?></div>
<?php
}
$counter++;
endwhile;
endif;
Note that you only need to open <?php and close ?> when changing from PHP to HTML, using them at every line is very confusing.