Petal & Prose: A Custom WordPress Experience

The Petal & Prose project was developed for my WordPress class with the primary objective of mastering the platform, from out-of-the-box functionality to deep customization. The goal was to create a modern, elegant, and intuitive website that serves as a rich resource for beginner and experienced gardeners, complete with detailed plant information and helpful articles.

Visit

the Site

 Website Sample Image

My Role: Sole Designer & WordPress Developer

As an individual project, I drove every aspect of its creation. My responsibilities encompassed the entire scope of the site's development:

  • UI/UX & Web Design: I crafted the website's visual identity and user experience, focusing on a serene aesthetic and intuitive navigation.
  • Theme Customization: I heavily modified the base "Twenty Twenty-Five" WordPress theme using PHP and CSS to achieve a unique look and feel.
  • Content Architecture: I structured all the custom content for the site using the Pods plugin to create a highly organized and filterable plant database.
  • Content Creation: With the assistance of AI tools, I generated all the written content for the site, including detailed plant profiles and gardening articles.

Overcoming Development Challenges

My journey to create a fully custom WordPress site presented two main learning opportunities:

  • Advanced Theme Customization: Achieving a modern and elegant feel required moving beyond standard theme options. With limited familiarity with the WordPress backend, I undertook extensive research to understand its inner workings. I delved into the PHP and CSS files of the "Twenty Twenty-Five" theme, learning how hooks and template files work together to control the site's appearance. This allowed me to create a child theme that precisely matched my design vision.
  • Custom Content Layouts: Using the Pods plugin to create custom post types and fields was only half the battle. The next challenge was to display this structured data in specific, organized layouts that differed from standard posts. This involved a great deal of research and trial-and-error with template files to ensure the custom fields for each plant were presented clearly and consistently.

Technical Deep Dive

  • WordPress: Utilized as the core Content Management System (CMS) to build standard pages (Home, About, Contact, Privacy Policy, Terms of Use) and the blog.
  • PHP & CSS: Hand-coded to customize the theme, directly modifying template files and stylesheets to control the structure and visual presentation beyond the default settings.
  • Plugins:
    • Pods: This was critical for content architecture. I used it to create a "Plants" custom post type, custom taxonomies (Plant Type, Sun Exposure, Water Needs, USDA Hardiness Zone), and an extensive set of custom fields (e.g., Common Names, Native Range, Bloom Time, Tolerances, Buy Now Links).
    • WPForms Lite: Implemented to create a customized "Contact Us" form.
  • Platform: WordPress was installed and developed on an AWS EC2 server. No external APIs were used for this project.

Project Outcomes & Achievements

This project successfully expanded my skills from basic website creation in WordPress to advanced customization and content architecture. The final product is a rich, functional website that met all my learning objectives and received high praise from my professor.

The "client" feedback was overwhelmingly positive: "You absolutely nailed taxonomies with your plants custom content type. The ability to browse and filter by type, zone, etc. is very well done. Site is inviting and your landing page is very clear. I think putting search up front and center is also a great call given how accurate it's performing. The cross sell to 'buy now' links to external sites is also a nice touch that'll go a long way eventually with some affiliate links. Great job!"

Design and User Experience

I was the sole contributor to the UI/UX design. The goal was to create a practical research tool for gardeners that felt sophisticated and serene.

  • Design Principles: I prioritized balance, contrast, pattern, and proportion in the layout.
  • User Experience: The focus was on usefulness, findability, and consistency. To achieve this, I organized the plant taxonomies into logical submenus, making it easy for users to find specific content.
  • Brand Alignment: I selected an earthy color palette—greens, browns, black, and cream—to evoke a natural feel while ensuring high contrast for readability. The content was carefully curated to be relevant to plant enthusiasts, providing the specific data points they would need.

Future Enhancements

I plan to continue building out the website's content library. A key future improvement will be to enhance the blog archive pages by condensing the content previews for each post. This will reduce the amount of vertical space each post occupies, making it easier and faster for users to scroll through and browse the articles.