Writing LaTeX formulas with MathJax on Wordpress site: the simplest way (possibly without affecting header.php)?

Question

I'm trying to add some math formula using LaTeX on the math part of my site, http://onlinemathbiz.com/linear-algebra/. I've already installed MathJax, and I can see it from my settings. However, when I try to edit the above site with Elemenator, I'm having problem to display the math.

Here's what I've tried: I went on to edite it with Elementor, then first selected the widget "Text Editor" and then "custom HTML", and tried typing the following:

$\sqrt(2)$

[math] \sqrt(2) [/math]

...but noen of them worked. I looked up on the internet, and I see that from here - https://docs.mathjax.org/en/stable/platforms/wordpress.html, we need to go to Appearences --> Editor (it doesn't exist anymore, I guess now it's called Theme Editor) ---> go to the drop down list "Theme Files" ---> select "header.php". And then right before the end of the tag, we should insert

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

And doing so would "enable" MathJax with both TeX and MathML input. But I'm too scared to change the header.php, just in case it breaks my site. Is there a simoler solution? It's important to note here that, I'm not making a post with math symbols in it, rather, I'm writing on http://onlinemathbiz.com/linear-algebra/.

I'd really appreciate a step by step answer with examples! Thanks in advance!!

Answer 1

If you're using any (non site-specific, custom made) theme without a child theme, then you shouldn't modify the original theme files in any way. As any modifications will get wiped out the next time you update your theme.

If you're using a child theme, you could copy the header.php file from your parent theme to your child theme directory. After that you could make any modifications to the copied file without fear of losing the customizations on the next (parent) theme update.

Another, and more appropriate, option when using a child theme would be to enqueue the custom script by adding necessary code to the functions.php file. More on that here, https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/

In this case however as the script is not exactly theme related then a better way than adding code to functions.php would be to enqueue the script in a custom plugin. https://developer.wordpress.org/plugins/intro/ This way you won't lose the script or have to copy it over to another functions.php file, if you ever change your theme.

Basically you'd do the following,

1. Create new file with the name of mathjax-script-plugin.php (the name can be something else too, doesn't really matter)
2. Add the code below to the file
3. Upload (via FTP or zip it and use the plugin installer) the file to wp-content/plugins
4. Activate the plugin from Dashboard > Plugins
5. Inspect your site's source code to make sure the script is loaded properly

Plugin code,

<?php
/*
Plugin Name: MathJax
Version: 1.0.0
Description: Enqueue MathJax js
Author: Antti Koskinen
*/

function mathjax_enqueue_script() {   
  wp_enqueue_script( 
    'mathjax', // handle
    'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML', // source
    array(), // depedencies
    false, // version
    true // in footer
  );  
}
add_action('wp_enqueue_scripts', 'mathjax_enqueue_script');