You are Viewing : HomeBlogsWordPress How to : Dealing with the paths and links

WordPress How to : Dealing with the paths and links

When you begin wordpress development, dealing with the paths can get extremely confusing. This guide helps you in dealing with absolute and relative links in wordpress.


Absolute and relative paths

Absolute path is the Full path to an object or a document in the filesystem, whereas Absolute URI is the Full URL to the object or document.

Example of Absolute URL

http://kav.in/downloads/wordpress/

http://ftp5.gwdg.de/pub/linux/debian/debian-cd/5.0.7/i386/iso-dvd/

 

And relative path refers to the locations of the objects and documents relative to the document on the same server. 

Example : Relative path to sub directory images. 

<img src="images/picture1.jpg" title="An awesome picture" /> 

Example : relative path to an image inside a folder images located a level above the current document folder is done with  ../ .  Similarly, ../../ refers to the directory that’s two levels above the current one. 

<img src="../images/picture_up_above_inside.jpg" title="The picture above" />

Be careful when you are using relative paths in wordpress.

WordPress theme paths

Both absolute and relative paths can be used in wordpress. Absolute and relative paths are used in PHP/html while CSS uses mostly relative.

Images in the same server are referred to with relative paths in CSS.

wp_file_paths

Graphical example on using the paths

Take a look at the above image. let us link to these image from css. Now please proceed to the below example code.

/* link to picture inside sub-folder images */
body {
	background: url("images/achu.gif") repeat;
}
/* link to an image in directory a level above. */
.awesome-picture {
	background: url("../uploads/picture1.jpg");
}
/* Linking to an image on another server with Absolute server */
.strangewrap  {
	background: url("http://capability.es/top/secret/strange/omg.png") no-repeat;
	display: block;
	width: 150px;
	height:80px;
}

Variables

Use of PHP variables can save us a lot of time and code. WordPress’  built-in functions bloginfo() and get_bloginfo() displays your blog’s information. While the former automatically echoes the output, latter is for use only with php echo. Check out the WordPress Codex reference for bloginfo() and get_bloginfo() for the usage and arguments.

Open your theme’s header.php and insert these code above the header [ div id=”header”> ]

An example, if you want to get the Absolute path to your theme directory.

<?php bloginfo('template_url'); ?> 
// OR
<?php echo get_bloginfo('template_url'); ?>

// Output in my case was 
// http://kav.in/sandbox/wp-content/themes/twentyten

Note the use of echo with the function get_bloginfo() , as get_bloginfo does not echo the output by default.

Say, for example you have a sub-folder “scripts” within the theme folder. Now you may need to link to a javascript file script.js inside it. So, instead of typing the entire URL again and again, we can just use  get_bloginfo. It also helps avoid the typos.

<?php
$themedir = get_bloginfo('template_url');  //assign the theme path to variable $themedir
// similarly $scriptdir = $themedir . “/scripts”;
?>
<script src="<?php echo $themedir ?>/scripts/script.js" type="text/javascript"></script>

WordPress Constants

Constants store information which can be used through out the template. Once defined, its value remains constant.

<?php // THIS goes in functions.php
// defined constants can be used throughout the theme now.
define( 'THMDIR', get_bloginfo('template_url'));
define( 'SCRIPTDIR', get_bloginfo('template_url') ."/scripts");
?>
<!-- this goes in header.php-->
<script src="<?php echo THMDIR ?>/scripts/script.js" type="text/javascript"></script>
<script src="<?php echo SCRIPTDIR ?>/script2.js" type="text/javascript"></script>

Note: Make sure you start with the forward slash after the variable name, when you use get_bloginfo to return the URI.


Thanks for reading,

Kavin

  • Juluweb

    I understand why you are doing this get_bloginfo step.  It comes in handy if you are designing your site on a local server – or if you want to use your theme in multiple places.

    My issue is with the css files and the images. You can’t use the php code in the css file. I am not thrilled about putting my images in a subfolder of the theme file.  If that gets overwritten you could loose them.  Also, then they aren’t handy if you switch to another theme, correct?

    Anyway, I am trying to develop a child theme on my WAMP server, then movie it into a live site, so absolute paths are out of the question.

    I have not see a definitive answer on this on the web.

    • Kavin Gray

      There are nearly a dozen ways around your problem. With CSS you need to use the relative paths, like <code"url(images/someimage.png)" or url(../images/image_onelevel_above.png)". There are very few reasons to use abs paths in CSS, that too can be pretty much done.

      So you dont want to put this inside theme directory? Well, use child themes. :)

  • Someone

    I think there is some -very common- misinterpretation here on absolute path versus absolute url.  Theme directory is here referenced as an absolute URL and not as an absolute PATH. An absolute PATH would refer to the path from DOCUMENT_ROOT, and yes it is used in PHP a lot… :)
    Happy blogging!