I try to realize a wordpress loop to display the articles on my blog. I'm trying to create a design like this: www.freileben.net
My wordpress loop looks like this:
.thumbnail {
float: left;
margin-right: 50px;
}
#post {
margin-top: 120px;
padding-top: 15px;
}
<article id="post">
<div id="thumbnail">
<?php if ( function_exists( 'has_post_thumbnail') && has_post_thumbnail() ) { the_post_thumbnail(array(350,220), array( "class"=>"thumbnail")); } ?>
</div>
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
</article>
I don't know how to solve the problem because all of the images I use have got a different size and they are not in the same position.
Try this below code :
<article id="post">
<?php
// the query
$args = array('');
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) { ?>
<!-- the loop -->
<?php while ( $the_query->have_posts() ) {
$the_query->the_post(); ?>
<div id="thumbnail">
<?php
// Must be inside a loop.
if ( has_post_thumbnail() ) {
the_post_thumbnail(array( "class"=>"thumbnail"));
}
?>
</div>
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_excerpt(); ?>
</div>
<?php } } else { ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php } ?>
<!-- end of the loop -->
<?php wp_reset_postdata(); ?>
Related
I am using the following loop in my index.php to show the posts with a thumbnail:
<main id="main">
<?php
// the query
$args = array('posts_per_page' => 10 );
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) { ?>
<!-- loop -->
<?php while ( $the_query->have_posts() ) {
$the_query->the_post(); ?>
<article id="post">
<div id="thumbnail">
<?php
if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail(); } ?>
</div>
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_excerpt(); ?>
</div>
</article>
<?php } } else { ?>
<p><?php _e( 'Die Posts entsprechen nicht den Kriterien.' ); ?></p>
<?php } ?>
<!-- end of the loop -->
<?php wp_reset_postdata(); ?>
</main>
How can I add a permalink to the thumbnail? When the user clicks on it he should be directed to the post. At the moment, nothing is happening.
Thanks for your answers.
EDIT: I added the whole loop because the answer of Deepti produces an error. Maybe someone could help me with that.
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
How add list post title wordpress in table
I have code in index.php wp theme like this:
<?php
/**
* #WP-Theme Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php if ( have_posts() ) : ?>
<?php if ( function_exists( 'page_navi' ) ) page_navi( 'items=7&prev_label=Prev&next_label=Next&first_label=First&last_label=Last&show_num=1&num_position=after' ); ?><br/>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div><a class="judul" href="<?php the_permalink(); ?>">
<?php the_title(); ?></a>
<small><div style="text-indent: 10px;">Oleh: <?php the_tags(' '); ?> | Media: <?php the_category(', '); ?> | Terbit: <?php the_time('l, j F Y'); ?> | Dibaca: <?php if(function_exists('the_views')) { the_views(); }?></div></small>
</div>
<?php endwhile; ?>
<br/><?php if ( function_exists( 'page_navi' ) ) page_navi( 'items=7&prev_label=Prev&next_label=Next&first_label=First&last_label=Last&show_num=1&num_position=after' ); ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<?php if ( current_user_can( 'edit_posts' ) ) :
// Show a different message to a logged-in user who can add posts.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
</header>
<div class="entry-content">
<p><?php printf( __( 'Ready to publish your first post? Get started here.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
</div><!-- .entry-content -->
<?php else :
// Show the default message to everyone else.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
</header>
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
<?php endif; // end current_user_can() check ?>
</article><!-- #post-0 -->
<?php endif; // end have_posts() check ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
This result in frontpage:
I want add list post title wordpress in table like this:
What code and where I put its?
<table border="1">
<?php while ( have_posts() ) : the_post(); ?>
<tr><td colspan="2"><a class="judul" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td></tr>
<tr><td colspan="2">Oleh: <?php the_tags(' '); ?> | Media: <?php the_category(', '); ?> | Terbit: <?php the_time('l, j F Y'); ?> | Dibaca: <?php if(function_exists('the_views')) { the_views(); }?></td></tr>
<?php endwhile; ?>
</table>
You may need to change while loop with above code.
create a <table> tag before starting while loop and close </table> after while loop.
create <tr> in while loop and <td> as per your need.
It looks like you're trying to style the list.
I suggest using a an unordered list to list your post links in this instance:
<?php if (have_posts()) : ?>
<?php if ( function_exists( 'page_navi' ) ) page_navi( 'items=7&prev_label=Prev&next_label=Next&first_label=First&last_label=Last&show_num=1&num_position=after' ); ?><br/>
<ul>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<li>
<a class="judul" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile;
endif;
wp_reset_query();
?>
</ul>
You can style accordingly:
ul {
list-style-type:none;
border: 2px solid #BCE1F1;
}
li:nth-child(odd) {
background: #95DBFE;
}
The nth-child selector above will give every odd numbered list item a different style, depending on what declarations you use. In my example, I gave every odd numbered list item a light blue background.
Hope this helps!
Please do it like this:
tr:nth-child(odd) {
background: #95DBFE;
}
tr:nth-child(even) {
background: #BCE1F1;
}
I have no idea why this code is not working. I am trying to create a conditional statement where if this custom post type has posts then display customer-section div. if post does not exist then print no post statement. I did everything I thought I am suppose to but I must be doing something silly wrong because I can still see the customer-section div even though there are no posts.
here is what I have:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="customer-section case-study">
<div class="case-study-container">
<h2>Case Studies</h2>
<?php $loop = new WP_Query( array( 'post_type' => 'case_study', 'posts_per_page' => 9 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ): ?>
<div class="press-featured-image">
<?php the_post_thumbnail('', array('class' => 'th')); ?>
</div>
<?php endif; ?>
<div class="blog-post">
<h3><?php the_title(); ?></h3>
<div class="entry-summery">
<?php the_excerpt(); ?>
</div>
<footer>
<?php $tag = get_the_tags(); if (!$tag) { } else { ?><p><?php the_tags(); ?></p><?php } ?>
</footer>
</div>
<hr />
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
What you are currently doing is checking if your initial have_posts() (the default query) condition is true and if this is a page template it is always true. Actually (for page templates) you don't need that check at all, since WordPress will return 404 if the page is not found.
You need a check for posts for your custom query:
<?php the_post(); ?>
<div class="customer-section case-study">
<div class="case-study-container">
<h2>Case Studies</h2>
<?php $loop = new WP_Query( array( 'post_type' => 'case_study', 'posts_per_page' => 9 ) );
if ( $loop->have_posts() ):
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ): ?>
<div class="press-featured-image">
<?php the_post_thumbnail('', array('class' => 'th')); ?>
</div>
<?php endif; ?>
<div class="blog-post">
<h3><?php the_title(); ?></h3>
<div class="entry-summery">
<?php the_excerpt(); ?>
</div>
<footer>
<?php $tag = get_the_tags(); if (!$tag) { } else { ?><p><?php the_tags(); ?></p><?php } ?>
</footer>
</div>
<hr />
</div>
<?php endwhile;
else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif;
wp_reset_query();
?>
</div>
</div>
I believe the issue is your syntax with the two loops.
You're missing the if statement before the while condition
You're trying to load your $loop loop inside the standard page or post loop.
Try this instead:
<?php
$case_studies = new WP_Query( array( 'post_type' => 'case_study', 'posts_per_page' => 9 ) );
if ( $case_studies->have_posts() ) : ?>
<div class="customer-section case-study">
<div class="case-study-container">
<h2>Case Studies</h2>
<?php while ( $case_studies->have_posts() ) : $case_studies->the_post(); ?>
<div <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ): ?>
<div class="press-featured-image">
<?php the_post_thumbnail('', array('class' => 'th')); ?>
</div>
<?php endif; ?>
<div class="blog-post">
<h3><?php the_title(); ?></h3>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
<footer>
<?php if (get_the_tags()) { ?>
<p><?php the_tags(); ?></p>
<?php } ?>
</footer>
</div>
<hr />
</div>
<?php endwhile; ?>
</div>
</div>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; wp_reset_query(); ?>
this is what worked for me. You don't need to end the while loop if it's inside the WP_Query. All you have to do is close the if statement for the main div you want to show, add the while for the repeating section and if it doesn't work, I'd try deleting the conditions you have set on your footer.
<?php $loop = new WP_Query( array( 'post_type' => 'case_study', 'posts_per_page' => 9 ) ); if($loop->have_posts()): ?>
<div class="customer-section case-study">
<div class="case-study-container">
<h2>Case Studies</h2>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ): ?>
<div class="press-featured-image">
<?php the_post_thumbnail('', array('class' => 'th')); ?>
</div>
<?php endif; ?>
<div class="blog-post">
<h3><?php the_title(); ?></h3>
<div class="entry-summery">
<?php the_excerpt(); ?>
</div>
<footer>
<?php $tag = get_the_tags(); if (!$tag) { } else { ?><p><?php the_tags(); ?></p><?php } ?>
</footer>
</div>
<hr />
</div>
<?php } wp_reset_postdata(); ?>
</div>
</div>
<?php endif; ?>
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 want to have my latest post show up with all info(title, author, thumbnail, and content) but only the title of the second most recent post in another div. Here is my code. It renders the divs correctly but the 'title' in the second div is the 'title' of the latest post still.
<div id="blog-pane">
<div id="blog-post">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="post-title">
<?php the_title(); ?>
</div>
<div id="post-author">
<?php the_author(); ?>
<?php the_date(); ?>
<?php the_time(); ?>
</div>
<div id="post-image">
<?php the_post_thumbnail(); ?>
</div>
<div id="post-text">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php rewind_posts(); ?>
</div>
<div id="post-link-1">
<?php
query_posts( 'p' );
while ( have_posts() ) : the_post();
the_title();
endwhile;
wp_reset_query();
?>
</div>
</div>
</div>
<?php get_footer(); ?>
you can try to introduce some skip logic to have it skip the first post,
<div id="post-link-1">
<?php
query_posts( 'p' );
$count = 0;
while ( have_posts() ) {
if ($count++ == 0) {
the_post();
continue;
}
the_post();
the_title();
}
wp_reset_query();
?>
</div>