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 Creative template

FREEPROBUSINESSWHITE-LABEL

Creative by Start Bootstrap is a one-page template: about, services, portfolio and contact on one long scroll. It is made for showing work, and it has no 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 Creative template as downloaded: one long page with a menu of About, Services, Portfolio and Contact, and no blog.1
  1. The menu has four 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 yourstudio.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. Creative 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 Creative template: it takes the menu above the welcome banner and shows the menu code it captured.12
  1. Frame Setup says the page's header is a welcome banner, so it took the menu above it.
  2. The menu's code, with its logo and links. Frame Setup writes it into header.php.

Below the preview, Your menu on blog pages spots that Creative'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 menu for blog pages. Leave that choice, and leave Add a Blog link to the menu ticked.

Frame Setup on Creative: a see-through, fixed menu is found, its solid look is chosen, and Add a Blog link is on.123
  1. Creative'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 look on blog pages.
  3. Leave this ticked: Frame Setup adds Blog as the last item of the menu.

Then, further down, leave the detected styles ticked (they include the template's own css/styles.css, which is what gives the blog its look):

Frame Setup on the Creative template: the Bootstrap script ticked, and the homepage path set to / for the menu links.12
  1. Tick Bootstrap's script, so the phone menu opens on blog pages.
  2. Type / and press Rewrite these links.
  • Tick bootstrap.bundle.min.js, or the phone menu won't open on blog pages.
  • Leave the other scripts unticked: they run the homepage's scroll effects, picture viewer and contact form, which blog pages don't have.
  • Type / and press Rewrite these links, so #about, #services and the rest work from blog pages too.

Press Write to header.php / footer.php.

Step 3: Use the shared menu on your homepage

Creative 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.7):

PartDelete
Footerlines 246 to 248
Menulines 23 to 36

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 Creative 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 Creative blog: the template's own menu and footer around three example studio posts.
A Creative 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 look Creative 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 23 to 36) and the footer (lines 246 to 248) 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 Agency guide shows them on another one-page template, the Modern Business guide on one with several pages. In step 2, Frame Setup tells you which part of the page it took as the menu and shows what it captured before anything is saved, so check that on yours. More templates are listed in the template guides.

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