How do I get the theme URL in PHP?

I need to get the URL of my theme directory to reference an image in the theme’s image/headers directory. How is this done in PHP?

Related posts

Leave a Reply

4 comments

  1. This function will return the theme directory URL so you can use it in other functions:

    get_bloginfo('template_directory');
    

    Alternatively, this function will echo the theme directory URL to the browser:

    bloginfo('template_directory');
    

    So an example for an image in the themes images/headers folder would be:

    <img src="<?php bloginfo('template_directory'); ?>/images/headers/image.jpg" />
    
  2. What @EAMann said, with a caveat. Eric is right about the general approach and how the functions bloginfo() and get_bloginfo() work and about how to pass the parameter 'template_directory' to get the value you need for (most) themes.

    However there is a caveat and that caveat is with the newer Child Themes. If you are using a child theme then 'template_directory' is probably not what you want unless you are actually trying to refer to an image that is in the parent theme directory. Instead for child themes what you probably want is to pass stylesheet_directory (I know, I know, the names don’t tell you what they are but hey, that’s just the way it is!) Borrowing somewhat from Eric’s reply using stylesheet_directory would look like this (I shortened the example so it would not wrap):

    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/header.jpg" />

    To illustrate the point I wrote a quick standalone file you can drop in your website’s root as test.php and run to see what it outputs. First run with a regular theme like TwentyTen then run with a child theme:

    <?php
    /*
    * test.php - Test the difference between Regular and Child Themes
    *
    */
    
    include "wp-load.php";
    
    $bloginfo_params = array(
        'admin_email',
        'atom_url',
        'charset',
        'comments_atom_url',
        'comments_rss2_url',
        'description',
        'home',
        'html_type',
        'language',
        'name',
        'pingback_url',
        'rdf_url',
        'rss2_url',
        'rss_url',
        'siteurl',
        'stylesheet_directory',
        'stylesheet_url',
        'template_directory',
        'template_url',
        'text_direction',
        'url',
        'version',
        'wpurl',
    );
    
    echo '<table border="1">';
    foreach($bloginfo_params as $param) {
        $info = get_bloginfo($param);
        echo "<tr><th>{$param}:</th><td>{$info}</td></tr>";
    }
    echo '</table>';
    

    If you notice things you might notice that there’s a lot more to what you can pass to bloginfo() and get_bloginfo(); study the code and the screenshot below for ideas.

    Looking at the screenshot you can see that stylesheet_directory returns the same thing as 'template_directory' for a regular theme but a different value, and probably the value you need for a child theme.

    The return values of get_bloginfo() with and without a Child Theme in WordPress
    (source: mikeschinkel.com)

    For clarity on this screenshot,
    wp30.dev is a domain that runs only
    on my local computer. It is currently
    an instance of WordPress 3.0.1 and it
    is configured at 127.0.0.1 (same as
    localhost) on my laptop and I use it
    for testing ad-hoc examples like this.
    I used VirtualHostX as a convenience on the Mac OS X to help me set up those private non-routable .dev domains but anyone can do it manually by
    editing the computer’s hosts file and the
    ? httpd.conf file.

    By the way, in case you are not familiar with Child Themes where are two other WordPress Answers that might help:

  3. The whole structure of theme builds on top of two options – template (holding parent theme folder namre) and stylesheet (holding child theme folder namr). If there is no child theme used these are the same.

    To have flexibility of filters, rather than access option directly, there are accordingly get_template() and get_stylesheet().

    Now the only thing is missing is to combine those with themes folder location. This can be done with get_theme_root_uri() and again conveniently wrapped in get_template_directory_uri() and get_stylesheet_directory_uri().

    [get_]bloginfo() with template_directory or stylesheet_directory arguments merely wraps these and there is little reason to use it like that. I’d say it is only confusing by having argument saying directory (commonly relates to local paths), but returning URLs.

    Sumary:

    • use get_template_directory_uri() to refer to only or parent theme
    • use get_stylesheet_directory_uri() to only or child theme