Add an edit-post link to front end

Edit-post button is already in the admin bar (not for archive view), but maybe you are like me, and don't like the admin bar hogging your screen real estate. Here's how you can make your life a bit easier by adding the post edit button in front end.

I think a good place for it is next to the heading of the article.


Use some descriptive character i.e. pen ✎

Taking it a bit further

On this site the edit button is the donut shaped bullet in front of the post header, but it of course works only for logged in users. Here’s how to do that:


'; } ?>

And the CSS for it:


.post-edit-link {
   background:url(images/sprite.png) no-repeat left top; 
   display:inline-block; 
   position:relative; 
   top:4px; 
   width:15px; 
   height:15px;
}

/* Taking advantage of the body body class and displaying hover effect only for logged in users */
.logged-in  h1 .post-edit-link:hover {
  background-position: left -50px;
}

We need to use display:inline-block; cause we want to specify width and height for the element and we want it to be inline next to the heading. inline-block works quit well now days, see the browser support here. If you want to be really cross browser, you can display it as block and float it and the heading text to left.

Club-Mate, the beverage → club-mate.fi