clubmate.fi

Add an "edit post" link to front end of your WordPress site

There is an edit post button is already in the WordPress 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.

<h2>
  <?php
    the_title();
    edit_post_link(' ✎', '', '');
  ?>
</h2>

I’m using a Unicode pen ✎ as the icon, but a real icon would of course be better.

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:

<?php
if (is_user_logged_in()) {
  edit_post_link('', '', '');
} else {
  echo '<span class="post-edit-link"></span>';
} ?>

<?php the_title(); ?>](<?php the_permalink(); ?)

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.