Starting out with Pinegrow

[MarkWill]

I have been looking at Pinegrow for a long time (not active use – just a remote curiosity). But I finally purchased an annual subscription and now I set off on my learning path. I have absolutely no idea if this will pan out!

Let me first start with some context about me and my objectives.

• Old guy (started with punched cards!) who set up my first web site in 1995.
• Can be pretty technical (and enjoy that), but also need to run my business (just a single web site, though I run a few others for fun).
• I have my own plugin (for my own business) and familiarity with CSS, HTML, PHP, Javascript, SQL, etc. Important: I don’t use these every day, so get rusty!
• My site, over the years, has transitioned from Elementor (sorry!) to Oxygen and now to Bricks.
• I run my business on WordPress, WooCommerce and the like. I have no immediate plans to switch away, but these always feel like we’ve stretched and pulled a blogging platform in extraordinary (and often unfortunate ways). I am interested, long term, in potentially moving away from WordPress.
• I have little-to-no interest in Gutenburg, FSE, etc. I hope I can keep it that way and not feel constrained.

I could add more but hopefully that sets the stage. So, to my Pinegrow questions.

• Are there non-Tailwind docs or vidoes about creating landing pages in Pinegrow? A good deal of what I do uses Bricks templates, etc but I do have a reasonable number of one-off landing pages.
• How easy/straightforward would it be to use something like Core Framework? Is there something about using such a framework that is philosophically or technically contrary to Pinegrow?
• I see areas where Pinegrow is accepted as being weak. Menu design and implementation is one example. I am aware that I can pretty much build anything I like at the HTML/CSS/Javascript level, That’s good, but also a reason I want to use something like Pinegrow (to AVOID having to create stuff like this at “ground level”). Accessibility and responsive design are two examples of building such a menu that are doable, but would take me an age to feel comfortable if I do myself. Are 3rd party solutions generally simple/easy to drop in place?
• I am SUPER interested in creating Vue.js-based experiences. At a high level, does this create any issues (with Vue Designer) against a WordPress backend? This is for a narrow set of protected (member only) pages, with the rest of the site being regular WordPress.
• This is a very specific but important issue for me. How easily can I leverage WPFusion for content protection, at the backend? I won’t go into the details here but WPFusion is front-and-center of much of what I do and I need to be able to leverage it easily. I don’t yet know what that entails.
• I am very attracted to the notion of “WordPress isolation” i.e. learning skills and creating designs so that one day I can switch to some other platform. But I see TONS of stuff around Pinegrow with WordPress. That’s good…but it’s not clear to me how far I can go WITHOUT WordPress.

Best regards,

Mark Williams

[adamslowe]

@MarkWill

WPFusion

Hey Mark, I’ll take a stab at the questions I can answer and let Pinegrow take care of the rest.

Q: Are there non-Tailwind docs or videos:
A: I have a video on how to work with CSS in Pinegrow, and the Pinegrow docs has a great section on Styling with CSS. There isn’t anything specific to landing pages since it’s all just HTML and CSS. If the landing page is inside WordPress, I would just export the layouts to one or more blocks (as a block plugin project) and add them inside WordPress the way you would any other block plugin.

