clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

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

Filed under: WordPress— Tagged with: edit, front end, php

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.

<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.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • console.log('Smash the patriarchy!')
  • I love u!