Math rendering in WordPress using WPMathPub

By Murray Bourne, 07 Aug 2008

There is no simple way to add mathematics (I mean equations, fractions, square roots) to a page on the Web. You can either create the math in some other software (Word, or LaTeX, etc), save it as an image and then embed the image on the page. This is always fiddly because you have to upload the images as well as your pages.

There are some solutions that allow you to insert special code into the Web page and the software renders that code on the page - you don't have to mess around with images. A while ago, I tried jsMath, which uses javascript to convert the code snippet into a formatted text area (not an image). This is good for search purposes, since images are not search-friendly. The javascript involved in jsMath is quite big and rendering time is noticeable on each page load. jsMath can be used in a WordPress blog, but a drawback is that readers can't easily use jsMath when they make comments.

I installed WPMathPub on this blog yesterday. WPMathPub is built on PhpMathPublisher, which allows you to add math on any PHP-based Web-page. PhPMathPublisher is by Pascal Brachet, a French secondary school teacher.

[Thanks to Miss Loi and Sol Lederman for the PhpMathPublisher and WPMathPub links.]

WPMathPub renders LaTeX-like code in your WordPress post without having to install LaTeX on your server (something that my hosting company was not interested in doing for me).

Here's the result:

int{0}{2} {(x^2 } + sin x)dx = 4.08

The above was achieved by inserting the following and WPMathPub converted it on the fly to the PNG image you see above:

[pmath size=14]int{0}{2} {(x^2 } + sin x)dx = 4.08[/pmath]

Here's another example, this time of a matrix:

delim{[}{matrix{3}{3}{5 3 0 6 7 0 1 2 8}}{]}

The code for the above is as follows:

[pmath size=14]delim{[}{matrix{3}{3}{5 3 0 6 7 0 1 2 8}}{]} [/pmath]

I had trouble, though, when I tried to add anything more complicated into the matrix. When writing the code, each element of the matrix is separated by a space. I wanted the following:

1st row: 5 3 cos 2
2nd row: 6 7 0
3rd row: 1 -2 sin 5

To handle the space between the "cos" and the "2", I needed brackets. The "-2" proved a problem.

This 3 × 3 matrix is quite a mess:

delim{[}{matrix{3}{3}{5 3 (cos 2) 6 7 0 1 -2 (sin 5)}}{]}


[pmath size=14]delim{[}{matrix{3}{3}{5 3 (cos 2) 6 7 0 1 -2 (sin 5)}}{]} [/pmath]

This is strange to me. The elements should be separated by either a comma or a semi-colon or something.

Overall, I like the plugin and I'll give it a spin over the next few months and compare it more carefully to jsMath.

I first saw MPMathPub in action at Sol's post. When I tried to add math in the comments on Sol's blog, it messed up my various attempts - 3 times, in fact. This is super-embarrassing, because you can't edit a comment once it is submitted. [The mistake I was making was that I believed this plugin rendered LaTeX commands. No, many of them are LaTeX, but some are not. the integral is one that is not.]

Ron Fredericks, the developer of the WPMathPub plugin also had a go at entering that integral in the comments and it messed up for him, too - 3 times.

I suggested to Sol that he install the Filosofo Comments Preview WordPress plugin, which he did. (This plugin allows readers to see a preview of the comment before publishing it for real. This is good for any comments, since we often only notice typos after the thing has been published.)

Then Sol reported that WPMathPub did not render the image in the comment preview. Sheesh!

Anyway, after all that I thought it was time that I installed it for myself. As you saw above, I have the plugin installed fine. I'll now post this and then comment to see if math in the comment preview is working.

See the 5 Comments below.

5 Comments on “Math rendering in WordPress using WPMathPub”

  1. Murray says:

    Here's the integral that was giving trouble.

    int{0}{pi /2}{(x^2 } + sin x)dx = 2.29

    It worked fine in the comment preview.



    [pmath size=14]int{0}{pi /2}{(x^2 } + sin x)dx = 2.29[/pmath]

  2. Miss Loi says:

    delim{[}{matrix{3}{3}{5 3 {cos 2} 6 7 0 1 {-2} {sin 5}}}{]}

    Can leh ...

    Any difference between this and the PHP Math Publisher WordPress plugin that I've been using? Is this supposed to be an upgrade?

  3. Murray says:

    Thanks Miss Loi.

    Seems like the plugin you have is similar to the 2 mentioned at the bottom of this phpMathPublisher page.

    If it works, stick to it...

    Note: The code that Miss Loi used to get the desired matrix was

    [pmath size=14]delim{[}{matrix{3}{3}{5 3 {cos 2} 6 7 0 1 {-2} {sin 5}}}{]} [/pmath]

    OK - but it's somewhat fiddly to have to put curly brackets everywhere. A delimiter would make more sense.

  4. Ron Fredericks says:

    Thanks for discussing the wpmathpub plugin. As Lori mentions, it is listed on the phpmathpublisher site too. I appreciate reading about the difficulties experienced by real users. To that end I have added a new FAQ as part of the the recent wpmathpub release (version 1.0.7 on Sept. 6, 2008).

    The first FAQ on at this link now demonstrates how to create your math text in a demo and test window before placing it into a comment - to be sure the math expression really renders the way you would like:

    Where can I try wpmathpub text image conversion?

    BTW: The trouble with live preview of comments is that the live preview plugin seems to "consume" the [ pmath ] tag as you enter it before the [ /pmath ] end tag has been entered - so the preview fails - a side affect of the high speed regular expression built into the wpmathpub comment filter I suppose. Perhaps the new FAQ entry will help users avoid this problem all together.

    Best regards,


  5. Murray says:

    Hi Ron and thanks for your comment and link.

    I'm not sure what you mean by the "BTW", since it is rendering fine here in the comments preview.

    Thanks for a great plugin!

Leave a comment

Comment Preview

HTML: You can use simple tags like <b>, <a href="...">, etc.

To enter math, you can can either:

  1. Use simple calculator-like input in the following format (surround your math in backticks, or qq on tablet or phone):
    `a^2 = sqrt(b^2 + c^2)`
    (See more on ASCIIMath syntax); or
  2. Use simple LaTeX in the following format. Surround your math with \( and \).
    \( \int g dx = \sqrt{\frac{a}{b}} \)
    (This is standard simple LaTeX.)

NOTE: You can mix both types of math entry in your comment.