I've got a WP_Query loop that pulls the 4 most recent posts:
<?php
$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=4');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<div class="recentpost">
<?php echo get_the_post_thumbnail ($_post->ID, 'small'); ?>
<div class="titlerecent">
<h1><?php the_title(); ?></h1>
</div>
</div>
<?php endwhile; ?>
What I want to do is modify this and style the first post in the loop different. I don't just want to add a CSS class to it, I want to wrap it in a totally different <div>.
So I want the first post to be wrapped in <div class="homefirstpost"> and then the remaining 3 post to be as above, inside the <div class="recentpost">.
What do I need to do?
I would do it like this:
<?php
$isfirst = false;
$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=4');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<?php if ( ! $isfirst ): ?>
<div class="homefirstpost">
<?php $isfirst = true; ?>
<?php else: ?>
<div class="recentpost">
<?php endif; ?>
<?php echo get_the_post_thumbnail ($_post->ID, 'small'); ?>
<div class="titlerecent">
<h1><?php the_title(); ?></h1>
</div>
<?php endwhile; ?>
When your posts are wrapped in another container, you could use the :first-child selector for the first post. See Selectors for details.
When your HTML looks like this:
<div id="featuredPosts">
<div>First Post ...</div>
<div>Next Post ...</div>
<div>Next Post ...</div>
<div>Next Post ...</div>
</div>
you can use CSS along these lines:
div#featuredPosts > div:first-child {
some special styles;
}
Related
I have a code chunk that is inside the_content(); I'm using acf repeater as well. So when I post a blog, I'll either use the_content(); or the acf field. I have h2 tag ( latest articles ) that I only want printed one time, but it's printing everytime I make a post.
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<div class="container">
<div class="row">
<div class="col-md-4 sidebar-r">
<?php echo the_content(); ?>
</div><!-- end sidebar-r -->
<?php
$i = $wp_query->post_count;
if($i <=1) {
echo '<h2 class="link-title">
<?php the_sub_field('link_title'); ?>,
</h2>';
}else{
echo '';
}
?>
<div class="col-md-8 links-wrap">
<?php if(have_rows('daily_links')): ?>
<?php while(have_rows('daily_links')): the_row(); ?>
<a href="<?php the_sub_field('link_url'); ?>" target="_blank">
<h2 class="link-title">
<?php the_sub_field('link_title'); ?>,
</h2>
<h3 class="link-source">
<?php the_sub_field('link_source'); ?>
</h3>
</a>
<?php endwhile; ?>
<?php endif; ?>
</div><!-- end links wrap -->
</div><!-- end row -->
</div><!-- end container -->
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
You'll see I tried using php to count the posts and if more than one post, don't print the tag, but couldn't figure out the exact logic and syntax.
I am honestly struggling a bit to understand exactly what you are trying to do and since I do not even have the posts and other key pieces of information so that I can properly replicate your issue so that I can help you better, this is a little bit challenging. That being said, looking into some ideas I came across another stackoverflow question/answer that might be relevant for you in catching the first post and does something to it. The answer to the referenced question instance was this:
<?php if (have_posts()) : $postCount = 1; while (have_posts()) : $postCount++; ?>
<?php if($postCount == 2) { ?>
// SOMETHING TO DO WITH FIRST POST
<?php } else { ?>
// SOMETHING TO DO WITH ALL OTHER POSTS
<?php } ?>
This was suggested by user Bora in this answer from 2013.
Let me know if that helped!
I need to display some custom data in my category posts loop. I mean I want to create special div on my post template and I want to show data from this div in this posts loop. Can anyone help me? Thank you
<?php
if ( have_posts() ) :
query_posts('cat=7');
while (have_posts()) : the_post(); ?>
<div class = "item">
<div class="item_image"><?php the_post_thumbnail(); ?></div>
<div class = "item_title"><?php the_title(); ?></div>
<div class = "item_excerpt"><?php the_excerpt(10); ?></div>
<!-- here I want to display data from each post -->
<div class = "my_custom_data">custom data</div>
Show more...
</div>
<?php endwhile;
endif;
wp_reset_query();
?>
ACF has two powerful functions get_field() and the_field(). To retrieve a field value as a variable, use the get_field() function. This is the most versatile function which will always return a value for any type of field.
To display a field, use the the_field() in a similar fashion.
Now you need to get the name of the field e.g if it is 'custom_title'
<?php
if ( have_posts() ) :
query_posts('cat=7');
while (have_posts()) : the_post(); ?>
<div class = "item">
<div class="item_image"><?php the_post_thumbnail(); ?></div>
<div class = "item_title"><?php the_title(); ?></div>
<div class = "item_excerpt"><?php the_excerpt(10); ?></div>
<!-- here I want to display data from each post -->
<div class = "my_custom_data"><?php the_field('custom_title'); ?></div>
Show more...
</div>
<?php endwhile;
endif;
wp_reset_query();
?>
I'm building a theme and on my category.php page I want to show several full posts (let's say 3, but need to be able to change this to 2 or 1 easily), and then the rest of the posts in the category as title links.
I have quite a bit of HTML in my loop for styling my posts and adding custom fields so sorry about all the code, but this is what my category.php page looks like now. I've tried a few things that haven't worked so have edited this to show my original code which just has a normal list of posts. I'm somewhat new to editing The Loop so would appreciate as much explanation/clarity as possible.
<?php
/**
* The template for displaying Category Archive pages.
*/
get_header(); ?>
<div id="primary" class="<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>">
<div id="feature-container" class="full-width-container">
<div class="full-width-container content-page" id="tagline-wrapper">
<div id="left-black"></div>
<div class="page-width-container">
<div id="tagline-box">
<h1 class="category-title">Transactions</h1>
</div>
</div>
</div>
</div>
<div id="content-wrapper">
<div id="project-menu" class="page-width-container">
<?php wp_nav_menu( array( 'theme_location' => 'project-types' ) ); ?>
</div>
<div id="content" role="main" >
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="story-container" class="module-container">
<div class="our-story">
<div class="story-image">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
<div class="story-text">
<article class="post" id="post-<?php the_ID(); ?>">
<div class="entry-container">
<h2><?php the_title(); ?></h2>
<div class="project-details">
<p><span class="details-location"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-location', true);
wp_reset_query();
?></span><br />
<span class="details-funding"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-type', true);
wp_reset_query();
?> | <?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-source', true);
wp_reset_query();
?></span><br />
<span class="details-value"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-value', true);
wp_reset_query();
?></span></p>
</div>
<div class="entry">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => __('Pages: ','html5reset'), 'next_or_number' => 'number')); ?>
</div>
<?php edit_post_link(__('Edit this entry','html5reset'), '<p>', '</p>'); ?>
</div>
</article>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div><!-- #content -->
</div>
</div><!-- #primary -->
<?php get_footer(); ?>
You can achive above thing using following code:
First you have to loop all post and and put counter when it reach more then 2 its stop to print a content.but title will be there always.
<?php $countPost=1;?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>">
<?php the_title(); ?></h2>
<?php if($countPost>2) : /*Condition for Content*/
the_content();
endif;
?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php posts_nav_link('','','« Previous Entries') ?>
</div>
<div class="alignright">
<?php posts_nav_link('','Next Entries »','') ?>
</div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
<?php endif; ?>
</div>
For more details please refer :
https://codex.wordpress.org/The_Loop_in_Action
I figured out a bit of a workaround solution on my own, although it relies on using plugins/widgets which isn't what I'd prefer.
I simply set the Reading settings to display 2 posts, and then below the Loop I added a widget area and used the Recent Posts Extended widget to display a list of titles/links. This widget allows you to skip a certain amount of posts in the list, so I set it to start at post #3. There was no option to show posts from the current category only, so I had to use the Widget Context plugin as well and make individual widgets with a specific category to show on each corresponding category page. As I said, a bit of a convoluted solution, but the end result is exactly what I wanted to achieve.
I'm trying to create a different layout on my blog posts page depending on when the post is created. so blog post 1 will have one class while post two will have another and post 3 will have a final class. hard to explain but here is my code hopefully it will make more sense:
<?php
if(have_posts()):
while(have_posts()): the_post();
$counter = 1;
?>
<?php if($counter == 1){ ?>
<div class="new-row">
<div class="boxes picture-box contact-smaller-box">
<?php the_post_thumbnail(); ?>
</div><!--/.picture box-->
<div class="boxes white-box contact-smaller-box">
<div class="box-inner right-side">
<h2><?php the_title(); ?></h2>
<p><?php echo substr(get_the_excerpt(), 0,70); ?></p>
Read More
</div><!--/.box inner-->
<div class="arrow arrow-left"><img src="..."></div>
</div><!--/.white box-->
</div><!--/.new row-->
<?php $counter = $counter++; ?>
<?php } if($counter == 2){?>
<!-- second section of the blog post content -->
<div class="new-row">
<div class="boxes pink-box contact-smaller-box">
<div class="box-inner">
<h2><?php the_title(); ?></h2>
<p><?php echo substr(get_the_excerpt(), 0,70); ?></p>
Read More
</div><!--/.box inner-->
<div class="arrow arrow-right"><img src="..."></div>
</div><!--/.pink box-->
<div class="boxes picture-box contact-smaller-box">
<img src="..." alt="hearing aids for adults">
</div><!--/.picture box-->
</div><!--/.new row-->
<?php } ?>
<?php
endwhile;
endif;
?>
At the moment both of my test posts are showing as the first type of post, so im thinking my counter is not working correctly, or i have my divs in the wrong position to make this work. im new at working with php so i dont know where i am going wrong. any advice would be brilliant.
After about 4 hours of research and testing different things out i have found a solution (credit):
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
Add your Custom Post Divs Here for the 1st post.
<?php elseif ($count == 2) : ?>
Add your Custom Post Divs Here for the 2nd post.
<?php elseif ($count == 3) : ?>
Add your Custom Post Divs Here for the 3rd post.
<?php elseif ($count == 4) : ?>
Add your Custom Post Divs Here for the 4th post.
<?php else : ?>
Add your Custom Post Divs Here for the rest of the posts.
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
hope it helps someone else out.
I have a page in Wordpress that displays posts with a category of "newspaper" only. Now, The posts are ordered by descending order (I think, if that is the default), such that the newest is at the top.
This is the code that I have:
<?php $my_query = new WP_Query('category_name=newspaper&posts_per_page=-1'); ?>
<?php if (have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="post">
<!--<h3><?php the_title(); ?></h3>-->
<?php the_content('Read the rest of this entry »'); ?>
<div class="clear"></div>
</div>
<?php endwhile; endif;?>
I was wondering if it's possible to show posts with a "featured" tag at the top, while all other posts without a featured tag afterward.
Thanks!
Amit
Okay this is what I temporarily did. I didn't rely on a featured tag, but rather on a featured-newspaper category. It's not exactly how I wanted it to be, but this will do for now:
<?php $my_query = new WP_Query('category_name=newspaper&posts_per_page=-1'); ?>
<?php $my_featured = new WP_Query('category_name=featured-newspaper&posts_per_page=-1'); ?>
<!-- featured posts -->
<?php if (have_posts()) : while ($my_featured->have_posts()) : $my_featured->the_post(); ?>
<div class="post">
<!--<h3><?php the_title(); ?></h3>-->
<?php the_content('Read the rest of this entry »'); ?>
<div class="clear"></div>
</div>
<?php endwhile; endif;?>
<!-- /end featured -->
<?php if (have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="post">
<!--<h3><?php the_title(); ?></h3>-->
<?php the_content('Read the rest of this entry »'); ?>
<div class="clear"></div>
</div>
<?php endwhile; endif;?>
Like I said, it's not the cleanest way to do things, but it works. If you have other suggestions, I'm all ears :)
Thanks!
Amit