How to Create a Titleless Notes Page

March 14, 2026

This guide walks through creating a social media style Notes feed in Pure Blog — short, titleless posts displayed as cards on a dedicated /notes page.

You will create three things:

1. A notes post layout so individual notes render without a title.
2. A /content/includes/notes.php template that renders all notes as a social-style feed.
3. A custom route and nav item to wire up /notes.

Pure Blog's admin always requires a title field — it is used for validation, slug generation, and the HTML <title> tag in the browser. Your notes will have a title behind the scenes; it just won't be displayed on the page. Use the title as an internal label or SEO identifier (e.g. "Note – 2026-03-14").

Step 1: Create the Notes Layout

A custom layout is a PHP file in content/layouts/ that allows you to create post in a format that's different from Pure Blog's default offering. When created, you will be prompted for which post type you want to create when you tap the NEW POST button in admin. An optional .json file alongside it gives it a friendly name in the editor.

content/layouts/notes.php

This file controls how an individual note is rendered when someone visits its permalink. It omits the <h1> title entirely and just renders the post content.

<article class="note-single">
    <?= render_markdown($post['content'], ['post_title' => '']) ?>

    <?php if ($post['timestamp']): ?>
        <p class="note-date">
            <time><?= e(date('d M Y H:i', $post['timestamp'])) ?></time>
        </p>
    <?php endif; ?>
</article>

content/layouts/notes.json

This gives the layout a readable label in the post editor dropdown, so when you hit the NEW POST button it says "Note".

{
    "label": "Note"
}

Step 2: Create the Notes page

Pure Blog custom routes must point to PHP files inside content/includes/, so you must create the Notes template there - content/includes/notes.php

This template fetches all published posts that use the notes layout and renders them as cards.

<?php

$pageTitle   = 'Notes';
$metaDescription = 'Short notes and thoughts.';

$notes = array_values(array_filter(
    get_all_posts(false),
    fn(array $post): bool => ($post['layout'] ?? '') === 'notes'
));
?>
<?php require PUREBLOG_BASE_PATH . '/includes/header.php'; ?>
<?php render_masthead_layout($config, []); ?>

<main>
    <h1>Notes</h1>

    <?php if (empty($notes)): ?>
        <p>No notes yet.</p>
    <?php else: ?>
        <div class="notes-feed">
            <?php foreach ($notes as $note): ?>
                <article class="note-card">
                    <div class="note-card-body">
                        <?= render_markdown($note['content'], ['post_title' => '']) ?>
                    </div>
                    <footer class="note-card-footer">
                         <p class="note-timestamp">
                            <a href="<?= e(base_path() . '/' . $note['slug']) ?>">
                            <time><?= e(date('d M Y H:i', $note['timestamp'])) ?></time>
                            </a>
                        </p>
                    </footer>
                </article>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</main>

<?php render_footer_layout($config, []); ?>
</body>
</html>

The timestamp doubles as a permalink to the individual note, so readers can link to a specific note.

Optional: Add some CSS

Drop this into content/css/custom.css to get a basic look for your notes:

.notes-feed {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 640px;
}

.note-card {
    background: var(--accent-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem 1.25rem 0.75rem;
}

.note-card-body p:first-child {
    margin-top: 0;
}

.note-card-body p:last-child {
    margin-bottom: 0.5rem;
}

.note-card-footer {
    border-top: 1px solid var(--border-light);
    padding-top: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85em;
    opacity: 0.7;
}

p.note-timestamp {
  margin: 0.5rem 0 -1.5rem 0;
}

p.note-timestamp > a {
    color: var(--text-color);
    text-decoration: none;
}

Step 3: Add a custom route and nav item

Both settings live in Admin → Settings.

Custom Routes

In the Custom Routes field, add:

/notes | /content/includes/notes.php

The path on the left is the URL; the target on the right is the path to the notes.php page we made earlier.

Custom Nav

If you want the Notes page to display in your site's navigation menu, you will need to add a custom nav item. In the Custom Nav field within Admin → Settings, add:

Notes | /notes

The format is Label | URL. This appends a Notes link to your site's navigation alongside any pages already shown there.

Save settings and you're done.

Writing a Note

1. Go to Admin → NEW POST → NOTE.
2. Write your note content in the body, just like you do for any other post.
3. Fill in the Title field with something descriptive for your own reference, e.g. Note – 2026-03-14 or a short summary. This title appears in the browser tab and is used to generate the post slug, but it will not be displayed on the page or in the notes feed.
4. Publish.

Once that's all created (around 5 minutes work in total) your notes page will look something like this:

docs, guide