Add a blog to the Modern Business template

Modern Business by Start Bootstrap comes with a Blog menu, but its two blog pages are only a design: "Article heading goes here", Lorem ipsum and grey boxes. To publish a post with them, you would copy a page, write into the code and upload it by hand, every time.

This guide swaps them for a real blog: write in an editor, press Publish, and the post appears inside the template's own menu and footer. It's a simple way to add a blog to your website without WordPress, on the Free plan of DonkeyCMS 1.08 or newer. About 20 minutes.

Step 1: Upload and install DonkeyCMS

Upload the blog folder from your free download into the folder that holds the template's index.html, then open yourbusiness.com/blog/install.php and follow the installer (Install DonkeyCMS shows each screen). You need PHP 8.1 or newer and a MySQL database, which almost every hosting plan has.

Step 2: Copy the menu and footer

In your blog's admin, open Settings → Frame Tools → Frame Setup, choose the template's index.html (or paste your homepage address) and press Detect Header/Footer. Frame Setup sees that the template's <header> is a welcome banner and takes the dark menu bar above it.

12

1. Frame Setup says the page's header is a welcome banner, so it took the menu above it.
2. This box holds the menu's code. Paste the ready menu from this guide here.

The menu's links point to .html pages (they become .php in Step 3), and its Blog item opens the two placeholder pages. Select everything in the Header box and replace it with this ready menu:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container px-5">
        <a class="navbar-brand" href="/">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="/about.php">About</a></li>
                <li class="nav-item"><a class="nav-link" href="/contact.php">Contact</a></li>
                <li class="nav-item"><a class="nav-link" href="/pricing.php">Pricing</a></li>
                <li class="nav-item"><a class="nav-link" href="/faq.php">FAQ</a></li>
                <li class="nav-item"><a class="nav-link" href="/blog/">Blog</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
                        <li><a class="dropdown-item" href="/portfolio-overview.php">Portfolio Overview</a></li>
                        <li><a class="dropdown-item" href="/portfolio-item.php">Portfolio Item</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Put your business name in place of Start Bootstrap. Then, further down:

1

1. Tick Bootstrap's script, so the phone menu and the Portfolio dropdown work on blog pages.

• Tick bootstrap.bundle.min.js under Detected Scripts, or the phone menu and the Portfolio dropdown won't open on blog pages.
• Leave everything else as it is. The #! links Frame Setup mentions are the footer's empty Privacy and Terms links; point them at real pages later in Frame Studio.

Press Write to header.php / footer.php.

Step 3: Use the shared menu on every page

Delete blog-home.html and blog-post.html. Your blog replaces them.

In each remaining page, delete the footer and then the menu (bottom first, so the line numbers stay right), and put one line in each place. Line numbers are for the template as Start Bootstrap ships it (version 5.0.7):

In place of the footer:

<?php include $_SERVER['DOCUMENT_ROOT'] . '/blog/footer.php'; ?>

In place of the menu:

<?php include $_SERVER['DOCUMENT_ROOT'] . '/blog/header.php'; ?>

Then rename each page from .html to .php (index.php, about.php…). Only .php pages run those lines, and the menu from Step 2 already links to the new names. If your site was already online, forward the old addresses as Frame Setup explains.

1

1. Blog now opens your DonkeyCMS blog.

Step 4: Publish your first post

Open New Post, write, add a picture, press Publish. No copying pages, no code, no uploading. The blog takes the template's look by itself, on desktop and on phones.

On top of the editor you get drafts and scheduled posts, search engine settings, a sitemap and RSS feed, and backups, none of which the placeholder pages could ever do. The donkey carried it all in, and didn't even ask for the Lorem ipsum back. Your pages stay plain HTML: DonkeyCMS adds a blog to a static HTML website you already have or are building.

Questions

Does this work with other Start Bootstrap templates?

Some Start Bootstrap templates put the menu above a welcome banner, as this one does. Frame Setup is built for that: in step 2 it tells you when it took the menu above a banner, and it shows a live preview before anything is saved, so check that preview on your template. For a template from another maker, see the Sweet Bakery guide.

Do I have to change every page of my website?

Every page that should show the shared menu and footer, yes. Step 3 lists the lines to replace on each of this template's seven pages. A page you leave alone keeps its own menu and footer, so a change you make in one place won't reach it.

Still stuck? Write to us — we read every message.