How do I make JavaScript file paths relative to the current file directory?

Question

JavaScript file paths are relative to displayed page. How do I make JavaScript file paths relative to the current file directory?

For instance, I include a file sh/shThemeDefault.css into footer.php (there are under the same directory: wordpress/wp-content/themes/) by:

<script src="sh/shCore.js" type="text/javascript"></script>

While accessing a post (say http://example.com/post-A),

sh/shCore.js will be extended as http://example.com/post-A/sh/shCore.js, reporting not found error.

The right absolute path is http://example.com/wordpress/wp-content/themes/sh/shCore.js.

PS: I am installing SyntaxHighlighter by placing the following codes before /body in footer.php:

<link href="./sh/shCore.css" rel="stylesheet" type="text/css" />
<link href="./sh/shThemeDefault.css" rel="stylesheet" type="text/css" />

<script src="./sh/shCore.js" type="text/javascript"></script>
<script src="./sh/shAutoloader.js" type="text/javascript"></script>


<script type="text/javascript">
SyntaxHighlighter.autoloader(
    ['python', 'py', 'sh/shBrushPython.js'],
    ['java', 'sh/shBrushJava.js'],
    ['bash','shell','sh/shBrushBash.js'],
    ['css','sh/shBrushCss.js'],
    ['sql','sh/shBrushSql.js'],
    ['latex', 'tex','sh/shBrushLatex.js.js'],
    ['plain', 'text','sh/shBrushPlain.js'],
    ['php','sh/shBrushPhp.js'],
    ['js','jscript','javascript','sh/shBrushJScript.js'],
    ['xml', 'xhtml', 'xslt', 'html', 'xhtml','sh/shBrushXml.js']
);
SyntaxHighlighter.all();
</script>

@rnevius <script src="sh/shCore.js" type="text/javascript"></script> encounters the same issue. — SparkAndShine
– SparkAndShine, Commented Jan 12, 2016 at 22:46

rnevius · Accepted Answer · 2016-01-12 22:47:34Z

2

You shouldn't be including CSS and JS files directly in your WordPress templates. Rather, you should be enqueueing them properly (in functions.php) via wp_enqueue_style():

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/shThemeDefault.css' );
    wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

This will completely eliminate the issue you're experiencing.

answered Jan 12, 2016 at 22:47

rnevius

27.2k10 gold badges60 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SparkAndShine Over a year ago

Would you please set aside some time to have a look my edited question (below the horizontal line PS:...).

Arturo León · Accepted Answer · 2016-01-12 22:55:24Z

2

In Wordpress you can use the following code to get the template directory: <?php echo get_template_directory_uri(); ?>

In your case will be something like:

<link href="<?php echo get_template_directory_uri(); ?>/sh/shThemeDefault.css" rel="stylesheet" type="text/css" />

edited Jan 12, 2016 at 22:55

answered Jan 12, 2016 at 22:47

Arturo León

4496 silver badges14 bronze badges

1 Comment

SparkAndShine Over a year ago

Use get_stylesheet_directory_uri() to include resources that are intended to be included in/over-ridden by the child theme.

Collectives™ on Stack Overflow

How do I make JavaScript file paths relative to the current file directory?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related