# Development using Roots **URL:** https://discourse.roots.io/t/development-using-roots/72 **Category:** archived 🗄 **Created:** 2013-08-07T09:24:13Z **Posts:** 50 ## Post 1 by @iagdotme — 2013-08-07T09:24:13Z I know that there are plans afoot to produce tutorials on how to use Roots and to highlight best practices. I am a massive fan of Roots and have used it in all our WP projects for the past 2 or more years. However I know that my current way of working is quite clunky and old fashioned. Without wishing to jump the gun with the tutorials, I was wanting to highlight the system I currently use and ask if there could be tutorials or help in moving forwards. When I start developing a WP website I create 3 installations at [domain.com](http://domain.com), [dev.domain.com](http://dev.domain.com) and [staging.domain.com](http://staging.domain.com). I start work on the site at [dev.domain.com](http://dev.domain.com). Once the site is ready to go live I clone the dev site to [domain.com](http://domain.com) and [staging.domain.com](http://staging.domain.com). Currently I use Dreamweaver (just the code editor) or Notepad++ on Windows and use FTP to upload/download changes. I’ve read loads about how developing locally is the way and to use version control. I do see the advantages, but I’ll still need convincing- basically because I’ve got used to my way of working (isn’t the comfort zone great?!) However I do want to learn. The problem for me is that most tutorials tend to be fairly advanced (I am not against using command line tools, but they it does scare me a little) and they are for development using a Mac. I’m a Windows user, so that tends to complicate matters. From what I have read, I should be using Git (for version control) and Capistrano, WP Skeleton, WP Stack, Vagrant, Chef, Capistrano and Composer. Quite what any of those mean I don’t know! So, is there any hope for me? I hope so and I am sure I am not the only one! I’ve managed to get my head round Roots despite it being (IMHO) for advanced users. Thanks for listening! And thank so much for building Roots- it has transformed my web development life and we have some very happy customers at the end of it. --- ## Post 2 by @swalkinshaw — 2013-08-07T16:31:59Z I’ll probably going more in depth later, but just to start with, forget about all the buzzwords you may have heard us mention. Yes, they will improve your development workflow but it won’t help you to get caught up in the hype of them all at once. One day you’ll want to start learning ONE at a time, but just ignore them for now. There’s only 1 thing you NEED to start doing right now: use version control. I don’t mean this to sound derogatory, but to be considered a professional programmer you should be using version control. It’s a requirement at this point and there’s no excuse not to use it. Seriously, after you read this, go read some basic Git documentation (or another VCS if you want) and then go into ALL your projects and run: ``` git init . git add . git commit -am "Initial commit" ``` That’s it at a minimum. Then you should look into backing up that Git repository somewhere. Bitbucket offers unlimited free private repositories. If you do nothing else, at least do that. edit: And keep committing all your changes into VCS once you’ve done that. Every single change with a nice description commit message. It’s not that much extra work and it will save you so much time (and your ass) over the course of development. --- ## Post 3 by @swalkinshaw — 2013-08-07T16:47:43Z Next point: using Windows. There’s a reason most dev tutorials are targeted at a \*nix based OS and that’s because they’re better for development (for anything non-Microsoft related). Most dev tools are built for \*nix and although a lot can work on Windows, it just makes things more difficult. That being said, it’s perfectly fine to code locally on Windows. However, most websites (especially WordPress based), end up being hosted on Linux servers. So if you’re developing on a local Windows stack like MAMP or whatever (local Apache and MySQL), and then deploy your code to a Linux server, you’re doing yourself no favours. You want all your environments to be identical if possible and you will run into problems the further you get away from that goal. A popular dev workflow is to use Windows as your main OS but have a linux virtual machine where you do your actual coding. Just keep in mind that anyone who has ever used Mac OS or Ubuntu or whatever started with the exact knowledge and experience as you. Every one has learned it the same way and that’s simply by using it. --- ## Post 4 by @iagdotme — 2013-08-12T19:25:41Z Thanks for your reply. When you say \*nix based OS (which I assume you mean Linux and Mac flavours) are “better for development”, what do you mean? Is it because they are going to be very similar to the environment on the server? Currently I don’t develop locally. I know this will sound totally awful to you, but I make changes, FTP up and view on the dev or live site. In order for me to move over to local (and so be able to do version control) I’ll have to be able to set up all our sites locally and that is going to be a massive shift. Also, when I test my site locally, how do I then push everything to the dev or live site? It sounds like it would be a complete pain to push the database changes as well particularly when it comes to the paths to media files which tend to include the domain name as well. It also sounds like a lot of work if I’m only making minor changes. I could use a Linux virtual machine, but then I wouldn’t be able to use my Windows software. Looks like I have a lot of learning to do! --- ## Post 5 by @treb0r — 2013-08-12T19:47:07Z Hey, As a matter of fact, if you use Vagrant + puppet to set up your Virtualbox VM on Windows, you will get to use all of your Windows tools to work with code hosted on your virtual linux server. It works by utilising the shared folders features of Virtualbox, which allows you to access the files in the VM through the normal Windows filesystem. That may sound mad, but it is certainly worth looking into. --- ## Post 6 by @swalkinshaw — 2013-08-12T19:56:34Z I meant that mostly because way more tools are available, and specifically made, for Linux + Mac. About version control, it sounds like you still _write_ code locally, then FTP the file to a remote server. Correct? You can still download the entire codebase to your local computer (if you don’t already have it) and create Git repositories for them. Then at least save the file locally, commit the changes to your repository, and then FTP the file up remotely. Then at least you’d still have a proper version control repository with commits for each change. Or are you actually just editing a file straight off an FTP server and when you save it, it sends it back to the remote server? Because you should get away from that ASAP if that’s the case. --- ## Post 7 by @swalkinshaw — 2013-08-12T19:58:37Z We’re going to be releasing a full WP stack setup including Vagrant for a Linux (Ubuntu) VM soon. And us Roots people have been using it for a while _writing_ code locally. The folder/files are shared with the VM so it’s all seamless. Technically, it’s also _developing_ locally as well but the entire dev setup is on the VM other than our local code editor. And it’s not mad at all. Actually a great way of doing things. --- ## Post 8 by @treb0r — 2013-08-13T11:41:51Z Sounds great. Seems like you guys are really taking roots to the top. Thanks for all of your efforts and thanks for sharing such a great tool :wink: --- ## Post 9 by @halukkaramete — 2013-08-13T13:20:16Z Hi guys, I’m new to roots here. I’m trying to wrap my mind around as to where it shines and how to use it to maximize the benefits. Is the base.php everything here? Do we _have to_ use the theme wrapper concept? Is it the bread and butter here? Though, I do get the reasoning behind the theme wrapper concept from a computer science point of view, but I’m finding it hard to justify it in use. I think it causes more confusions than it solves… Neither scribu’s nor Joel Kuzmarski’s posts help, well for me at least. WP template hierarchy is already pretty good. With the get\_header and get\_template\_part, we are almost there. Why seek perfection here… I don’t get it., Please help me clarify as to why it is needed to place this extra layer on top of WordPress template hierarchy? And finally, is there a way to cancel it and make the roots work traditional way that is no theme wrapping… and if that’s possible, does that really defeat the purpose of using Roots for development at the first place and I may be better of working with another HTML5 BP + Bootstrap framework? Thank you --- ## Post 10 by @iagdotme — 2013-08-13T14:10:59Z Hi, The wrapper concept totally does your head in at first. It took me weeks to work out what was happening, but now I really love it. It means much cleaner code and funnily enough is easier to work with. However I totally feel your pain. The problem for me was that I hadn’t got to grips with the standard WordPress template hierarchy which made getting my head round how Roots worked harder. I don’t know whether this will help you or anyone else, but here are some notes (quite a bit taken from the WP docs as well) that I made up whilst I tried to get my head round it all… * * * **Standard WordPress set up** Normally WordPress has the following template files: - List item - style.css - header.php - index.php - sidebar.php - footer.php - single.php - page.php - comments.php - 404.php - functions.php - archive.php - searchform.php - search.php WordPress uses the Query String (which it gets from the URL of the current page on the website) to work out what template file or template files to use to generate the page. Firstly WordPress works out what _type_ of page the current page is (i.e. is it a posts, archive, page, category or other page) WordPress works out what template page or pages to use based on something called the Template Hierarchy. WordPress firstly checks to see if it can find the most specific template file for its needs and if not it falls back to the default. For example it may check the category ID, slug, taxomony name or other criteria. How WordPress checks depends on the type of page being requested. For example if the page being requested is a blog category page it will try the following: 1. It checks to see if there is a category template file for the current category. For example if the current category has an ID of 4, it will check to see if _category-4.php_ exists 2. If not it will check to see if the generic category template file, _category.php_ exists. 3. If that doesn’t exist it will check to see if the archive template exists- _archive.php_ 4. If that doesn’t, WordPress will fall back and use the default _index.php_ Here are the queries depending on page type: **Front Page** 1. **_front-page.php_** _(if doesn’t exist, falls back to…)_ 2. **_index.php_** **Home (Blog) Page** 1. **_home.php_** _(if doesn’t exist, falls back to…)_ 2. **_index.php_** **Single Post** 1. **_single-{post\_type}.php_**. If you are using custom post types you enter the slug of the custom post type- for example if the custom post type is “events”, this would be single-events.php _(if doesn’t exist, falls back to…)_ 2. **_single.php_** **Page** 1. custom page type (The Page Template assigned to the Page. You can create your own page templates (page-templatename.php for example) and select these on the edit page section). At the top of the page template you should put the template name in comments: /\* Template Name: Magazine \*/ _(if doesn’t exist, falls back to…)_ 2. **_page-(slug).php_**\* (if doesn’t exist, falls back to…)\* 3. **_page-(id).php_** _(if doesn’t exist, falls back to…)_ 4. **_page.php_** \* (if doesn’t exist, falls back to…)\* 5. **_index.php_** **Category (“Category” is an example of a “taxonomy”)** 1. **_category-(slug).php_** _(if doesn’t exist, falls back to…)_ 2. **_category-(id).php_** _(if doesn’t exist, falls back to…)_ 3. **_category.php_** _(if doesn’t exist, falls back to…)_ 4. **_archive.php_** _(if doesn’t exist, falls back to…)_ 5. **_index.php_** **_Tag_** (“Tag” is an example of a “taxonomy”) 1. **_tag-(slug).php_** _(if doesn’t exist, falls back to…)_ 2. **_tag-(id).php_** _(if doesn’t exist, falls back to…)_ 3. **_tag.php_** _(if doesn’t exist, falls back to…)_ 4. **_archive.php_** _(if doesn’t exist, falls back to…)_ 5. **_index.php_** **Custom Taxonomies** 1. **_taxonomy-(taxomony)-(term).php_** _(if doesn’t exist, falls back to…)_ 2. **_taxonomy-(taxomony).php_** _(if doesn’t exist, falls back to…)_ 3. **_taxonomy.php_** _(if doesn’t exist, falls back to…)_ 4. **_archive.php_** _(if doesn’t exist, falls back to…)_ 5. **_index.php_** **Archive** 1. archive-(post\_type).php _(if doesn’t exist, falls back to…)_ 2. archive.php _(if doesn’t exist, falls back to…)_ 3. index.php **Author** 1. **_author-(nicename).php_** _(if doesn’t exist, falls back to…)_ 2. **_author-(id).php_** _(if doesn’t exist, falls back to…)_ 3. **_author.php_** _(if doesn’t exist, falls back to…)_ 4. **_archive.php_** _(if doesn’t exist, falls back to…)_ 5. **_index.php_** **Search** 1. **_search.php_** _(if doesn’t exist, falls back to…)_ 2. **_index.php_** _(if doesn’t exist, falls back to…)_ _404 (Page Not Found)_ 1. **404.php** _(if doesn’t exist, falls back to…)_ 2. **index.php** _(if doesn’t exist, falls back to…)_ Here are the main template files that usually come with a theme excluding headers, sidebars and other sections of pages: - 404.php - author.php - base-front-page.php - base.php - category.php - front-page.php - index.php - page-custom.php - page-sample-page.php - page.php - single.php - search.php As well as the above there are sections of pages that the above pages can use to put together the page: - header.php - footer.php - sidebar.php - searchform.php Finally there are some special files that need to be included: - style.css (this gives WordPress the name and details of the theme. It can also be used for CSS styles) - functions.php (special functions for the theme to use) As well as the above you can now put in special template files that the template hierarchy can use for specific pages. For example a template for a specific category “category-(slug).php” # ROOTS WordPress usually puts all of the code and content into these template pages and fetches the header, sidebar and footer from the header.php, sidebar.php and footer.php files. Roots does away with all of that and uses base files to give the template structure. This means you can have different pages with different headers and footers. This changes the way the WP template hierarchy works slightly. If the current page is the front page, WordPress would normally check for the front-page.php template. However, Roots runs some code that checks to see if there is a “base” file for that template. In this case it is looking for base-front-page.php. If that doesn’t exist it will look for base.php. The base file includes the header and footer and checks to see if the sidebar should be outputted, but actually you can get the base.php file to output whatever you like. For example… **Front Page** 1. **_base-front-page.php_** _(if doesn’t exist, falls back to…)_ 2. **_base.php_** **Home (Blog) Page** 1. **_base-home.php_** _(if doesn’t exist, falls back to…)_ 2. **_base.php_** **Single Post** 1. **_base-single-{post\_type}.php_**. If you are using custom post types you enter the slug of the custom post type- for example if the custom post type is “events”, this would be single-events.php _(if doesn’t exist, falls back to…)_ 2. **_base-single.php_** 3. **_base.php_** * * * I hope that makes it clearer. It helped me… _(edited to fix formatting)_ --- ## Post 11 by @halukkaramete — 2013-08-13T18:39:58Z @iagdotme: thank you for taking the time to post your reply. I appreciate it. I read your reply line by line. Even though I knew about the WP template hierarchy, reading it once more was nice. Let me get to the ROOTS part. > with roots… you can have different pages with different headers… But this is also possible in a good old header.php which is brought in by a `get_header()` call embedded in index/single/archive/you-name-it.php, In the header.php, you could easily include a header-X.php or a header-Y.php depending on the whatever the situation is. By simply going thru a one-and-only header.php ( or footer.php for that matter), one can easily determine what’s happening… for example, the following code, when placed in a (non-roots) functions.php, would give you the name of the template file; ``` add_filter( 'template_include', 'var_template_include', 1000 ); function var_template_include( $t ){ $GLOBALS['current_theme_template'] = basename($t); return $t; } function get_current_template( $echo = false ) { if( !isset( $GLOBALS['current_theme_template'] ) ) return false; if( $echo ) echo $GLOBALS['current_theme_template']; else return $GLOBALS['current_theme_template']; } ``` Then, header.php would easily & clearly tap into that information thru something like this ``` switch ($GLOBALS['current_theme_template'] ){ case 'home.php': include ('header-home.php'); return; //this call allows PHP to exit the include file right very here... break; case 'single.php': include ('header-single.php'); return; //this call allows PHP to exit the include file right very here... break; case 'archive.php': include ('header-archive.php'); return; //this call allows PHP to exit the include file right very here... break; default: //go on ( meaning stay in this header.php and output what will come after... ) }; //regular header goes here... ``` So, if it is the layout flexibility, doesn’t the above code achieve it in a more straight forward way that does not require the understanding of this? ![image](https://discourse.roots.io/uploads/default/658/53223a2cac3e65ea.png) I am still not getting as to how the theme wrapper concept would simplify the work flow. But I haven’t quit yet. :slight_smile: --- ## Post 12 by @iagdotme — 2013-08-13T20:45:25Z Sorry, missed your comment. Thanks for this- makes sense! I do develop locally. I make the changes in a code editor (either Notepad++ or Dreamweaver) and then FTP it up and take a look on the live or dev site. So I could use version control. Dreamweaver has one built in but I don’t like the look of it. I would love to use git because I really like the way GitHub from what I’ve seen. --- ## Post 13 by @iagdotme — 2013-08-13T20:50:35Z I think I kind of understand… However (forgive my ignorance) what do you mean by a “full WP stack setup”? Do you mean all the WordPress core code as well as the site? What is Vagrant? I’m not against the idea of running Ubuntu in a virtual machine using Virtual Box, but I’d have to see the advantages. What code editor do you use on Linux? Is the whole site (including database) stored locally? If so how do you then push it to the dev or live site? How do you make sure all the paths are correct? What happens if the main site uses SSL? I’ve not got into using LESS yet, but I expect developing locally would help this. Presumably when you upload/push the new code to the dev/live site your less code is compiled into CSS? Wow, this still sounds very mystical to me! --- ## Post 14 by @iagdotme — 2013-08-13T21:04:10Z I assumed you knew a lot more about the WP theme hierarchy than me, but I thought other people might find it useful. I suppose I haven’t actually answered WHY the Roots theme wrapper is a good thing, only a little more about how it works. The diagram you included did my head in when I saw it, but slowly I started to get my head round it particularly reading the various comments in the old Google group. Why does Roots do this? I am hoping someone else more qualified than me can answer that… --- ## Post 15 by @swalkinshaw — 2013-08-13T21:09:51Z 1. By “full WP stack setup” I mean a virtual machine that has nginx, php, php-fpm, mysql, and WP itself all setup. Using Vagrant, all you do is type “vagrant up” and you have a complete virtual machine with WP already installed and your theme loaded. Vagrant is basically just a tool for easy VirtualBox VM management specifically made for development environments. 2. As I said before, with a setup like this you can use your local editor on Windows. The folder (WP site) you’re editing is kept in sync on the virtual machine all seamlessly. 3. Everything is local. Usually you deploy by cloning your Git repo on your remote host and just pull down changes. Not sure why SSL on the live site would make any difference. You wouldn’t use SSL locally. 4. Correct. Any pre-processor like LESS should ideally be run as part of the deploy process. --- ## Post 16 by @iagdotme — 2013-08-13T21:23:38Z Thanks for clarifying what “full WP stack setup” means. I’ve just noticed you mention nginx. I’ve looked up and it seems that some people are using this as a replacement to Apache. There might be an advantage to using it, but I am stick with Apache for now since my Virtual Server uses that (under cPanel). Is that a problem? So, I think I get that the Virtual Machine can access folders on my Windows computer and so Vagrant would be able to “do it’s stuff” on the files on the VM. Would I be running version control (git) on my Windows installation or on the VM? I mentioned SSL because I was wondering how I could test locally if the dev and live sites had SSL (I use the Better WP Security) plugin. If the local and live sites were effectively clones of each other, wouldn’t the local site try and use SSL and fail? Also I use other plugins such as EWWW Image optimizer which uses PHP libraries to optimise images on the fly. These probably wouldn’t work locally. --- ## Post 17 by @swalkinshaw — 2013-08-14T01:16:15Z Nothing is a problem :slight_smile: It’s all up to you. But obviously if you wanted to use our Vagrant setup for example, it would only support nginx by default. You’d be running version control locally on your Windows host. It gets a bit tricky with plugins for different environments. If you were using a virtual machine, there’s no reason you couldn’t have the EWWW Image optimizer working as well. SSL is a different story and you’d want it disabled in dev. --- ## Post 18 by @mcdonna — 2013-08-14T05:23:33Z Scott, I have a related question about repositories. I have a lot of WordPress sites. I hate to keep all those copies of WordPress itself. So do you just Git the theme directories and custom plug-ins? All of wp-content? Or the entire site? Thanks! Donna --- ## Post 19 by @iagdotme — 2013-08-14T09:47:55Z Thanks. Getting plugins to work both locally and remotely might be tricky. Is possible with your Vagrant set up to not overwrite certain plugins and their settings? Would it be possible to use Apache with your set up? And if so, would it be possible to provide instructions for that as well? I am sure there will be many people still using Apache. Thanks. --- ## Post 20 by @swalkinshaw — 2013-08-14T12:40:15Z Ideally you have a Git repository per site including everything EXCEPT the WP core itself. Just tracking your theme and plugins isn’t really ideal because you might be missing things like `wp-config.php` and a proper folder structure. Currently the most popular way is probably [https://github.com/markjaquith/WordPress-Skeleton](https://github.com/markjaquith/WordPress-Skeleton). The WP core is a separate Git submodule. This is a step up but not ideal either. I’ll have a big blog post and screencast coming up about exactly this topic using [Composer](http://getcomposer.org/) to manage WP core and keep it out of your repos. It’s a little advanced but after using it for a bit it’s much better than the alternative. --- ## Post 21 by @swalkinshaw — 2013-08-14T12:42:54Z Despite the goal of having your dev/prod environments exactly the same, it’s never going to happen completely. SSL is one of those things. Our Vagrant setup is completely customizable but that’s up to someone on their own. Yeah, Apache is still really popular but we can only provide a setup that we’re familiar with using. --- ## Post 22 by @iagdotme — 2013-08-14T13:41:52Z Thanks. I’d be interested to know how people manage the different environments. I’m starting out on this different set up and I’d be interested to know how you get round potential issues. Totally understand you will only be able to provide help with the set up you are familiar with, but I assume it wouldn’t be too hard to switch nginx for Apache? --- ## Post 23 by @mcdonna — 2013-08-14T20:20:11Z Thanks, Scott! Good to know I’m not the only one who found this to be a challenge. Looking forward to your post about Composer. --- ## Post 24 by @lautreamont — 2013-08-15T10:42:32Z I just instaled Vagrant. Big problems on Windows7. Not with program itself but when you download first box it takes time, for me 40min. And near the and it broke (three times). When I switch to Ubuntu it was better (even download was 4 time faster ???). But install instruction are wery poor. How hard is to tell people what to do before installation and how instalation process look like. They wanted to look simple, just install and UP, thats it. But in real life, with real people that isnt case. When I started instalation Vagrant tells you to remove Virtual-Box. Later it tells you to install it. This must be in instalation instructions. Its only few lines more of text. Did not help that I first downloaded 32 bit version and missed couple of librarys. But when it start working its miracle to see virtual web server up with 5 lines of text and one script (example from site). --- ## Post 25 by @bmorejon — 2013-08-22T00:07:46Z Beanstalk App really helped me out with version control and deploy. git add -A git commit -m "some text here" git push beanstalk master All done, I just go to beanstalk and click a button to deploy to my SFTP Server. Maybe you want to give it a try. --- ## Post 26 by @iagdotme — 2013-08-25T13:14:16Z I am starting to get my head round things, and wondering if anyone could tell me if I am on the right track? I’m not going to even start getting my head round tools such as Puppet and Beanstalk- just one step at a time for me. I’ve started using the Windows GitGub app and love it- works really well. I’ve started to understand Commits and been using it for an app I am developing. As I said above, I use Windows, but I love the idea of running a Linux machine using VirtualBox. The problem is, I am not an expert in getting a server up and running. I then started looking in to what Vagrant was- and it seemed from what I was reading that this might well be what I am looking for. Am I right in saying that Vagrant builds a Virtual Machine with all the bits you need to test locally? Ideally I would be mirroring the conditions of my web server which is Apache and suPHP. Can I get Vagrant to install Apache and a particular version of PHP? My host uses suPHP which does make a few differences, so ideally I’d have it running in the same way. Is this possible? How about other configurations to do with Apache or PHP? I have quite a few websites that I maintain for different clients on our main web server- in fact there are over 50 of them. Does Vagrant allow more than one website or project on one machine? If so, how does that work? I’ve watched the screencast by @swalkinshaw (thanks- very helpful) and I think I understand what composer does a little more. I think I will have to watch it a few more times though! Composer helps you manage “dependencies” which in this case could be Bootstrap, Roots, plugins and other tools for a project. It allows you to upgrade to the latest version or roll back fairly easily. Grunt seems to be an automation tool to help you build the website for production (or testing). I am assuming that it is used for compiling the less files? Does it do anything else? Of course the next stage is pushing the website on to the development or production server. Currently this is something I constantly do using FTP, but I think this is where a tool such as Capistrano comes in. No idea what it does or how it does it, but am I kind of right here? I’ll get there, just might take me a few more years! :wink: --- ## Post 27 by @swalkinshaw — 2013-08-25T18:20:43Z That’s the right attitude to have @iagdotme. It’s all about learning and improving which never stops. Using the GitHub app is a great start. Vagrant: yes, it helps you build a Virtual Machine and automates it a little. You have 2 options with Vagrant: 1. Start with a bare base box like Ubuntu 12.04 and then install everything yourself. 2. Try and a base box already configured how you want it (Some here: [http://www.vagrantbox.es/](http://www.vagrantbox.es/)) So yes it’s possible to get a virtual machine with Apache and suPHP going but if someone hasn’t already created/shared one, you have to do that on your own. Since Vagrant is specifically meant for development environments, it’s usually best to have 1 box per project. You include a Vagrantfile ([http://docs.vagrantup.com/v2/vagrantfile/index.html](http://docs.vagrantup.com/v2/vagrantfile/index.html)) in your project’s repository. Then whenever you go to work on a new project, you just do `vagrant up`. It keeps everything nice and separated (of course you’d probably want to shutdown each VM when you’re done with it so you don’t have 50 VMs running at once). Grunt: it’s simply a task runner which is great for automation. Grunt has a massive list of plugins [http://gruntjs.com/plugins](http://gruntjs.com/plugins). You can browse through those to get an idea of what it does. It’s most popular for compiling things, concatenating files, minifying, etc. You could use it to optimize all your images in a project for example. --- ## Post 28 by @iagdotme — 2013-08-27T12:51:54Z Thanks, Scott. For the time being, I’m going to start with Git and Grunt. I’ve got Grunt & Git working on Windows. I’ve also managed to get shared folders working on Ubuntu on VirtualBox. I’ll leave Vagrant until the blog post is out. --- ## Post 29 by @bmorejon — 2013-08-31T02:36:23Z Today I started my first project with Grunt in Roots. So easy! Run Grunt Watch one time and you are done. --- ## Post 30 by @lautreamont — 2013-08-31T07:38:38Z You are right @iagdotme I am too wont to introduce git first. I have three pools to roots but stil do not know how it works, or I am not shure how it works. --- ## Post 31 by @iagdotme — 2013-08-31T15:52:51Z Using the Grunt script ended up being a lot easier than I thought. Are you using Windows, Linux or a Mac? --- ## Post 32 by @lautreamont — 2013-09-01T01:21:00Z I transfer all development to ubuntu because I have troubles on Windows. Till this year I was exclusevly xammp-nootepadpp-windows developer. Then I get sick with troubles with it and transfer my self to lamp-sublimetext-ubuntu. Thruth is that there was no so much troubles on win but thay occured in absolutly wrong moments. I plan migration for long time but never done it, till now. My trouble is that I do not have ssh with provider so I stick all development to local and only ftp (or sftp) it to site. Has limitation, eg. can not test facebook plugins localy or caches but my provider is very slow for admins (I think for purpose) so if I can do it it will be very hard and boring. For a grunt part, for now, I just type grunt and that it is. Truthfully, again, made me looking in to .less files and discovering more of roots theme, (bootstrap part). --- ## Post 33 by @lautreamont — 2013-09-01T01:56:40Z Now I saw your later post. In my opinion VirtualBox is wrong way to learn OS. Because it enable you to switch between OSs whenever “hard times” comes, when you dont know how to do something. If you want to learn faster stick to one OS and found your way. And, may the force (of internet) be with you. --- ## Post 34 by @cfx — 2013-09-01T02:04:51Z I’m still in the cowboy coding camp unfortunately, but I’ve been taking my time and reading up on git for the past few weeks. I’ve found the greatest difficulty in establishing a workflow model that works for me, since I’m nearly always the only coder on my projects. I actually came across what looks to be a really great playlist on Youtube: [http://www.youtube.com/playlist?list=PLmw3IgYjTuTZazmvA0RcLaeHh-ykTEEzr](http://www.youtube.com/playlist?list=PLmw3IgYjTuTZazmvA0RcLaeHh-ykTEEzr) for a WordPress + git + Bitbucket workflow. I’m still working through it and trying to fully understand each step before weaving Roots and Grunt into the mix but it looks promising and it’s a very nice introduction to DVCS and WP. Enjoy! --- ## Post 35 by @swalkinshaw — 2013-09-01T04:50:57Z I can’t comment on the quality of those videos but going from the titles it looks like a great introduction. Learning proper development practices will definitely be worthwhile. Cowboy coding can be fun at times but sooner or later it will catch up with you. --- ## Post 36 by @lautreamont — 2013-09-01T07:09:45Z Agree with @ctx. Watch same playlist and must say that help me, more then some others. Maybe its women “touch”. --- ## Post 37 by @jmjf — 2013-09-02T00:50:05Z I’m following the videos and finding them useful. When she gets to video 5 and clones the theme repo, then deletes the .git folder and .gitignore, DO NOT delete .gitignore. If you do, you’ll be keeping the node\_modules directory in your repo, adds 1800 files to the repo that are only for development tools. Lesson learned. @\_@ --- ## Post 38 by @cfx — 2013-09-02T01:19:10Z I’m actually not sure why she deletes any of the git files. Won’t those come in handy when it comes time to upgrade the theme? Confused… --- ## Post 39 by @jayseventwo — 2013-09-02T05:12:14Z @iagdotme, i’m glad you brought this topic up, as i too am currently trying to improve my workflow (also using Dreamweaver using code view). I am a lone freelancer, so up until this point didn’t really see the need for Git etc, as i am the only one dealing with the code. When the new Roots website came online, i started looking into Git, Grunt, etc and have already improved my workflow: Created a local roots repository learned a few git commands on how to copy and rename to my current project (usually the website name) use grunt watch to compile my code on save I use the following Dreamweaver extension to utilise LESS - [http://www.dmxzone.com/go/21528/dmxzone-less-css-compiler](http://www.dmxzone.com/go/21528/dmxzone-less-css-compiler) I too currently use Dreamweaver to push to ftp, but am investigating better ways to do this, such as has been mentioned in the above posts. I would be interested to hear how you go, and i will also update as i learn new ways of doing things. I did think of using git-ftp ([https://github.com/git-ftp/git-ftp](https://github.com/git-ftp/git-ftp)), but it looks to be a bit of a pain on windows and i still need to incorporate version control. @cfx, thanks for the video links- am going through them now. I like that Bitbucket has free private repositories, as that was what concerned me about git. --- ## Post 40 by @MintyBear — 2013-09-02T05:56:06Z I’ve used git-ftp for deployment, it’s pretty good. But more recently I’ve moved to using grunt as it does staging and production servers really nicely. Instructions in the bottom of this post: [http://mattbanks.me/grunt-wordpress-development-deployments/](http://mattbanks.me/grunt-wordpress-development-deployments/) I’m interested in seeing what capistrano can do though. --- ## Post 41 by @jmjf — 2013-09-02T13:42:34Z I think she’s assuming you don’t want to pull changes from the source repo. Starter themes like Roots and Bones assume you’ll copy the theme and go forward with no updates from the source repo. If you’re willing to do a little work deciding what changes to apply, I don’t think there’s any reason you couldn’t set up something like GitHub/roots/roots -\> your GitHub (or Bitbucket or etc.) roots -\> local master repo -\> local theme repo. The idea being, you’d separate the theme from GitHub with the local master. Use branches in the local master to make changes to push back to GitHub and the main Roots repo or to pull down to your theme or both. Fetch updates from GitHub into local master so your baseline is current and then decide which changes to pull to your theme based on changes you’ve made in the theme (might not want to update app.less, for example). If you’re developing a theme a week, it probably doesn’t matter much because Roots won’t change much in a week. If you’re taking a more leisurely approach, getting updates may be more valuable. Someone will probably tell me why this is a bad idea. --- ## Post 42 by @cfx — 2013-09-02T14:49:12Z The part that has me really confused now is the plugins and how the work within the WordPress-Skeleton structure. Also, what if a plugin changes something in the WordPress submodule? $ git status will then report changes in files not tracked… Maybe this thread is headed in the direction of needing its own topic? --- ## Post 43 by @iagdotme — 2013-09-02T15:25:21Z Thanks, @cfx for posting this video series- looks really helpful. There is hope for me yet! :wink: Do you know if it is possible to use GitHub and BitBucket? I love the Windows GUI for GitHub but I also love the fact you can have unlimited private repos with BitBucket. --- ## Post 44 by @iagdotme — 2013-09-02T15:31:43Z @jayseventwo - Your post made me smile. So glad I am not alone in this. I run a small web agency, but basically I am the main developer- so I don’t need to share the code with anyone else. That’s why I haven’t really seen the need to use Git. However, I’ve found it useful for commenting code and keeping a backup. Once I get my head round branches and undoing changes I think I will finally see its powers. I do love Grunt- it works really well for Roots. I will have to have a play with the Less extension for Dreamweaver. Quite why Adobe don’t support LESS as standard I don’t know. However, I really want to move away from Dreamweaver and use a code editor like SublimeText or NotePad++. The thing I would miss is inbuilt FTP which, like you, I use within Dreamweaver. I do love the idea of git-ftp which I looked at. However I haven’t got a clue how to set it up. I am wondering whether this is where Capistrano comes in. If I could have a way to push to my dev, staging or production sites it would be awesome. --- ## Post 45 by @iagdotme — 2013-09-02T15:33:28Z @MintyBear - great article, thanks. This looks really helpful. Like you, I am waiting to see what Capistrano might do, but there are some interesting ideas in the article. How do use Grunt to push to staging and production servers? I am still uploading via FTP to my development server (i.e. not testing locally). --- ## Post 46 by @cfx — 2013-09-02T16:12:56Z @iagdotme, not sure what you mean by “use GitHub and BitBucket”. But what I’ve done is exactly what she’s done in the video: I cloned a GitHub repo into BitBucket, then in my local environment I clone the BitBucket repo, so now when I make changes I push those back to BitBucket and everything stays private. Of course you can always push back to GitHub if you want to make a GitHub repo (which I’ve done). In fact, you can feel free to use my repo which includes Mark Jaquith’s WordPress Skeleton (with WordPress as a submodule); I’ve added Roots as a submodule to my repo: [https://github.com/CFXd/WordPress-Skeleton-with-Roots](https://github.com/CFXd/WordPress-Skeleton-with-Roots) So you can just do: `git clone --recursive https://github.com/CFXd/WordPress-Skeleton-with-Roots.git .` and that will get you up and running with WP and Roots 6.5.0 or you can do what she does in the vid which is to clone/fork my GitHub repo into your Bitbucket to keep your repo private (recommended). Not sure how frequently I will update this repo but for now everything is current! --- ## Post 47 by @jayseventwo — 2013-09-02T22:27:27Z @iagdotme, the latest version of Dreamweaver (CC) does actually support LESS, but does not compile. This is where that plugin helps, although probably not required for Dreamweaver CC if you have grunt doing the compiling for you. I found an interesting tutorial on using Bitbucket that goes through the basics: > **[A first time using Git, with Bitbucket - add existing code.](http://clockwerx.blogspot.com/2013/04/a-first-time-using-git-with-bitbucket.html)** > > If you are new to Git, it can be a bit much to get your head around. The content below assumes you are making use of http://bitbucket.org/ -... Also, i believe that git bash (the command line client for Git) works with Bitbucket, so perhaps Git for Windows also does (someone please correct me if i’m wrong, as i haven’t had a chance to try it yet). --- ## Post 48 by @jayseventwo — 2013-09-02T22:37:51Z This looks to be a good a good ftp plugin for Grunt as it does incremental uploads. [https://npmjs.org/package/grunt-ftpush](https://npmjs.org/package/grunt-ftpush) --- ## Post 49 by @swalkinshaw — 2013-09-02T22:57:37Z Any Git “client” will work fine with Bitbucket or any other Git repository host. It’s simply just adding a remote source. You can have a repo with both GitHub and Bitbucket as remotes as well. Good for redundancy in case one goes down (which has been happening frequently with GitHub lately). --- ## Post 50 by @swalkinshaw — 2013-09-03T00:02:42Z This thread has gotten a bit out of control so I’m going to close it. People are encouraged to create new more specific threads about anything talked about in here. And remember that in Discourse you can still click “Reply as a new topic” from any reply. --- ## Post 51 by @swalkinshaw — 2013-09-03T00:02:49Z --- ## Post 52 by @ben — 2022-02-26T03:20:52Z