Javascript not working on index.php but it is working on single post's page

Question

Javascript not working on index.php but it is working on single post's page

Anuroop Kuppam

2020年10月27日 22:04

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.org/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.org/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?

Topic third-party-applications headers Wordpress javascript

Category Web

Tony Djukic · Accepted Answer · 2020年1月22日 01:08

The proper way to enqueue a script is as follows:

function mathJax_scripts() {
    wp_enqueue_script( 'mathjax-js', http://cdn.mathjax.org/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.

Anuroop Kuppam · Accepted Answer · 2016年5月7日 02:20

I could understand what the problem was. Firstly the statement<script type="text/javascript"src="http://cdn.mathjax.org/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.

Javascript not working on index.php but it is working on single post's page

About