Recipe websites often need ingredient quantities such as 1/2 or 1/4 to display as typographically correct fractions like ½ and ¼. Manually pasting HTML entities such as ½ can work, but it creates extra editorial steps and depends on content editors remembering the correct markup every time.
In one custom WordPress recipe plugin, the solution was to add an output filter that detects common plain-text fraction values and converts them to their corresponding Unicode fraction characters. Existing fraction markup and Unicode characters were left untouched, so editors could continue using those formats if they preferred.
Issue background
The recipe workflow relied on custom fields for recipe content. Historically, editors would manually enter HTML entities such as ½ when they wanted a quantity to display as a proper fraction.
That workaround functioned correctly, but it was less convenient than entering the natural text form such as 1/2. The goal was to let editors type familiar fraction values while still rendering the polished Unicode form on the frontend.
The initial request focused on ingredient fields, but review showed that fractions were also used in several other recipe fields, including directions, tips or notes, recipe description, and servings.
Diagnosis
The content itself was not broken. WordPress could already render Unicode fractions and HTML fraction entities correctly. The problem was editorial consistency and convenience.
Rather than changing how the fields stored every existing value, the developer created an output filter inside the custom recipe plugin. The filter looks for common plain-text fraction strings and converts only those values when the content is output.
For example:
1/2becomes½.- Existing
½remains½. - Existing HTML entity markup such as
½is left alone.
This preserved backward compatibility with older recipe content while making new entries easier for editors.
Resolution steps
The documented implementation followed these steps:
- Add an output filter to the custom recipe plugin. The conversion logic was implemented in the site’s recipe plugin rather than requiring editors to change how they entered every existing recipe.
- Detect common plain-text fractions. The filter checks for regular text values such as
1/2and replaces them with the corresponding Unicode fraction characters. - Leave existing markup unchanged. Existing Unicode values, HTML entities, and other fraction markup were intentionally preserved rather than being normalized or rewritten.
- Apply the filter to ingredients first. The initial version handled the ingredients field, where fraction quantities are most common.
- Expand the filter to other recipe fields. After review, the same conversion behavior was added to directions, tips/notes, recipe description, and servings.
- Clarify which servings field should be included. The servings field referenced in the task was the top recipe servings value, such as a text value like
4-6 servings. - Test on staging. The conversion was reviewed in both the editor and rendered recipe output to confirm that plain-text fractions displayed correctly.
- Verify all required plugin files are deployed. During staging review, one required recipe-plugin PHP file had not initially been uploaded to the VPS. Once that file was deployed, the functionality worked correctly.
- Launch the tested branch to production. After additional testing, the recipe fraction branch was deployed and the corresponding GitHub pull request was merged.
The key design decision was to convert on output instead of forcing a destructive migration of existing recipe data. That allowed old recipes using ½ or Unicode fractions to keep working while new content could use plain text.
Final outcome
The fraction-conversion filter was tested thoroughly and launched to production. Recipe editors can now enter common plain-text fractions while the frontend displays the corresponding Unicode fraction characters.
The same behavior applies across ingredients, directions, tips/notes, recipe descriptions, and servings, while existing Unicode and HTML entity fraction values remain unchanged.
This approach is especially useful for WordPress recipe sites using Advanced Custom Fields (ACF) or custom recipe plugins. By handling the conversion at output time, editors get a simpler workflow without requiring a database-wide rewrite of existing content.
If you need help improving recipe-field formatting, ACF output behavior, or a custom WordPress recipe plugin, contact Freshy. Our WordPress team can help with custom filters, content transformations, ACF integrations, and plugin development.
