WP-Sticky post styling WordPress
- SOLVED
I am using WP-Sticky plugin by Lester Chan ( http://lesterchan.net/wordpress/readme/wp-sticky.html ) - http://webhost-solutions.net/kb
I would like the sticky post that is an announcement to be styled on the front page differently with the CSS like
.homepagebox_01 {
background: #F5F5F5 url(images/content_bg.gif);
background-repeat: repeat-x;
border: 1px solid #DDDDDD;
float: left;
display: block;
width: 468px;
margin: 0px 0px 10px 0px;
padding: 10px 9px 0px 9px;
}
This gives a box that the top matches the sidebar widget backgrounds.
Front page code is:
<?php get_header(); ?>
<div id="content">
<?php include(TEMPLATEPATH."/sidebar_left.php");?>
<div id="contentarchive">
<div class="postarea">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h3><?php announcement_banner(); ?></h3>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="postauthor">
<p><?php _e("Posted by", 'organicthemes'); ?> <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?> · <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a> <?php edit_post_link('(Edit)', '', ''); ?></p>
</div>
<div style="float:left;padding-right:10px;padding-bottom:10px;"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-middle-thumbnail' ); ?></a></div>
<?php the_content_limit(375, "Read More"); ?><div class="clear"></div>
<div class="postmeta">
<p><?php _e("Category", 'organicthemes'); ?> <?php the_category(', ') ?> · <?php _e("Tags", 'organicthemes'); ?> <?php the_tags('') ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div id="prevLink"><p><?php previous_posts_link(); ?></p></div>
<div id="nextLink"><p><?php next_posts_link(); ?></p></div>
</div>
</div>
<?php include(TEMPLATEPATH."/sidebar_right.php");?>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>
If you can get this to look right, that would be great and helpful. Thanks!
EDIT -
While I have been able to style a sticky post, the post comes up repeated directly after the styled sticky ( which is the announcement)... so I really need this to not have a duplicate. 2 of the answers have been the closest, as a little of both were needed to get the site to look like it currently is.
However, it is still lacking since there is obviously a repeat of the sticky announcement below the styled one.
Here is the modified code:
<code>
<?php get_header(); ?>
<div id="content">
<?php include(TEMPLATEPATH."/sidebar_left.php");?>
<div id="contentarchive">
<div class="postarea">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
if(is_announcement()){
?>
<div id="announcement">
<h3><?php announcement_banner(); ?></h3>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="postauthor">
<p><?php _e("Posted by", 'organicthemes'); ?> <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?> · <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a> <?php edit_post_link('(Edit)', '', ''); ?></p>
</div>
<div style="padding-bottom:10px;width:450px;"><a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo get_post_meta($post->ID, "category-thumbnail", true);?>" alt="" /></a></div>
<?php the_content_limit(375, "Read More"); ?><div class="clear"></div>
<div class="postmeta">
<p><?php _e("Category", 'organicthemes'); ?> <?php the_category(', ') ?> · <?php _e("Tags", 'organicthemes'); ?> <?php the_tags('') ?></p>
</div>
</div>
<?php
}else{
?>
<?php
}
?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="postauthor">
<p><?php _e("Posted by", 'organicthemes'); ?> <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?> · <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a> <?php edit_post_link('(Edit)', '', ''); ?></p>
</div>
<div style="float:left;padding-right:10px;padding-bottom:10px;"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-middle-thumbnail' ); ?></a></div>
<?php the_content_limit(375, "Read More"); ?><div class="clear"></div>
<div class="postmeta">
<p><?php _e("Category", 'organicthemes'); ?> <?php the_category(', ') ?> · <?php _e("Tags", 'organicthemes'); ?> <?php the_tags('') ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div id="prevLink"><p><?php previous_posts_link(); ?></p></div>
<div id="nextLink"><p><?php next_posts_link(); ?></p></div>
</div>
</div>
<?php include(TEMPLATEPATH."/sidebar_right.php");?>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>
<code>
Answers (3)
idt answers:
You can change this line:
<h3><?php announcement_banner(); ?></h3>
to
<div id="announcement">
<h3><?php announcement_banner(); ?></h3>
</div>
then add this to your CSS:
#announcement {
background: #F5F5F5 url(images/content_bg.gif) repeat-x left top;
border: 1px solid #DDDDDD;
display: block;
margin: 0px 0px 10px 0px;
padding: 10px 9px 0px 9px;
}
Nile Flores comments:
I had to put the post in the announcement division layer, but this still duplicates the post on the page. Is there a way to avoid duplicating.
Here is the modified code
<code>
<?php get_header(); ?>
<div id="content">
<?php include(TEMPLATEPATH."/sidebar_left.php");?>
<div id="contentarchive">
<div class="postarea">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
if(is_announcement()){
?>
<div id="announcement">
<h3><?php announcement_banner(); ?></h3>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="postauthor">
<p><?php _e("Posted by", 'organicthemes'); ?> <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?> · <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a> <?php edit_post_link('(Edit)', '', ''); ?></p>
</div>
<div style="padding-bottom:10px;"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-sticky-thumbnail' ); ?></a></div>
<?php the_content_limit(375, "Read More"); ?><div class="clear"></div>
<div class="postmeta">
<p><?php _e("Category", 'organicthemes'); ?> <?php the_category(', ') ?> · <?php _e("Tags", 'organicthemes'); ?> <?php the_tags('') ?></p>
</div>
</div>
<?php
}else{
?>
<?php
}
?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="postauthor">
<p><?php _e("Posted by", 'organicthemes'); ?> <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?> · <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a> <?php edit_post_link('(Edit)', '', ''); ?></p>
</div>
<div style="float:left;padding-right:10px;padding-bottom:10px;"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-middle-thumbnail' ); ?></a></div>
<?php the_content_limit(375, "Read More"); ?><div class="clear"></div>
<div class="postmeta">
<p><?php _e("Category", 'organicthemes'); ?> <?php the_category(', ') ?> · <?php _e("Tags", 'organicthemes'); ?> <?php the_tags('') ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div id="prevLink"><p><?php previous_posts_link(); ?></p></div>
<div id="nextLink"><p><?php next_posts_link(); ?></p></div>
</div>
</div>
<?php include(TEMPLATEPATH."/sidebar_right.php");?>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>
<code>
idt comments:
Try changing the second
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="postauthor">
<p><?php _e("Posted by", 'organicthemes'); ?> <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?> · <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a> <?php edit_post_link('(Edit)', '', ''); ?></p>
</div>
<div style="float:left;padding-right:10px;padding-bottom:10px;"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-middle-thumbnail' ); ?></a></div>
<?php the_content_limit(375, "Read More"); ?><div class="clear"></div>
<div class="postmeta">
<p><?php _e("Category", 'organicthemes'); ?> <?php the_category(', ') ?> · <?php _e("Tags", 'organicthemes'); ?> <?php the_tags('') ?></p>
</div>
<?php get_header(); ?>
<div id="content">
<?php include(TEMPLATEPATH."/sidebar_left.php");?>
<div id="contentarchive">
<div class="postarea">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
if(is_announcement()){
?>
<div id="announcement">
<h3><?php announcement_banner(); ?></h3>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="postauthor">
<p><?php _e("Posted by", 'organicthemes'); ?> <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?> · <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a> <?php edit_post_link('(Edit)', '', ''); ?></p>
</div>
<div style="padding-bottom:10px;"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-sticky-thumbnail' ); ?></a></div>
<?php the_content_limit(375, "Read More"); ?><div class="clear"></div>
<div class="postmeta">
<p><?php _e("Category", 'organicthemes'); ?> <?php the_category(', ') ?> · <?php _e("Tags", 'organicthemes'); ?> <?php the_tags('') ?></p>
</div>
</div>
<?php
}else{
?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="postauthor">
<p><?php _e("Posted by", 'organicthemes'); ?> <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?> · <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a> <?php edit_post_link('(Edit)', '', ''); ?></p>
</div>
<div style="float:left;padding-right:10px;padding-bottom:10px;"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-middle-thumbnail' ); ?></a></div>
<?php the_content_limit(375, "Read More"); ?><div class="clear"></div>
<div class="postmeta">
<p><?php _e("Category", 'organicthemes'); ?> <?php the_category(', ') ?> · <?php _e("Tags", 'organicthemes'); ?> <?php the_tags('') ?></p>
</div>
<?php
}
?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div id="prevLink"><p><?php previous_posts_link(); ?></p></div>
<div id="nextLink"><p><?php next_posts_link(); ?></p></div>
</div>
</div>
<?php include(TEMPLATEPATH."/sidebar_right.php");?>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>
idt comments:
*I meant try moving
Dan | gteh answers:
Apply your style to .sticky_post which is what's generated by the plugin when in use
.sticky_post {
background: #F5F5F5 url(images/content_bg.gif);
background-repeat: repeat-x;
border: 1px solid #DDDDDD;
float: left;
display: block;
width: 468px;
margin: 0px 0px 10px 0px;
padding: 10px 9px 0px 9px;
}
Nile Flores comments:
No luck, even with the announcement post.
Kannan Sanjeevan answers:
<?php
if(is_announcement()){
?>
<div id="announcement_post">
<?php announcement_banner(); ?>
</div>
<?php
}else if(is_stickied()){
?>
<div id="sticky_post"?
<?php post_sticky_status(); ?>
</div>
<?php
}else{
?>
// Executes when its not both announcement or sticky
<?php
}
?>
Now you can style the announcement posts using <strong>#announcement_post</strong> and sticky posts using <strong>#sticky_post</strong>
#announcement_post{
// CSS for announcement post
}
#sticky_post{
// CSS for sticky_post
}