Updating and Styling a WordPress Recipe Print Template for Improved Usability

A client requested a refreshed and more functional print layout for their recipe pages, similar to other leading recipe blogs. The Freshy development team delivered an enhanced print template that includes better formatting options, consistent styling with the main recipe card, and improved mobile responsiveness.

Issue Background

The existing print template on the client’s WordPress recipe site had not been updated in some time. Users had limited print options and inconsistent styling—particularly with ingredient and direction lists, which did not match the layout of the main recipe card. Additionally, the print icon was missing on smaller viewports, causing usability issues for mobile users.

The client provided an example layout from another recipe site to demonstrate the preferred structure and styling for the print view.

Diagnosis

After reviewing the existing theme’s template files, our team determined that the print.php template within the site’s custom recipe plugin required modification. The print view had stripped-down CSS that excluded bullet and number list styles. There was also a missing CSS rule for the print icon in mobile breakpoints.

By inspecting the plugin’s /recipe-plugin/templates/print.php and corresponding stylesheet, it became clear that the print layout could be restructured using a more consistent class system aligned with the main recipe card’s styles.

Resolution Steps

1. Cloned and modified the print template
   A new branch was created for development:

   git checkout -b feature/update-print-page

   The print.php file was restructured for readability and maintainability, keeping markup consistent with the front-end recipe layout.

2. Restored list styling for ingredients and directions
   Added appropriate classes and CSS rules:

   .recipe-ingredients ul {
     list-style-type: disc;
     margin-left: 1.5rem;
   }
   
   .recipe-directions ol {
     list-style-type: decimal;
     margin-left: 1.5rem;
   }

3. Aligned button and typography styles with recipe card
   Button and link styles were matched to existing global styles for consistency:

   .print-button {
     background-color: var(--primary-color);
     border: none;
     border-radius: 4px;
     color: #fff;
     padding: 8px 16px;
     font-size: 1rem;
   }

4. Addressed missing mobile print icon
   During testing, the print icon disappeared in mobile view due to a media query hiding SVG icons under a .no-print class. This was corrected with:

   @media (max-width: 768px) {
     .print-icon {
       display: inline-block !important;
     }
   }

5. Version control and deployment
   After testing and client approval, the branch was merged into the main branch:

   git merge feature/update-print-page
   git push origin main

Final Outcome

The new print page now mirrors the recipe card design with properly formatted bulleted ingredients and numbered directions. The layout retains its clean presentation on desktop and mobile, ensuring that readers can print or save recipes easily.

After testing, the client confirmed that the final result “looked perfect” and approved deployment to the live site. The updated template now enhances both usability and brand consistency across all recipe pages.

Need help improving your WordPress site?

Freshy’s development team specializes in WordPress theme and plugin customization—from layout adjustments to fully bespoke print templates. Contact Freshy today to discuss how we can enhance your site’s functionality and user experience.