PHP

0 %

Course content

74: Templating Patterns for Content Sites

for patterns 74 content templating sites

Click on the "Edit" button in the top corner of the screen to edit your slide content.

About
Comments (0)

Imagine you're running a high-end hotel. Every guest gets a welcome folder in their room. That folder always has the same physical structure: a leather cover, a slot for the room key, a map of the city, and a list of hotel amenities. However, the specifics change. One guest sees "Welcome, Mr. Henderson" and a note about a vegan breakfast; another sees "Welcome, Ms. Chen" and a note about the spa.

You wouldn't build a brand new leather folder from scratch for every single guest. That would be insane. Instead, you have a "Master Template" (the folder) and "Dynamic Inserts" (the personalized letters).

In PHP, templating for content sites works exactly like that. We want to define the "leather folder" once and simply swap out the "inserts" based on which article or page the user is visiting.

The Blueprint vs. The Bricks

When I first started building content sites, I used to just copy-paste the header and footer into every single file. It worked until the client asked me to change a link in the navigation menu. I had to open 40 different files to change one word. I almost quit that day.

The professional way is to separate your Layout (the structural shell) from your Template (the specific page content). Here is how that looks in a real-world tech news site scenario. Instead of having about.php and contact.php as standalone files, we use a layout wrapper.

// layout.php
<?php
// We assume $pageTitle and $content are defined before this is called
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title><?php echo $pageTitle; ?> | TechPulse News</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <nav><a href="/">Home <a href="/reviews">Reviews</nav>
    </header>

    <main>
        <?php echo $content; ?>
    </main>

    <footer>
        <p>&copy;  TechPulse</p>
    </footer>
</body>
</html>

Capturing Content with Output Buffering

You might be wondering: "How do I get the HTML from my page file into that $content variable without writing a giant, ugly string?" This is where ob_start() comes in. It tells PHP: "Don't send the following output to the browser yet; just hold onto it in a buffer."

I use this pattern constantly because it keeps the logic clean. Look at how the article.php file now focuses only on the article itself, not the <html> tags.

// article.php
<?php
// 1. Fetch data from your database (simplified for this example)
$article = ['title' => 'The Rise of Rust', 'body' => '<p>Rust is gaining popularity...</p>'];

$pageTitle = $article['title'];

// 2. Start the buffer
ob_start(); 
?>

<article>
    <h1><?php echo $article['title']; ?></h1>
    <div class="content">
        <?php echo $article['body']; ?>
    </div>
</article>

<?php
// 3. Capture the buffer into a variable and clear it
$content = ob_get_clean();

// 4. Inject it into the master layout
include 'layout.php';
?>

Handling Reusable Chunks (Partials)

Sometimes a piece of content isn't a full page, but it's used in multiple places—like a "Trending Now" sidebar or a "Newsletter Signup" box. We call these Partials.

I recommend keeping these in a dedicated /partials directory. If your sidebar needs specific data, you can define those variables right before including the partial. It's a simple but effective way to keep your layout.php from becoming a 1,000-line monster.

// Inside layout.php, within the <main> tag:
<div class="container">
    <div class="main-column">
        <?php echo $content; ?>
    </div>
    <aside>
        <?php 
            $sidebarTitle = "Hot Topics"; 
            include 'partials/sidebar.php'; 
        ?>
    </aside>
</div>

One quick tip: always use include or require for these templates, but be consistent. I personally use require for the layout because if the layout file is missing, the page is fundamentally broken and should throw a fatal error immediately rather than trying to render a half-baked page.

📋 Practical Task

Build a Dynamic Movie Review Template

Your goal is to create a templating system for a movie review site. You need to implement a master layout and a specific page for a movie review, ensuring that the review content is injected into the layout without duplicating the HTML boilerplate.

Requirements:

Create a layout.php file that contains the full HTML structure (head, body, nav, and footer). It must use a variable called $pageContent to render the main body.
Create a movie-review.php file. In this file:
- Define an associative array called $movie containing a 'title', 'rating', and 'review_text'.
- Use ob_start() and ob_get_clean() to capture the movie's HTML (including the title and rating) into the $pageContent variable.
- Include the layout.php file at the end to render the final page.
Create a partial called rating-star.php that simply echoes a star icon (★) or a specific piece of HTML. Include this partial inside your movie-review.php buffer to display the rating.

PHP

Completed