Pinegrow WP vs Oxygen Builder

Hi guys, I would love to hear your OWN experience for those who have used the Oxygen web app in the past versus the new built-in Pinegrow for WP, i am mostly interested how it compares in terms of:

  1. Features
  2. Performance
  3. Code cleaness

Also, is it possible to build HTML/CSS/JS-only websites using the web version or do i need the desktop app for these?

Thanks in advance!

2 Likes

Marcio,
I’ve converted 11 of my Oxygen sites to Pinegrow over the last 18 months and couldn’t be happier (shocker, I know). I prefer a local workflow to an online/plugin workflow, but I’ve built sites both ways now and can speak to it relatively confidently.

In short, once you have overcome the learning curve with Pinegrow it’s hard to go back to anything else. And this includes Oxygen, Bricks, GeneratePress, Kadence, and others*.

Features

Pinegrow’s strength (and weakness) is that it doesn’t come with a bunch of pre-made components like menus, dropdown buttons, icon lists, accordions, table of contents, etc. If you want them, you’ll need to build them yourself with HTML/CSS/JS or copy/paste them from any of the gazillions of component libraries on the web.

This takes a bit of extra work at first while you build the library of components that you use on each project, but it pays off in the end since you now have full control over how they work, and you aren’t limited to the controls that Oxygen or the Plugin author’s built. I can’t tell you how many times I’ve wanted to change something relatively simple with an Oxygen component (native or Oxy Extras) and had to jump through hoops because there was no control for it.

Performance

There is no question that a theme or block made in Pinegrow will have better performance than any page builder can offer. Even the most streamlined page builders introduce a performance hit, if for no other reason than they rely on the WP database so heavily.

I actually did a test not too long ago showing a simple page with text, images, and a splash of JS built with static HTML, Pinegrow, and Bricks. The Static HTML page loaded in 235ms, Pinegrow theme loaded in 602ms, and Bricks loaded in 781ms. A real-world test of a high-load, dynamic-data-driven site showed nearly a 35% performance increase from Oxygen to Pinegrow, with 70% less server utilization. It was bananas!

Code Cleanliness

Again, here is another place where Pinegrow shines. It doesn’t add anything you don’t tell it to add. No automatic IDs or classes, no extra DIVs, no default CSS, nothing. Again though, this is both a strength and a weakness, since a lot of those things are there to make life “easier” for people who just want to crank out sites. Personally, I appreciate that a Pinegrow section is just a <section> element with no inner div, and that there are no insane CSS defaults like adding display:flex; to every <div>.

Building HTML/CSS/JS Websites

While it is possible to build the code for an HTML/CSS/JS website with the plugin and copy it wherever you want, that seems like a silly way to work. If that’s what you have in mind, then you probably want to get Pinegrow desktop. As an added bonus, Pinegrow desktop has some built-in CMS-like tools that will really speed up your workflow. For example, you can define and use components in Pinegrow desktop, create templates to apply to each page, etc. Those features are simply helpers to generate the HTML pages and keep you from having to change every page each time you want to update your header, footer, or component.

** The Pinegrow CMS tools also come in handy with some WordPress projects. I’m working on a video to demonstrate that in the next few weeks.

I don’t use Pinegrow for everything (although I probably should)

For smaller sites, especially brochure sites or ones where the client wants a lot of design control, I still use Kadence Theme and Kadence Blocks for no other reason than speed. Every time I do this, though, I get frustrated when I run into limitations and bugs. For example, stupid things like being unable to use 2 decimal places in REM values. Why, Kadence, why??? Also, the lack of a class-based workflow in most Gutenberg products always infuriates me at some point in a project.

I think the sweet spot is using Pinegrow for 80% of the project, and supplementing it with other high-quality WordPress blocks like Kadence, where needed and appropriate.

I’ve stopped using Generate Press & Generate Blocks since I’ve been using Pinegrow. While I truly appreciate those products and love the power they provide, they simply have too many compromises vs. Pinegrow with very little in the way of efficiency benefits. Plus, again, I feel limited when I can’t do simple things like using REMs for text (Generate Blocks only allows px, em, and %), and I can’t use CSS Grid.

I hope this helps!
-Adam

8 Likes

Thanks Adam for the detailed review!

The plain HTML/CSS/JS projects are mainly because of those stubborn clients that are hesitant to use CMS (especially WP) for security reasons and/or speed impact.

I am almost ready to take the plunge to Pinegrow, cheers! :slight_smile:

1 Like

As a new user, the biggest frustration you’ll probably encounter is the lack of a menu builder. Pinegrow’s menu smart action will tie your menu into WordPress, but it doesn’t do any styling or interactions which means that creating the mobile menu button and dropdowns is up to you.

One of the best and easiest resources I’ve found for an accessible dropdown is the Alpine.js Dropdown Component.

I’m also working on a video series showing, from start to finish, how to create an accessible and responsive menu using Pinegrow and the Interactions (GSAP) addon. I had hoped to get the first video of that published next week, but I may need to push it back a week.

5 Likes

Hats off to you Adam for that very in-depth reply!

Apart from the positives already listed there are some negatives such as still not supporting creation of block based themes (i think with latest wp update it is off beta now?)

The only thing close to a “pre built” component you get with Pinegrow is a current year php function. But just surfing around the web you can make most of components work with PG and WP.

Adam also published a video guide on using alpine.js with pg. Getting these types of components to work with PG and WP is much stronger then anything Oxygen or Bricks can offer (though in fairness Oxygen new menu uses alpine.js).

Pinegrow also have some issues with menus that are several levels deep?

And there is a lack of community around the product and not alot of content/guide creators. Apart from yours truly, Adam.

But its pretty nice after you overcome the initial learning curve and unlearning bad habits from traditional page builders.

2 Likes

Thanks guys!

Yes, i just found you (Adam) on Youtube while i was searching for a full course about PG, seems there isnt much out there (or atleast recent ones, only found 4-5 year old full series).

Will take a further look into alpine.js and GSAP, those menu’s functionalities are kind of a must-have in most projects.
Cheers!

@madjedo The latest beta build of Pinegrow generates a theme.json file, which is 80% of what you’d want for block theme support. It works pretty damned well in my testing. Aside from that, there isn’t much Pinegrow could or should do other than create plaholder HTML files for the block theme.

All the heavy lifting for block themes is done by just creating blocks and adding them to WordPress. Once you have the theme the way you want it, you just use WordPress’ own export function to export the finished HTML file so you can include them in your project. (Hmm… it’s easier to demonstrate than to explain in writing…).

Regardless, there is no reason why Pinegrow can’t be used to create block themes anymore other than the fact that they suck. Sorry, was that my outside voice? (In all fairness, I’ve created a few block themes using Pinegrow for clients, and they are fine. I just recommend going the hybrid theme route since full Block Themes don’t have the customizer, and WordPress seems to think that menus should be managed as part of the theme rather than as data. That last point is on the long-term roadmap to be addressed by WP, but it isn’t likely to happen until 2024 at the earliest.

I 1000% agree that the small community is a weak spot for Pinegrow. Funny enough, that’s part of why I started making content to help get more people to use and talk about it.

For a full course on Pinegrow, their Starter Shop Course is really solid. Yes, it’s Woo-focused, but it also covers a wide range of Pinegrow and WordPress topics. Also, it’s free! Maybe @Emmanuel can add that to the Courses page in the Pinegrow documentation so I don’t have to hunt for the link each time I recommend it :wink:

I also have my own mini-course that it specific to theme-building, but I wouldn’t recommend it as an all-in-one “learn Pinegrow” course since it focuses solely on turning a design into a Classic WordPress Theme and doesn’t include any information on how to use the design features of Pinegrow.

@Marcio For building a menu, you can very easily get 99% of the way there using nothing but the Pinegrow Interactions UI. The trickiest part is knowing which roles, actions, etc. need to be set. The WAI Example Disclosure Navigation Menu does a great job documenting all of it though, so you just need to tell Interactions what to do and where to do it. The one challenge I ran into is that GSAP doesn’t have a great way to tell when you have tabbed out of an area, meaning that submenus stay open for keyboard users until an action, such as opening another submenu or clicking a link, is taken elsewhere.

4 Likes

@Marcio I’ve created a Bundle of prebuild, lightweight components like header with menus (with automatic mobile menus, horizontal scroll menus and more), dropdown menus, accordions, tables, often used areas with text and image, footers, pricelists, gdpr areas, titles, overviews and much more only build on pure HTML, CSS and Pinegrow Interactions for a better start in Pinegrow and a faster workflow:

(don’t be afraid of the German website, the code is mostly English)

4 Likes

@Riccarcharias I just purchased a copy. Nice work on the components! I’m surprised I somehow missed that this was available, it would have saved me a ton of time when I created the set I use for my projects.

For anyone wondering, the set appears to have been created with Pinegrow components in mind for regular static sites, but it can easily be used for WordPress sites as well by applying WordPress actions to the components.

2 Likes

Thanks. i will take a look :slight_smile:

Btw guys, can someone please explain the pricing, if i buy the WP plugin on this page - Pinegrow WordPress Plugin - it does come with all there is for Pinegrow, right? The interactions, the Tailwind, the shop builder… I am assuming this by the price tag and the fact that there is no options to choose from in the pricing.

Cheers!

Yes, Pinegrow plugin comes with Interactions, Shop Builder, and Woo. It does not have the static file CMS features of the desktop version, and some features are slightly different, but for the most part, they are the same.

Here is a video I made a few months ago that goes into a bit more detail.

1 Like

Thanks Adam, just took a look at the video, seems pretty much everything i need is on the Plugin version since the missing features are mostly team-based and versions.

The biggest downside i could understand from the Plugin is that it doesnt have componente libraries, this is kinda of an issue, but i guess i can host a dummy WP site just to keep these libraries in it and just copy and paste between projects as needed.

Cheers!

1 Like