How to Create a Website Using Craft CMS Templates

it’s a known fact that WordPress controls 63% of the CMS industry. Launching a new CMS in this difficult market is risky, but Brandon Kelly overcomes this. His team has developed a CMS system that is highly praised by users today. You may know it as Craft CMS. In this article, I will walk you through the Craft CMS and it’s working. I will also discuss,  how you can create Craft CMS templates for your website.

Contendunt is an experienced Craft CMS Agency in the UK. Get your Craft CMS website curated from our proficient team today!

What is Craft CMS
Craft is designed to offer an entire virtual revel into content material creators, developers, and front-quit designers. Craft isn’t a website builder – you have to hand-build your HTML, CSS, and JavaScript. There is currently no official theme or plugin market (although I wouldn’t be surprised if one appears in the future). But craft is designed to be exceptionally scalable, with native capabilities for complex content management relationships.

How does Craft CMS work?
Craft CMS has abandoned traditional CMS systems that come with pre-built themes, CSS frameworks, and pre-built page templates. As a result, developers have a custom solution to create tier solutions. create the interface.

If you are new to Craft CMS, you may find this idea difficult to work with. However, you will soon understand the nature of clean-state systems, where you can build everything yourself and customize solutions using a mix of HTML, CSS, and JavaScript (also React and Vuejs).

If there is no page/post-like structure then how can developers build websites with Craft CMS Theme/Websites? Check out some of the basic components you need to know.

Entries, Sections & Fields

First, let’s mention the inputs with some examples for better understanding. Posts are like buckets that contain content data that you want to display on a website. You can add multiple entries to store different sets of content and reuse them on web pages. Also, posts include the author’s name, status, and the content they add. Each entry has its URL, so you can get any input just with the URL. You can assign URLs to entries based on on-site requirements.

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

You can divide the entire webpage into different entries like featured images, paragraphs, sliders, product features, etc. Then the question arises where and how can you display these entries? 

So, here is the answer, before creating entries, you must create the sections that will contain them. Each section can contain multiple posts (with or without URLs) with an attached template. But how many sections can you use with Craft CMS?

There are three types of sections:

  • Singles – Used for pages such as the Home Page, About Us page, and Contact Us page. 
  • Channels – Used for streams with similar content, for example, a related blogs section. 
  •  Layouts: Store and organize multiple entries in a specific order. 

 Some other important features to be aware of:

  •  Fields: Insert custom data and can be assigned to content 
  • Categories – Allows adding taxonomies for posts, users and assets. 
  • Assets: Manage documents and media files or any files that can be uploaded. 
  • Searchable: All articles can be automatically indexed and searched.
  • Routing – inspect the incoming request and return a response using Twig templates.

Templating in Craft CMS

Like other PHP frameworks, Craft CMS uses Twig for template creation as it has full control over the HTML code. Note that, when you run the test URL in the browser to access the Craft CMS site, the template shown is index.html, which comes from the /templates folder. 

Twig allows you to create various Craft CMS templates. Suppose you can create a folder called Features and create a file called Cloudways in it. You can add HTML code and access it in a browser like http://mycraftsite.com/features/cloudways.html. There you can see the HTML layout. Now the question arises, how can I display entries in the browser? To do this, you need to work with dynamic URLs.

 First, you need to create a section called Features. Since you are not creating a full-page but creating a content area, you can set Section Type > Channel. Now, the input URL format in the site settings section is features/{slug} and in the templates section, the template is called cloudways.html. Let’s set some content items as titles and assign them to the Features section. In the left pane, open the Posts tab and click Create New Post. Select functions/{slug} from the dropdown to ensure the template looks like functions/cloud. .html.


Now let’s create more content inputs and assign them to the Functions section. In the left pane, click the Prompts tab, click Create Prompt, and select Role from the drop-down menu. You will see the Create New Post page, enter the title and notice the created slug on the right. Save the entry.



Now open the cloudways.html file from the templates and add the following Twig code by adding the title attribute of the entry to get the title content.

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

In the browser, type the following URL: 

http://appurl/features/myfirstfeatureofcloudways

You can see the content of the post title in the browser. Change the slugs and check all entries. 

This is the basic template creation mechanism for sections and posts in Craft CMS. Create documents from CMS templates.

Conclusion:
In this article, I addressed what Craft CMS is and how it varies from standard CMS, and how Twig is the answer to creating Craft CMS templates. As you will not find any ready-made Craft CMS themes and templates. Twig gives you the freedom to create a template however you want. If you are planning or starting Craft CMS, you should consider the Cloud ways platform and get the best cloud hosting environment for your projects without worrying about server management or performance.