Adding MathJax to WordPress

If your blog is hosted on WordPress.com, you can already render mathematical equations using LaTeX code (at least, that is my understanding). However, since I run WordPress on my own server, I would have to add a bit of software to produce similar results. A long time ago I tried using jsMath to generate math equations, but I tired of all the warning messages it produced if a user didn’t have the proper fonts installed. However, after seeing Robert Talbert mention MathJax on Twitter this morning, I decided to see if I could add it to this site. MathJax is apparently the successor to jsMath, and appears to be gaining some momentum in the mathematics community.

MathJax and WordPress have obviously been joined together before, as I quickly found the MathJax-LaTeX plugin for WordPress. While I could have installed MathJax on its own, I decided to install the plugin also, as it promised to inject MathJax javascript only on those pages that require it. Here is evidence (hopefully) that everything works: [mathjax] $$df(X_t)= \sum_{i=1}^d f_{,i}(X_t)\,dX^i_t + \frac{1}{2}\sum_{i,j=1}^d f_{,ij}(X_{t})\,d[X^i,X^j]_t$$

My knowledge of Linux is pretty limited, but I’ll share how I got my WP blog working. Be forewarned, however, that I likely won’t be able to answer questions about other installations; I’m barely capable of getting things working on my own system.

To begin, I used the WP plugin manager to add the MathJax-LaTeX plugin. I noted that it created a folder labeled mathjax-latex in my WP plugins directory, which I reference below. I next needed to install the MathJax files onto my WordPress server. My first approach was to download the files to my desktop, unzip them, and then FTP them back to my server. Bad idea! The MathJax folder is 16MB when compressed, much larger than that when uncompressed, and contains over 30,000 files! It would have taken hours to upload them via FTP.

So I launched Putty, logged into my webhost via SSH, and went to site-folder/wp-content/plugins/mathjax-latex/. From there, I issued the command wget http://sourceforge.net/projects/mathjax/files/MathJax/v1.0.1/MathJax-v1.0.1a.zip/download to download the MathJax files directly onto the server. Then, to unzip the downloaded file, I used the command unzip MathJax-v1.0.1a.zip. This put all the needed files into the directory .../plugins/mathjax-latex/MathJax, just as required by the MathJax-LaTeX plugin.

Next, to accommodate recent Firefox releases, it was necessary to download some updated font files. First, I went to directory .../MathJax/fonts/HTML-CSS/TeX and deleted the otf folder with rm -rf otf. Then I sucked down the new fonts with wget http://www.mathjax.org/dl/MathJax-Font-Update.zip, using unzip MathJax-Font-Update.zip to inflate the files. Unfortunately, this created an unwanted MathJax-Font-Update folder containing the needed otf subfolder. So I moved into the MathJax-Font-Update directory, then shoved the otf folder up a level with mv otf ../otf. Finally, I moved back up a level into the TeX directory, and removed what was left of the unneeded folder with rm -rf MathJax-Font-Update.

Lastly, I went back to the WP plugin page and activated the MathJax-LaTeX plugin. To put  \LaTeX code on a page, enclose your equation inside the tags [latex] and [/latex]. So [latex]e=mc^2[/latex] produces e=mc^2. If you want to use dollar sign notation, simply include the tag [mathjax] somewhere on your page. Then $$e^{j\pi} = -1$$ generates $$e^{j\pi} = -1$$

When I first installed everything, Firefox would waste about 45 seconds trying to load web fonts, before rendering equations with image files. Reading through the MathJax documentation, this appeared to be a permission problem, and I created a suitable .htaccess file as suggested. However, the problem went away after I cleared the browser cache, and didn’t come back when I deleted the .htaccess file. So if you run into this problem, try clearing your browser cache first!

This entry was posted in Mathematics and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

5 Comments

  1. Robert
    Posted February 5, 2011 at 11:18 pm | Permalink

    Great post. Very useful to solve the problem with higher versions of Firefox.

  2. Henry
    Posted February 7, 2011 at 10:37 pm | Permalink

    Thanks a lot.
    It helped me install mathjax.

  3. Posted March 9, 2011 at 7:04 pm | Permalink

    Hi, it doesn’t seem to work on your blog anymore. Neither it does on mine, I guess it has something to do with wp 3.1 since I just upgraded (no backups ofcourse) and it broke. Are you running 3.1 as well?

  4. Jeff
    Posted March 9, 2011 at 10:36 pm | Permalink

    For some reason, my entire MathJax folder was deleted from /plugins/mathjax-latex/. I’m not sure whether this was due to a software update, or some other glitch. Anyway, all of my instructions above are outdated, as MathJax has moved their software from Sourceforge to Github. The basic process is the same, but all the file names are different. There is no longer a need to load special font files for Firefox. The latest MathJax version (1.1) has deleted the default configuration, meaning that this information must be explicitly added. I included the necessary script command in the footer, as you will find if you scroll to the bottom of the page source.

    With all of these changes, it didn’t seem that the mathjax-latex plugin was doing much for me, so I disabled it. Also, MathJax is now hosting their own code, so you have the option of linking to their server if you want to avoid having to install their software on your own machine.

  5. Posted March 1, 2013 at 5:43 pm | Permalink

    You could have asked; we probably would have been able to tell you what was happening:-) Still a zombie post is better than none.

    Mathjax-latex used to require the installation of the Mathjax libraries; nowadays it’s easier just to use their content delivery network. It saves you server space and traffic; it’s probably faster for the website viewers as well.

    The plugin gives you the ability to turn mathjax on and off for individual pages. The hard work has always be done by the MathJax libraries.

One Trackback