How to Build a Website Using Craft CMS Templates

If you’re a website owner or developer, you’re probably familiar with the importance of having a solid content management system (CMS). One of the key components of any CMS is its templates. Templates provide the structure and theme for your website, giving it a professional and polished look that draws in visitors and keeps them coming back for more.

Craft CMS is highly favored by developers due to its flexibility and versatility. Unlike other CMS platforms that can be restrictive and complex, Craft CMS offers a more intuitive and streamlined approach to creating and managing custom websites with ease.

If you’re looking to create a website using Craft CMS templates, you’re in the right place. Building a template for your website using Craft CMS can seem like a daunting task, but with the right approach, anyone can do it.

In this article, I’ll walk you through Craft CMS and how it works, and finally, I’ll discuss how you can create a website using Craft CMS templates.

What Is Craft CMS?

Craft CMS is a versatile and robust content management system that facilitates the creation of customizable websites and web applications. It has gained popularity among developers and designers since its release in 2013 due to its ease of use, flexibility, and extensive features.

Craft CMS is powered by PHP v7.0 and above and uses the Yii2 framework. Twig is the templating engine used for front-end rendering. The system has a powerful content modeling system, flexible routing, and built-in user management. Its flexibility is a significant selling point, allowing developers to customize their website development and scaling it to accommodate all application functionality.

With that being said, unless you host your marvelous Craft CMS website on truly scalable hosting, you won’t be able to unleash its full potential.

Introducing Cloudways Craft CMS hosting: We provide different hosting plans suitable for different budgets and needs, with support from an experienced hosting expert team.

I guess you can say – our hosting solution is truly designed for Craft CMS!

Learn how to install Craft CMS on Cloudways to take advantage of its modular design, which enables developers to create custom plugins and modules to extend its functionality and tailor it to specific project needs.

Don’t settle for subpar hosting for your Craft CMS site.

Sign up for Cloudways today and experience the power of high-performance, managed hosting!

Start Free

Is Craft a Good CMS?

Yes, it is actually really good. Craft is popular with non-technical users for its ease of use and user-friendly interface, making it easy to create and manage content. The platform’s editing tools are designed to be simple and straightforward.

One of the key strengths of Craft is its flexibility. It offers a customizable and modular architecture allowing users to tailor the platform to meet their needs.

This allows users to create custom content types, fields, and workflows to match their unique content creation and management processes. Craft also includes a powerful templating system that makes it easy to design and customize the front end of a website or application.

How Craft CMS Works?

Craft CMS has ditched traditional CMS systems with pre-built themes, CSS frameworks, and ready-to-go page templates. As a result, developers have a bespoke solution to build tier solutions. Craft CMS neither offers pages, posts, themes, or bootstrap features to build the front end.

If you are new to Craft CMS, you might find it difficult to work with this idea. However, you can quickly grasp the essence of clean state systems, where you can build anything on your own and customize solutions with a combination of HTML, CSS, and JavaScript (React and Vuejs, also).

Now, you may be wondering, how can developers build sites using Craft CMS if there is no page/post-like structure?

We’ll now check out some of the building blocks of Craft CMS you need to know about.

Step 1: Creating a Blog

To start off, we need to create a new Section for our blog posts. Just follow the steps below, and you’ll be done in no time:

Step 1: Create a Section

• Go to the control panel > Settings.
• Choose Sections from the “Content” options, and create a new section using the + New section option.
• Name the new section “Blog” with the auto-generated lowercase handle and entry URI format. The name could be anything you like.
• Enter blog/_entry for the Template setting.
• Leave the rest of the default settings as they are and choose Save.

• Now, in the sidebar navigation, you will find a new “Entries” menu item. Click on it and select “New Entry” followed by “Blog”. This will create a new blog post, which will initially have only a title field.

Step 2: Create Blog Fields (Entries, Sections & Fields)

First, create a place to upload the files that will be used to save the images, and create a local Asset Volume within the web root for blog post images. To do this, follow these steps:

