3

So, I'm trying to add get_template_directory_uri or bloginfo() to my header.php file to create relative paths for the CSS and JS files in the theme.

E.g.,

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

In theory this should show

    <link rel="stylesheet" href="http://mysite.com/wp-content/themes/myTheme/css/style.css">

Problem is, when I view the <head> tag in source all I see is:

    <link rel="stylesheet" href="/css/style.css">

All the other template tags work in my files (get_permalink(), the_title(), etc.), but this one isn't. echo get_bloginfo('url') Also works.

I was thinking of messing with the wp-config.php file and doing something like:

define('WP_HOME','http://example.com/blog');
define('WP_SITEURL','http://example.com/blog');

...but, I'm not sure if that's the best practice for rewriting the URL.

Am I missing something?

Improve this question

5 Answers 5

Reset to default
4

What you have:

 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

should work fine. I've copied and pasted into my header.php and it worked.

But this is not how you should be including css or javascript files. The proper way is to use the wp_enqueue_scripts hook. For instance, say you have javascript file you wish to load which requires jQuery to work, you enqueue the script and list jQuery as a dependency. WordPress does the rest:

<?php
function my_scripts_method() {
   // register your script location and dependencies
   wp_register_script('custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery')
    );
   // enqueue the script
   wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

For styles (the same hook is used):

function my_styles_method() {  
    // Register the style like this for a theme:  
    wp_register_style( 'my-custom-style', get_template_directory_uri().'/css/custom-style.css');  

    // enqueue the stule  
    wp_enqueue_style( 'my-custom-style' );  
}  
add_action( 'wp_enqueue_scripts', 'my_styles_method' );

Please read this Codex pages on and wp_enqueue_script() and wp_enqueue_style()

It may not seem important, but particularly with loading scripts, you'll probably find that loading them 'manually' will break your theme and/or plug-ins.

Improve this answer
6
  • I didn't even know that existed. I will definitely migrate my code to this method shortly. My current issue is trying to understand why <?php get_template_directory_uri() ?> returns empty.
    – aboutaaron
    Mar 20, 2012 at 23:32
  • Have you var_dumped it?
    – Stephen Harris
    Mar 20, 2012 at 23:34
  • I am unfortunately unfamiliar with var_dump in WordPress. Could you clarify?
    – aboutaaron
    Mar 20, 2012 at 23:37
  • 1
    It's not WordPress: var_dump(get_template_directory_uri());
    – Stephen Harris
    Mar 20, 2012 at 23:39
  • 1
    Yeah it will print the contents. If it's you do it in header you'll probably have to hunt around for it in the html of the page (it maybe inside <head>)
    – Stephen Harris
    Mar 21, 2012 at 1:22
2

A bit late on this but I just ran into the same issue. My problem was I had changed out all my theme files with an empty starter template theme and did not go through the theme's install steps so it was not getting the correct directory. Re-activating the theme might be an appropriate first step in finding a solution to this problem.

Improve this answer
1
  • I've run into the same thing before - in my case, get_template_directory_uri() was returning the child theme, not the parent, which is of course the exact opposite of what it's supposed to do. swapping to the parent theme, and then switching back again to the child completely cleared it up for me.
    – matt lohkamp
    Sep 28, 2014 at 23:14
0

have you tried the simple version of bloginfo aka:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url); ?>/css/style.css" />

or you can use your version (meaning get_bloginfo) but i think you
should assign it to a var and the echo it..

<link rel="stylesheet" type="text/css" media="all" href="<?php $turl = get_bloginfo('template_url); echo tulr; ?>/css/style.css" />

...

Hope this helps tto solve your problem...

Best regards, Sagive.

Improve this answer
9
  • Hey Sagive, Thanks for the reply. Unfortunately, neither of your suggestions work. It's still creating URLs relative to "mysite.com" instead of "mystie.com/wp-content/themes/myTheme/" I'll keep messing around and see if I can figure something out.
    – aboutaaron
    Mar 20, 2012 at 22:39
  • My pleasure - got it working ?
    – Sagive
    Mar 20, 2012 at 22:40
  • 2
    Actually, get_bloginfo( 'template_url' ) itself just calls get_template_directory_uri(), so the simpler method is just to use get_template_directory_ur() directly.
    – Chip Bennett
    Mar 20, 2012 at 23:07
  • @ChipBennett I agree. It's just for whatever reason, my site on this install doesn't call get_template_directory_uri() properly. I was hoping someone had experienced something similar.
    – aboutaaron
    Mar 20, 2012 at 23:13
  • i see no difference :) - bloginfo is on my snippet list so.. i prefer it... say @aboutaaron You mean to say its still not working ?
    – Sagive
    Mar 20, 2012 at 23:16
0

if the get_bloginfo('url') is working in header.php then Instead of using get_template_directory_uri(); use bloginfo( 'stylesheet_url' ); function which Returns the primary CSS (usually style.css) file URL of the active theme.

Improve this answer
0

Deactivate the current theme (ie. activate a different theme, say TwentyFourteen) and then reactivate your theme.

When a theme is activated WordPress goes through some initial set-up of relative uri's, etc. and there are sometimes cases (particularily new theme development) where WordPress does not run that initialization code. Deactivating and reactivating the theme makes sure that WordPress gets another chance at running the theme initialization set-up.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.