A weblog authored by Carthik about the latest in the WordPress world.

Monday, July 26, 2004

Making Relative Links Work

Filed under: — Carthik @ 3:51 pm

If you use the Permalinks feature in WordPress, and you use relative links to link to files or images on your server, as follows:

<a href="images/foo.png"> in your index.php template, or your posts, then it will not work properly, since it will automatically become something like
<a href="http://example.com/archives/post/images/foo.png">

The usual work around is not to use relative links in your template, or posts.

But in case you want to, you can use the w3 org recommendation and add a base URI to your index.php, which looks like :
<base href="http://www.youwebsite.com/">
to the index.php file, in the “head” section. This should prevent the relative links from getting botched.

Originally seen at the Support Forums.

Thanks to chiensavant for posting the solution and Ali_ix for bringing it to my notice.


  1. [...] een consequence of breaking the relative image links. A quick Yahoo! search and I found my answer. All that is need is to add the following HTML tag to the <head> section [...]

    Pingback by the accused » Relative Links in Wordpress — 12/10/2004 @ 11:44 pm

  2. Isn’t
    “/images/foo.png” an absolute URI and
    “images/foo.png” a relative URI?

    The first should look for an images folder from the root of the site, where the second should look for an images folder from the current file location.

    Comment by MtDewVirus — 7/26/2004 @ 5:38 pm

  3. I am not sure about that. For html, the spec tells us that ../foo/bar.x is a relative URI, so I assume both /foo/bar and foo/bar, as well as ./foo/bar should be relative URIs.

    Comment by Carthik — 7/26/2004 @ 5:48 pm

  4. I believe Nick is right. “/images/foo.png” is absolute, the beginning “/” indicates the link is to start at the root of the site. “../images/foo.png” is relative (as the spec says) and is referencing the ‘images’ directory that is supposed to be peer to the current directory.


    Comment by coffee2code — 7/26/2004 @ 6:41 pm

  5. Fixed in the article. Thanks guys!

    Comment by Carthik — 7/26/2004 @ 7:07 pm

  6. Links and URIs that are relative to the site root should be fine with any permalink structure. This isn’t clear from the article. (Wait, I just reloaded and you already fixed it.) However I would still suggest site root as the best practice because it works across domains, across https, etc.

    Comment by Matt — 7/26/2004 @ 7:11 pm

  7. I suppose specifying the base URI is the solution that disambiguates how links are created, when Permalinks are used.

    The site root maybe different from what the author of an article expects, it might, for example begin with /public_html or something, I guess.

    In any case, I suppose, if folks are having problems like the one described in the support forum post, then this solution could work.

    Comment by Carthik — 7/26/2004 @ 7:15 pm

  8. Tanx Carthik ;)
    U R too quick ! :D

    Comment by Ali_ix — 7/27/2004 @ 5:12 am

  9. لینک ثابت Ùˆ …
    سلام …
    لینکهای ثابت درست شد !
    فرمشون اینطوری هست : /archives/year/month/day/post_id
    راخ حل اینجا : WoldLog
    مشکل دسته بندی Ùˆ ترتیب قرار گیری لینکدونی هم حل شد …

    Trackback by Corelist.Net --> Weblog — 7/27/2004 @ 5:15 am

  10. Is “<base href=…” actually working with all browsers or will the IE – as always – break things?

    Comment by René — 7/27/2004 @ 6:43 am

  11. Oops. Tag stripping stripped my post :) Sorry!

    OK, again: Is “< base href=…” actually working with all browsers or does the IE – as always – break things?

    Comment by René — 7/27/2004 @ 6:45 am

  12. René ,
    It should work fine in all browsers. Are you having issues with IE and this?

    Comment by Carthik — 7/27/2004 @ 7:12 am

  13. No, I just can’t test it on IE because I have a Mac. And the IE usually ignores the better standards ;)

    Comment by René — 7/27/2004 @ 7:15 am

  14. It should work, just like other meta tags, and html tags work.

    Comment by Carthik — 7/27/2004 @ 7:23 am

  15. René ,
    It works with IE , Mozilla , FireFox (and hope to Opera) ;)

    Comment by ÙŽÙŽAli_ix — 7/27/2004 @ 10:40 am

  16. If you syndicate your site via RSS or Atom, you should still use absolute links in your posts. When people view your post in a newsreader or on a site like Bloglines or My Yahoo, they no longer have the context of that base href — or even the original location.

    Comment by Kelson — 7/27/2004 @ 12:35 pm

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.


Powered by WordPress

eXTReMe Tracker