I am trying to use mathJax in my wordpress. According to the documentation at mathjax, the mathjax script url needs to mentioned in headers.php. Which is exactly what I did. And right now this is what the head section in the headers.php looks like:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
<link rel="profile" href="" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<script type="text/javascript"src=".js?config=TeX-AMS-MML_HTMLorMML">
</script>
<![endif]-->
<?php wp_head(); ?>
</head>
This javascript is not loading on my website's index.php page, however its loading on a single posts page. What could be the problem. What am I missing here?
I am trying to use mathJax in my wordpress. According to the documentation at mathjax, the mathjax script url needs to mentioned in headers.php. Which is exactly what I did. And right now this is what the head section in the headers.php looks like:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
<link rel="profile" href="http://gmpg/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<script type="text/javascript"src="http://cdn.mathjax/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<![endif]-->
<?php wp_head(); ?>
</head>
This javascript is not loading on my website's index.php page, however its loading on a single posts page. What could be the problem. What am I missing here?
Share Improve this question asked May 7, 2016 at 2:12 Anuroop KuppamAnuroop Kuppam 1012 bronze badges2 Answers
Reset to default 0The proper way to enqueue a script is as follows:
function mathJax_scripts() {
wp_enqueue_script( 'mathjax-js', http://cdn.mathjax/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML', array(), '2.7.1', false );
}
add_action( 'wp_enqueue_scripts', 'mathJax_scripts' );
I added the version number (2.7.1) and I flipped the final parameter to 'false' - that last parameter asks 'add script to footer?', true means yes, false means no.
Then you'll want to add the inline code into the wp_head():
function mathJax_inlineScript() {
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
<?php }
add_action( 'wp_head', 'mathJax_inlineScript' , 999 );
In the add action I've set it to 999 - you can adjust and fine tune that to get the inline script to appear where you want it to in the wp_head().
Hope that helps.
I could understand what the problem was. Firstly the statement<script type="text/javascript"src="http://cdn.mathjax/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> was inside an if for the browser IE. Even after removing that I faced the same problem because I had WP cache enabled and this was caching my webpages. So when you are testing your wp installation, I would recommend deactivating the cache.