Why proper configuration matters in Wordpress - See It in Action

Why Proper Configuration Matters in WordPress

📖 Scenario: You are building a simple WordPress site for a local bakery. The site needs to show a list of bakery items with their prices. Proper configuration of WordPress settings and theme files is important to make sure the site works well and looks good.

🎯 Goal: Build a basic WordPress theme template that properly configures and displays a list of bakery items with their prices. This project will show why proper configuration matters for correct display and functionality.

📋 What You'll Learn

Create an array of bakery items with exact names and prices

Add a configuration variable to set a price threshold

Use a loop to display only items priced below the threshold

Complete the WordPress template with proper HTML structure

💡 Why This Matters

🌍 Real World

Many WordPress sites need proper configuration of data and display logic to show content correctly and accessibly.

💼 Career

Understanding how to configure and code WordPress templates is essential for web developers working with WordPress themes and plugins.

1

Create the bakery items array

Create a PHP array called $bakery_items with these exact entries: 'Croissant' => 3.5, 'Baguette' => 2.0, 'Eclair' => 4.0, 'Muffin' => 2.5.

Wordpress

<?php
// WordPress theme template start

// Your code here

Need a hint?

Use a PHP associative array with exact keys and values as shown.

2

Add a price threshold configuration

Add a PHP variable called $price_threshold and set it to 3.0 to configure the maximum price to display.

Wordpress

 3.5,
    'Baguette' => 2.0,
    'Eclair' => 4.0,
    'Muffin' => 2.5
];

// Your code here

Need a hint?

Just add a simple variable with the exact name and value.

3

Display items below the price threshold

Use a foreach loop with variables $item and $price to iterate over $bakery_items. Inside the loop, use an if statement to check if $price is less than $price_threshold. If yes, echo an HTML list item <li> showing the $item and $price.

Wordpress

 3.5,
    'Baguette' => 2.0,
    'Eclair' => 4.0,
    'Muffin' => 2.5
];

$price_threshold = 3.0;

// Your code here

Need a hint?

Use a foreach loop and an if condition to filter and display items.

4

Complete the WordPress template structure

Add the final HTML structure by wrapping the PHP code inside a <section> with aria-label="Bakery Items". Also, add a <h2> heading with the text Our Bakery Items above the list.

Wordpress

 3.5,
    'Baguette' => 2.0,
    'Eclair' => 4.0,
    'Muffin' => 2.5
];

$price_threshold = 3.0;

// Your code here

Need a hint?

Wrap the PHP code output inside semantic HTML with accessibility in mind.