Skip to content

Instantly share code, notes, and snippets.

@Manoz
Created December 30, 2013 14:24
Show Gist options
  • Save Manoz/8182625 to your computer and use it in GitHub Desktop.
Save Manoz/8182625 to your computer and use it in GitHub Desktop.
Better WordPress sticky post. Screenshot: http://imgur.com/NC54e38
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
if ( is_sticky() ) {
echo '<div class="sticky-flag"><i class="icon-pin wiggle"></i></div>';
}
?>
<div class="post-thumbnail">
</div>
<header>
</header>
<div class="entry-content">
</div>
<footer>
</footer>
</article>
article.post.sticky {
position: relative;
border: 4px solid #ea6060;
}
.sticky-flag {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
color: #fff;
background-color: #ea6060;
}
i.icon-pin {
display: block;
padding: 7px;
font-size: 18px;
}
/* Wiggle animation
------------------------------------- */
@-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(4deg);}
50% {-webkit-transform:rotate(-4deg);}
100% {-webkit-transform:rotate(4deg);}
}
/* firefox */
@-moz-keyframes wiggle {
0% {-moz-transform:rotate(4deg);}
50% {-moz-transform:rotate(-4deg);}
100% {-moz-transform:rotate(4deg);}
}
/* anyone brave enough to implement the ideal method */
@keyframes wiggle {
0% {transform:rotate(4deg);}
50% {transform:rotate(-4deg);}
100% {transform:rotate(4deg);}
}
.wiggle:hover {
-webkit-animation: wiggle 0.2s infinite;
-moz-animation: wiggle 0.2s infinite;
animation: wiggle 0.2s infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment