Free website tool
Embed a yard material calculator
Add a compact cubic-yard and tons estimator to a landscaping article, supplier resource page, or DIY guide. Configure units, materials, color, and starting values, then copy the generated HTML or install the WordPress plugin.
A small calculator with explicit assumptions
Install the WordPress block and shortcode
The WordPress plugin packages the same tested calculator locally. It provides a dynamic Gutenberg block plus the [yard_material_calculator] shortcode, with controls for units, materials, initial area and depth, accent color, and optional source attribution.
Download the installable ZIP from the public release, or open a temporary Playground site that renders both integrations before installing anything on a real site.
How to add the calculator to a website
Use the configurator above to choose a useful starting material, project area, and depth. Copy the generated code and paste it into the HTML where the calculator should appear. The module script registers a custom HTML element; the second tag places that element in the page. Load the script once even when a page contains more than one calculator. React and Astro examples are included in the package repository.
The component uses Shadow DOM, so typography, form controls, and result styling stay readable even when the host website has aggressive global CSS. Its width follows the parent container up to 420 pixels. That makes it suitable for a blog sidebar, a narrow resource column, or an inline section in a longer guide. At very narrow widths the area and depth fields stack instead of shrinking below a usable size.
Widget attributes
| Attribute | Purpose | Default |
|---|---|---|
material | Starting material shown in the selector | Pea gravel |
materials | Comma-separated material allowlist | All eight |
area | Starting project area | 500 or 50 |
depth | Starting material depth | 3 or 7.5 |
unit | Imperial or metric measurements | imperial |
accent | Six-digit hexadecimal result accent | #943f24 |
attribution | Visible or hidden source link | visible |
utm-source | Bounded source-link campaign identifier | embedded_widget |
Calculation method and accuracy
In imperial mode, the widget calculates cubic yards as square feet multiplied by depth in inches, divided by 324. Metric mode calculates cubic meters from square meters and centimeters. It then applies the selected material's typical density range and displays short tons or metric tonnes. Showing a range is intentional: bulk landscape materials do not have one universal density.
Use the result as an early planning estimate, not a final quote. The widget does not add waste, model irregular shapes, compare bags with bulk delivery, or account for compaction. For a full project worksheet, direct readers to the matching calculator or the cubic yard coverage chart, where the assumptions, downloadable data, and material-specific tools are documented.
Calculator widget FAQ
Is the yard material calculator widget free to embed?
Yes. The widget software is available under the MIT license. The underlying coverage dataset and documentation are CC BY 4.0, so republishing the data or documentation requires appropriate credit.
Which materials does the widget support?
The current version supports pea gravel, crushed stone, river rock, topsoil, compost, mulch, sand, and fill dirt. Each material includes a typical tons-per-cubic-yard planning range.
Can visitors change the values after the widget loads?
Yes. The embed attributes set the starting material, square footage, and depth. Visitors can then change all three values inside the calculator without leaving the host page.
Does the widget use cookies or analytics?
No. Version 1.3.0 performs calculations in the visitor's browser and does not set cookies, load ads, store values, or send project data to Yard Material Tools. UTM parameters are transmitted only when a visitor opens the optional source link.
Can I install the calculator as a WordPress plugin?
Yes. The WordPress release includes a dynamic Gutenberg block and the yard_material_calculator shortcode. It bundles the calculator locally instead of downloading executable code from a CDN.
Are the calculated tons suitable for a final order?
No. They are planning estimates based on typical density ranges. Moisture, compaction, gradation, supplier measurements, and local material names vary, so confirm density and order quantities with the supplier.