We’ll add a CMS to our exported Webflow website using Pinegrow and WordPress as part of the Webflow to Pinegrow series.
Docker Compose File: https://pastebin.com/VbJakqEM
WordPress Required Files: https://developer.wordpress.org/themes/releasing-your-theme/required-theme-files/.
Available WordPress Template Files: https://developer.wordpress.org/themes/basics/template-files/
Transcript
My name is Samuel Gregory and this is the full stack agency. Today we’re going to look into the CMS’s inside of Pinegrow the easiest and by far the most well supported is of course wordpress. I’ll explain other options later on so, let’s just get stuck in first thing we’re going to do is download docker this means we don’t need to install the different technologies needed to run the CMS it also means we just push the… theme files up to GitHub instead of all of the CMS files.
While, that’s downloading the thing to know about Pinegrow is that it wants to make itself redundant if for whatever reason they cease to exist you can still use their tool and you can still edit the files because it’s just a file generator given that this means that when thinking about CMS pango doesn’t have its own CMS we need to provide it and there are two ways to do that monolithic or headless or as I like to call it attached and detached monolithic is where the code that reads from the database is integrated into the code that renders the website headless or detached is where the database is stored elsewhere.
And you use apis to get that data ideally, you still do it on the back end you can do it on the front end but I highly discourage if dealing with SEO, if you’re on a dashboard or anything that doesn’t need to be crawled then you’re fine to access it from the frontend.
This is a big problem of mine with Webflow to use a CMS you need to have a server running and depending on the technology of the CMS will depend on what kind of server you need to run so that’s why we use docker to bring all the relevant technologies together so hopefully after all that docker should be finished downloading so what we’re going to do is define a docker file which downloads all the relevant tech we need so we can get wordpress up and running.
So, what Pinegrow does is, it takes all of your kind of raw html files and exports them into it generates php files from those html files so what I like to do is dump all of my source files into a folder which we’ll do now um and you’ll do the same so you’ll take all of your…all of your dump that one in there like that all of your web flow files and put them into that source right and we can open this now in visual studio code and then the next thing we want to do is create a docker hyphen compose dot yml file and I’ll run through this right now. So, if I take my clipboard I will leave somewhere, where you can copy this um but we’re gonna run through it anyway so the version is the version of the yaml schema.
I guess it can work on different versions or maybe different versions look a bit different if you want to stick with me then make sure it’s 3.3 but I think currently it’s in 3.7 then we need to list out the services we’re going to use and you can name these what you want but um we’ve named this one wordpress and this one db for database so we need two services running um collapse that the first thing is that we want to identify the image that…that service uses and we’re going to use MariaDB.
I don’t know the difference between MySQL and MariaDB but I’m led to believe they’re pretty much identical so we’re going to use MariaDB and then we’re going to ask for the latest version volumes is kind of escapes me a little bit but what… what it seems to do is dump um the data from this kind of folder within the container of…of docker into this location and we defined that as you can see just down here uh which we’ve set as like an empty object so these these kind of files that get generated will be will be put here.
Again don’t really understand it just trust the process um restart always don’t know what that is uh environment variables are something that mysql MariaDB needs to kind of run these this is all local on your machine and even if you do push this up to GitHub the…it..it doesn’t really matter like this is not going to be these aren’t going to be the credentials that can be stored on the eventual live server so closing that back up and then opening a wordpress service we’re going to say this depends on db and again you can see that that relates to that there it depends on it so it’s going to wait until db is up and running.
Before creating the wordpress instance and then the image it’s going to use is going to be wordpress and this in of itself I think is basically an Apache server as well within with wordpress installed on it and we’re going to want the latest version of that ports is..is what because we’re trying to access wordpress from outside of this container to inside a container this isn’t going to be a lesson on docker but that’s the situation docker’s running on 80 now we need to give it a port that we access from outside the points to port 80. um 8 000 seems to be fine if you’re running other things on other ports.
Then, you’re going to want to choose a port that’s kind of free and available to you so you’ll visit this on localhost colon in this case 8000. restart always and then the volumes is interesting as well so what this is doing this is taking a folder from outside of the container and putting it or kind of piping it to a location with inside of the container so we’re going to create a folder called WP-Content or at least yeah we’re going to create a folder called WP-Content and we’re going to put the contents of that folder inside of var www html and then WP-Content there.
Those of you who have started up an Apache server this will ring a bell to you this kind of this file path here like I say that leads me to believe that this wordpress instance is actually running Apache server and so whatever is in this folder is going to go here environment variables once again is just needed for wordpress you don’t have to worry about security with this one and then finally volumes is like I say what uh the database kind of dumps some meta files in I don’t think there’s much more to say on this one.
So, let’s just crack on with docker running so if I open up docker now what you want to do while that’s starting out what you want to do is navigate to your folder if you’ve if you’ve opened up a terminal within visual studio code this will already be in the root of your project or you can just uh cd by going cd and then going into wherever…wherever your your project is located and you want to write docker compose up hyphen d now this will take a while.
I’ve already got this installed but when I hit enter you’ll see it just kind of launches them uh looks like I need to save um that took a second for me but it will take a while for you so sort that out and I’ll run through a few things while…while that’s doing it in the background that’ll download wordpress and set up everything you need to serve wordpress and a database like we define in the docker compose this will run constantly so when you’re done make sure you hit docker hyphen compose down to tear everything down.
All of your settings will be preserved so, don’t worry about that wordpress expects a set of important files for a theme to work you can find that out if you go to this URL I’ll put it down in the description those files are style.css index.php and comments.php and finally screenshot which is the thumbnail used when selecting your theme within wordpress pango takes care of all of these files based on how we define certain areas in our static html files like magic basically understanding the different file types that you can have can be really helpful in planning your website and I’ll leave another link to that below.
So definitely check it out there’s also a few key concepts that help understand wordpress the first is functions.php this is a special file that you can build plugins that happen at certain points like when a user uploads a bunch of images you could run it through some sort of filter or it you can write plugins that happen in certain areas like navigation menus you can also enable and disable features in this file too a common one has been able to upload thumbnails to a blog post next is post types you can think of post types as the different CMS databases.
You have within Webflow there are a few post types you already have access to which you can create specific templates for the most obvious is post and page you can also have custom post types which unless you were just creating a blog you’re going to likely need to create but more on that later lastly is the loop this is a mechanism for outputting post and then within each iteration of that you can output post information like title or its content when docker has finished downloading the containers you should be able to go to localhost colon8000 and see wordpress up and running we’ll ignore that for now while we get our theme set up.
There are two ways you’re likely going to build a wordpress theme completely from scratch or you’re going to be converting a website you’ve already built and as this is part of the Webflow to Pinegrow series we’re going to be converting a website that you’ve already built in Webflow I’m just going to put my uh glasses on so I can see a bit better right let’s have a look here then so if we now open this folder up in grove go on here open project and then navigate to our project the first thing we’re going to do and this will make sense a little bit later on is I’m going to duplicate my index.html file and I’m going to rename it page hyphen home right just forget about that for now just just do that and it’ll make sense a little bit later on.
So, uh yeah just some setup things here um and then hitting back into our index page we have our Webflow project inside of pine grove now we want to activate wordpress and you can do that from the top right here you should have a wordpress panel if you don’t see that then you can go to window show hide panels and you’ll see the wordpress theme builder there so we want to activate um wordpress on this page and we can do that and then it will take us through this setup so let’s just run through this real quick uh project type theme interesting to know that we can build a plug-in but we’re obviously building a theme here.
Theme name is going to be full stack agency or whatever it is that your theme will be called and I’m going to just do the same thing down here for the the slug with with underscores now our theme folder this will be where our theme gets exported right so if we hit that um we come out of our source folder and we start creating so you can see that there’s some stuff being already created here um we’re going to create a folder here and call it full stack agency so we’re creating our own theme folder and then we’re going to dump the files that it generates inside of there site URL will come in handy a little bit later on.
So, what we’re going to do is just put local host code on 8 000 and then the master page we’re going to leave as index.html export options we’re going to let wordpress handle SEO that’ll make sense a little bit later on we don’t want jcrew and it’s up to you if you want to credit Pingrow in the exported files image sizes are a bit weird I’ve never understood how to decide what sizes your website should generate if you do know let me know down in the comments because I have no idea I just kind of leave them as the default and I tend to use where is it large um always but I do my resizing and stuff outside of Webflow because I just you know every website is just going to have loads of different size images all over the place. So, uh yeah my fan’s going crazy right now so hopefully you can’t hear that um so, I just leave that as it is.
Don’t worry about that and then we can just leave the rest as it is so I’m going to just save that and then this should be now a wordpress website what we’re going to do is create what I like to do and it’s quite common on…on some websites is that you might have a common theme or a common template that gets reused for lots of basic pages right that could be a privacy policy page or a blog article page or something like that some sort of page or template that looks exactly the same no matter what the content is so what we’re going to do um we’re going to create a really basic page that all it does is display the header or a heading and kind of the content so we’ve duplicated this index.html file here.
So, we have it, we have we’ve got that reserved a little bit later on what I’m going to do is kind of go into here and delete all our content so we’re left with just the main here and the footer and now I’m just going to build out that page.
[Music] So, you can see here I’ve just built out a page very basic you can design it however you want but what this is going to do that it’s going to every time we create a page within wordpress it’s going to fall back to using this template and put whatever content is in there into this template so we just have a basic basic page template here now we need to bind the actual values to content in wordpress so if we click on this heading here and go back to our wordpress theme builder we want this to display the post title similarly if I click on the surrounding div that I’ve got here we want this to be the post content um and this will basically just replace whatever’s in the post content in wordpress with the elements here so I’ve just saved that and it’s saying that these files are exported.
We can..it’s…it’s warning us that we haven’t properly um correctly exported our file just yet but we’ll explain that in just a second the last thing I want to do is if I click on my surrounding div here uh my main here and if I set this as the if I look for it the site content what this does is everything above this element will be set or created as a header that gets reused on every single page so we we we set this to what our global header header should look like and then everything below it is our footer so um if I just save that again and again it’s just warning us that it’s not still not properly installed.
But if we just look at our files here our exported files go into WP-Content themes full stack agency let’s just pretend you didn’t see those you can see it’s cr it creates a footer which you can see is the just basic code there that acts as the footer we’ve got the header which is everything above there and then you can see our index dot php file is very very simple it just contains this the the code that allows the content to be displayed right. So, very very basic what I need to do now it keeps keeps whinging at me chill out mate um is export the theme and it just tells me that a bunch of files have been created blah blah blah heading back into here.
You can now see that it’s actually created all of the necessary files that um the wordpress needs and uh we should be able to access this within wordpress now so uh on that note let’s head back to let’s actually visit wordpress in our browser because when you when you hit docker compose up it should have downloaded everything and spun up a service now let’s go on to localhost 8000 okay whatever go away uh 8 000 and we should be greeted with the setup screen of wordpress now you want to set this up remember your details because you will need them to log them back in and then we’ll catch up once we’re inside of wordpress.
So, now we’re inside of wordpress we’re just going to activate our theme and get this the current active theme so if everything goes well you should see your theme kind of in our..in our project here and we can activate it. The next thing we’re going to do is go to settings and reading and we’re going to set our home page to display as a static page and the…that page will be just the sample page the wordpress creates for us just to demonstrate it right now if we save that and also go to permanent links this will be how the URLs display and we’ll set that to post name and also save that.
So, I’m going to open up a new tab now go back to localhost 8000 you’ll see that wordpress will load uh our website will load and it’s containing the sample information that you should be able to see in pages sample page get rid of that update that and you can see that it’s updated here so uh we’ve got our index up page our basic theme working inside of wordpress now so we’re going to continue to do this with the other pages and we’ll start with home. So, back into Pinegrow now remember that file that we duplicated well we’re going to go to that and we’re going to set this up as a wordpress page so you just go to page settings here and this will be everything will be as as default here if we save that check that it’s been exported which it has if you go to wordpress here we’re going to go to pages.
We’re going to create a new page and give it a URL of home publish that and then go to settings reading and set our new home page as that home page we save that and refresh this our page template that we saw in what in Pinegrow is being used as our home page so what’s actually happening here well what wordpress does is if we have a php file that has page hyphen home whatever’s page slug matches this name here so in our case it’s home and if we go back to our page um we can see in quick edit I think yep slug because those match it will use this this file as the page template and nothing’s editable at this point because we’ve not set up this this page template to accept data from wordpress so we’ll get on to that in just a second.
But um.. just to explain kind of a little bit about what’s going on there let’s crack on with some of the other pages uh and we’ll do these ones slightly differently let’s start with the about page so once again I’m just going to click page settings and it should set this up as a wordpress page but instead of you might think we would rename this file page hyphen about but what we’re going to do instead of doing that we’re going to leave the file name as it is but we’re going to just going to set the file name that it exports as up here in the top right and I’ve saved that we should see that we have that page about and you can see that being reflected there.
So, popping back to wordpress okay create a new about page and by the way whatever the title here uh is it automatically puts that as a URL slug so I just tend to do that for quick to keep things nice and quick go back here and if we go to slash about you’ll see that it’s using that page template as the template to be used on the theme but what I’m what…I’m seeing here is actually this looks awfully like our default page template that we created from index.php so it seems kind of redundant to create a whole separate page template for the about page so why not let’s copy this content put it inside of the about page uh..within wordpress and delete this…delete this template.
So, it falls back to index.php oh actually before we do that what you’ll see is we’ve got two two footers here we actually have two headings here as well and why that is um the reason why you can only see one heading is because they’re fixed position and they’re just hovering over each other the reason why that is is that we’ve not set where the main content is of this page right so if I freeze these it’s importing this whole page as that theme template and then above and below that is copying in the global header and footer so, what I’ll do is if I set that as site content and re-save that and then refresh you’ll see that the footer and the header that you couldn’t see before has now disappeared. So, let’s get this content inside the about page within uh..within wordpress and we’ll we’ll let it fall back to that index.php file.
If we update that go back into Pinegrow and delete this right, everything’s saved just check our file system so what sometimes happens is that you might see files still lingering around there’s something to keep your eye on so what we need to do within word within Pinegrow we need to clear the theme folder and then re-export it by hitting command-m or just going to wordpress export the theme here so now if we go back into our folder structure you’ll see there’s no page about template here so, we’ve updated this…this page here with the content and so if we’ve refreshed we shouldn’t see no changes here but we change this to just a minor little update there and update that you can see that it’s taking the content from wordpress which is…which is exactly what we want.
And it’s falling back to that index.php template if we now look at the author page once again I’m seeing this as being very very similar to our index.php minus this kind of hero section but what we can do within wordpress is actually enter put in html that it will render as content so if I get this about intro and just copy the code and go into wordpress create a new page and we’ll call it author so that slug is there you can click this little plus here and search html and I can dump my html within there and it will render so I’ll continue this and I’ll insert all of the content correctly and we should be good to go so we publish this and once again this should fall back to the index.php template we created so if we go to author now you’ll see that everything’s rendering exactly as we expected to and just to win once again to approve to prove that it’s taking content from Webflow.
From wordpress you can see that it’s taken that so remove that back so then finally just to keep things clean we can now delete delete this author page this is getting boring now but as you can see reusable templates are worth identified to try and keep things clean and save you time let’s move back onto the home page where things get a bit more complex as we have different elements and a less basic structure so let’s deal with this home page because we have it working in wordpress but none of this content is editable.
Now, I’m not sure how people like to edit um content within wordpress you can do it two ways and if we go back to wordpress on any page you can go to customize here and you can then edit content within this page. I think, I’m not sure of that main content there right so you can you can set it up so that you can change content within this this sort of system.
I really like this that much mainly because as you saw like the main content here isn’t editable from here the other way is obviously just to go into any page and then you can edit content here this way is using what they call custom fields now wordpress has always made this such an ugly awful experience which is why a plug-in called advanced custom fields is ubiquitous within the Webflow wordpress in uh kind of the theme creators.
It just makes working with custom fields so much nicer and once again so Pingrow has us covered for both of those methods so let’s start with customize and we’ll do this hero section here so the first thing we want to do is identify that the wrapping kind of div that encapsulates everything so I think it’s going to be this book hero and then within our wordpress theme creator if we scroll down um and we should see a customizer section we hit that and we’re going to name this home underscore hero and a user-friendly title of hero now we need to click on the elements that we actually want to be able to edit within wordpress so the first one will be this heading and then we’re going to make that a customizer field and we’re going to give this an id of let’s say title and then a nice user-friendly version with capital T um..and then we’re going to be able to edit the content and that’s all good there.
Next one is the link and we’ll make that into a field and the good thing here is that it’s actually picked up that it’s a link and given the ability for us to be able to either edit the HREF of the of the link or the content within it so this will be this will be link text and we’ll name this link text and then this will be link HREF and link h…HREF and then finally we want to make this image editable so we do that and then put image and then put image there so I think that is everything so we need to…it’s warning us we need to export the whole theme.
So, let’s do that…that’s probably because it’s writing stuff to the functions.php file and heading back to our home page and hitting customize you’ll see the hero section has been added to here and now we can just go nuts edit the content there um learn more is fine and then probably make this into like shop or something like that um let’s edit this image upload an image yep that’s the one upload that choose image and you’ll see that everything’s good and we can publish that the second way we can tie user editable content to the website is my preferred method and it involves downloading a plugin called advanced custom fields.
So, we can do that by heading over to wordpress dashboard plugins and searching ACF and activating it so we head into wordpress and go to plugins add new and just search ACF should be fine and it’s going down advanced custom fields if we install that and activate it that’s installed in the system if we quickly just check the file system and go to WP-Content plugins.
You’ll see that we’ve got access to those files and this is exactly what we want because then we’re able to install them when it comes to deploying this on a server later on so that’s really good that’s exactly what we wanted now that we have that installed let’s create some of these fields inside of wordpress so we can edit them it’s a little bit more tedious this method but like I say, I think it ends up as being a much cleaner user interface for the editor so if you go to custom fields and once again add new and we’re going to put this mainly this home agency.
Now, this is going to encapsulate a group of fields that we’re going to be able to edit from within web wordpress so we go here the first one if we look at our if we look down here we’ve got a title we’ve got some text and we’ve got a link this is this is a bit of graphic this is an editable content it’s not an image or anything but we’ve got the title content and then links so let’s just do that we can make a URL or if you know this is going to be links within the pages within….within wordpress and you can actually make this relational again you can’t see it here but you just take a look at the different types and and choose which one makes sense remember to think about the person who will be editing this make use of required fields or even conditional fields and be descriptive.
If you need think of the user interface for the editable content the last thing we want to do is only have this set of fields or inputs available in wordpress on certain pages so if we go here and we set the page equal to home and then we should be able to publish that and if we go to our home page you should be able to see. Now we can edit this type this…this information so let’s go back here and actually update this content just so we have it ready cool so that’s just ready.
We’re not…we know when that’s not being able to be displayed because uh in fact let’s prove it if I just put an exclamation point here update that you see it doesn’t have any exclamation points just the last thing just to what I’m remembering now if we go to custom fields and edit these you just…just take a mental note of these field names here because we now need them coming going into Pinegrow so heading off into Pinegrow and go into that section we want to identify the areas that want to be updated.
So, if we we click on that heading and if we scroll down here we’ve got some special adv custom fields helpers here so if I click that this should now match those ids so this one is title and we want to replace the content now with this area I need to get a bit clever so what I’m going to do is create a uh div just before we go and then put these um paragraphs inside of that div and then I’m just going to set this div to be an adv field I think it was content yet content and then I’m going to set that to replace the element so what that will do is replace this whole div and set the content as it should be there um.
So, that’s that one and then the link here is going to be another adv field and I think this is called link underscore HREF. We want to replace the HREF attribute which is a nice little thing there…and we’re going to add another one here as the link there’s a text or content text that’s called text and I’m going to replace that there.
So, that’s….that if we save that now if we refresh this page and get out of this you’ll see that it’s taking the content from within wordpress and it’s kind of doing that there a nifty little feature that you can do within Pinegrow now is that we can actually scrape the website that’s set um right the beginning if you remember we set our URL we can actually scrape the website and you’ll do this in import content from site and it will go…go away and scrape that content and then bring it in which is exactly what we want there you can see it’s brought in those things so if it’s more complex and you just kind of want to update your themes to look like they do as they’re um rendered then this can be really helpful.
Once again it’s going to get replaced anyway because this is just a sort of preview of that content but um sometimes that might come in handy so things are looking pretty good what I’m going to what I think we’re going to do now is just do a few little miscellaneous things uh such as uh replacing this logo with a logo set in wordpress we’re gonna we’re gonna create a nav menu here and we’re gonna do a little bonus thing with this with this date let’s start with the date uh because what’s happening is I’ve got a bit of JavaScript running that basically checks the date and and makes it into the the current year.
Basically, uh..so, this will always say 2022 in the template but it will just get updated the problem with that is….is that it’s done after page load just a minor thing but we can actually do this with php so if we select that span and then run some php code or you can see there we go I’m going to go into our sort of master template here if I go to set this up as a page but I don’t want to export that page this is just my style guide page where it’s taking all of the stuff from I don’t want to export this page so I’ve just clicked that there so but I still get access to all of these these um helpers.
So, once again php code what I want to do here is create a date function with a capital Y as a string and I want to echo that um…I could replace the element or I could replace the content it really doesn’t bother me and if I save that and then update it it should update through all of my templates then similarly let’s let’s change this uh image to the site uh what is it called site logo here we go so we’ll set that as a site logo that should be able to then be able to update that within uh wordpress we want to be able to we want to make sure that this always links back to the home page so we can do that by I think it’s site link…..link to home I think that’s it.
Yeah, so no matter what our home page is set to this will always link to it so that’s that kind of set up just update that through all the templates and then finally taking a look at this nav if we select the wrapping nav element we can just go here and select menu and Pinegrow will do all the maths maths all of the working out of how you’ve created your Navbar.
You could have used divs or whatever it’s figured all that out for us so we don’t need to worry about any of that the next thing we want to select is which location this is um…which location it is basically so you can set within Pinegrow you can select various different locations which menu um hard to explain we’re gonna select primary and then we’re just gonna once again save that and update all those so if we go back to our site and refresh you’ll see that everything has disappeared. That’s because we’ve not set it up inside of Webflow so the way you get your site logo from uh site identity and then we can select our logo.
So, we’ll go get our logo from our assets upload that there you can see the logo has been added I’ve got a little bit of clean-up to do there probably make this a png so ignoring that if we go to in wordpress we go to appearance and menus let’s give this a name of main menu and we want to automatically add new top level pages and we want to set this as the primary menu location which is the thing I explained earlier.
If we create that menu and then add these to the menu, save that, we refresh now oh something’s wrong okay I just needed to export the theme for whatever reason um…one thing I did also forget is actually within the main set…sorry within page hyphen home set that main as the site content so I was seeing two footers like we did before so setting that as a site content in case you missed it but now I’ve got my menu working. Now I don’t want it to say these things that’s a bit uh yeah that’s not what we want so if we go back into our menu we want this one to say author we want this one to say about.
Actually I think we want to remove this page altogether and we save that menu and we’ve got our new labels there and we’ve also got a custom link here to my community so if I take this URL which is my discord link down in description um community enter menu and you can rearrange them nest them do what you need to do just like that and you can see we’re building up our menu here.
So, when we set up this Pinegrow website we said that wordpress should handle the SEO and the reason why we did that is because we want to use a plugin an amazing plugin called Yoast and you’ll hear about an awful lot add this here search Yoast it’s a free plugin obviously if you need more you should pay for it but if we install this and we should now be able to edit the metadata of each individual page and it will even give us feedback on how good that metadata is because since we selected that checkbox it’s actually removing a lot of the titles and things like that from from our website.
In fact if we just inspect the code here go into our head, I think the only thing that should remain is the title but actually and just flicking through but actually I have in my template um I’ve got descriptions I’ve got authors and all the rest of it so it’s removing those things for us because we set that let…let um wordpress handle it so now we’re bringing it back to Yoast highly recommend installing it and then you can go through each of the pages and update that content as you as you want.
So, I think that..that’ll do it for now um you’ve got a Pinegrow website working on your local machine with wordpress now in effect you can upload this theme file to an already installed um wordpress installation online, somewhere there are some services that you can uh or domain name providers and things like that that have one click access to goes off to um setting up a wordpress server so you can upload this theme file to there and and have a and and have it all working or whatever but what I think that’s left to cover is blog pages and reusable kind of the CMS different kind of CMS you’re allowed to do within um web flow and having those pages render and all the rest of it there could be an e-commerce thing.
But, I think that’ll be later on down the line um but I think this is a good head start to kind of get you up and running like I say what will be next is using CMS entries and really working with the CMS and then we’ll look into actually properly deploying your website to a wordpress installation safely so stick around hit subscribe if you want to just catch this series that I’m doing from from Webflow to Pinegrow and I’ll see you in the next video.