Guess what’s back? Chisel is back!

Yeah, baby! The new Chisel has arrived and is packed with some awesome features.

[the sound of a tape rewinding]

Good old Chisel for a WordPress Theme development

But let’s start from the beginning. For those who don’t know what Chisel is, it’s a WordPress theme development tool, a custom framework that we built a while back for creating WordPress themes. It was built by developers and for developers. We created it with one goal: to make developers’ lives easier, writing the code quicker and even more enjoyable!

What made it so special, you might wonder.

Yeah, what made it so special?

There were three things, actually: Webpack, Timber, and ITCSS. The Holy Trinity of Chisel. The combination of them supercharged the creation process of new WordPress themes and WordPress websites.

That sounds great.

It does, doesn’t it? Let me tell you more about them…

Webpack: The Wizard of Automation for local development environment

Webpack is like a magic wand, it takes all of your JavaScript and SCSS files along with other project assets, processes them, and gives you back nicely optimized and minified files that are ready for production. Chisel comes with Webpack fully configured for you, so that you can focus on what you love best, writing the code!
Moreover, it has JavaScript and CSS linters included to ensure the best quality, error-free code. It’s like a personal code quality assistant built into your workflow.

Timber: No more HTML in PHP

Timber is a library for WordPress that helps to separate the logic from the presentation layer, making the code cleaner, development more efficient, and improving readability and scalability, which makes Chisel an excellent choice for both small and complex WordPress sites.

Timber uses Twig to display content – a powerful, flexible, fast, and secure templating engine. One of its security features is that it escapes output automatically to help prevent XSS (Cross-Site Scripting) attacks.

By using Twig you take the messy HTML, which in standard WordPress themes is often mixed with PHP tags, into separate Twig files that are responsible for generating views. Such an approach gives you a cleaner, more organized, and easy-to-maintain code.

ITCSS & BEM: Organizing Your Styles Like a Pro

The third part of Chisel is the ITCSS architecture and BEM methodology. We wrote a whole article about it, but long story short, it helps to keep your CSS (or SCSS) well organized, scalable and maintainable.

That sounds like Chisel was already a great tool, so how could you make it even better?

Well, we kept what was great, improved what could be improved, and added a bunch of new features and enhancements.

New tools and features

WordPress has changed over the years, especially its content editor. The old classic (WYSIWYG) editor was replaced by the new powerful Gutenberg editor that lets you build content with blocks and block patterns. It forever changed the way we built content in WordPress, giving us more possibilities than ever before.

Taking that into consideration we decided to rewrite Chisel from the ground up to give you a much more powerful, modern Starter Theme that fully embraces the block-based approach and adds a lot of pre-made components, features, and helper classes for faster, more efficient WordPress development. 

Oooooh, why don’t you tell us more about all those new features?

Of course, here they are:

New Timber

The Timber Library has been refactored to work with modern PHP,  fixed a lot of bugs, improved compatibility with WordPress, and simplified lots of features like interacting with posts, terms, and other objects as well as improved compatibility with plugins, e.g. Advanced Custom Fields.
Also, Timber is now a composer package and is installed during the Chisel installation.
You can read about all the changes here: https://timber.github.io/docs/v2/upgrade-guides/2.0/

Example php code using Timber, responsible for providing data:

use Timber\Timber

$context = Timber::context();

Timber::render('single.twig', $context);

Example of rendering data provided by php in a twig file:

{% extends 'base.twig' %}

{% block content %}
    <article>
        <h1>{{ post.title }}</h1>

        <img src="{{ post.thumbnail.src }}" alt="{{ post.thumbnail.alt }}" >

        <div class="post-content">
	    {{ post.content }}
	 </div>
    </article>
{% endblock %}

New Webpack setup for better WordPress development process

Chisel’s Webpack setup has been updated with our new set of rules and linters called chisel-scripts, which include integration with @wordpress/scripts for easy block development and compatibility with WordPress Blocks API.

New Coding Standards