Q: Using Core Framework or other WP Frameworks:
A: There is nothing contrary to Pinegrow since the application just sees the frameworks as another set of stylesheets. The Pinegrow Live Preview video I made a few weeks ago shows the easiest way to make them work together. But, if you want, you can also directly reference the Core Framework CSS file in a similar way to how I’m doing it with ACSS in this video. (https://youtu.be/MZ-7XHAJHV0)

Q: Pinegrow’s perceived weakness regarding components.
A: Pinegrow strives to be as non-prescriptive as possible, and it was a conscious decision on their part not to include helpers or wizards for components like menus, sliders, tabs, etc. (despite my loud whining and begging). Their reasoning makes sense, especially since standards change so often. They see their tool as a power drill, not as an Ikea project. The power drill helps make the process easier than using a hand drill, but it’s not going to hand you a bunch of pre-made pieces for you to assemble yourself. I personally use Alpine components for a lot of things since they are well-made, accessible, and easy to modify. The issue with them is that they are built with Tailwind, so I end up re-writing the CSS myself for non-Tailwind projects.

Q: Vue designer and WordPress.
A: This is something I haven’t played with much. Maybe @TechAkayy can chime in here.

Q: WPFusion integration.
A: As long as WPFusion supports Gutenberg blocks (which it seems to do), you should be okay. There is nothing special or proprietary about the blocks created with Pinegrow.

Q: Working without WordPress
A: Pinegrow got started as a product for regular HTML/CSS and, if I’m not mistaken, has a lot of Dreamweaver refugees. There is lots of documentation on the Pinegrow site about using it to build regular HTML sites, and I have one video (so far) on how to use the Pinegrow CMS features. Pinegrow CMS Overview – Please note, Pinegrow is not a CMS in the classic sense. It does, however, have some CMS-like features that make it incredibly efficient for building and managing static HTML sites.

[MarkWill]

Awesome. Thank you, @adamslowe.

My gut says that thinks will work well here. But there’s one aspect that worries me.

I understand that Pinegrow gives me the ability to create themes i.e. not a page builder. But as someone who has no interest or experience with “blocks”, this worries me.

@adamslowe

There isn’t anything specific to landing pages since it’s all just HTML and CSS. If the landing page is inside WordPress, I would just export the layouts to one or more blocks (as a block plugin project) and add them inside WordPress the way you would any other block plugin.

If I am understanding correctly, that seems like a rather cumbersome workflow just to edit the design of a single page. Is there no way to edit pages (not the theme) directly?

Ironically, I would imagine that virtually all landing pages I create will be “standalone” in the sense that they don’t NEED to interact with WordPress to render the page. There may be something on the page (like a signup button, etc) but, beyond that, I almost see these as completely isolated from WordPress. I wonder if that might open up some more doors, in terms of this scenario.

Of course, there’s every chance I misunderstood!

Thank you again.

[msguerra74]

It’s my understanding that Pinegrow is for building new things, or updating existing things when you have access to the source code. I don’t think it’s something where you can target some existing WP site, for example, and update the styling. Although, I’m sure you can kind of do that manually by creating a stylesheet that’s used to override existing styles, but you’d still have to access the site and be able to upload the stylesheet you created. It seems like a long round about way of doing something you can do in WP directly by either creating a custom CSS file inside the existing theme, or even using the Customizer CSS panel.

I’m not sure if this is remotely close to what you’re asking, but for me, I think of Pinegrow as a code editor that allows me to create brand new static sites or WP themes and blocks with helper functionalities for both. I mean, you could do everything in a standard code editor, but having the options to quickly add WP actions, GSAP interactions, work with TailWind, etc… is what makes it worth it for me, so I don’t have to manually do everything every time.

[adamslowe]

I’ll echo most of what @msguerra74 said. Pinegrow isn’t a page builder and it isn’t designed to edit WordPress pages. That’s what the WordPress block editor is for.

If we take Pinegrow out of the equation and ask the same question about core WordPress I think it become a bit more clear.

“How can I create a landing page with a block theme or a classic theme?”

The answer is to create a theme template that is blank except for the piece that shows the content section of the page it’s assigned to. Then, you use that template on your page and construct the landing page with blocks using the block editor.

If you are using an block theme, the only thing Pinegrow does is help you to make the blocks that you load, so you aren’t limited to the core WP blocks or other 3rd part block libraries. If you are using a Pinegrow-built classic theme, then you can also create that bare-bones template inside Pinegrow.

What you don’t want to do, however, is use Pinegrow, or any other tool, to build a HTML file that you drop into WordPress, thereby circumventing the entire CMS.

[MarkWill]

Thank you @adamslowe and @msguerra74. I really appreciate the comments.

Yes, I understand and accept the points made. It is a bit frustrating that Pinegrow’s wealth of features aren’t readily available to design a simple, one-off page (after all, it’s just static HTML and CSS :)). But the reasons you mention make sense.

What is less joyous to me is the idea of having to use the block editor! My very informal looks at this have resulted in me having absolutely zero interest in this. But perhaps I just have my head in the sand and have to finally bite that bullet, at least in assessing whether this - alongside Pinegrow - is going to be a part of my approach.

I really don’t fancy getting into this…but we’ll see

At this point, I am getting more comfortable understanding the approach and strengths of Pinegrow but I am not yet clear on whether it is right for me. Time will tell.

Thank you again.

[MarkWill]

By the way, @adamslowe, a question about this…

“What you don’t want to do, however, is use Pinegrow, or any other tool, to build a HTML file that you drop into WordPress, thereby circumventing the entire CMS.”

Devil’s advocate…why not?

My landing pages are almost entirely static (in terms of how they are served), I rarely want to make changes, need nothing at all from the WordPress database and so on.

So, why do I need them to integrate in any way with WordPress.

For example, I can create a myfile.html file into my server and NGINX will serve it. And it will do so remarkably fast, precisely because it doesn’t invoke WordPress in any way. If I style myfile.hmtl, then what am I missing?

All of which leads me to ask why you feel it so important to avoid circumventing WordPress for these type of pages?

[TechAkayy]

Welcome to Pinegrow & Vue Designer @MarkWill!

@MarkWill

• I am SUPER interested in creating Vue.js-based experiences. At a high level, does this create any issues (with Vue Designer) against a WordPress backend? This is for a narrow set of protected (member only) pages, with the rest of the site being regular WordPress.

You can certainly use wordpress as a headless cms and build your front-end as a Vue app with Vue Designer.

As there is a clear separation of concerns (backend vs frontend), your Vue app simply fetches data from the headless cms (it can be anything, not just wordpress) simply via REST api calls.

@adamslowe

Q: Pinegrow’s perceived weakness regarding components.
A: Pinegrow strives to be as non-prescriptive as possible, and it was a conscious decision on their part not to include helpers or wizards for components like menus, sliders, tabs, etc. (despite my loud whining and begging)…

As Vue Designer is built on top of the Pinegrow Web Platform, it’s also non-prescriptive and let the user choose from the numerous rich, interactive responsive, accessible component libraries in the Vue ecosystem such as Vuetify, Quasar, PrimeVue, Nuxt-UI, Shadcn-Vue, etc.

@MarkWill

I understand that Pinegrow gives me the ability to create themes i.e. not a page builder. But as someone who has no interest or experience with “blocks”, this worries me.

I’m a newbie to Wordpress world, Adam’s tuts has introduced me to wordpress, very thankful to him. As a matter of fact, I haven’t used any page builders as well, so my reply is pretty much wordpress-agnostic

@MarkWill

Ironically, I would imagine that virtually all landing pages I create will be “standalone” in the sense that they don’t NEED to interact with WordPress to render the page. There may be something on the page (like a signup button, etc) but, beyond that, I almost see these as completely isolated from WordPress. I wonder if that might open up some more doors, in terms of this scenario.

I might be wrong (please correct me if so), but looks like you are pretty much working on landing pages without much reliance on wordpress, and when you do, you are using it more as a headless cms where clients can work on.

I did try building a simple Nuxt app (Nuxt is a Vue metaframework) for a fictional cafe couple of months ago, using wordpress as a headless cms; frontend with Nuxt, vuetify components, tailwindcss for styling. Live demo here (its very basic, got distracted with other todo items) -

the ai cafe

The wordpress instance runs locally using local-wp, holds the cafe’s menu data as ACF fields, I develop the app in Vue Designer by making rest-api calls. Once done, I built it as a static site, deployed it to netlify.

I’m suppose to make a video tut on this (no pressure - talking to myself), hopefully soon, especially given the cwicly debacle! Some screenshots at the end of this reply the community’s eyes.

Working with Vue Designer using a headless cms (wordpress, and more) is a very different workflow:

• design your pages with live data (via REST api) broken down into Vue components,
• once ready, bundle them into a bunch of static pages (ssg) that can be deployed to a static hosting/cdn. For those dynamic parts, this static site will talk to the headless cms (wordpress, and more) instance via REST api calls, to submit a form, or fetch fresh data.
• deploy the headless cms instance where client could amend the cafe menu, add new menu items, refer to form submissions by their users etc, via the wordpress admin panel.
• when client adds a new menu item, use webhooks to detect this in netlify, re-built the static site, auto-deploy, ci/cd, etc. Platforms like netlify & vercel have made this really a great experience.
• an alternative to static site, would be to build and deploy it as a server-rendered app, where the previous step is not required, fresh data is server-rendered.

Now, the same site can be built and deployed as a wordpress site. The workflow with Pinegrow would probably look like this (don’t count me on this):

• design your theme with live preview, with blocks
• once ready, export the theme, and deploy it as a wordpress site. Use the block editor from the browser.
• deploy the wordpress instance where client could amend the cafe menu, add new menu items, refer to form submissions by their users etc, via the wordpress admin panel. - same as above -
• when client adds a new menu item, as the site is a dynamic app, it will use the fresh data as it’s server-rendered.

One day, I wish to build this too :-), thanks to @adamslowe’s amazing wordpress course!

@MarkWill

to design a simple, one-off page (after all, it’s just static HTML and CSS :))

This sample site in fact does build into a bundle of html files and assets (js/css).

Note, Vue Designer is quite robust, but still young, and evolving very fast There is certainly a learning curve, if you are new to the Vue world.

[adamslowe]

@MarkWill

Devil’s advocate…why not?

My landing pages are almost entirely static (in terms of how they are served), I rarely want to make changes, need nothing at all from the WordPress database and so on.

So, why do I need them to integrate in any way with WordPress.

Technically, there is nothing stopping you from doing it. From a management and maintenance perspective, it has the potential to cause issues down the line. (I’ve inherited more than a few sites where this was the case).

Here are a few examples of where things can go wrong.

• backups: most WP backup programs don’t grab the entire directory structure. They just grab the database and WP-content folders. You can, of course, add other folders in most software so make sure you do that.

• links: this is the big one. WordPress stores database references to your linked posts and media, not href links like we see in html. When something gets moved, it’s not an issue since the db takes care of it all. However, anything statically linked like an html file will break.

• SEO: none of theTechnical SEO stuff you do in WordPress will apply to the static files. You’ll need to manage all your own markup, which can start to get quite cumbersome. (It’s more than just meta descriptions and meta titles — think fb images open graph, sitemaps, etc.)

• expectations: this isn’t so much a problem for you, but it is for “the next guy.” When someone looks at a Wordpress site they expect everything on the site to be managed by WP, not by a mixture of WP, static html, a little drupal sprinkled in, etc. it’s usually best to keep different platforms on separate subdomains. For example, your landing pages may live on lp.my domain.com, keeping my domain.com clean for the main site.

There are others, but I think you get the point.