Introduction

If you are working with WordPress Content Management System (CMS), you will soon realise that you depend most of the time on a page builder to design a site. Some builders have regular updates that bring the most frequently requested features by the users, whilst some don't. To expand upon the limitation of a builder, you would often have to use some add-ons by third-party developers. Why use these add-ons? - It is much easier than coding custom functions you want by hand, which may be susceptible to errors and not easily implemented, especially if you are unfamiliar with the WordPress CMS core ecosystem.

You would realise too that your skills, either in coding or design, have not improved much since. It's no excuse, but generally, our comprehension and prowess on a subject increase when we expose ourselves to a certain level of challenge or complexities. In web development, it is a necessity to do so to stay relevant in the business. The problem with using WordPress-centric tools, you are slowly detaching yourselves from other ways of building a site. There are many reasons why WordPress CMS is still one of the best CMS out there, especially having WooCommerce as an essential e-commerce tool for most online businesses remains a criterion why WordPress is still the CMS of choice for many. However, the tech is changing rapidly; thus, a tool that can cover both grounds (growing your skills + convenience of a CMS) is necessary.

For most of our builds, we utilise Oxygen builder. It has its pros and cons but is undoubtedly better to work with than Elementor or Divi, for example. So if you are a developer, you would like to custom things a little without wasting too much time. That is until we found out about Pinegrow.

What is Pinegrow?

Pinegrow is a web editor for Mac, Windows or Linux (wow!) and a hybrid between WYSIWYG and code editor to create your website faster. The coolest thing is that you can use Bootstrap or Tailwind CSS framework with it, and it has support for WordPress & WooCommerce.

What Does This Mean for Us?

Generally, in WordPress web development, depending on clients' budgets, we either custom build the website with a builder or use a pre-made theme that we customise to suit their branding and business goals. Unfortunately, we don't usually go to the custom theme route, as clients often want to edit their site in the future. Instead, we could convert some sections of the theme into custom blocks and editable in Gutenberg, for example, but it takes so much time and can be complex (depending on what they want to edit) that often it's not worth it to do so. Often, clients want a beautiful-looking website (they will give us some links to some sites from Awwwards) or a design in Figma for us to convert to a site. Creating a fully interactive website is a nice challenge, but building it on WordPress is not very straightforward (unless you found a third-party theme or used some plugins). Then comes Pinegrow, and the process is much easier than we expect.

There are many things to love about it; read on.

Figma to Code

There are many plugins in Figma to convert your design to code. However, we use a plugin by Overlay-Tech to achieve this. We often recreate it using the Bootstrap CSS framework, as it's one of our favourite frameworks, and we have a lot of experience working with it. For example, we would inspect the exported CSS codes from Overlay's Figma plugin with the generated classes for a block/section and insert them into our CSS stylesheet. With Pinegrow, this process is seamless, especially with the Live sync feature between Pinegrow with VS Code; we could easily visually recreate the design utilising the imported CSS classes.

HTML Templates from Envato Elements

Envato Elements is a home for thousands of beautiful web templates you can download and use under its license. With Pinegrow, we could direct our clients to choose HTML templates they like; we'll download them and quickly open the HTML project folder in Pinegrow and start working on it. Elite authors may write many templates and publish them in Envato Elements, whereby it's very well-coded with best practices in mind. So, not only would you learn a thing or two about some tricks and tips on how they create such beautiful templates, but it's much easier to expand upon it further in Pinegrow, such as to create interactions and scroll scenes.
Pinegrow's timeline editor lets you create powerful interactions and scroll scenes with custom animations. GreenSock GSAP powers these animations, providing superior performance and reliability. 
Pinegrow Interaction Mode
The code editor built in Pinegrow was a delight to use. Each time you click on an element on the live editor, the code editor scrolls to the exact HTML section, allowing you to manually manipulate the HTML or insert classes.
Pinegrow Code Editor

HTML Templates to WordPress Theme

When it comes to WordPress, creating production-ready WordPress themes and plugins is effortless. By assigning WordPress actions to individual elements on a page, you can take any HTML page and turn it into a WordPress theme or Gutenberg blocks. Pinegrow helps you by exporting the standard PHP WordPress files, making it a perfect solution for your WordPress requirements. The exported codes work as they should, and so far, we've not encountered any errors with it - much better than coding a custom repeater by hand, for example, which I tend to make a couple of mistakes sometimes. The only caveat is that you would need a local WordPress installation on your computer to export the custom theme from Pinegrow to WordPress. Once in local, we sometimes use LiveCanvas to create or edit pages or Microthemer to customise the appearance of our recently imported WordPress theme.
Pinegrow WordPress Theme Generator

Pinegrow is Excellent, But...

Working offline in local installation is fine until you need to push it to the staging environment on your server. If you use the LocalWP ecosystem by Flywheel, you're in luck, as it has the MagicSync capabilities to push it to their server. If not, it requires you to export the theme and import it to your live staging site. For now, Pinegrow cannot sync to your server via SFTP within Pinegrow. We hope this will change if the developers at Pinegrow decide to release a dedicated Pinegrow WordPress plugin. However, this is the only issue if you're developing on WordPress. Otherwise, when working on a Pinegrow project, you can use Git similarly to any other project. A tip, create a repository and push your changes to it. The easiest way to do this for most people is to create a GitHub repository, clone it onto your local server, and keep your project files within that folder. 

You would also hear many people complaining about the UI and UX of the software. For us, it's a hit and miss. Some items are easier to access within the software, while some require more clicks than necessary. It's a subjective matter, but you can always customise the look of the internal tabs within the Pinegrow web editor. So we made it look very similar to Oxygen as we are used to it.

Conclusion

At Praxis, we are delighted that we found Pinegrow. It certainly has changed the way we work with WordPress. Although, if you're looking to consolidate or organise the content on your WordPress website with Pinegrow, it's essential to understand how WordPress functions at its core. The WordPress Template Hierarchy is crucial for anyone wanting to learn or further their WordPress skills. Having a thorough understanding of the hierarchy is key to unlocking the full potential of WordPress.

We sincerely hope the team behind Pinegrow will continue to develop this software, and we're excited to see what other new features they will bring for us throughout 2022!