Boo! 15% off your first payment on every paid plan. The donkey isn’t scared, but the prices are → ends 1 November, 23:59

Add a blog to the Agency template

FREEPROBUSINESSWHITE-LABEL

Agency by Start Bootstrap is a one-page template: services, portfolio, team and contact, all on one long scroll. What it doesn't have is a place for a news post or a case study. This guide adds one, wearing the template's own menu and footer, a simple way to add a blog to your website without WordPress. It works on the Free plan of DonkeyCMS 1.09 or newer and takes about 20 minutes.

The Agency template as downloaded: one long page, with a menu of Services, Portfolio, About, Team and Contact, and no blog.1
  1. The menu has five sections, and nowhere to put a blog.

Warning: Download a copy of index.html from your hosting's File Manager first. If something goes wrong, upload the copy back.

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 youragency.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.

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. Agency puts a welcome banner right under its menu, and Frame Setup knows the difference: it takes the menu above the banner, logo included.

Frame Setup on the Agency template: it takes the menu above the welcome banner, shown in the live preview with its logo.12
  1. Frame Setup says the page's header is a welcome banner, so it took the menu above it.
  2. The menu and its logo, as the blog will show them.

Below the preview, Your menu on blog pages spots that Agency's menu is see-through and fixed to the top. That's lovely over a photo and invisible over a white blog page, so it has already picked the template's own solid dark menu for blog pages. Leave that choice, and leave Add a Blog link to the menu ticked.

Frame Setup on the Agency template: a see-through, fixed menu is found, its solid look is chosen, and Add a Blog link is on.123
  1. Agency's menu is see-through and fixed to the top, and Frame Setup noticed.
  2. Already chosen: the menu gets the template's own solid dark look on blog pages.
  3. Leave this ticked: Frame Setup adds Blog as the last item of the menu.

Then, further down:

Frame Setup on the Agency template: Bootstrap and Font Awesome scripts ticked, and the homepage path set to / for #links.123
  1. Tick Bootstrap's script, so the phone menu opens on blog pages.
  2. Tick Font Awesome, for the menu button's icon and the footer's round buttons.
  3. Type / and press Rewrite these links.
  • Tick bootstrap.bundle.min.js, or the phone menu won't open on blog pages.
  • Tick Font Awesome (all.js) for the Menu button's icon and the footer's round buttons.
  • Leave scripts.js and sb-forms-latest.js unticked. They run the homepage's scroll effects and contact form, which blog pages don't have.
  • Type / and press Rewrite these links, so #services, #team and the rest work from blog pages too.

Press Write to header.php / footer.php.

Step 3: Use the shared menu on your homepage

Agency is one page, so there's one page to change. In index.html, delete the footer first 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 7.0.12):

PartDelete
Footerlines 373 to 388
Menulines 21 to 38

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 index.html to index.php. Only .php pages run those lines. Your homepage's address stays /, so nothing needs forwarding.

The Agency homepage after the change: the same page, with Blog added as the last item of its menu.1
  1. Blog now opens your DonkeyCMS blog.

Step 4: Publish your first post

Open New Post, write, add a picture, press Publish. The blog takes the template's look by itself, on desktop and on phones, and the menu and footer stay in one place from now on.

The finished Agency blog: the template's dark menu and footer around two example agency posts.
An Agency blog post on a phone, with the template's menu opened from its Menu button.

You also get drafts and scheduled posts, search engine settings, a sitemap and RSS feed, and backups. Your website stays plain HTML: DonkeyCMS adds a blog to a static HTML website you already have or are building, and the donkey carried the whole menu across without dropping a single link.

Questions

Why is the menu see-through on my homepage but solid on the blog?

Blog pages have no photo behind the menu, so a see-through one would disappear. Frame Setup gives blog pages the solid dark look Agency itself switches to when you scroll, and your homepage keeps its own look. You can change this any time in Frame Studio.

Do I have to change the rest of my homepage?

No. Only the menu (lines 21 to 38) and the footer (lines 373 to 388) are replaced. Your sections, your contact form and your scripts stay exactly as they are.

Can I follow this for another Start Bootstrap template?

The steps are the same idea, and the Modern Business guide shows them on a template with several pages. In step 2, Frame Setup tells you which part of the page it took as the menu and shows a live preview before anything is saved, so check that preview on yours. More templates are listed in the template guides.

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