The “Bulletproof” Method: How to Write Mathematical Articles in WordPress (HTML + LaTeX)

If you have ever tried to publish a blog post containing complex mathematics, you know the struggle. Most formatting issues arise from a conflict between two forces: the WordPress Visual Editor (which tries to “fix” your code) and your LaTeX plugin (MathJax or KaTeX, which tries to render it), so let’s Write math in WordPress.

When these two clash, the results are frustrating: lists disappear, variables vanish, and the mobile layout breaks.

After extensive testing, we have developed a “bulletproof” method. By using a hybrid of raw HTML and specific LaTeX rules, you can ensure your content looks professional on any device, with any theme.

1. Why This Code Works (The Analysis)

Let’s break down the key techniques used in a successful mathematical article.

A. Ditch Markdown for Headers

While Markdown (##) is convenient, the WordPress editor often fails to parse it correctly when it is mixed inside complex HTML blocks.

• The Fix: Use explicit HTML tags.
• Code: <h2>Title</h2> for sections and <h3>Title</h3> for subsections.
• Result: Headers always maintain the correct hierarchy, size, and spacing, regardless of the surrounding content.

B. The Hybrid Approach to Variables (HTML vs. LaTeX)

This is the most critical insight for page speed and stability.

• The Mistake: Using LaTeX ($x$) for every single letter in a sentence. This forces the plugin to load a script just to render one character, which causes layout shifts.
• The Fix: Use the HTML italic tag <em>x</em>.
• Example: “Find integers <em>x</em> and <em>y</em>…”
• Result: The text loads instantly, the line height remains stable, and it still visually resembles a mathematical variable.

C. “Display Mode” for Equations

Complex equations should never be jammed into a paragraph.

• The Fix: Wrap double-dollar equations ($$) inside a centered paragraph.
• Code: <p style="text-align: center;">$$ax + by = \gcd(a, b)$$</p>
• Result: The formula gets breathing room, centers perfectly, and ensures clarity on mobile screens.

D. Avoid Standard Lists (<ul>, <li>)

Standard bullet points are notorious for breaking when they contain block-level math.

• The Fix: Instead of a list, use paragraphs (<p>) with line breaks (<br>) or bold labels.
• Code:HTML<p><strong>Step 1:</strong><br> $$ 52 = 2(23) + 6 $$<br> (Rewrite for remainder...)</p>
• Result: A clean “Step-by-Step” structure that never collapses or indents incorrectly.

---

2. The Writer’s Cheatsheet (Template), Write math in WordPress

To ensure your future articles look professional, use this template. Crucial: Always write your article in the “Custom HTML” block or the “Text/Code” editor mode, not the Visual editor.

1. Header Structure

HTML

<h2>1. Section Title</h2>
<p>Introductory text for this section...</p>

<h3>Subsection Title</h3>

2. Inline Variables

When mentioning simple variables like $a$, $b$, or $x$, do not turn on LaTeX.

HTML

<p>Let's find the variable <em>x</em> for the value <em>m</em>.</p>

<p>Let's find the variable $x$ for the value $m$.</p>

3. Display Formulas

Always wrap heavy math in a centered paragraph.

HTML

<p style="text-align: center;">$$ x = \frac{-b \pm \sqrt{D}}{2a} $$</p>

4. Step-by-Step Calculations (The List Replacement)

Use bold text for the step label and <br> for new lines.

HTML

<p><strong>Step 1:</strong><br>
$$ a = b + c $$</p>

<p><strong>Step 2:</strong><br>
$$ x = y + z $$</p>

5. Interactive Elements (Hidden Solutions), Write math in WordPress

For practice problems, use the <details> tag. It is native HTML supported by all browsers—no plugins required.

HTML

<details>
<summary>Click to reveal the answer</summary>
<p>Answer: $$ x = 5 $$</p>
</details>

6. Code Blocks (Python/JS)

HTML

<pre><code>def my_function():
    return "Hello"</code></pre>

---

3. Why You Should Stick to This Approach

1. Speed: Your page loads significantly faster because the browser has fewer heavy LaTeX scripts to render (since you are using HTML for simple variables).
2. Mobile Adaptation: Standalone block formulas ($$) adapt much better to small phone screens than formulas embedded inside text lines.
3. Independence: This code relies on standard HTML tags. If you change your WordPress theme or switch your LaTeX plugin in the future, your content will still look great.

Recommendation: Save the Cheatsheet above as a local file on your computer. When starting a new article, simply copy-paste it and fill in your new content.