How to create/style wordpress pages in Pinegrow?

Allright, this might seem like a silly question but I am a newbie here.

I searched the docs but couldn’t find it.

How do I create and style the single wordpress pages?

For example let’s say I want to have these pages:

  • Home
  • About me
  • Contact me

How do I create them in Pinegrow?

Currently I was using Oxygen/Bricks builder. In WP Admin menu I would just go to pages → create new page and then if I want to → style it in the Oxygen/Bricks builder.

What does the process look like in Pinegrow?

Thanks in advance for any advice.

Keep hold of this page:

This is the WordPress hierarchy. You create the various pages on site in the same way as you did with Oxygen/Bricks and the template files you create in Pinegrow will be used to render them.

Thanks @sitestreet

Is there a video tutorial somewhere?

I am honestly lost at this.

Yes, there are lots at https://www.youtube.com/@pinegrow.

Be prepared to put the time in and get your hands dirty. Building a custom theme with Pinegrow is much more ‘dev’ than using a page builder like Oxygen or Bricks. But the benefits are great.

Well that is the thing. I watched the theme creation process with Pinegrow videos. Either I am blind to it or I can’t see it anywhere.

All I see is templating.

I get templates.

However I want to create and style the individual pages in Pinegrow.

Hmm, this makes me wonder why you’re using WordPress, then. WordPress is completely made up from templates.

If you want to build for WordPress and create each page in Pinegrow then create them as page-{slug}.php (eg. page-about.html will create page-about.php by Pinegrow and can then be browsed by going to yourdomain.com/about) and don’t put anything dynamic in the page. It will then just render all the static content.

It’s not the best practice to create and style pages directly in PG for WP, but it can be done.

For example, if you want to create a page for your About Us page the slug for that page would probably be about-us, so you can create an HTML page in PG called page-about-us.html, and that template will override the standard about us page that would normally be created from the page.php or single.php template. In my example above, page-about-us.html exports as page-about-us.php which is the highest level in the WP template architecture.

Thank you. You said that it is not the best practice to create and style pages directly in PG for WP.

What would be the best practice then?

These days it would be better to use PG and create Gutenberg blocks with the custom styles you’d like to use on that page. This would be better for allowing a client and/or team members to update content directly from that page’s WP admin area. If you hard code the page in PG as I mentioned above the content can only be changed in PG and the theme would have to be updated anytime you make a change to the page in PG. Also, the admin area for that page in WP will be blank. So if you’re the only person that will be updating that page and you don’t mind uploading the theme to the WP site anytime you make a change then you can safely use the method I mentioned above.

Yes @jonroc I would like to do it the way you are explaining.

What I don’t understand is how to create a single pages like I would do with Oxygen or Bricks builder and style them with PG gutenberg blocks.

I don’t know if I am explaining my problem very well…

Basically, could you explain a Step by step process how would you go about creating

  • About page
  • Contact page
  • FAQ page

I think I would understand it right away. Also I have a feeling that it is easy to do but I am just missing something.

First, you create/style the blocks inside of your PG WordPress Theme. Personally, I create a page called a_blocks.html and I make all my blocks on that PG page. Then you export your theme and install it in your WP website under Appearance → Themes.

To use the blocks you created inside of PG on your pages inside of Wordpress search for the custom blocks by clicking the blue plus button on the top left of the WP admin page. That is it in a nutshell.

This seems like a very complicated approach to me. There must be an easier way.

The first issue that you have here is that you’re thinking that Pinegrow is a Page builder like Oxygen. It’s not. Pinegrow is an HTML, CSS and JS editor that just happens to be capable of creating WordPress Themes and Blocks that can be used in the Gutenberg editor.

What this means is that your first task is going to be to decide on whether you want to use a third party theme and then go on to create Blocks that can be used within it or to start from scratch and create your own theme and styling. Given that you’re coming at this from Oxygen which is not a theme and to which you would add your own styling the logical approach for you would be to create a WordPress theme to start with.

This really isn’t that complicated a task and in the process you’ll learn an awful lot more about WordPress and its internal workings than you’ve previously needed to known when using Page builders like Oxygen.

There’s a mass of information on how to do this spread throughout the Pinegrow documentation and videos on their Youtube channel. You’ll probably find some of the videos that Adam Lowe has produced ( (2) Peak Performance Digital - YouTube) very useful and I’ve written up some of my first forays into this field that you’re embarking on here.

As has been mentioned in other replies to you the important point that you need to grasp is that a WordPress based site itself is built on the back of a wide range of templates. You’re going to have to recreate the correct templates in a custom theme and then when you go to create your desired pages from the WP Admin dashboard using the Gutenberg blocks your content will be rendered by those templates that you created.

This may sound terribly long winded but it’s really not that difficult. Accept that it’s going to take you a little longer, at first, to see tangible results when you use Pinegrow for the first time. Just be patient. You will be successful and when you see your first success I can guarantee that you’ll be really pleased with yourself. More importantly you’ll have given yourself the confidence that you can do this.

2 Likes

@Dom Thank you for a response. I took a look at your articles in GitHub.

I still have a hard time understanding the process of creation pages and content for them.

I managed to somehow do it in Pinegrow but I don’t know if it is the right way.

In all of the tutorials, I didn’t see a glimpse of what the actual easy page like about us, contact, etc is created.

Everything is about templates. I get that. But once I understand templates, I want to create the content for those pages…

It seems really really complicated without an easy step by step instructions to me.

Well, the content is done though the CMS, not with Pinegrow.

So for example, when you say, I want to create :

  • About page
  • Contact page
  • FAQ page

You literally have to create these pages from the WordPress interface and THEN assign them a specific template (which you will have created with Pinegrow) if you want.

The same goes for the menus. To be able to see menus on your WordPress site, they must exist. And again, these menus are created from WordPress. Not from Pinegrow.

Then from Pinegrow, you can create templates to display these menus (using Pinegrow’s smart actions)

So there is no way to create a content on those pages with Pinegrow?

Yes, you can definitely decide to create templates, associated to the pages you will have created in WordPress and which will contain static content.

It’s not a bad idea (in terms of optimization) to use static content to display content that you know will never change.

For the rest, WordPress is a Content Management System and if you decide not to use the features that make it the world’s #1 content management system, a static site may be more suitable for your needs?

1 Like

Hey @DevTomi,
As @Dom said in his comment, I think most of your frustration stems from you trying to use Pinegrow like you would a page builder such as Elementor, Oxygen, or Bricks. Pinegrow isn’t a page builder and isn’t meant for you to use that way, where you both style and enter your page’s content. It might have a visual builder interface like a page builder, but it most certainly is not one.

I’ve created two different videos about this topic, here and here.

As some others have pointed out, Pinegrow can be shoehorned into working the way you describe, but it’s not meant to be used that way.

Remember, Pinegrow is designed to create Gutenberg Blocks and/or WordPress Classic Themes. Those are the building blocks of your site, not the final place where you enter content. Put another way, think of Pinegrow as the tool that you would use to build a theme like GeneratePress or blocks like Stackable. Those themes and block plugins don’t have your content baked in. They just give you the tools for you to use inside WordPress, where you can enter your content.

If the thing you are looking for is to create pages visually like your Home, About Me, or Contact page, then you probably are better off using a page builder and not Pinegrow. If you want to create blocks for you to add to those pages and enter content in, or templates to style the look and feel of those pages, that’s where Pinegrow shines.

2 Likes

I want to thank all of you who responded to my question and helped to better understand how Pinegrow works.

I finally seem to get the hold of how to proceed.

@adamslowe So if I understand it correctly. The first thing would be to use Pinegrow to build a Wordpress theme with all the templates.

Then, if I would like to add a content in, I should build gutenberg blocks with Pinegrow and then from the WP Admin, insert those gutenberg blocks into the relevant pages?