Home > Technology > Computer Science > How to use jqMath in WordPress

How to use jqMath in WordPress

Sometimes, adding maths formulas to a post is a nice to have. The library Mathscribe jqMath, developed by Dave Barton, offers a simple way to insert maths formulas in web pages. So, how can we use jqMath on WordPress?

To start with, jqMath needs jQuery to run, but that is not an issue once WordPress includes this library. So, after downloading the library, what we need to do is to add the CSS file “jqmath-x.y.z.css” and the JavaScript file “jqmath-x.y.z.js” to WordPress, with x.y.z the library version. By the date of this post, the jqMath version is 0.4.3, thus we have the files “jqmath-0.4.3.css” and “jqmath-0.4.3.js”.

Great! But now… how can we do it?

There are some options. You can create a child theme from your actual theme, create a plugin or… use a plugin that does this for you!

For advanced users, creating a child theme or a plugin could be an interesting option. But for the common users, it might became difficult because that means adding code and access the web server, where their website is hosted, by FTP. Therefore, I’m not going to talk about these solutions, but I will talk about these subjects in future posts.

So, the remaining option is to use a plugin! And we have one I developed myself at WebMind. It’s the WM jqMath plugin and we are using it on Out4Mind. You can see an example in the post “Resistors in series and parallel circuits“.

How to use jqMath in WordPressThe plugin is hosted in WordPress, so it’s easy to find it in the plugins section of your WordPress administration page (you need to have administration access to your blog). The plugin will just add the jqMath CSS and JavaScript files to WordPress, but it also offers a “shortcode” to help you to format your formulas, as we will see later in this post.

After you install and activate the plugin WM jqMath, you will be able to start using the jqMath syntax in your posts! For each post you want to insert formulas, you will need to add the shortcode [enable_jqmath]. This will assure that, in other posts you don’t want to use formulas but you want to use the symbol \$, the jqMath library won’t try to render text that it isn’t a maths formula.



Let’s see an example:

We want to insert the quadratic formula of a quadratic equation. If you we want to have it in the same line of your text, you can enter:

\$x={-b±√{b^2-4ac}}/{2a}\$ and you will get: $y={-b±√{b^2-4ac}}/{2a}$

Another example, let’s insert the formula for the derivative function, centred in a new line. We need to enter \$\$f'(x)=\lim↙{h→0}{f(x+h)-f(x)}/h\$\$ and we will have:

$$f'(x)=\lim↙{h→0}{f(x+h)-f(x)}/h$$

Now let’s see if we want to format the text in our formulas. Well, in this case it is necessary to use CSS styles. If your theme allows you to add custom CSS classes, you may add some classes to use them with the syntax of jqMath. Let’s take for instance the following class:

.formula_f {
text-size: 12pt;
color: steelblue;
}

You can now include this class in your formula using the jqMath syntax:

\cl "formula_f"

Please find more informations in the website of the jqMath’s author.

However, the WM jqMath plugin can help you in this process. There is a “shortcode” available where you can enter your styles.

For instance:

[jqmath expr="\$\$y={-b±√{b^2-4ac}}/{2a}\$\$" style="color: navy; font-size: 14pt"]

Will display:

$$y={-b±√{b^2-4ac}}/{2a}$$

And to keep the formula in the same line:

[jqmath expr="\$y={-b±√{b^2-4ac}}/{2a}\$" style="color: steelblue"]

Which will display: $y={-b±√{b^2-4ac}}/{2a}$



References and links:

About Carlos Santos

Frequency of master studies in Electrical and Computer Engineering. Freelancer developer (also works remotely): Websites, Web Applications (JAVA and PHP), J2SE/J2EE, C/C++ and Android. Private instructor and professional trainer in computer science and electrical engineering. Teaches in classrooms and remotely using Skype and Team Viewer. Interests: Music, audio, video, science, astronomy and mythology.

Leave a Reply

Your email address will not be published and it is optional.