WPMathPub WordPress Math Publisher Plugin

Table of Contents

Introduction

WPMathPub is designed for anyone who wants to easily include symbolic math equations in their WordPress.org blog posts, pages, or comments. It is a simple alternative to MathML or LaTex.

Mathematics is often promoted as endowing those who study it with a number of broad thinking skills … providing transferable skills which can be found across educational institutions, governments and corporations worldwide.

Cresswell C, Speelman CP (2020) https://doi.org/10.1371/journal.pone.0236153

Once the plugin is installed, use the block editor’s shortcode block to enter an equation and supporting text between pmath tags. Also, the shortcode tags work with the classic editor.

Your first symbolic equation using WPMathPub

Enter a shortcode block like this…

Shortcode

[pmath size=16](alpha+beta)^2=alpha^2+2{alpha}{beta}+beta^2[/pmath]

Where:
[pmath size=12]~alpha[/pmath] is defined as a
[pmath size=12]~beta[/pmath] is defined as b

The result looks like this …

Result

(alpha+beta)^2=alpha^2+2{alpha}{beta}+beta^2

Where:
~alpha is defined as a
~beta is defined as b

What’s New In WordPress Math Publisher

Support for gradient field operators (div, grad, curl vector math)

Several physics professors have asked me to implement a gradient feature. Now it is available – yeah.

The new del pmath symbol (called the nabla or del operator), you can express the following partial derivatives:

  • Gradient on scalars: del f
  • Divergence on vectors: del • vec{F}
  • Curl on vectors: del x vec{F}
  • Include the vec pmath symbol with del to emphasize the operator’s nature as a vector (see example below)

Enter a shortcode block like this…

Shortcode

[pmath size=16]vec{del}f(x, ~y) ~ = ~ {partial{f}}/{partial{x}}hat{i} ~ + ~ {partial{f}}/{partial{y}} hat{j}[/pmath]

[pmath size=16]{del}f(x, ~y) ~ = ~ {partial{f}}/{partial{x}}i ~ + ~ {partial{f}}/{partial{y}} j[/pmath]

The result looks like this …

Result

vec{del}f(x, ~y) ~ = ~ {partial{f}}/{partial{x}}hat{i} ~ + ~ {partial{f}}/{partial{y}} hat{j}

{del}f(x, ~y) ~ = ~ {partial{f}}/{partial{x}}i ~ + ~ {partial{f}}/{partial{y}} j

Fix bug using “Greater Than” Symbol (>) in Gutenberg block editor

I found many “less than” perfect solutions to using the “greater than” symbol in shortcode blocks within the WordPress Gutenberg editor. I have chosen to fix this issue by using a new set of commands to replace >, <, >=, <=, and <>. Now users can enter these symbols using gt, lt, ge, le, and ne without any HTML conflict or potential bug in the Gutenberg block editor.

View the shortcode

New handling of logic test symbols

x=y

x lt gt y
x ne y
x != y

x gt y

x ge y

x lt y

x le y

WordPress Math Publisher Plugin Download and Installation

WPMathPub Plugin Advanced View with Download Statistics
WordPress Math
Publisher Download Page

Use the “Add New” command in your WordPress dashboard’s plugin menu:

  • Find/download/install the plugin.
  • Activate the plugin.
  • Check the plugin status to ensure your hosting environment supports image creation using the Tools > wpmathpub entry in your dashboard.

You should see something like this:

WPMathPub Plugin Status – as seen in your WordPress.org dashboard tools menu

How To Create Math Equations

Apart from the pmath shortcode tag, any HTML editor or the blocks editor can be used. The blocks editor includes a “shortcode [/]” block that lets you enter shortcode entries into a post.
A size option controls the size of the final displayed equations, ranging from 8 to 24.
The math commands you create between the pmath shortcode tags are translated into PNG graphic images.

Math equations must be separated by a space ~ or surrounded by curly braces { }.

View the Full List of Math Commands

Open help file listing all math syntax commands
Small snippet showing available commands

