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.

  • mrjupave

    Love it, though I’m partial to the ‘writing hand’ unicode character (✍).

  • Sandra

    Great Idea!

  • calebmcg

    Thanks. Good idea. I’m going to try it out. The full admin bar is just too much of an eyesore.

  • http://www.expertvillagemedia.com/ WordPress Developer

    Perfect ………….. It’s very helpful for my WordPress project.

    Thanks

    Ruby
    WordPress Developer
    http://www.expertvillagemedia.com/wordpress/

  • GMEHTA89

    I’ve never heard of injecting fertilizer into the ground but it makes sense doesn’t it?
    Thanks for showing us the process Martha. I also love trees and applaud you for doing everything you can to keep yours healthy!

    http://www.classresultsite.in/
    http://www.class10thresult.in/
    http://universitywire.in/