Skip navigation

Editing the Edit This WordPress Template Tag

For those of you just reading WordPress blogs, there is a part of the blog, just under the title, that you can’t see. If you are the administrator, owner, or chef-cook-and-bottle-washer of a WordPress blog, and logged in, you see it. It’s called the Edit Post Link Template Tag.

The Edit Link Post is Not Visible

Once you are logged in, the Edit This Post Link shows up, allowing you to click it to access the Write Post editing panel to make changes in the post.

Once the user is logged in, the Edit This link is visible

The Edit Post Link can go anywhere. Most WordPress Theme designers put it under the title, next to the categories, but it can be in your post meta data section or anywhere you want it, as long as it is in the , the PHP code that generates your post content.

Edit This Post Link in the Post Meta Data Section

The core template tag for the Edit Post Link in WordPress is:

<?php edit_post_link(); ?>

By default, it appears only when the viewer is logged into the blog, and as a normal link.

Edit This

What if you want it to say “Fix This Puppy” instead of “Edit This”? You can do that:

<?php edit_post_link('Fix This Puppy'); ?>

Fix This Puppy

By default, it creates a link. There is no list or paragraph or line break code within it. It just sits wherever you put it and shows up when you are logged in. So what if you want it to be in its own line below the title?

<h2 id="post-" class="posttitle"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php edit_post_link('Fix This Puppy', '<p>', '</p>'); ?>

The end result might look like:

Title of This Post

Fix This Puppy

The parameters for the Edit Post Link are:

<?php edit_post_link('link text string', 'before', 'after'); ?>

You can add any tags or text before or after the link.

Styling the Edit Post Link – Make It Stand Out

One of the problems I have with many WordPress Themes is the lack of obvious blatancy with the Edit Post Link. If I find an error, I want to find it NOW and fast, quickly jabbing the link so I can fix the boo boo before too many people see it. When it is smashed up against the categories list, or tucked into a corner of the web page design, I have to search around for it. A panic can hit me as I just know people are reading this and thinking I’m an idiot because I misspelled “from” as “form”. I need that button NOW.

Using your WordPress Theme stylesheet, you can style your Edit Post Link to look distinctive – okay, let’s be blunt about this – in-your-face-obvious. There are two ways to do this.

<span class="editthis"><?php edit_post_link('FIX THIS'); ?></span>

OR

<?php edit_post_link('FIX THIS', '<span class="editthis">', '</span>'); ?>

Whether you put the styles outside or inside of the template tag, you can style it however you want. For my examples, I added >>EDIT THIS<< to the link text for emphasis. The following adds a simple border in red around the link and puts the text in bold.

Edit This Post Link with red border

span.editthis a {margin-left: 10px; padding: 5px 10px 3px 10px; font-weight: 600; color: black; border:2px single red; }

Or really add some emphasis with a red background to the link.

Edit This Post Link with red background

span.editthis a {background: red; margin-left: 10px; padding: 5px 10px 3px 10px; font-weight: 600; color: black;}

Now add a black border to the red background and it is outlined with emphasis.

Edit This Post Link with red background and black border

span.editthis a {margin-left: 10px; padding: 5px 10px 3px 10px; background: red; font-weight: 600; color: black; border:2px single black; }

Want to add a little more emphasis? Add a yellow background hover so the background of the link changes when the mouse moves over it.

Edit This Post Link with yellow hover mouse effect

span.editthis a:link, span.editthis a:visited {background: red; margin-left: 10px; padding: 5px 10px 3px 10px; font-weight: 600; color: black; border: 2px solid black;}
span.editthis a:hover {background: yellow; color: black;}

You can style it however you want to make it stand out against the regular page content. It is to help you or your users find the Edit Post Link. Since regular visitors never see it, who cares what it looks like. Only those who need it. So, experiment and see how it works for you.

BlinkList | Blogmarks | Digg | Del.icio.us | Ekstreme Socializer | Feedmarker | Furl | Google Bookmarks | ma.gnolia | Netvouz | RawSugar | Reddit | Scuttle | Shadows | Simpy | Spurl | Technorati | Unalog | Wink | Yahoo MyWeb2