With the new Chisel, we want to ensure that all projects have a clean and consistent code. That’s why we’ve included new linters not only for JavaScript and CSS but also for WordPress coding standards for PHP and Twig. The idea behind this was to help catch issues early, enforce adherence to the same coding standards, and promote uniformity in the codebase making it easier to work with, maintain, or debug.

Modern CSS and JS

We still use ITSS with BEM for writing CSS but to make the new Chisel future-proof we introduced the new SASS features into the theme’s SCSS workflow – @use and @forward rules, which replaced the @import rule. The @import rule is discouraged by the SASS team and will be eventually removed, so we decided to switch early and use the new approach.

As for JavaScript, we encourage to use of modern ES6+ features, which is also enforced by our linters, as well as prefer to use Vanilla JavaScript over jQuery.

Theme.json  – global styles in one place

Theme.json is a new way of defining global styles and settings for WordPress themes. It gives you more control over the default settings of your theme’s styles, i.e. typography, spacing, colors, and even block editor features. Yes, you can use theme.json to control which settings are available or not in the editor. It simplifies the development workflow and makes the theme more customizable.

Moreover, all of the styles defined in the theme.json are available as CSS variables for ease of use when writing project styles.

Example theme.json file:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "name": "Primary", "slug": "primary", "color": "#2a1468" },
        { "name": "Secondary", "slug": "secondary", "color": "#ff6d54" },
      ]
    },
    "typography": {
      "fluid": { "minFontSize": "0.875rem", "maxViewportWidth": "1200px", "minViewportWidth": "480px"
      },
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "Small" },
        { "slug": "normal", "size": "1rem", "name": "Normal" },
        { "slug": "medium", "size": "1.125rem", "name": "Medium",
          "fluid": {
            "min": "1rem",
            "max": "1.125rem"
          }
        }
      ],
      "fontFamilies": [
        {
          "fontFamily": "Quicksand,sans-serif",
          "slug": "body",
          "name": "Quicksand",
          "fontFace": [
            {
              "fontFamily": "Quicksand",
              "fontWeight": "400",
              "fontStyle": "normal",
              "fontStretch": "normal",
              "fontDisplay": "swap",
              "src": ["file:./assets/fonts/quicksand-regular.woff2"]
            },
            {
              "fontFamily": "Quicksand",
              "fontWeight": "700",
              "fontStyle": "normal",
              "fontStretch": "normal",
              "fontDisplay": "swap",
              "src": ["file:./assets/fonts/quicksand-700.woff2"]
            }
          ]
        }
      ]
    }
  }
}

Blocks Support

The new Chisel has built-in support for Gutenberg blocks development – both native and ACF (Advanced Custom Fields) blocks. Our new Starter Theme automatically registers blocks in PHP for you along with all the assets (Javascript and CSS) required for the block. It handles all of that based on the block.json file. You just define the block, create the necessary files inside the block folder and Chisel takes care of registering everything for you.

Example block.json file:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "chisel/accordion",
  "version": "0.1.0",
  "title": "Accordion",
  "category": "chisel-blocks",
  "icon": "editor-justify",
  "description": "Accordion Block",
  "example": {},
  "supports": {
    "html": false
  },
  "textdomain": "chisel",
  "attributes": {
    "closeOthers": {
      "type": "boolean",
      "default": false
    },
    "firstOpen": {
      "type": "boolean",
      "default": false
    }
  },
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript": "file:./view.js"
}

ACF Sync Notice: No more losing data.

How many times have you accidentally overwritten custom fields created by another developer, because you forgot to sync ACF JSON files? Too many, I bet.
With the new ACF Sync Notice feature it won’t happen again. You’ll be amazed how such a simple solution can save a lot of frustrations. The feature detects when you try to edit a custom fields group that hasn’t been synced and displays a nice notice for you.

Custom AJAX

Who doesn’t like Ajax, right? It lets you load content dynamically, e.g. on a button click, without reloading the whole page. It’s cool and user-friendly.

