An Unobtrusive ‘Edit’ Link

For WordPress projects, I prefer to keep admin views totally separate from public views, which is why some users dislike the admin toolbar. I usually disable the toolbar, but still use the ‘edit’ link if I’m revising a post often and need to toggle back and forth:

<?php edit_post_link(__('Edit','mytheme'), '', ''); ?>

The only problem is I don’t like displaying it inline with my content, especially if it breaks something. I’d rather see the layout exactly as a user sees it.

Lately, I’ve been fixed-positioning the link in a less obtrusive way, using the standard “post” icon as a link. Here’s what I see on the front end when I’m logged in:

Repositioned 'edit' link

Repositioned ‘edit’ link

It’s out of the way of the layout, but stays fixed when you scroll. It’s easy enough to implement. Just paste the “edit_post_link” function above anywhere within the Loop. Then use this CSS:

a.post-edit-link {
	background: url(../../../../wp-admin/images/menu.png) 119px -35px;
	text-indent: 100%;
	overflow: hidden;
	display: inline-block;
	text-indent: -99em;
	white-space: nowrap;
	height: 24px;
	width: 24px;
	position: fixed;
	top: 5px;
	left: 5px;
	}

Note: this only works if your stylesheet is in your theme’s root. If you use a subfolder like /css/ you would need to add an extra ../ to the background path.