Pinegrow Workflow with Hosted WordPress Site

Greetings. I plan to purchase ‘Pinegrow Pro with Interactions and WordPress’ and appreciate your feedback on the following. Presently, I use SiteGround for web hosting, and I have a staging environment set for my web site. I’ve gone through the several Pinegrow tutorials available and seek clarification.

I get how Pinegrow stands as a front-end GUI application that generates HTML/CSS/Javascript/jQuery/Sass/Less/PHP and understand that it provides dynamic visual feedback to changes made either within the GUI and/or within code editor windows. That’s outstanding, particularly as it does so in a less cumbersome manner than I’ve seen with other similar applications.

However, it is my understanding that I first need to mirror my web site (staged site in this case) locally with WAMP, XAMP, Flywheel, etc. Essentially, the workflow requires mirroring the web site, making changes using Pinegrow, which then allows you to save your changes to a locally hosted version of the (staged) web site, and, lastly, exporting the local version back to the remotely host web site.

With WordPress, this additionally requires pulling down the WordPress site’s database. Is there a way around having to mirror the web site locally? I ask this because I use a certain WordPress plugin that allows only one additional staging license. This plugin is critical to my web site’s operational purpose, but I may be unable to activate two concurrent staging environment licenses. I suppose I can always deactivate it on one of the staging environments, but activating/deactivating the plugin across staging environments is not an optimal solution.

I appreciate your feedback. Thank you.

Hello!

Here are a few key points regarding your questions:

  • Pinegrow will allow you to create a WordPress theme from HTML files that you will install/use on a WordPress site.(whether the WordPress site already contains content or whether it is a new creation that you will feed with content later, the concept remains the same. Simplifying to the extreme, it is important to distinguish the theme, which is the " design " of your site, from the content that you will add from the WordPress editing interface.
  • Pinegrow is intended to be used on your computer with local files.

In your situation, the ideal process would be:

  • Retrieve an archive of your current production website to your local computer using dedicated solutions like the Duplicator plugin
  • Load the retrieved site on your local computer using a solution like local.app
  • Start to create your theme with Pinegrow (from scratch or by using an existing HTML template) and export it to your local WordPress theme folder
  • From the Pinegrow preview or directly by loading the local site on your browser, you will be able to see the theme WITH the content from your production site.

When your theme is done, you just have to ZIP the corresponding folder from your theme folder, then use it on your production site (or staging if you want to be sure that everything is ok) like you would do with any standard WordPress theme.

Note: Regarding the issue/problem with plugins licenses with a limited number of installations or even the impossibility to use them on local installations, it is a real plague in the world of WordPress plugins and unfortunately, you will have to invent the best solution yourself, or contact the plugin editor & ask him how to proceed in your situation which is definitely not new in the dev world nor limited to the use of Pinegrow.

1 Like

Thank you for the reply.

…it is important to distinguish the theme, which is the " design " of your site, from the content that you will add from the WordPress editing interface.

Yes; understood. I asked about the underlying WordPress database, because the WordPress version of Pinegrow includes hooks into WordPress functionality, as in using “The Loop” to iterate through existing posts. While designing/coding with Pinegrow (WP version), clearly, Pinegrow minimally will need to execute database read operations to reflect the WP site’s content. Pinegrow allows one to alter a web site’s look & feel, but can it also alter the content that is retrieved via WP database queries and then in turn update the WP database? For example, once it retrieves post content via “the_content()” WP method, can I alter it and have Pinegrow automatically update the underlying database?

To answer your question, Pinegrow will do nothing with the WordPress database (no read / no write).

The preview of your HTML document, modified with WordPress actions (like the loop and so on) will NOT live mirror the actual posts/pages content from the local WordPress.

However, to ease your design process, if you theme project is well configured (see https://pinegrow.com/docs/wordpress/actions/theme-settings/ and https://pinegrow.com/docs/wordpress/actions/page-settings/) element by element, you can import the current content of some elements from the WordPress page/post output into your HTML document.

The imported content is considered as a dummy/placeholder in your HTML document and any modification on this content will NEVER be exported back to WordPress.

For a better understanding of the process, my best advice is that you have a look at our pretty exhaustive documentation here: https://pinegrow.com/docs/wordpress/convert-html-to-wordpress-theme/

Thank you. I will definitely continue to read about Pinegrow, and I appreciate the specific links you provided. I see now that Pinegrow ingests HTML pages and provides a GUI to readily lay out the page visually. What ever content is pulled into PInegrow is already contained in a static HTML page, which is served up by an HTTP web server is dynamically populated after having invoked a GET and/or POST HTTP request, in turn retrieving data via database queries abstracted in PHP code.

The additional Pinegrow WordPress-specific capability (Pinegrow for WP version) provides a GUI to assign values to a variety of WordPress actions and then using the built-in WordPress theme converter to generate a WordPress theme from an HTML page. Additionally, Pinegrow for WP allows one to generate WordPress templates from a “master” template (typically, “index.php”) to create other WordPress content files that in line with the WordPress hierarchy, consistent with those template file types that exist in the WordPress site (e.g., single.php, single-.php, category.php).

Just now having a moment to get in here and read all of this and wanted to try and throw this concept out there.

Think about having two distinct workflows:

  1. HTML template creation
  2. WordPress development

Pinegrow is simply a tool used to create your front-end while integrating PHP functions and it will export the theme package you can use on item #2 above.

Only with actual WordPress development (e.g., using a CLI or phpMyAdmin to modify your database) will you be able to change your output. Pinegrow simply saves you numerous steps in the process, that’s all.

It may be a good option for you to use a different editor for both your HTML template created by Pinegrow and the PHP theme that’s output by Pinegrow in your WordPress wp-content folder, because they are two different parts of the same project.

Make sense?

Yes, and thank you for your input. As I work with Pinegrow, I am beginning to establish a particular workflow. For example, while Pinegrow has a handy UI for HTML5/CSS development, I am finding it quicker to work with HTML5/CSS/SASS directly in its raw form and to supplement that end of development with the PG GUI, particularly when implementing Bootstrap 3/4. For now, I see myself using Pinegrow for WP mostly, but not exclusively, for WP theme development, as it abstracts away much of the back-end WP theme development tedium.

Right, exactly. For us, PG is a good preview tool for code output and is mostly used for the HTML versions of the pre-converted WP templates. We do have to check it with browsers though, as I’ve caught it not rendering correctly before. In most cases, we can use a QA tool like Sizzy to test out layouts across various formats.