To make it even cooler, or rather more efficient, we created a custom wrapper for handling Ajax requests by taking advantage of the WordPress REST API. In comparison with the default WordPress approach, that uses WordPress Ajax hooks it improves performance, especially in larger projects, making it more scalable.
During the default Ajax calls many WordPress action hooks are being triggered, which can increase the response time and those hooks are bypassed when using the REST API method. It is also a more modern way and gives more flexibility and control to developers.

The other part of it is a JavaScript utility function that sends all requests to our custom Ajax endpoints automatically. In general, it will simplify and speed up the development of custom Ajax calls both from front-end and back-end point of view.

Making a custom Ajax requests consists of three simple steps:

1. Register your custom route:

$this->routes = array(
    'load-more' => array(),
);

2. Create a callback function, where all server side logic happens.

public function load_more( $request ) {
    if ( ! $request ) {
	return $this->error( 'No request data' );
    }

    $data = $this->get_data( $request );

    $post_type = sanitize_text_field( $data['post_type'] );
    $per_page  = absint( $data['per_page'] );
    $page      = absint( $data['page'] );

    $response = '';

    $posts = Timber::get_posts(
	array(
	    'post_type'      => $post_type,
	    'posts_per_page' => $per_page,
	    'paged'          => $page,
	)
    );

    $templates = array( 'components/' . $post_type . '-item.twig', 'components/post-item.twig' );

    if ( $posts ) {
	foreach ( $posts as $post ) {
	    $response .= Timber::compile( $templates, array( 'post' => $post ), ChiselCache::expiry() );
	}
    }

    return $this->success( $response );
}

3. Call the function with Javascript utility function for Ajax requests

Utils.ajaxRequest('load-more', {
  page: this.state.page,
  post_type: this.state.postType,
  per_page: this.state.perPage,
  max_page: this.state.maxPage,
}).then((response) => {
  this.elements.loadMoreButton.classList.remove(this.classnames.loading);
  this.elements.container.insertAdjacentHTML('beforeend', response.data);

  if (this.state.page >= parseFloat(this.state.maxPage)) {
    this.elements.loadMore.remove();
  } else {
    this.setState({ page: this.state.page + 1, loading: false });
  }
});

Assets Class – Simple assets registration

Another great feature of Chisel is its own class for registering and enqueuing scripts and styles. It handles script localizations and translations automatically, which makes it very easy to use. It can be customized for more advanced use cases by passing extra parameters along with the required one, which is a script handle name. It also supports registering external scripts by specifying an src parameter.

Example app.js script registration with localized data passed to JavaScript:

$this->frontend_scripts = array(
    'app' => array(
        'deps'     => array( 'wp-i18n' ),
        'localize' => array(
            'name' => 'chiselScripts',
	    'data' => array(
	        'ajax' => array(
	            'url'   => esc_url( Ajax::get_ajax_endpoint_url() ),
	            'nonce' => wp_create_nonce( 'wp_rest' ),
	        ),
	    ),
        ),
    ),
);

Hooks and filters

Action and filter hooks are one of the most powerful features of WordPress and we lacked it in the previous version of Chisel. But now, we’ve fully embraced them, giving developers an easy way to extend or tweak the Chisel from outside of the theme.

This great functionality makes Chisel even more flexible and extensible. For cases where you cannot edit the Chisel theme (e.g it was created by someone else) directly the filters hooks come extremely handy. Either using a child theme or via WordPress plugins you can still make use of the best features of Chisel like custom post types, sidebars, assets registration, or a custom Ajax feature by plugging in into the filters provided by Chisel. 

Custom Post Types – Make it easy

Tired of adding the long list of arguments (especially when trying to set custom labels) every time you register custom post types or custom taxonomies? Plus writing a lot of repeated code?

We made it easy with this new wrapper class that handles most of that for you. To register a new custom post type you just pass a post type slug, singular and plural labels and it’s done. You can set any extra parameters for non-standard setups, but by default, the post type is registered as public and with Gutenberg editor enabled. It also updates all labels for you making the admin area of custom post types more intuitive. Easy, right?

