Adhesive Plugin – Styling not working

The Adhesive WordPress Plugin lets you mark certain posts as “sticky” so that they always stay at the top of your website. I think this is particularly useful for providing an introduction to a blog, or it would help you to use WordPress as a more of a content management system than a blogging platform. For example your front page content appears at the top of your website, and then all of the blog posts under that appear like news updates perhaps.

The problem I was having was that it was not adding an “adhesive_post” class correctly to the entry that was sticky. It seemed to be wrapping my entire website in that class.

I followed the advice mentioned in this support entry to at least start me off fixing my problem.

Here is what you would do specifically:

First, open the adhesive.php file in an editor, like Notepad (not Word or WordPad).

Look for the line that reads:

add_filter('the_content', 'adhesive_the_content', 15);

Change that line to read:

//add_filter('the_content', 'adhesive_the_content', 15);

That will prevent the javascript from being inserted that is messing up the class changing.

To style your sticky posts after you have removed this line, you will need to edit your theme.

Open your theme file (usually index.php or category.php) and look for the area where posts are displayed.

The div tag that surrounds the post should look something like this:
<div class="post" id="post-<?php the_ID(); ?>">

Change it to this:
<div <?php if($post->is_sticky) {echo 'class="adhesive_post"';} else {echo 'class="post"';} ?> id="post-<?php the_ID(); ?>">

The author of the original advice advises using two class attributes here. This didn’t work in my style sheet so I changed this to putting one class which depends on whether the post is sticky or not.

Finally this is the styling I added to my style.css file to get that first special sticky post to really standout from my regular posts:

/* Edit the sticky post*/
.adhesive_post {
padding:20px;
border: 2px solid #94C4E6;
margin-bottom:40px;
}
.adhesive_post H2 {
font-size:2.4em;
}
.adhesive_post small {
display:none;
}
.adhesive_post .postmetadata {
display:none;
}
.adhesive_post .spreadtheword {
display:none;
}
.adhesive_post li {
margin-left:40px;
margin-top:.2em;
}
.adhesive_post ol {
margin-top:.8em;
}
.adhesive_post p {
margin-top:1em;
}
.adhesive_post .entry {
font-size:1.3em;
}

Yes, I don’t CSS syntax very well yet!

And here is the final result:

[tags]WordPress 2.0,Adhesive,WordPress Plugins, Sticky[/tags]

13 Responses to “Adhesive Plugin – Styling not working”

  1. etchbee says:

    following your instruction it worked that I had been looking for two days. now, I also like to hide post title and whole comment link row. if you can help me please.
    thanks.
    etchbee

  2. Etchbee,

    add this text to your style.css to hide the comment link row:

    .adhesive_post p.info{
    display:none;
    }
    

    I’m guessing this text will hide your title:

    .adhesive_post h1{
    display:none;
    }
    
  3. etchbee says:

    Dear Greg,
    Thanks alot for your prompt action and support.
    Etchbee

  4. Adam says:

    hi there, the css doesn’t seem to have an effect in firefox. do you know how I can get it to work in firefox too?

  5. Adam says:

    also how do I get it so the border disappears when you click on the individual post?

    thanks.

  6. Adam, I would guess there is something mis-typed somewhere. What’s the URL of your website, I’ll take a quick look.

  7. Adam says:

    hey greg, I think I’m going to remove the borders anyway because I have ads in the post itself and I think it would make things look too cluttered. Thanks! Do you think that the plugin could mess up the way the blog loads in Firefox?? It seems like ever since I started using the plugin I’m having severe problems with Firefox. My site loads way slower in Firefox than it does in IE. It could be my hosting provider but why would it be slow for one browser and not the next… anyway I added my website in the name.

  8. Adam, I don’t see where on your blog you’re using adhesive? Maybe you didn’t follow the directions exactly in this post?

    I loaded your page in Firefox just fine. Perhaps your server was just having a bad day whenever you experienced that?

  9. Adam says:

    thanks greg, yes my server was having one of those days.. I was going crazy trying to figure out if it was something I did. In the midst of all of that I managed to remove adhesive and changed my index.php back to the way it was. I’m going to reinstall it another time. But when I do, I’ll make sure to visit this site again!

  10. Colin says:

    Hey Greg,

    I’m having trouble removing the Adhesive plugin. When I deactivate it or simply delete it altogether, I get an error.

    What can I do to ensure it is removed completely and won’t conflict with my site?

    I tried contacting Owen Winkler, but he never responded to my inquiries. Thanks.

  11. Colin,

    I think you just go to your plugins directory and remove the adhesive stuff. But that’s just my best guess, be sure to do a full backup first, and make sure you can use the backup.

  12. Colin says:

    Hey Greg,

    I removed it completely, but I got a database error. Meaning I think it left behind some code in another area of the blog. I just don’t know where/what to remove.

    I have tried both deactivating and removing completely, and the site becomes non-functional. Funny part is that I don’t even use the plugin. But I have to keep it activated or the site goes down.

  13. Colin,
    That is a very strange problem. I can’t think of any other suggestions to offer, but I would try asking your question here: http://wordpress.org/support/

    They’re quite knowledgeable usually.