Info Box

https://www.biophysicslab.com/wp-content/plugins/wpmathpub/phpmathpublisher/doc/help.html

Examples

Each of the examples below includes

  • An overview of the pmath symbols available with this shortcode,
  • The final output in LaTeX-styled output,
  • A link to the raw shortcode text. You can use these shortcode text examples as starter templates for your own blog posts.

Example 1 – Show three polynomials grouped as a matrix and delimited with only a left-hand brace.

Enter a shortcode block like this…

Shortcode

[pmath size=24/]delim{lbrace}{matrix{3}{1}{{3x-5y+z=0} {sqrt{2}x-7y+8z=0} {x-8y+9z=0}}}{ }[/pmath]

The result looks like this …

Result:

delim{lbrace}{matrix{3}{1}{{3x-5y+z=0} {sqrt{2}x-7y+8z=0} {x-8y+9z=0}}}{ }

Note: the use of delim to ensure the left brace covers the full height of the matrix. In this case, there is no corresponding right brace, so the equation ends with an empty delimiter coded as { }.

Example 2 – Demonstrate summation, integral, subscripts, and fractions bounded by absolute value delimiters.

Enter a shortcode block like this…

Shortcode

[pmath]delim{|}{{1/N} sum{n=1}{N}{gamma(u_n)} – 1/{2 pi} int{0}{2 pi}{gamma(t) dt}}{|} <= epsilon/3[/pmath]

The result looks like this …

Result

delim{|}{{1/N} sum{n=1}{N}{gamma(u_n)} - 1/{2 pi} int{0}{2 pi}{gamma(t) dt}}{|} <= epsilon/3

Example 3 – Demonstrate summation with sine and cosine trig functions.

Enter a shortcode block like this…

Shortcode

[pmath size=8]S(f)(t)=a_{0}+sum{n=1}{+infty}{a_{n} cos(n omega t)+b_{n} sin(n omega t)} [/pmath]

The result looks like this …

Result:

S(f)(t)=a_{0}+sum{n=1}{+infty}{a_{n} cos(n omega t)+b_{n} sin(n omega t)}

Example 4 – Demonstrate use of pi, infinity, integral, exponent, subscript, fraction, absolute value, matrix, delimiter, size control, and integration of text with math code.

Enter a shortcode block like this…

Shortcode

A formula : [pmath]delim{|}{{1/N} sum{n=1}{N}{gamma(u_n)} – 1/{2 pi} int{0}{2 pi}{gamma(t) dt}}{|} <= varepsilon/3[/pmath]

About pi :

  • [pmath]pi=sum{n=0}{+infty}{{(n!)^2 2^{n+1}}/{(2n+1)!}}[/pmath]
  • [pmath]pi=22/7-int{0}{1}{{x^4 (1-x)^4}/{1+x^2}dx}[/pmath]
  • [pmath]pi=3/4 sqrt{3}+24 int{0}{1/4}{sqrt{x-x^2}dx}[/pmath]

[pmath]delim{lbrace}{matrix{3}{1}{{3x-5y+z=0} {sqrt{2}x-7y+8z=0} {x-8y+9z=0}}}{~}[/pmath]  [pmath]delim{|}{matrix{3}{3}{a_{1 1} cdots a_{1 n} vdots ddots vdots a_{n 1} cdots a_{n n}}}{|}[/pmath]

The result looks like this …

Result:

A formula : delim{|}{{1/N} sum{n=1}{N}{gamma(u_n)} - 1/{2 pi} int{0}{2 pi}{gamma(t) dt}}{|} <= varepsilon/3

About pi :

  • pi=sum{n=0}{+infty}{{(n!)^2 2^{n+1}}/{(2n+1)!}}
  • pi=22/7-int{0}{1}{{x^4 (1-x)^4}/{1+x^2}dx}
  • pi=3/4 sqrt{3}+24 int{0}{1/4}{sqrt{x-x^2}dx}

