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 Sweet Bakery template

FREEPROBUSINESSWHITE-LABEL

Sweet Bakery by Tooplate is a lovely one-page bakery template with no blog, and a bakery has plenty to say: new flavors, holiday hours, the story behind the best-selling cupcake. This guide adds one that wears 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.08 or newer and takes about 20 minutes.

The Sweet Bakery template homepage with a Blog link added to its menu, next to Home, Menu, About and Contact.1
  1. The new Blog link, in the template's own menu.

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 yourbakery.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. Frame Setup finds the menu and footer and leaves the big "Sweet Dream" welcome section on the homepage, where it belongs.

Frame Setup on the Sweet Bakery template: no menu problem found, and Add a Blog link to the menu is ticked.1
  1. Leave this ticked: Frame Setup adds Blog as the last item of the bakery's menu.
  • Leave Add a Blog link to the menu switched on: Blog becomes the last item of the bakery's menu. The other choices here can stay as they are.
Frame Setup on the Sweet Bakery template: the template script ticked, and the homepage path set to / for #links.12
  1. Tick the template's script, so the phone menu opens on blog pages.
  2. Type / and press Rewrite these links.
  • Tick tooplate-2168-sweet-bakery.js, or the phone menu won't open on blog pages.
  • The menu's links (#menu, #about…) only work on the homepage. Type / and press Rewrite these links so they work from blog pages too.

Press Write to header.php / footer.php.

Step 3: Use the shared menu on your homepage

Open index.html in your File Manager's editor. 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 Tooplate ships it:

  1. Lines 497 to 548 (<footer id="contact"> to </footer>) become:
<?php include $_SERVER['DOCUMENT_ROOT'] . '/blog/footer.php'; ?>
  1. Lines 40 to 65 (<header> to </header>) become:
<?php include $_SERVER['DOCUMENT_ROOT'] . '/blog/header.php'; ?>

Keep the <script src="tooplate-2168-sweet-bakery.js"> line after the footer, save, and rename index.html to index.php. Your homepage keeps its address.

Step 4: Make posts easy to read

The template's soft mint text is lovely in short homepage lines and hard to read in a long post. In Frame Studio (Settings → Frame Tools → Frame Studio), paste this at the very end of the header code:

<style>.post-content, .post-content h2, .post-content h3 { color: #5A4A6A; }</style>

It's a darker shade of the template's own purple and changes blog posts only. Paste it rather than typing it, because the code box closes tags by itself. While you're there, find <a href="/#home" class="active">Home</a> and delete class="active", so Home isn't highlighted on blog pages. Press Save Header & Footer.

The finished Sweet Bakery blog: the template's own menu and footer around two example bakery posts.
A Sweet Bakery blog post on a phone, with the template's menu at the top and dark, readable text.

That's it: your bakery has a blog, and the website around it is still plain HTML. DonkeyCMS adds a blog to a static HTML website you already have or are building, and the donkey would like a cupcake for its trouble.

Optional: tidy the template's script

Two small edits in tooplate-2168-sweet-bakery.js. Visitors won't notice either way:

  • Under function updateCountdown() {, add if (!document.getElementById('days')) return; so the countdown stops looking for itself on blog pages.
  • Change link.getAttribute('href') === '#' + current to link.hash === '#' + current, so the homepage still highlights the section you scroll to.

Questions

Can I change the menu later?

Yes, in Frame Studio. Your homepage and blog share one menu, so a change shows on both.

Can I use these steps for a different template?

The idea is the same for most HTML templates: Frame Setup copies your template's own menu and footer, and the blog wears them. The details differ from template to template, so for a multi-page Bootstrap template follow the Modern Business guide, and read Frame Setup to see how it works.

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