I’ve been developing for WordPress over a few years now. I love the simplicity of the system (compared to other content management systems) and that it is nevertheless as powerful as all of its competitors. However, one thing always annoyed me, and I bet everyone else too: Setting it up is just a pain. Not because it is in any way hard, but because it costs some time. It’s only about 10 minutes maximum, but I didn’t want to invest this time doing the exact same thing for any web site I set up. Yeah, it’s just 10 minutes – but you probably heard that developers are lazy. You probably set up WordPress sites as well, so I don’t need to tell you this. But there is another way which I’ll illustrate in this tutorial. I will explain how you can set up your WordPress installation by executing just one single script in Terminal (you should have a basic understanding of how to use it before reading this article). Furthermore you will learn how to include a WordPress starter theme that has all the important tools built-in. But now let’s get started in kickstarting your projects!
Installing the necessary tools (they’re free, just like WordPress)
First of all, you need to install Node.js and YeoPress on your system (if you haven’t already). This is just a one-time process.
Node.js can be installed using a common installer you get on their website. After the installation, you will be able to run the Node Package Manager with the npm command. This allows you to easily install any module which is part of their library.
YeoPress is a so-called Yeoman generator. Yeoman is some kind of a framework for which developers can create generators to kickstart projects of any kind. This could be for example an Angular.js app, a Chrome app or a WordPress site. The cool thing is that all you need to do to set up such a new project is execute the generator once in the directory where you would like to have it created. After a few input prompts, you’re done and can start doing what you really like – developing new things! Since we are aiming at WordPress projects, we need a WordPress-specific generator. The most popular one is called YeoPress (it’s also on Github). You can install both Yeoman and YeoPress globally on your system using the command line by executing npm install -g yo generator-wordpress.
You’re done with the installation now. What about Grunt and Bower, you might be wondering. Don’t worry for now as these will be automatically installed within any project where we need them. I’ll get back to that later.
Kickstarting your WordPress projects
Running YeoPress is really simple. In Terminal, just cd to the directory where you would like to have your new WordPress site installed and run yo wordpress. You will need to enter a site URL, database credentials and more, for example whether you’d like to initialize a Git repository or whether you’d like to use a custom directory structure where the wp-content directory is placed independently from the WordPress core directory (which is recommended in modern WordPress development). You can also install a custom theme (more on that later). For more information on the prompts, please read the official YeoPress tutorial.
However, I will even improve this workflow just a little more: YeoPress also includes an addon generator to install plugins. It is handled independently from the main generator. Normally you would use it by running yo wordpress:plugin after you have your WordPress site ready and entering the slugs of all the plugins you wanna install. They will be automatically downloaded from the WordPress plugin repository and placed at the correct location.
You could just execute these two commands manually. Alternatively, I wrote a shell script which you can run to do both things in one step (it will even install YeoPress if you don’t have it yet). This is especially useful if there are plugins you wanna install for every WordPress website you create (so you don’t need to enter their slugs all over again). I know, developers are lazy. So here’s the shell script.
Simply place it in the directory where you need to have WordPress installed and execute it by entering sh ./yeopress.sh. Before doing so, you can adjust the plugin slugs inside the file to your needs (the original file would install the popular plugins Akismet, Contact Form 7, Jetpack, Super CPT, W3 Total Cache and WordPress SEO).
Alright, now you know how to set up a new WordPress installation in just a few seconds and even install some plugins in the same step. Now we get to themes.
Installing a custom theme (that uses Grunt and Bower)
Before I actually show you how to install a custom theme, I need to give you a little more detailed introduction. Remember, during the Yeopress process you were asked whether or not to use a specific theme. This prompt allows you to specify either a Tarball or a Git repository. The default theme that is fetched there was created by Wesley Todd who also created YeoPress. However, in my opinion this theme is still to much for a starter theme. Therefore I decided to write my own starter theme, containing not more template files than index.php, header.php, sidebar.php and footer.php. By default the theme uses basic parts of the popular Bootstrap CSS Framework, like its grid system and its responsive utilities (I did not include the framework completely since I thought this would be too much for a starter theme as well). Since Bootstrap is based on the LESS CSS preprocessor language, the theme is by default based on LESS too. However, you can completely remove Bootstrap and even use Sass as a preprocessor in just a few steps (find out more in the Github readme).
The coolest thing about both the original YeoPress theme and my own starter theme is that they use Grunt and Bower, set up specifically for usage with YeoPress.
If you don’t know Grunt and Bower, it’s time! Bower is a package manager for web sites, which allows you to easily specify third-party resources to include in your project. It will automatically fetch new versions as you specify them. Grunt is a powerful build system that is capable of automatizing many tasks that would slow down your workflow a lot if you had to do them all manually. In my theme for example, it checks your Javascript files for possible errors and code inconsistencies, applies vendor prefixes to CSS files, minifies all of them and prepends them with a theme-specific banner. Furthermore, it automatically creates a POT file to use for your theme translation and allows you to preview updates to your stylesheets live in your browser.
Like I said, the theme is set up specifically for usage with YeoPress. This means that the Gruntfile contains a function called ‘setup’ which is automatically run by YeoPress when it installs the theme. It automatically prefixes all functions, class names, constants and text domains according to the theme name that you specified in the YeoPress prompt, so you don’t need to manually replace all these lines yourself. You can find details on how to use Grunt with my theme in the repository readme.
Alright, this was a long introduction into the theme, but now I hope you know what I’m talking about. Installing a custom theme from Github with YeoPress is pretty self-explanatory as you might have already seen. All you need to do is enter the user’s slug, the project’s slug and the name of the branch you’d like to install. For my custom WordPress starter theme, this would mean ‘felixarntz’ for user, ‘wordpress-grunt-starter-theme’ for project and ‘master’ for the branch. Of course you could also include any other theme from Github instead. However, like I told you, the theme I developed is a very simple starting point for a custom theme, contains useful automatization functions for Grunt, requires third-party libraries using Bower and is optimized for YeoPress. So I recommend you to give it a try.
Wrapping It Up
Just as a final tip, I’d like to provide you with a YeoPress preferences file that I personally like to use. All it does is modify the defaults for the prompts while running YeoPress.
To use these preferences, simply include the file in the directory where you want WordPress installed, before running YeoPress of course. You can modify them as you like. But remember, these are just defaults anyway, so you can still enter whatever you want for the prompts. If you don’t need to change any of the preferences, that’s fine, just make sure you enter a valid theme slug for your theme directory name.
I hope I could help you learn something new and improve your workflow with WordPress. Especially if you work for multiple clients where you develop themes for them, this tutorial should be helpful. If you have questions to ask, feel free to post them below. And furthermore, I’m very grateful for tips on how to improve this post, but also my WordPress starter theme. Concerning this post, I’d especially be glad if you checked my shell script for possible errors. It worked for me, however I admit that this is the first shell script I ever wrote. So if you know your way around shell scripting, I’d appreciate if you took a look. At a later date, maybe I will also make a guide how you can create your own custom starter theme using the workflow techniques I used in mine. Just let me know your thoughts.
Leave a Reply