delim{lbrace}{matrix{3}{1}{{3x-5y+z=0} {sqrt{2}x-7y+8z=0} {x-8y+9z=0}}}{~}  delim{|}{matrix{3}{3}{a_{1 1} cdots a_{1 n} vdots ddots vdots a_{n 1} cdots a_{n n}}}{|}

Example 5 – Demonstrate solution to a word problem using Taylor series with an integral remainder, and Fourier series.

Suppose we wish to create a precise definition for a series that reads something like this:

The terms of U get arbitrarily close and stay arbitrarily close to l, there exists a natural number p such that if n >= p then |U(n) - l| <= epsilon.

Enter a shortcode block like this…

Shortcode

From now on :

Definition : [pmath size=18](u_{n})_{n in bbN}[/pmath] converges to [pmath size=18]l ~ doubleleftright ~ forall epsilon{gt}0, ~ exists p in bbN [/pmath] such that [pmath size=18] forall n{ge}p delim{|}{u_{n}-l}{|}{le}epsilon[/pmath]

Remark : in the case of a vector sequence, just replace [pmath size=18]delim{|}{u_{n}-l}{|}[/pmath] by [pmath size=18]delim{vert}{u_{n}-l}{vert}[/pmath]

Taylor series with integral remainder :

If [pmath size=18]f[/pmath] is a class, [pmath size=18]~ C^{n+1}[/pmath] is a class over the interval : [pmath size=18] f(x)=f(0)+xf{prime}(0)+{x^{2}}/{2!}f{prime prime}(0)+…+{x^{n}}/{n!}f^{n}(0)+int{0}{x}{{(x-t)^{n}}/{n!}f^{(n+1)}(t)dt}[/pmath]

Fourier series :

Definition : Then we call the Fourier series of [pmath size=18]f[/pmath] : [pmath size=18]S(f)(t)=a_{0}+sum{n=1}{+infty}{a_{n} cos(n omega t)+b_{n} sin(n omega t)}[/pmath] with [pmath size=18]omega={2pi}/{T}[/pmath]

The result looks like this …

Result

From now on :

Definition : (u_{n})_{n in bbN} converges to l ~ doubleleftright ~ forall epsilon{gt}0, ~ exists p in bbN such that forall n{ge}p delim{|}{u_{n}-l}{|}{le}epsilon

Remark : in the case of a vector sequence, just replace delim{|}{u_{n}-l}{|} by delim{vert}{u_{n}-l}{vert}

Taylor series with integral remainder :

If f is a class, ~ C^{n+1} is a class over the interval : f(x)=f(0)+xf{prime}(0)+{x^{2}}/{2!}f{prime prime}(0)+...+{x^{n}}/{n!}f^{n}(0)+int{0}{x}{{(x-t)^{n}}/{n!}f^{(n+1)}(t)dt}

Fourier series :

Definition : Then we call the Fourier series of f : S(f)(t)=a_{0}+sum{n=1}{+infty}{a_{n} cos(n omega t)+b_{n} sin(n omega t)} with omega={2pi}/{T}

More Details on PNG Image Files

WPMathPub uses an image cache algorithm to create new equations as PNG files once (when the page is first viewed) and then displays them on every page or occurrence your WordPress site uses it.

  • Item 1: The vertical-align value controls how the equation is placed in your web content. When the equation is taller, it will be best centered by dropping the PNG image further below the text line, for example.
  • Item 2: The PNG file includes a hash code in its name. The hash is generated based on the equation text and size defined between the pmath shortcodes.
  • As a page is loaded into the viewer and a pmath shortcode text string is encountered, the plugin first checks whether the equation exists in the img subdirectory by calculating its hash and vertical-alignment value. If it does exist, it is loaded into your viewer’s page. Otherwise, a new PNG image is stored, loaded, and remains available for new page views. Overall, the page load time for PNG symbolic equations is fairly quick.
  • All the PNG image files can be removed in bulk by deactivating and reactivating the plugin. The same is true for installing a new version of the plugin. This process removes old, stale images.

