Blog / Implementing a fully-featured website and CMS with Bolt

Bolt is a PHP-based open-source content management system.  It sets itself apart with its modern design philosophy and use of standard PHP libraries.

We recently launched a new site for Vera Water and Power, and we built it with Bolt. I am so happy with how the site turned out, from a UI, content, and design perspective.

In this post, I’ll explain why we chose Bolt, how it helped the site succeed, and why it was so fun to work with.

After planning out the website’s structure and layout, we used all of Bolt’s features to make it a reality.

Setting up content types

On many sites, you’ll have types of content that are more nuanced than “standard page” and “homepage”. For these cases, you can use Bolt’s well-designed contenttypes system.

Using Bolt’s contenttypes, you’ll define the database tables that your CMS admins will have access to. After you set up the contenttypes.yml file, they’ll have a menu that looks like this:

vera-admin-sidebar

Bolt’s admin sidebar after configuring contenttypes.yml

An excellent feature is the “relations” option. You can use this to tie your content pieces to one another. For example, you could display a list of related articles, or put an item in several categories.

bolt-relationship-editor

Linking content together using Bolt’s relation editor

You can also use contenttypes.yml to specify a custom template to use when rendering that type of content.

There are plenty of default field types to choose from, for example: image, text, html, coordinates, and date. More can be added with extensions.

Using Bolt to implement the knowledge base

We were excited to create an organized and easy to use knowledge base feature for Vera customers to access. Providing your KB via your main site (rather than via a SAAS offering), gives excellent usability, discoverability, content integration, and SEO. It’s also convenient to maintain your knowledge base from the same area as you maintain the rest of your content.

Using Bolt’s contenttypes feature made implementing the knowledge base fairly straightforward.

Structuring the knowledge base with contenttypes.yml

We created two contenttypes: articles and categories. Then, we used the “relations” feature to tie them together. Each article can belong to several categories. And, each article can have several related articles, which show up at the bottom of the page.

Here’s a sample of what the kbarticles content type looks like. Based on this configuration in a .yml file, Bolt automatically creates a “kbarticles” table in the database. It also relates it to the “kbcategories” table for categorization, and to other “kbarticles” rows for the Related Articles feature.


# Define the kbarticles content type in contenttypes.yml

kbarticles:
    name: KB Articles
    slug: kbarticles
    singular_name: KB Article
    singular_slug: kbarticle
    fields:
        title:
            type: text
            class: large
            required: true
            pattern: ".{2,255}" # see: http://html5pattern.com/
            error: "The Title field is required, and must contain at least 2 characters"
            group: Text
        slug:
            type: slug
            uses: title
        body:
            type: html
            group: Text
            label: Body
        featured:
            type: integer
            group: meta
            postfix: Articles with a Featured value other than 0 will be displayed starting with 1
    default_status: publish
    relations:
        kbcategories:
            multiple: true
            order: title
            label: Categories
        kbarticles:
            multiple: true
            order: title
            label: Related articles
    sort: -featured

Cleaning up URLs with routing

We created a couple custom rules so that the KB URLs looked really nice and followed a logical pattern. It ended up looking like this:

Page URL sample
Main page: /kb
Search page: /kb/search
Category: /kb/category-title
Article: /kbarticle/article-title

Routes look like this:


# Make /kb go to the Knowledge Base index

kbindex:
    path: /kb
    defaults: { _controller: 'Bolt\Controllers\Frontend::listing', contenttypeslug: 'kbcategories' }

Knowledge base search

The search was implemented using Bolt’s built-in search feature. We set up a custom route, a custom template, and used a Bolt’s helper functions to collect the right data:


{# Grab search results from the knowledge base only #}

{% setcontent results = 'kbarticles/search' where { filter: app.request.get('q') } %}

We used Bolt's search features to create a custom Knowledge Base search

We used Bolt’s search features to create a custom Knowledge Base search

Conclusion

From a development standpoint, working with Bolt was extremely fun. Everything is editable via on-disk configuration files using the YML format. Bolt follows best practices and makes use of reliable, nuts and bolts standard technologies. Even extending it is fairly easy, with its object oriented, Composer-based extension system.

Bolt helped us implement a highly usable and fully-featured responsive website with custom content types, a knowledge base, an alerts system, a fully customizable homepage, and an advanced admin area. It let us move from design to completed website in a very smooth development process.

We look forward to watching the Bolt project grow and using it on future websites. Let us know if you are interested in working with us for your next project.

And if you have any questions about our experience with Bolt, please leave a comment below.

Will

Web developer

More Posts

Follow Me:
Twitter