Craft CMS: Building the frontend of a website using Twig and GraphQL

Craft is a mature and tested content management system. Airbnb, W3C, Netflix, PBS, Salesforce, Moz, and countless other brands switched to Craft CMS for redesigning their websites. That for sure proves its credibility against other popular CMSs.

You can use Craft to design and develop complex and intuitive sites that rely heavily on PHP, databases, and query optimizations. However, you can also use Craft to design and develop simple sites where you do none of those things.

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

Craft CMS supports two distinctly different ways of building a front end:

Monolithic: building Twig templates for server-generated pages.

Headless: using a GraphQL API in combination with a separate front end codebase.

But before diving into these two frontend approaches, let’s find out what web developers, designers, and stakeholders love about Craft CMS.

Why Craft is a choice of many front-enders and website projects?

Both web designers and developers find Craft CMS features incredibly useful. Before installing any plugins, the options and functions developers have to work with are impressive. Here is a partial list of features and the reasons why Craft is preferred more for which many other CMSs require plugins:

  • It allows content managers to custom page layout building and preview updates in real-time.
  • One can manage all of their brand sites under one roof, whether it’s a multi-site, multilingual, or both. This is a major problem area with the majority of other CMSs.
  • With virtually no learning curve, the UI of the Craft control panel is very intuitive.
  • Craft is fast for the front end as well as the Control Panel and tops the many reasons for choosing a modern CMS over an older one.
  • Robust sitewide content indexing and search capabilities.
  • Robust custom fields for full control over your design and content.
  • Nearly all content is in one place: Entries. Editors love this and can easily find what they’re looking for.
  • Fine-grained user permissions and group management allow publishing workflows across different departments and individuals. And no, you don’t need a plugin for this.

Building frontend with Craft CMS using Twig templates

Twig is a template engine for PHP so instead of writing PHP you write in this simple Twig syntax.

Some developers are not keen on this, but Craft uses Twig as its template engine. The word “use” should be highlighted as a requirement, as there is no option of writing raw PHP anywhere inside the template.

It is standardized in a way that, when you look at your team’s Pull Requests, you probably don’t expect to see 100 lines of custom PHP that make no sense. You only see the code related to templates.

Apart from this, Twig makes it easy to “component-ize” your elements. This way you define the markup and layout for a component once, then reuse it throughout your site and pass variables.

You can define components for different content modules like image left, image right, headings, cards, etc. This ensures you’re consistent, reuse the same components throughout the site, and reduce duplicate code.

image code

Here’s how to use GraphQL + Craft CMS as a ​“head­less” CMS

Let’s say you’re not digging Twig or you would rather use one of the latest technologies (hello static site generators!). Craft’s templating system isn’t the only way to get content out of Craft. As of Craft 3.3, it provides a “headless” mode and GraphQL built-in with Craft’s Pro features.

That means you can use tools like Gatsby or Gridsome to build static sites with the comfort of Craft CMS. That brings Craft in line with the likes of WordPress that provides its REST API for fetching content to use somewhere else.

As a web devel­op­er, you’d use GraphQL if you were writ­ing a fron­tend that is sep­a­rate from the back­end. You’d be using Craft CMS as a ​“head­less” CMS for its excel­lent con­tent author­ing experience.

Per­haps you’re writ­ing the fron­tend in a frame­work like Svelte, Vue.js, React, or one of the frame­works that lay­ers on top of them like Grid­some, Gats­by, Nuxt.js, or Next.js. You could write a cus­tom API for Craft CMS using the Ele­ment API, but that can be a sig­nif­i­cant amount of work, and you’ll end up with some­thing bou­tique, rather than an indus­try standard.

This is where GraphQL for Craft CMS excels. By cre­at­ing your con­tent mod­els in Craft CMS, you auto­mat­i­cal­ly get a GraphQL API to access it, with no extra work on your part.

Conclusion

Craft abstracts all the field creation and setup to the admin panel. You only need to point it to the right Twig template and then use the fields you connected. Furthermore, it provides localization and multi-site management out of the box with no need for plugins.

The bottom line is Craft is an open-source, modern, affordable CMS with stellar security and first-party support. The features and flexibility it offers out of the box, along with its content-first approach, make it go-to for nearly every custom web project.

About Galaxy Weblinks:

