How to Add Latex Math Formulas in WordPress

This tutorial shows how you can add math formulas on WordPress. The basic idea is that you can use Latex with imported javascript. The following shows steps of adding math formulas on WordPress.

Steps of Adding Latex Math Formulas in WordPress

Step 1: Write math formulas using Latex

You can use R Markdown, Jupyter Markdown, or even plain txt editor to write the Latex code for the formula. For instance, you can write the following Latex for the PDF of normal distritbution.

f(x)=\frac{1}{\sqrt{2 \pi \sigma^2}}e^{-\frac{1}{2}(\frac{x-\mu}{\sigma})^2}

Step 2: Add javascript in Shortcode in WordPress

Add the following javascript in Shortcode in WordPress.

<script type="text/javascript" async="" src="">

Step 3: Combine the Latex in the shortcode as well

You can copy the Latex you write down in Markdown or text editors into shortcode as well. But, you need to add the following HTML code (i.e., the latex code is in the middel).

<p><span class="math display">\[ \]</span></p>

The following is the combination of the HTML above and the Latex code shown in Step 1.

<p><span class="math display">\[ f(x)=\frac{1}{\sqrt{2 \pi \sigma^2}}e^{-\frac{1}{2}(\frac{x-\mu}{\sigma})^2} \]</span></p>

Step 4: Preview in WordPress

The following is the screenshot of how it looks like in editing mode.

How to Add Latex Math Formulas in WordPress
How to Add Latex Math Formulas in WordPress

Note that, if you have multiple formulas within a same post, the Javascript part only needs to be included in the post once.

Further, you can put the Javascript and the HTML+Latex in the same shortcode box as well.

The following is the final outlook in the preview mode or final look.

\[ f(x)=\frac{1}{\sqrt{2 \pi \sigma^2}}e^{-\frac{1}{2}(\frac{x-\mu}{\sigma})^2} \]

Further Reading