• Go to the control panel and select “Settings”, followed by “Assets”.
• Click on “New volume.”
• Enter the “Blog name” and set the following:
  • Assets in this volume have public URLs: on/enabled
  • Base URL: @web/assets/blog
  • File System Path: @webroot/assets/blog
• Save the Asset Volume.

Now, Craft will generate the specified folder for you, which will allow you to handle its Assets through the control panel by uploading and managing them.

Step 3: Create a Category Group

• Go to the Settings menu and select the option for Categories.
• Click on New category group.
• Create a category titled “Blog Categories” and set the maximum level to 1 or as per your needs.
• In the Category URI Format field, input “blog/category/{slug}”, and select “blog/_category” as the template.
• Now, save the Category Group.

Step 4: Install the Redactor Plugin for Rich Text Fields

To enable a more robust editing experience for creating blog posts, you can install the first-party Redactor plugin. You have the option to install it either through the control panel or by using the terminal.

Here’s how to do this:

• From your terminal, run ddev composer require craftcms/redactor. The Composer will download the plugin and add it to your project.
• Now run ddev php craft plugin/install redacto.

The Redactor plugin is now installed and ready to use on your site.

Step 5: Create Individual Fields

Now, let’s create individual fields for the blog posts you want to use and arrange them in field layouts.

• Go to the Settings menu and select Fields.
• Click on the “+ New group” button to create a new field group and name it “Blog Post Fields”. Don’t forget to save the group.
• Create a Text field.
• Choose New Field and enter the following.
  • Name of text field: It could be anything
  • Allow line breaks
  • Initial Rows: As per your preference
• Save the field.

You can create multiple text fields and content groups as per your needs by the Matrix

Step 6: Add Fields to the Blog Field Layout

• Go to the “Settings” menu and select “Sections.”
• Select “Edit entry types” (1) and then choose the Blog entry type that has been automatically added for you.
• At the bottom of this view, Click on New Tab.
• Click on the gear icon located on the right side of the new tab. Select “Rename” and provide a more descriptive label such as “Post Content or anything else you like” for this tab.
• Drag each of the fields we created earlier to this tab
• As each blog post must contain some content, click on the gear icon located to the right of the “Post Content” field and ensure that it is marked as required.
• Enter the Headline for “Title Field Label”.
• Save the field layout.

The Title Field Label is a simple way to rename the title, which can be later used to call the text field and section for something more descriptive in the content editor.

Step 2: Create an About Page

Let’s create a Single for an “About” page that will include a headshot and bio.

Instead of creating new fields for the about page content, you can re-use the Matrix block we created earlier, such as Creating an Asset Volume and Assets Field.

Step 1: Create a Single Page

• Goto Settings > Sections and Select “New section”.
• Enter “About” for the section name.
• Select “Single” from the Section Type dropdown menu.
• Enter “About US” for URL, and _singles/about for Template.
• Save this section.

Step 2: Add Fields

Follow the same process as you did for the blog page to add fields to our new about single page.

• Go to the “Settings” menu and select “Sections.” Then, click on “Edit entry type” located to the right of the “About” single.
• Create a “Content” tab and drag the “About Image” and “Post Content” fields to it.

• Save the entry type.

Step 3: Create Your Own Template

Now, let’s create a basic layout for our website. Start by creating a layout template at templates/_layout.twig.

Step 1: Create a Layout

For creating a template, I’m going to use the “Don’t Repeat Yourself” methodology. This would allow us to write code once and reuse it when needed.

The layout is important for this because it will be the base our other templates extend.

Now that I’ve cleared that out copy the code below into the templates/_layout.twig file you created:

<!DOCTYPE html>
<html lang="{{ craft.app.language }}">
  <head>
    <meta charset="utf-8"/>
    <title>{{ siteName }}</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="/styles.css" rel="stylesheet">
  </head>
  <body class="ltr">
    <div class="container mx-auto px-4">
      {% block content %}
      {% endblock %}
    </div>
  </body>
</html>

This is a basic HTML code that will form the underlying structure of every page on your website.

HTML employs tags or markup to organize and describe the content in a structured manner. You may notice the siteName tag of Craft’s website in the following line:

<title>{{ siteName }}</title>

You can download a copy of the example styles into web/styles.css: https://raw.githubusercontent.com/craftcms/tutorial-project/main/web/styles.css

This style sheet will provide a set of basic styles for our templates. It is a static sheet that will ensure consistency and coherence in the visual presentation of the website.

A crucial part of the template is the content block:

{% block content %}
  {# other templates will put stuff here, inside the content block #}
{% endblock %}

Step 2: Create a Detail Page

With the layout template in place, we can proceed to apply it to our blog post detail pages.

Create templates/blog/_entry.twig and add the following code to it:

{% extends "_layout.twig" %}

{% block content %}
  <h1 class="text-4xl text-black font-display my-4">I’m a blog post!</h1>
{% endblock %}

For any detail page template, Craft CMS provides a special entry variable we can use to access that entry’s content.

Now, in the template, let’s showcase the properties of title and postDate:

{% extends "_layout.twig" %}

{% block content %}
  <h1 class="text-4xl text-black font-display my-4">{{ entry.title }}</h1>

  <time class="text-sm block pb-4" datetime="{{ entry.postDate | date('Y-m-d') }}">{{ entry.postDate | date('d M Y') }}</time>
{% endblock %}

Now, display the “Feature Image”, using the featureImage handle we created with that custom field:

{% extends "_layout.twig" %}

{% block content %}
  <h1 class="text-4xl text-black font-display my-4">{{ entry.title }}</h1>

  <time class="text-sm block pb-4" datetime="{{ entry.postDate | date('Y-m-d') }}">{{ entry.postDate | date('d M Y') }}</time>

  {% if entry.featureImage|length %}
    {% for image in

entry.featureImage.all()

 %}
      <img src="{{ image.url }}" alt="{{ image.title }}" />
    {% endfor %}
  {% endif %}
{% endblock %}

• The first “if” conditional statement to see if there’s an image saved for this field.
• If the statement is true, this means we have at least one feature image, we use entry.featureImage.all() to get and set the image. Then a for loop to display each one using the image variable.
• For each asset, we output an img HTML tag which tells the browser to display an image. We use two Twig tags to provide important details about the image:
  • {{ image.url }} gives us the web-friendly URL for the image.
  • {{ image.title }} provides a text description we can use as the alt text for accessibility.

We should now see the image after refreshing the page:

Step 3: Transform an Asset

You can specify the exact dimensions you need to have for your Feature Image.
Specify a size for our “Feature Image”.

{% extends "_layout.twig" %}

{% set featureImage = {
  mode: 'crop',
  width: 900,
  height: 600,
  quality: 90
} %}

{% block content %}
  <h1 class="text-4xl text-black font-display my-4">{{ entry.title }}</h1>

  <time class="text-sm block pb-4" datetime="{{ entry.postDate | date('Y-m-d') }}">{{ entry.postDate | date('d M Y') }}</time>

  {% if entry.featureImage|length %}
    {% for image in entry.featureImage.all() %}
      <img src="{{ image.getUrl(featureImage) }}" alt="{{ image.title }}" />
    {% endfor %}
  {% endif %}
{% endblock %}

Step 4: Edit With Live Preview

After adding templates for your sections, you can view the page.

• Click the Preview button in the control panel and slide open a panel for previewing your edits as you make them:

Experience unparalleled Craft CMS performance with our hosting services.

Cloudways handle server management for you so you can focus on creating great apps and keeping your clients happy.

Start Free

Conclusion

Craft CMS is a flexible and user-friendly content management system that allows you to build a website using customizable themes and templates. More than 40,000 sites currently use Craft CMS, making it super popular.

In this article, we’ve covered what Craft CMS is and how you can build a website using Craft CMS templates.

I also highlighted the significance of Twig, which is the template engine utilized by Craft CMS. With Twig, you can develop templates that are tailored to your unique requirements, as there are no pre-built Craft CMS themes and templates available like we’re used to seeing in

WordPress. This gives you the freedom to design your templates exactly the way you want them.

In case you have any further questions or queries about this topic, feel free to ask them in the comments section below.

Thanks for reading!