This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Build a Website Using Craft CMS Templates

Updated on December 20, 2021

5 Min Read
craft cms template

It is a known fact that WordPress controls 63% of the CMS industry. Introducing a new CMS in this tough market is a risky move, but Brandon Kelly had different ideas. His team developed a CMS system that got huge praise from the users – today you may know it as Craft CMS. In this article, I’ll walk you through the Craft CMS and how it works, and finally, I’ll discuss how you can create Craft CMS Templates for your website.

What is Craft CMS?

Craft is designed to provide a complete digital experience to content creators, developers, and front-end designers. The main feature that makes Craft CMS stand out is the flexibility it offers to the developers. The website development can be scaled to accommodate all application functionality. Craft CMS offers a range of advanced dev features to streamline the web development process.

Craft CMS hosting is considered to be a factor that is catered by a few leading hosting solutions providers as the new CMS required proper installation environments and associated variables.  

Craft CMS is powered by PHP v7.0 and above and is built on top of the Yii2 framework. Craft CMS templates can be built using the Twig templating engine.

How Craft CMS Works?

Craft CMS has ditched the traditional CMS systems that come 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 or posts or any themes and bootstrap features to build the frontend.

If you are new to Craft CMS, you might find it difficult to work with this idea. However, you will soon understand 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).

If there is no page/post like structure, then how can developers build sites using Craft CMS Theme/Websites? Check out some of the building blocks you need to know about.

Entries, Sections & Fields

Let’s mention the Entries first with some examples for clearer understanding.

Entries are like buckets that hold content data you want to display on a website. You can add multiple entries for holding different content sets and reuse them on web pages. Also, the Entries contain the author’s name, status, and content that you add. Each entry has a separate URL; hence, you can fetch any entry with just the URL. You can assign URL to entries as per the site requirements.

The typical URL of entry looks like this: {{ author.username }}/{{ slug }}

You can divide the whole web page into different entries like featured images, paragraphs, sliders, product features, etc. Now, where and how can you show these entries?

Before creating entries, you must create the Sections to hold them. Each Section can hold multiple Entries (with or without URLs) with an attached template. But, how many Sections can you use with Craft CMS? There are three types of Sections:

1- Singles: Used for pages like Home Page, About, and Contact Us page.

2- Channels: Used for the streams of similar content, such as a Section showing related blogs.

3- Structures: Used for storing and organizing multiple entries into a specific order.

Some other significant features you need to consider:

Fields: Inject custom data and can be assigned to content

Categories: Allow you to add taxonomies for the entries, users, and assets

Assets: Manage documents and media files or any uploadable file

Searchable: All elements can be indexed and automatically searchable

Routing: To check the incoming request and return a response with twig templates.

Templating in Craft CMS

Like other PHP frameworks, Craft CMS also uses Twig for templating because of the complete control over the HTML code. Note that when you execute the staging URL in the browser to access the Craft CMS site, the template shown will be index.html, which will come from the /templates folder.

You can create multiple Craft CMS templates using Twig. Let’s say, you can create a folder called features and within it create a file called cloudways.html. You can add some HTML code to it and access it in a browser like http://mycraftsite.com/features/cloudways.html. You can see the HTML layout there. You might have a question: how can I show entries in the browser? For this, you need to work with dynamic URLs.

First, you need to create a section named Features. As you are not creating a complete page but a content section, you can set Section Type -> Channel. Now, in the site setting section, the Entry URL Format will be features/{slug}, and then finally in the template section, you will call the template that is: cloudways.html

Let’s put some content entries like titles and assign them to the Features section. Open the Entries tab from the left panel and click create a new entry. From the dropdown, select features/{slug} to ensure that the template looks like features/cloudways.html.

Now, let’s create some other content entries and assign them to the Features section. Click the Entries tab on the left panel, click Create Entry, and select Feature from the drop-down menu. You will see the Create New Entry page, enter the Title, and note the slug created on the right side. Save the entry.

Now open cloudways.html file from templates and add the following Twig code adding entry title attribute for getting the title content.

<h1>{{ entry.title }}</h1>

In the browser, type the following URL:

http://app-url/features/my-first-feature-of-cloudways

You will see the entry title content on the browser. Change the slugs and check all entries.

This is the basic templating mechanism for Sections and Entries in Craft CMS. You can discover this in more details on official Craft CMS templating docs.

Q: What is TWIG?

A: Twig is a powerful open-source template engine for PHP. The syntax used in Twig originated from Jinja and Django templates.

Q: Does Craft CMS offer Pre-Built Templates?

A: No, Craft CMS does not have pre-built web templates. You will have to use Twig – Template Engine for custom template development.

Q: Does Craft CMS offer Developer support?

A: Yes, Craft CMS offers Free and Premium developer support depending on your needs and scope of work.

Q: Does Craft CMS support earlier versions of PHP i.e. 5.6?

A: No, Craft CMS is powered by PHP 7.0 and is built using Yii Framework.

Conclusion

In this article, I’ve discussed the details about what is Craft CMS and how it is different from traditional CMS, and how Twig is the answer to build the Craft CMS Templates as you wouldn’t find any pre-built Craft CMS themes and templates. With Twig, you will have the freedom to create a template the way you want. 

If you are planning or getting started with Craft CMS, consider the Cloudways Platform and leverage the best cloud cms hosting environment for your projects without worrying about server management or performance.

If you have any further questions or queries regarding this article, please feel free to ask them in the comments section below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Cloudways hosting has one of the best customer service and hosting speed”

Sanjit C [Website Developer]

Umer Jalil

Umer Jalil is a Digital Content Producer at Cloudways. He is passionate about digital marketing and the latest happenings in the tech world. He is an avid gaming enthusiast from heart and loves playing Cricket in happy hours!

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!