A fun tutorial on converting a Tailwind CSS project into a WordPress theme based on Gutenberg blocks. As a bonus, we will use Pinegrow Interactions to create a slider block and a pricing toggle.
The challenge
This tutorial is the result of a challenge in the Dynamic WordPress group to take a provided Tailwind CSS HTML one-page website and convert it into a dynamic WordPress site, using a bunch of different approaches and page builders, including Pinegrow.
The whole process of using Pinegrow to build the site is recorded, and both starting and finished projects are provided.
A quick overview
Watch a brief overview of the build process and the finished result.
The Pinegrow approach to WordPress development
For those who are not familiar with Pinegrow, here is a brief overview of how Pinegrow is used to create WordPress themes, plugins and blocks:
- Pinegrow is not a page builder, nor a WordPress plugin. It is a desktop app that you run on your computer.
- The starting point is a HTML project, either created with Pinegrow or built somewhere else.
- The project can use any CSS framework: Bootstrap, Tailwind CSS and so on, or no framework at all.
- In Pinegrow, we select various HTML elements and add WordPress actions such as Show Posts, Post Title, Block, Block Attributes and so on.
- Pinegrow then exports ready-made, complete, native WordPress PHP theme or plugin files, and React-based JS files for custom blocks.
- The exported theme or plugin are used on the WordPress site as-it-is, without requiring any additional plugins (of course, if needed, plugins and custom code can be freely used with Pinegrow projects).
Pinegrow vs. page builders
Pros
Compared to page builders such as Bricks, Elementor, Oxygen and so on, using Pinegrow provides important benefits:
- The end result is a theme (or a plugin) that consists of native WordPress PHP files, just as if they would be coded by hand.
- Full control over all aspects of the site – HTML structure, CSS framework, JS code, plugins, and so on.
- Speed of development – if the source project are HTML / CSS files, there is no need to recreate the design with the page builder.
- No plugins are required to run the site.
- Not having to mess around with extra CSS, JS and PHP code snippets to get the page builder to do what we want.
- Top performance – as fast as WordPress can be.
- No security risks from relying on plugins.
- Using standard WordPress UI for editing the site structure and content.
- No compatibility issues with updating page builder plugins.
- It is very easy to create custom Gutenberg blocks that precisely fit to the needs of each individual project.
Cons
There is no free lunch, of course. Pinegrow requires a bit more technical knowledge and getting used to how things are done. That said, it is a powerful tool that will never limit you in any way.
Pinegrow does not come with ready-made interactive components such as sliders, accordions and so on. But, as this tutorial shows, we can use Pinegrow Interactions to create reusable interactive components such as slider block and pricing block – with full control over all aspects of the component. Or, we can use any relevant WordPress plugin to implement interactive elements.
Pinegrow vs. manual coding
Compared to manually coding a WordPress theme with custom React based Gutenberg blocks, Pinegrow takes care of all the difficult parts of the process and allows developers to easily create as many custom blocks (and sub-blocks) as needed, without paying a high price in extra development effort.
What you will learn in this tutorial
This tutorial showcases a bunch of interesting technics that will come handy with any WordPress project:
- Setting up the project
- Using the Design Panel to generate custom Tailwind CSS theme
- Generating special Tailwind CSS stylesheet for inclusion in the WordPress block editor
- Creating custom Gutenberg blocks and sub-blocks
- Creating a general-purpose Slider Gutenberg blocks with Pinegrow Interactions
- Using Interactions to add interactivity to the pricing block
- Animating the mobile menu
What you will need
Pinegrow Web Editor 6.7 or higher is required for this tutorial.
To follow along the tutorial you will need:
- Pinegrow Web Editor 6.7 or newer. A trial version will do.
- Local WordPress install on your computer.
- The starting HTML Flex project.
- Alternatively, download the finished Pinegrow project and explore how features are implemented. Note, to export the WordPress theme, you will have to change the export folder in WordPress -> Theme settings.
Let’s get started!