WPMathPub Package

Pascal Brachet’s PHP web math table manager suite is bundled with my WPMathPub plugin. The included TrueType fonts for math symbol typography have stood the test of time since their creation in the 1990s; while I have maintained a fork of Pascal’s PHPMathPublisher for modern web servers running current PHP and WordPress versions.

Fonts used:

  • FreeSerif.ttf – the TrueType font file for the FreeSerif typeface, providing extensive character support for many languages, including Greek, Cyrillic, and IPA, used by LaTeX and LibreOffice.
  • cmex10.ttf – a TrueType font file for the Computer Modern Math Extension, which contains large symbols used specifically for mathematical typesetting in systems like TeX and LaTeX.
  • cmmi10.ttf – a TrueType font file for Computer Modern Math Italic typeface used by the technical typesetting system TeX and its derivative, LaTeX.
  • cmr10.ttf – a TrueType font file for the Computer Modern Roman typeface used in the TeX and LaTeX typesetting systems.
  • msam10.ttf – a TrueType font file containing extra mathematical symbols designed for use with the TeX typesetting system and related technologies like jsMath.

Code Overview

The heart of the code consists of a “wild” and Krellian IQ enhancing regex that converts LaTeX-styled text between the shortcode pmath tags into a function call for use with the included PhpMathPublisher.php code base.

A short segment from my wpmathpub.php PHP code shows how the math text between shortcode tags is filtered for use by PhpMathPublisher library…

// Create a WordPress math text filter suitable for PhpMathPublisher.php
function to_phpmath($content)
{
	// Add an optional font size attribute size=xx
	// Use preg_replace_callback instead of preg_replace /e in support of php 7
        $content = preg_replace_callback('#\[pmath(\s+size=|\s?)(\d*)(\])(.*?)\[/pmath\]#si', 'wpmathfilter', $content);
	return $content;
}

A PNG image is returned that replaces the original math-styled text during display. Because of the regex and the use of an image storage gallery for previously generated PNGs, the display of math equations is very fast.

A short code snippet from the PhpMathPublisher.php library shows how PNG images are inserted into WordPress pages…

function mathimage($text,$size,$pathtoimg)
{
/*
Creates the formula image (if the image is not in the cache) and returns the <img src=...></img> html code.
*/
global $dirimg;
$nameimg = md5(trim($text).$size).'.png';
$v=detectimg($nameimg);
if ($v==0)
	{
	//the image doesn't exist in the cache directory. we create it.
	$formula=new expression_math(tableau_expression(trim($text)));
	$formula->dessine($size);
	$v=1000-imagesy($formula->image)+$formula->base_verticale+3;
	//1000+baseline ($v) is recorded in the name of the image
	ImagePNG($formula->image,$dirimg."/math_".$v."_".$nameimg);
	}
$valign=$v-1000;
return '<img src="'.$pathtoimg."math_".$v."_".$nameimg.'" style="vertical-align:'.$valign.'px;'.' display: inline-block ;" alt="'.$text.'" title="'.$text.'"/>';
}

References

Get the plugin: WPMathPub

Complete list of symbols supported by this shortcode: Docs

WPMathPub WordPress plugin help file (this page): WPMathPub Help

Buy me a cup of coffee? donate

Credits

WPMathPub WordPress Math Publisher plugin – BiophysicsLab.com – Los Gatos – Copyright 2008-25

PhpMathPublisher – Pascal Brachet – France – Copyright 2005

Latex fonts – Copyright (C) 1997 American Mathematical Society

FreeSerif.ttf font – Copyleft 2002-10 Free Software Foundation

1 Reply to “WPMathPub WordPress Math Publisher Plugin”

  1. This is a math equation in a comment
    y=mx^2 + b

    Here is the shortcode that created this equation (with spaces added to the pmath shortcode so the code will not be interpreted as math:
    [ pmath size=16]y=mx^2 + b[ /pmath]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *