This is my first time on here so apologies if something like this has been asked before.
My current sites has 2 posts per row but I want the first/latest post to be styled slightly different.
Basically I want the first/latest post to be 100% wide on the page then all the other posts to follow, 2 per row but only on the home page. Category pages etc I'm happy for that to stay 2 per row.
My current code is:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article class="post-item clearfix" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<figure>
<?php the_post_thumbnail('single-post-feature'); ?>
</figure>
<header>
<div class="post-header-title">
<div class="post-category-feature">
<?php echo get_the_category_list(); ?>
</div>
<?php if ( is_singular() ) { echo '<h1>'; } else { echo '<h2>'; } ?><span><a class="black" href="<?php the_permalink(); ?>"title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a></span><?php if ( is_singular() ) { echo '</h1>'; } else { echo '</h2>'; } ?>
<div id="excerpt"><?php the_excerpt(); ?></div>
<div id="author_date"><p><span><?php the_time('jS F Y') ?> | by <?php the_author(''); ?></span></p></div>
</div>
</header>
</article>
<?php endwhile; ?>
<?php endif; ?>
</div>
Any help would be greatly appreciated. If you would like to see the site to understand what I mean it is www.ltstlife.com. Thanks again.
Related
I am relatively new to php.
I have a loop in place for my Wordpress posts page - The posts have to alternate between left and right alignments.
I have this working by assigning an even or odd class to each post, however now the latest post does not display on the posts page.
For example, if I have say 5 posts; 4 of the posts will display and the latest post will remain hidden until I make a new post - the previously hidden post will then join the others and the new "latest post" will remain hidden.
I can't figure out why my loop is skipping over the first post, I have already tried adding rewind_posts(); however this created an infinite loop of the same post.
Any help is much appreciated!
<?php
$postcount=1;
while(have_posts()) :
if( ($postcount % 2) == 0 ) $post_class = ' even';
else $post_class = ' odd';
?>
<div class="row">
<div id="stories-box-alt" class="stories-column-circle-main"
style="background-color:transparent;">
<div id="circle-shape" class="post <?php echo $post_class; ?>">
<?php the_post(); ?>
<img src="<?php the_field('post_preview_image'); ?>" class="curve">
<h2><?php the_title(); ?></h2>
<h3><span class="featured-title"><?php the_field('post_category'); ?> .
</span></h3>
<p><?php the_field('post_preview'); ?><br><a href="<?php the_permalink();
?>">read more...</a></p>
</div>
</div>
</div>
<?php $postcount++;
endwhile; ?>
<?php
$postcount=1;
while(have_posts()) :
?>
<div class="row">
<div id="stories-box-alt" class="stories-column-circle-main"
style="background-color:transparent;">
<div id="circle-shape" class="post <?php if(($postcount % 2) == 0){ ?> even <?php } else{ echo " odd"; }?>">
<?php the_post(); ?>
<img src="<?php the_field('post_preview_image'); ?>" class="curve">
<h2><?php the_title(); ?></h2>
<h3><span class="featured-title"><?php the_field('post_category'); ?> .
</span></h3>
<p><?php the_field('post_preview'); ?><br><a href="<?php the_permalink();
?>">read more...</a></p>
</div>
</div>
</div>
<?php $postcount++;
endwhile; ?>
OR
<?php echo $postcount % 2 == 0 ? ' even ': ' odd '; ?>
Please try to use the_post() first.
<?php
$postcount=1;
while(have_posts()) :
the_post();
if( ($postcount % 2) == 0 ) $post_class = ' even';
else $post_class = ' odd';
?>
<div class="row">
<div id="stories-box-alt" class="stories-column-circle-main"
style="background-color:transparent;">
<div id="circle-shape" class="post <?php echo $post_class; ?>">
<img src="<?php the_field('post_preview_image'); ?>" class="curve">
<h2><?php the_title(); ?></h2>
<h3><span class="featured-title"><?php the_field('post_category'); ?> .
</span></h3>
<p><?php the_field('post_preview'); ?><br><a href="<?php the_permalink();
?>">read more...</a></p>
</div>
</div>
</div>
<?php $postcount++;
endwhile; ?>
Basically there is a basic loop in wordpress to make what you want to do : https://wpchannel.com/wordpress/tutoriels-wordpress/afficher-articles-recents-site-wordpress/
You can modify this one with your own properties but this is usually loop used.
Hello guys so I am making a car review wordpress magazine and I am having issues with php codes as I am not a great programmer. Actually on this page Memes I would like the social plugins to be below each picture and not on the top furthermore I would like it to display the post date and the author of the post. Some formatting for the pictures size etc would be great too. Below is the code I am using
<?php /*
Template Name: ListPostsInCategoryThatHasSameNameAsPage
*/ ?>
<?php get_header(); ?>
<div id="content" class="archive <?php if(get_option('colabs_layout_settings')=='two-col-right'){echo 'right';}else{?>left<?php }?>">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?> id="post_<?php the_ID(); ?>">
<span id="map"><?php _e('Home','colabsthemes');?> » <?php the_title(); ?></span>
<h2 class="title"><?php the_title(); ?></h2>
<div class="entry" style="padding-top:15px;">
<?php the_content(__('<p>Read the rest of this page »</p>','colabsthemes')); ?>
<?php echo colabs_share();?>
<?php wp_link_pages(array('before' => __('<p><strong>Pages:</strong>','colabsthemes'), 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; else: endif; ?>
<?php query_posts('category_name='.get_the_title().'&post_status=publish,future');?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?>
<?php endwhile; else: endif; ?>
</div>
</div>
<div id="sidebar" class="<?php if(get_option('colabs_layout_settings')=='two-col-right'){echo 'left';}else{?>right<?php }?>">
<?php get_sidebar(); ?>
</div>
<div> <?php get_footer(); ?> </div>
Finally for the review part I would like to do something like Autotest/review but I don't know which code to use to show these kind of square articles. Please help me out.
For adding the author and date of the post, you can add:
<p>Written by:
<?php get_the_author(); ?></p>
get_the_author() will display the author's name as is set in their "Display name publicly as" field in their user profile (Administration > Users > Your Profile).
To also display the date:
<p>Written by:
<?php get_the_author(); ?> on
<?php get_the_date(); ?></p>
I don't see where you're using the social sharing links on the page you linked to - did you remove them?
For more information:
http://codex.wordpress.org/Function_Reference/get_the_author
http://codex.wordpress.org/Function_Reference/get_the_date
On both the front page and the blog page - the sidebar shows the most recent post, which I find doesn't look very good duplicated against the same post expanded on the main page.
This is my code for the sidebar:
<div class="blog-sidebar">
<?php query_posts('showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="blog-sidebar-feature">
<?php if ( has_post_thumbnail() ) { ?>
<div class="blog-sidebar-image"><?php the_post_thumbnail('medium'); ?></div>
<?php
}
?>
<div class="blog-sidebar-content">
<p class="date"><?php the_time('F j, Y') ?></p>
<h3 <strong><?php
foreach((get_the_category()) as $category) {
echo $category->cat_name . ' ';
}
?></strong></h3>
<h2 <p><a href="<?php the_permalink() ?>" rel="bookmark" title=""><?php the_title();
?></a></p></h2><?php echo get_excerpt(166); ?>
</div>
</div>
<?php endwhile;?>
<br />
<?php wp_pagenavi(); ?>
</div>
and the relevant code for how the blog appears on the home page:
<div class="blog-sidebar">
<div class="blog-sidebar-feature">
<?php query_posts('orderby=date&order=DESC&showposts=2'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( has_post_thumbnail() ) { ?>
<div class="blog-sidebar-image"><?php the_post_thumbnail('medium'); ?></div>
<?php
}
?>
<div class="blog-sidebar-content">
<p class="date"><?php the_time('F j, Y') ?></p>
<h3 <strong><?php
foreach((get_the_category()) as $category) {
echo $category->cat_name . ' ';
}
?></strong></h3>
<h2 <p><a href="<?php the_permalink() ?>"
rel="bookmark" title=""><?php the_title(); ?></a></p></h2><?php echo get_excerpt(166); ?>
</div>
<?php endwhile;?>
</div>
</div>
<div id="connect">
<?php query_posts('page_id=1');
while (have_posts()): the_post();
the_content();
endwhile;
wp_reset_query(); ?>
</div>
Is there any way to remove only the most recent post from the sidebar when it appears in full on the main container? Thanks in advance for any help.
UPDATE V2
So you do want recent posts, just not the post currently showing in the main content.
UPDATE V3:
This should work now. I had to change arguments of query_posts to array to make it work.
Try it now:
<?
global $wp_query;
$skip_posts=array();
if (is_single()) //only exclude posts when single post is shown
$skip_posts[]=$wp_query->post->ID;
?>
<?php query_posts( array( 'showposts'=>5,'post__not_in'=>$skip_posts)); ?>
<?php query_posts('posts_per_page=5&offset=1'); ?>
Thanks to 850010 for all the help, I went back and had a look at the offset rule and the 'array' wasn't needed. Deceptively simple.
I am really new in 'WordPress' and current facing a problem that is I am using FUNDA theme and try to show the three different category of post in three different column depending on category ID but can not find the post for a specific category.
I try this
<?php
$data = cats_to_select();
$cat_id = $data[1][value];
global $cat_id;?>
<?php print_r($cat_id);?>
<?php if($cat_id==3):?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(260,200), array("class" => "alignleft post_thumbnail")); } ?>
<h2 class="title"><?php the_title(); ?></h2>
<div class="postdate"><img src="<?php bloginfo('template_url'); ?>/images/date.png" /> <?php the_time('F jS, Y') ?> <img src="<?php bloginfo('template_url'); ?>/images/user.png" /> <?php the_author() ?> <?php if (current_user_can('edit_post', $post->ID)) { ?> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> <?php edit_post_link('Edit', '', ''); } ?></div>
<div class="entry">
<?php the_content('<strong>Read more »</strong>'); ?>
</div>
</div><!--/post-<?php the_ID(); ?>-->
<?php endwhile; ?>
<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?>
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
<?php } ?>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
<?php endif; ?>
Can any one help me? Thanks in advance.
<?php query_posts('cat=3'); ?> // here, 3 will be replaced with desired
// category id, or you may add array
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(260,200), array("class" => "alignleft post_thumbnail")); } ?>
<h2 class="title"><?php the_title(); ?></h2>
<div class="postdate"><img src="<?php bloginfo('template_url'); ?>/images/date.png" /> <?php the_time('F jS, Y') ?> <img src="<?php bloginfo('template_url'); ?>/images/user.png" /> <?php the_author() ?> <?php if (current_user_can('edit_post', $post->ID)) { ?> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> <?php edit_post_link('Edit', '', ''); } ?></div>
<div class="entry">
<?php the_content('<strong>Read more »</strong>'); ?>
</div>
</div><!--/post-<?php the_ID(); ?>-->
<?php endwhile; ?>
That code only shows one category. You would need to add an array of the category ids and possible use a for loop to multiply the code, instead of the if statement. Maybe something like that.
Then make a bit of css that would divide the content into different boxes? I'm not sure what you mean by three columns. Also not sure what the FUNDA theme is.
It would be easier if you could give us a better idea of what you're using. Link?
I'm making an online magazine. Right now I'm trying to show the posts I'm posting. I've managed to do that, but what I want is that if a post is categorized in "Streetstyle", the loop will be completely different then if it's categorized in "Photography". I've mangaged to do this with one category, how can I do the same with other categories, and style it another way? I tried using the same code as <?php if (is_category( 'Streetstyle' ) || in_category( 'Streetstyle' ) ) { ?>, but then the theme just gets bugged and the posts shows up twice. Do you know of a better way to do this?
This is my code:
<?php query_posts('posts_per_page=9' . '&orderby=date');
while ( have_posts() ) : the_post(); ?>
<?php if (is_category( 'Streetstyle' ) || in_category( 'Streetstyle' ) ) { ?>
<div <?php post_class('pin streetstyle'); ?>>
<a href="<?php the_permalink(); ?>">
<div class="heading">
<h1>Fashion</h1>
</div>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<div class="heading">
<h1><?php the_title(); ?></h1>
</div>
</a>
</div>
<?php } else { ?>
<div <?php post_class('pin'); ?>>
<h1>
<?php the_title(); ?>
</h1>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
the_content('Les mer <br><br>'); ?>
</div>
<?php } ?>
<?php endwhile;
// Reset Query
wp_reset_query(); ?>
If you have a lot of categories I would recommend using switch, it will save you time and your code will look a lot cleaner.
http://php.net/manual/en/control-structures.switch.php
I've slimmed this down a bit, but this is probably more what you're after
<?php query_posts('posts_per_page=9' . '&orderby=date');
while(have_posts()) : the_post(); ?>
<?php if(is_category('Streetstyle') || in_category('Streetstyle')) : ?>
<div <?php post_class('pin streetstyle'); ?>>
<a href="<?php the_permalink(); ?>">
<div class="heading">
<h1><?php the_title(); ?></h1>
</div>
</a>
</div>
<?php if(has_post_thumbnail()) the_post_thumbnail(); ?>
<?php else : ?>
<div <?php post_class('pin'); ?>>
<h1><?php the_title(); ?></h1>
<?php
if(has_post_thumbnail()) the_post_thumbnail();
the_content('Les mer <br><br>');
?>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>