Site Search Tags: , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen

12 Comments

  1. Posted May 21, 2006 at 8:35 am | Permalink

    Hey, my first time reading your blog. You have a lot of good stuff on here. Anyway, I noticed that the button that says “Submit Comment” is partway cut off in FireFox. You may want to check that out.

  2. Posted May 21, 2006 at 2:07 pm | Permalink

    Thank you. I know about that. There is nothing I can do because WordPress.com does not allow editing of Themes. I have no control over the Theme’s design or elements. Which why I’m such a big proponent of thorough testing and quality control on WordPress Themes released to the public, especially for use on WordPress.com blogs.

  3. Posted May 21, 2006 at 3:09 pm | Permalink

    Thanks for this. It seems that the only times I ever play around with the theme or the .php files is when you post threads like this. Please keep them coming.

  4. Posted May 21, 2006 at 5:48 pm | Permalink

    Oh, right. Blame me when you screw up your WordPress Theme. ;-)

    I’m thinking about doing a month long series of one-a-day WordPress template tags. Whatcha think?

  5. Posted May 21, 2006 at 6:06 pm | Permalink

    Hey Lorelle,
    Great article, and that month long series idead is a good one. Also have you seen http://botd.wordpress.com/ ?

  6. Posted May 21, 2006 at 7:31 pm | Permalink

    ONLY 63 on the Blog Of The Day list! Snort. I used to be in the top 10. Ah, the problem with too much competition. I do love the comment that Lorelle calls WordPress Widgets “accessories”. ;-)

    Ah, well, back to the old drawing board and blog competition. hee hee.

  7. Posted May 22, 2006 at 2:08 am | Permalink

    Good idea on the template tag a day idea. Anything that opens up the code to us non-programmers is good in my book.

    And I wouldn’t blame you if I break the blog. Not really. No. :)

  8. Posted May 22, 2006 at 10:43 am | Permalink

    I would like to learn about the javascript code for the tag list you use —>

    BlinkList | Blogmarks | Digg | Del.icio.us | Ekstreme Socializer | Feedmarker | Furl | Google Bookmarks | ma.gnolia | Netvouz | RawSugar | Reddit | Scuttle | Shadows | Simpy | Spurl | Technorati | Unalog | Wink | Yahoo MyWeb2

    If you have already written this up, thank you, and please direct us to your tutorial….
    thank you so much for the great tips!

  9. Posted May 22, 2006 at 11:02 am | Permalink

    There is no javascript. It’s done manually. Search and replace, copy and paste. Javascripts are not allowed in WordPress.com blogs.

    I will have an article out about this very soon, but in the interim, check out the following:

    Adding Del.icio.us, Digg, Technorati and Slashdot Links to Your WordPress Blog
    Adding Post to Spurl Button on Your WordPress Posts

  10. Colleen
    Posted May 31, 2006 at 7:18 am | Permalink

    I wonder how to go about adding an edit icon before it so it also only shows to the logged in admin, etc?

  11. Posted May 31, 2006 at 7:47 am | Permalink

    Good point. Check out Roles and Capabilities on the WordPress Codex and I’ll look into this more.

    I believe that only those with Author permissions would see the Edit but I’m not sure. I’ll check.

    Thanks.

  12. Posted September 16, 2006 at 12:55 pm | Permalink

    Thanks so much for this info. Just starting my blog and any help is appreciated.
    Honor


7 Trackbacks/Pingbacks

  1. [...] For more info, visit: Template Tags/Edit Post Link Editing the Edit This WordPress Template Tag [...]

  2. [...] Editing the Edit This WordPress Template Tag [...]

  3. […] Editing the Edit This WordPress Template Tag […]

  4. […] Editing the Edit This WordPress Template Tag […]

  5. […] Editing the Edit This WordPress Template Tag […]

  6. […] Editing the Edit This WordPress Template Tag […]

  7. […] Editing the Edit This WordPress Template Tag […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,973 other followers

%d bloggers like this: