Jan 14, 2015 06:43 PM
(This post was last modified: Jan 14, 2015 06:44 PM by Tasemu.)
Let me start this off by saying this is only in my opinion the best way to go about this. I'm also sure I am not the first person to end up with this workflow, but I just want to share it. :)
Also, check out my blog, I post a lot of tuts there and they look much nicer to read there imho: http://casual-coding.net/creating-your-f...wordpress/
I have been working with Wordpress for a significant amount of time now and over the years I have seen and tried a variety of different methods, plugins, frameworks and everything else under the sun to make theme development for Wordpress as painless as possible. More often than not it did not work out as planned and was just as painful as I had feared.
Over the last year I have been slowly putting together a method of developing wordpress themes that I have fallen in love with because of how fast it is to get set up. It is modular, powerful and great to work with. This guide is the first of a small series in which I aim to show you how to utilise my method to create wordpress themes. I will take you though the tools and technologies I use as well as explain as best I can why I decided to use these tools in my workflow.
The first part of this tutorial will be setting up Wordpress. I can tell many people are going to immediately roll there eyes and say "What the hell man, we all know how to install wordpress...", BUT DONT! I want to show you a killer way of doing it that is one command, super easy and fast, and has some really cool options to make your wordpress setup sweet!
![[Image: r8zQ89n.jpg]](https://i.imgur.com/r8zQ89n.jpg)
So without further ado we will get right into it and have our new wordpress setup within minutes.
Alrighty, so if you have read any of my tutorials before then you will probably know that I am a pretty big advocate of Yeoman. For those who dont know what Yeoman is, it is a tool that can be used to generate projects, usually used to scaffold out projects ready to quickly jump in and develop. We are going to use yeoman to scaffold out our wordpress project and take advantage of some of the easy and powerful options this approach gives us.
![[Image: J2tpOhk.jpg]](https://i.imgur.com/J2tpOhk.jpg)
You can easily install Yeoman by running the following commend in terminal or cmd with node installed
You can also learn more about Yeoman and how it works by going here and checking out some of the super simple documentation for it: http://yeoman.io/learning/
Ok cool so now you have Yeoman, or if you're awesome then you had Yeoman installed already. Yeoman by itself is simply a tool for scaffolding. Now what you need to get your hands on are some blueprints to give to Yeoman to build what you want it to build, which is this case is an awesome wordpress project. So now lets go and get ourselves some of that. Head over to https://github.com/wesleytodd/YeoPress and you will see a generator that Wesley Todd has created for Wordpress which is amazing. Feel free to spend some time checking out the details of it but we will be using it soon anyway.
You can install the wordpress generator using npm, just run this in terminal:
Now go into your sites folder and create a new folder for your wordpress installation. Inside of this folder we are going to run the Yeoman command to generate our wordpress site ready to roll.
Inside of your new site folder run the command to generate a new wordpress site:
Once you run the above you will be greeted with a sexy little ascii art and some questions to help the generator make the wordpress setup exactly how you want it. I will talk you through the prompts now.
Wordpress URL
This allows you to quickly set up a url for your development, like a virtual host.
Table Prefix
Set your database table prefix for multiple wordpress installs.
Database Host, name, user and password
Standard details for your database for wordpress to install itself into.
Use Git?
This makes the generator automatically initialise a git repo for your project. I highly recommend Yes for this because it gives you access to the below options.
Would you like to install Wordpress as a submodule?
This installs the wordpress core in a seperate folder from your themes, uploads and plugins. Very cool option and keeps your code modular and seperate. I suggest choosing yes for this.
Wordpress Install Directory
Its fine to leave this as default, unless you want to change the name of the folder the wordpress core is in. You could name it something like CMS if you want to hide the fact you're using wordpress.
Wordpress Content Directory
Same deal, this is fine default, feel free to change it to anything you like if you dont like the default name.
Install a custom theme?
This is a very cool feature that allows you to provide github details and automatically install a theme, you can even set a script to run on install to add even more automation. However for now we will not be using this since we will be installing our theme manually.
Its is also useful to note that if you pass the --advanced option into your yo wordpress command, it allows you further options like automatically setting up a Vagrant Box for your project, selecting a specific wordpress version, and adding the core wordpress to your .gitignore file.
Once Yeoman has finished chugging away and your project is created you should see your folder populated with this:
![[Image: mrtE08y.png]](https://i.imgur.com/mrtE08y.png)
You are now done! You have a clean modular wordpress install, your core is separated from your content and you are ready to begin the next step, creating your new theme!
I hope you enjoyed the first part of this tutorial series and if you did then please feel free to share it around. PEACE!
Also, check out my blog, I post a lot of tuts there and they look much nicer to read there imho: http://casual-coding.net/creating-your-f...wordpress/
I have been working with Wordpress for a significant amount of time now and over the years I have seen and tried a variety of different methods, plugins, frameworks and everything else under the sun to make theme development for Wordpress as painless as possible. More often than not it did not work out as planned and was just as painful as I had feared.
Over the last year I have been slowly putting together a method of developing wordpress themes that I have fallen in love with because of how fast it is to get set up. It is modular, powerful and great to work with. This guide is the first of a small series in which I aim to show you how to utilise my method to create wordpress themes. I will take you though the tools and technologies I use as well as explain as best I can why I decided to use these tools in my workflow.
The first part of this tutorial will be setting up Wordpress. I can tell many people are going to immediately roll there eyes and say "What the hell man, we all know how to install wordpress...", BUT DONT! I want to show you a killer way of doing it that is one command, super easy and fast, and has some really cool options to make your wordpress setup sweet!
So without further ado we will get right into it and have our new wordpress setup within minutes.
Alrighty, so if you have read any of my tutorials before then you will probably know that I am a pretty big advocate of Yeoman. For those who dont know what Yeoman is, it is a tool that can be used to generate projects, usually used to scaffold out projects ready to quickly jump in and develop. We are going to use yeoman to scaffold out our wordpress project and take advantage of some of the easy and powerful options this approach gives us.
You can easily install Yeoman by running the following commend in terminal or cmd with node installed
Code
npm install -g yo bower grunt-cli gulpYou can also learn more about Yeoman and how it works by going here and checking out some of the super simple documentation for it: http://yeoman.io/learning/
Ok cool so now you have Yeoman, or if you're awesome then you had Yeoman installed already. Yeoman by itself is simply a tool for scaffolding. Now what you need to get your hands on are some blueprints to give to Yeoman to build what you want it to build, which is this case is an awesome wordpress project. So now lets go and get ourselves some of that. Head over to https://github.com/wesleytodd/YeoPress and you will see a generator that Wesley Todd has created for Wordpress which is amazing. Feel free to spend some time checking out the details of it but we will be using it soon anyway.
You can install the wordpress generator using npm, just run this in terminal:
Code
npm install -g yo generator-wordpressNow go into your sites folder and create a new folder for your wordpress installation. Inside of this folder we are going to run the Yeoman command to generate our wordpress site ready to roll.
Inside of your new site folder run the command to generate a new wordpress site:
Code
yo wordpressOnce you run the above you will be greeted with a sexy little ascii art and some questions to help the generator make the wordpress setup exactly how you want it. I will talk you through the prompts now.
Wordpress URL
This allows you to quickly set up a url for your development, like a virtual host.
Table Prefix
Set your database table prefix for multiple wordpress installs.
Database Host, name, user and password
Standard details for your database for wordpress to install itself into.
Use Git?
This makes the generator automatically initialise a git repo for your project. I highly recommend Yes for this because it gives you access to the below options.
Would you like to install Wordpress as a submodule?
This installs the wordpress core in a seperate folder from your themes, uploads and plugins. Very cool option and keeps your code modular and seperate. I suggest choosing yes for this.
Wordpress Install Directory
Its fine to leave this as default, unless you want to change the name of the folder the wordpress core is in. You could name it something like CMS if you want to hide the fact you're using wordpress.
Wordpress Content Directory
Same deal, this is fine default, feel free to change it to anything you like if you dont like the default name.
Install a custom theme?
This is a very cool feature that allows you to provide github details and automatically install a theme, you can even set a script to run on install to add even more automation. However for now we will not be using this since we will be installing our theme manually.
Its is also useful to note that if you pass the --advanced option into your yo wordpress command, it allows you further options like automatically setting up a Vagrant Box for your project, selecting a specific wordpress version, and adding the core wordpress to your .gitignore file.
Once Yeoman has finished chugging away and your project is created you should see your folder populated with this:
You are now done! You have a clean modular wordpress install, your core is separated from your content and you are ready to begin the next step, creating your new theme!
I hope you enjoyed the first part of this tutorial series and if you did then please feel free to share it around. PEACE!