We are your offshore CMS development partner! We offer expert capabilities in developing feature-rich solutions using the latest CMS technology trends. We have hands-on experience in CMS solutions like Craft, WordPress, Drupal for different business needs. We offer assistance from building custom CMS websites to website migration and maintenance processes.

Craft CMS Vs WordPress: Why Choose Craft?

We are not saying that we do not like WordPress but old man has to move the order to pave way for new and what better than Craft CMS to do so.

The key difference is how both the CMSs approach development. WordPress is a have-it-all and pick what you need approach, while Craft is ripped to basics so that you have a blank slate to build what you need.

Craft CMS is minimalistic, it’s simple, it’s dynamic, and offers key features. In fact, our developers have chosen right and wrong enough times to pick a final side.

You might not believe us right away so here’s what made us a fan.

Fields in Craft

Craft is a boon if you love neat organization. With Custom Fields you can get second level of control over your content type. Different content types ask for different formatting and layouts. Custom Field lets you define those types.

Craft’s Custom Fields & Sections make it easier to manage different types of content while WordPress makes up for it using plugins like ACF (Advanced Custom Fields).

Matrix block model in Craft

Matrix is like Legos, you can use the building Blocks to create a desirable layout for your content. It is a fun way to create complex layouts with ease. The rearrangement of these blocks is even easier. The blocks can be rearranged with a simple drag and drop without affecting the code in the template. You can define field types in the blocks.

WordPress’ ACF plugin adopts heavily from the Matrix content blocks of Craft for custom layouts but it isn’t as efficient as the Matrix.

Live Preview in Craft

Craft’s Live Preview allows you to make changes in real time. You can see the changes as you make them. It splits the screen, showing you the changes in real time on one side of the screen while you make those changes in other.

Craft’s Live Preview lets you review the changes in real time while in WordPress you will have a separate tab open for every little change you make.

Sections in Craft

With Craft you can create different sections for different content types:

  • ‘Single’ section for unique content requirement.
  • ‘Channel’ section for streamlined content with an order.
  • ‘Structure’ section for content type which follows a predefined structure.

As Homepages have unique content requirements, they’re made in the Single section. News and Case Studies need to be ordered by date so they are made in the Channel section while a page like Services needs a predefined structure which can be achieved in the Structure Section.

Craft completely focuses on Content Management and makes it easier for your users to consume content & design distinctively. WordPress on the other hand doesn’t have any such feature.

Localization in Craft

When in Rome, speak as Romans do. Because Craft conveniently lets you. Localization is a powerful Craft feature. It lets you present content on a website in a specific language to target specific audience. The feature proves to be very useful when your audience is of different nationalities. Localization can be achieved by setting up and enabling locales. You can simply switch to the desired locale from the sidebar of the edit entry section, even in a particular section.

Localization translates your page’s content according to your target audience. WordPress relies on heavy plugins that interrupt with the security too.

Relations in Craft

Craft’s relationship engine allows you to form relations between posts with entry fields. You can create relations within the entries. Make an entry field determine the field type and update the template code. Drag, Drop, done. It’s that easy in Craft.

Craft’s Relationship engine allows you to form relations between post types while in WordPress you will be creating a separate category and some PHP tweaks or a plugin.

One-Click Updates in Craft

Craft’s update feature is highly underestimated. It provides the critical updates vis-a-vis features, improvements, bug fixes, security enhancements, and plugins in a single easy-to-install package.

Whenever there is a new update in Craft, it will appear in the control panel as a notification badge. You can download the update just by clicking on the badge. Craft even takes the precautionary measure of taking a backup of your data before installing any update package. Pretty clever! Isn’t it?

You can just go through the brief about the bug fixes, security enhancements, and improvements which come with the package before actually installing the package.

Craft’s One-Click update feature literally updates everything in a single click while in WordPress you have to update every other element almost exclusively.

Security in Craft

Since Craft’s one-click update feature is so efficient, users don’t delay the most important part of keeping a CMS safe, Updates.

It’s just a matter of a click and Craft takes care of the rest.

Craft CMS provides freedom of customization, central update system, and state-of-the-art security, all at a one-time fee of $299. WordPress on the other hand is free, at least initially. For the added security — which is a necessity — you’ll have to pay up to $500/month.

Looking at the vulnerabilities that the dependency on plugins bring, Craft CMS does not only look like a safe bet but also a smart decision.

Want to know more about either of the CMSs? We can help you decide sooner and decide better. Head here and drop all your queries.

If you are interested in learning h