Menu icon Foundation
Wordpress x Foundation use

 

Hi there !

 

I heard about FoundationPress already but I've been wondering... Can I simply have my wordpress website running, add the Foundation files to the template folder and expect to start using the foundation framework coding style (the responsive columns, panel, js etc...) right away ?

Or is it not that simple at all (except from the CSS messy mix it will create) and I must create a whole new template using Foundation (and FoundationPress) ?

 

If you have any docs or answer, please let me know ! PS: I really don't know much about SCSS / Sass / Github btw, if you use those terms, talk to me as a newbie.

 

Thanks a lot !

wordpresscmswpfoundationPress

 

Hi there !

 

I heard about FoundationPress already but I've been wondering... Can I simply have my wordpress website running, add the Foundation files to the template folder and expect to start using the foundation framework coding style (the responsive columns, panel, js etc...) right away ?

Or is it not that simple at all (except from the CSS messy mix it will create) and I must create a whole new template using Foundation (and FoundationPress) ?

 

If you have any docs or answer, please let me know ! PS: I really don't know much about SCSS / Sass / Github btw, if you use those terms, talk to me as a newbie.

 

Thanks a lot !

Ryan Patterson over 2 years ago

Hi Alex,

 

There would be a few things you would have to do to incorporate Foundation into a theme that wasn't built with it. 

You wouldn't want to put the foundation files in the template directory. I would suggest creating a folder just for the Foundation assets (all the files that come with Foundation). 

Then you could technically just link to the Foundation css and js files (I would use the minified versions) in your header.php file, the same way you would include any css or js file. The only other thing you would have to do is to make sure to initialize foundation. That's the easy, non-Wordpress way to do it. 

Normally you would want to enqueue the scripts and stylesheets in either functions.php or some other file of your choosing. 

I tried using FoundationPress a few years back, but ended up going with JointsWP. I feel JointsWP is the perfect starter theme with Foundation 6 built right in. From what it sounds like, it seems like what you are looking for...unless you were trying to incorporate Foundation into an existing theme. In that case, I would still recommend downloading JointsWP and then seeing how it was built. The theme author, Jeremy Englert did a fantastic job building it the Wordpress way. I actually learned some stuff about Wordpress that I didn't know before just by working with his files. 

Also, if you aren't familiar with SASS I would highly recommend you start teaching yourself. Once you learn SASS, you will never want to write vanilla CSS again. When I first started with SASS, I had problems getting the environment setup. It can be a bit cumbersome if you aren't familiar with using CLI's (I sure wasn't). But there are programs out there that can do all the work for you. If you are on a Mac, I would recommend looking into CodeKit, if on a PC, checkout Prepros

I use codekit everyday. I simply just drag my project into Codekit and it automatically watches for changes and will compile SASS, optimize images and minify css/js files automatically, plus more. 

Alex Skalx over 2 years ago

 

Hey Ryan,

 

Thanks a lot for your answer. Since I didn't find any answer about Foundation, I tried to look for a solution with Bootstrap and indeed, there's lot of tutorial about using wp_enqueue_style in the function.php files. And it works perfectly ! Next step, try it with Foundation but I'm pretty sure it'll work all fine... But as you said, using a specific folder with everything in it should avoid a real mess !

You're right, I wanted to use Foundation into an existant WP theme. So FoundationPress and JointsWP weren't a solution, but I didn't even thought of looking of they build it. I'm going to have a look at it !

I have to listen to you and try this SASS thing and CLI stuff... I think it's been a while now, there should be tutorials for real noobs like me. I'll check this CodeKit, never heard of it ! Maybe it'll make it less terrifying ? ;)

 

Thanks a lot !

Ryan Patterson over 2 years ago

Hi Alex,

 

For help getting started with SASS, first you have to setup your environment. You can use a command line interface (CLI) to install all the components you need. This can be a bit confusing if your not familiar with CLI's, node.js, compass, libsass, etc. When I started I felt completely overwhelmed by it, because I kept getting errors trying to follow the setup instructions and didn't know how to troubleshoot, but I also inherited my work computer from developer who had done some weird stuff on this computer before. So I may have had more luck if I had done a factory reset on the computer first. 

 

Anyways, if you want to go the manual setup route, Zurb put out a tutorial video you can find at: https://www.youtube.com/watch?v=JlarIkhBj54

 

Or you can do what I did and just use CodeKit, here is an instructional video on how to use Codekit with Foundation: https://www.youtube.com/watch?v=OIVMcEHaT0I 

You can see how simple it is to setup Foundation with CodeKit. NOTE - in video he is showing you how to create a new project in Foundation, but if you would download a starter theme built with Foundation, all you have do is drag the project folder into CodeKit, and it will automatically start working. 

If you're willing to pay for CodeKit, I would definitely give it a shot. It makes working with SASS a breeze and you don't have to have the technical know-how to setup the environment manually. 

Alex Skalx over 2 years ago

Hey Ryan !

 

Thanks you for these informations, I didn’t check Zurb docs about it.. But I will. I’ve been diving into others tutorials and indeed, it’s not that complicated ! It really help that I’ve got a Mac and ruby is already installed on my computer.

 

The only thing I found disturbing is that I can’t work online with sass. I don’t usually work on local, I put my website online and then I design it, using FileZilla to edit the files online. But it just a start so I think I’ll find a way soon !

 

Thanks again !

Ryan Patterson over 2 years ago

Alex, 

Wait, how are you editing files with Filezilla? Filezilla is just an FTP cleint/server application used to transfer files to and from the server. Are you meaning that you edit the file in a editor/IDE on your computer, then use Filezilla to upload it to the server?

If that's the case then your workflow won't change. Just instead of editing the css file and uploading via FileZilla, you would edit the SASS file in your editor, then upload the compiled css file using Filezilla. However, working locally in the traditional sense (using WAMP or XAMPP) is a much more productive way to work as your not constantly FTP'ing files to the server everytime you want to check an edit. 

NOTE: if you do decide to just upload the compiled css file to the server, make sure to also upload the SASS file from time to time. Just to make sure you don't accidentally download an old version of the sass file, that when it gets compiled, would cause you to lose everything you had done since last uploading the sass file to the server. I made that mistake once, which was all it took for me to never forget again lol. 

 

 

 

 

Alex Skalx over 2 years ago

 

Sorry, I didn't explain that well. I'm using FileZilla to access to my files and there's an option where you can edit your file online (using Sublime Text personally), you save it and it is automatically being replaced by the new file ! This way, I don't have to upload manually every time I make a change... 

So the problem is that, with my SASS file online, the compiled CSS file can't be automatically generated nor updated. Since I have to compile it on my own computer and not online.

I trust you, I'll always update both if I ever work with all this !

Ryan Patterson over 2 years ago

Gotcha. Alright, well best of luck to you!

Alex Skalx over 2 years ago

 

Thanks a lot for your help and all your tips Ryan !

See ya !