Example custom post type registration with custom labels:

$this->post_types = array(
    'chisel-cpt' => array(
	'singular'      => __( 'Chisel CPT', 'chisel' ),
	'plural'        => __( 'Chisel CPTs', 'chisel' ),
    ),
);

Cache – Boost Performance, Deliver Speed

Timber offers caching the Twig files and the data, so it would be wrong not to use it. So we did, and as a result, All of the views in our starter theme have the cache enabled by default. The cool thing is that it is compatible with caching plugins and will not cause any conflicts. By default, it uses WordPress transients API for storing cache and you can change it to object caching if needed.

Ready-made, pre-styled components

The true power of every Starter Theme is ready-made, reusable components and the new Chisel is no different in that matter. You could call this set of components the fourth element of Chisel.

• Swiper js – Chisel Slider component
  
  This component consists of a custom global slider script (JavaScript), which controls all of the sliders and carousels in the project, and a reusable Twig component that is responsible for rendering the HTML structure of the sliders. It is easily configurable by passing the parameters via HTML attributes or using dedicated (specific to the type of the slider that you define) callbacks in
  
  JavaScript for more advanced cases.
  The Slider component supports multiple Swiper modules out of the box, i.e. Autoplay, Navigation, Pagination, Scrollbar, and Thumbnails.

• Header with 3-level navigation
  
  No more creating navigation from scratch. Chisel comes with pre-pre-styled and mobile-friendly 3-level navigation. The navigation has two options: a default dropdown or a full-width dropdown with columns. It also has multiple animations to choose from for the mobile toggle button.

• Accordion Block
  
  For starters, we’ve added a custom Accordion block created using the blocks API. The block is often used for FAQs or any other expandable content. It supports all WordPress blocks as inner blocks, which makes it flexible. With time we will be adding more custom blocks to our Chisel’s blocks library.

• Slider Block
  
  Another custom block we created is the Images Slider block powered by our Slider components. This block uses Advanced Custom Fields for the settings and is a starting block for our library of ACF blocks.

• Pagination / Load more feature
  
  We’ve included a pre-styled pagination component or a dynamic alternative in the form of a “load more” functionality. It’s compatible with any post type and it’s a Twig reusable component. As a developer, you only need to pass the post type name as an argument and define which Twig component should be used as a post item. All logic is set up for you using Ajax requests.

• Spacer Block
  
  We know that Spacer is a default WordPress block, but we modified it to make it responsive with a predefined list of size options that adjust accordingly to a screen size.

• Blog
  
  We’ve done the basic setup of the blog pages and a blog post page including the archive pages. By basic setup, I mean the pre-styled grid and a layout for cases with or without the sidebar as well as the optional comments form, which is disabled by default.

• Other
  
  There are also other small tweaks and enhancements that make the WordPress development experience better, like CSS responsive grids, footer sidebars with blocks support, CSS improvements for native blocks, pre-styled form elements including support for the Gravity Forms plugin, and more.

Wow, this is an impressive bundle of powerful features. It’s truly a fantastic Starter Theme. Do you have anything else up your sleeve?

How about WooCommerce?

Say what?!

Yes, The new version of Chisel now comes with full WooCommerce support.

With pre-styled components and pages, you have the working store out of the box, and what’s more, the styles match the rest of the theme ensuring a cohesive look of the whole website. If needed, you can easily update the styles without the need to start from scratch. The shop page with products grid also integrates with the “load more” feature to give the store a more dynamic, modern, and user-friendly browsing experience.

This is great, I’m genuinely impressed. I bet there is a cherry on top of that delicious cake?

Sure, It has a custom-styled login page 😀

Ha!

(In case you wonder who was asking all those questions it was just a rubber duck, a very curious one 😆)

If you are planning to start your website project and thinking of using a modern WordPress development tools don’t hesitate to reach out to us.