DEV Community

Cover image for I Built 7 Interactive Calculators for a Niche Site Using Only PHP Shortcodes — No Plugins
Vivian
Vivian

Posted on

I Built 7 Interactive Calculators for a Niche Site Using Only PHP Shortcodes — No Plugins

#wordpress #webdev #php #seo

I run a small niche site called PetHuts that provides free tools for people building bioactive terrariums and vivariums. It has 7 interactive calculators, all built as WordPress shortcodes — no page builders, no calculator plugins, no React, no build step.

Here's how and why I did it this way.

Why Shortcodes Instead of a Plugin?

Most WordPress calculator plugins are bloated. They load their own CSS frameworks, jQuery dependencies, and admin interfaces even on pages that don't use them. For a site where speed matters for SEO (mine went from 8.9s to 3.7s LCP after optimization), every unnecessary script hurts.

A PHP shortcode is just a function that returns HTML. WordPress calls it when it encounters [your_shortcode] in a page. The CSS and JS are inline, so nothing loads on pages that don't use the calculator. Zero overhead.

The Structure

Each calculator follows the same pattern:

add_shortcode('pethuts_calc', 'pethuts_calc_render');

function pethuts_calc_render($atts) {
    $atts = shortcode_atts(array(
        'type' => 'substrate'
    ), $atts);

    ob_start();
    ?>
    <style>/* scoped CSS here */</style>
    <div class="calculator-wrapper">
        <!-- inputs -->
        <button id="calculate-btn">Calculate</button>
        <!-- results container -->
    </div>
    <script>
    // calculation logic
    document.getElementById('calculate-btn')
        .addEventListener('click', function() {
            // math happens here
            // inject results into DOM
        });
    </script>
    <?php
    return ob_get_clean();
}
Enter fullscreen mode Exit fullscreen mode

One shortcode, one function, everything self-contained. The $atts parameter lets me use the same shortcode for multiple calculator types: [pethuts_calc type="substrate"], [pethuts_calc type="cleanup"], etc.

What I Built

The 7 calculators on PetHuts:

  1. ABG Mix Calculator — enter tank dimensions, get exact amounts of each substrate ingredient based on the 2:1:1:1:2 ratio
  2. LECA Drainage Layer Calculator — how much clay balls for the drainage layer beneath the substrate
  3. Tank Size Calculator — recommended enclosure size by species
  4. Heat Bulb Wattage Calculator — room temp + target temp + distance = recommended wattage
  5. Cleanup Crew Calculator — how many isopods and springtails based on tank size and humidity
  6. Safe Plant Finder — filter non-toxic plants by enclosure type, light, and size
  7. Jumping Spider Care Calculator — personalized care plan by species and age

Each one took 1-2 hours to build. The most complex part is usually the data, not the code — researching the correct formulas, species requirements, and plant safety lists takes longer than writing the JavaScript.

The Programmatic SEO Layer

The interesting part: I used the same shortcode approach to generate 20+ landing pages from a data array. One shortcode, one PHP array of tank specifications, and each page auto-generates a full guide with pre-calculated substrate amounts:

$tanks = array(
    '18x18x24' => array(
        'name' => '18×18×24',
        'common' => 'Standard Tall Terrarium',
        'l' => 18, 'w' => 18, 'h' => 24,
        'depth' => 3,
        'species' => 'crested geckos, dart frogs...',
        // ...more data
    ),
    // ...more tanks
);
Enter fullscreen mode Exit fullscreen mode

Each entry becomes a page targeting a specific long-tail keyword like "how much substrate for 40 gallon tank." The math is calculated server-side from the dimensions in the array. One code change updates every page.

Results

The site went from 5 pages to 35+ pages in a few weeks. Google Search Console shows impressions climbing week over week, with the programmatic pages picking up long-tail queries that no competitor targets with dedicated pages.

No React. No build pipeline. No npm. Just PHP, vanilla JS, and a data array.

Would I Do It Differently?

For a site this small, shortcodes are perfect. If PetHuts grows to 20+ calculators with shared state between them, I'd probably move to a lightweight frontend framework. But for now, the simplicity is the feature — any WordPress user can paste a shortcode and get a working calculator. No technical setup required.

If you're building niche tools for a content site, don't overthink the stack. The value is in the tool itself and the content around it, not the framework it's built with.

Check out the live calculators at pethuts.com/calculators. All free, no signup.

Top comments (0)