Ask your WordPress questions! Pay money and get answers fast! (more info)

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'); ?> &middot; <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a>&nbsp;<?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(', ') ?> &middot; <?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'); ?> &middot; <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a>&nbsp;<?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(', ') ?> &middot; <?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'); ?> &middot; <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a>&nbsp;<?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(', ') ?> &middot; <?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)

2011-01-07

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'); ?> &middot; <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a>&nbsp;<?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(', ') ?> &middot; <?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'); ?> &middot; <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a>&nbsp;<?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(', ') ?> &middot; <?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'); ?> &middot; <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a>&nbsp;<?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(', ') ?> &middot; <?php _e("Tags", 'organicthemes'); ?> <?php the_tags('') ?></p>

</div>
inside the if statement, like this:


<?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'); ?> &middot; <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a>&nbsp;<?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(', ') ?> &middot; <?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'); ?> &middot; <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a Comment', '1 Comment', '% Comments'); ?></a>&nbsp;<?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(', ') ?> &middot; <?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

2011-01-07

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.

2011-01-07

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

}