WordPress, Composer, Desktop Server and You

The actual guide to this post is at the bottom. Click here for the tl;dr version. =)

I recently wrote about my pet project that I built a site for. In messing around with that project, I’d learned a good deal about Gulp build tools and all the neat things they can do. Yet, one thing I’d never had, that always knew I wanted was a way to install the proper themes/plugins that I wanted. This was something I’d pursued a couple of years back and left it alone when there was no good answers available… The best answer I could come up with was to have a dev site that had all my commonly used plugins… While, sure, that was cool; let’s face it, it fucking sucks.

So what’s a guy to do?

Well, with build tools and more modern practices of theme development taking over the conversation of theme dev, along with some advanced offerings from Roots and Compass, it’s kind of hard to ignore all the cool stuff people are talking about. It’s also hard to ignore all the cool things these newer themes are doing. They compress js, css, concatenate your js, auto-prefix, error checks it, spits it out on to a rocket-ship that zips the fucking mess you just made into an installable theme package. And it delivers pizza to the dome. Wins all the way around. So that’s what I’ve been knee-deep in during those times when I can work on Some Like it Neat. I want to be one of the cool kids, too!

Well, the one thing I haven’t touched is Dependency Management. That is, a method of managing and easily installing/updating packages that your project is dependent on. Now, I’m not an expert with this stuff, dependency package managers or build tools/gulp etc. I’m just messing around with them and trying to make them fit into a workflow my mom won’t harangue me about.

Enter Composer

Dafuq is Composer anyway?

Composer is a tool for dependency management in PHP. It allows you to declare the dependent libraries your project needs and it will install them in your project for you. Dependency managemen

What does that mean for you and me? I’m slow to pick things up, but after reading around on getcomposer.org and seeing what some other really smart frakkers have written, I came to the conclusion that Composer “is a good thing” for WP theme devs.

Specifically, you can define, for instance, any number of plugins you use that reside on the WordPress.org repo, Github, or your own repository. Now, each of those alone is a pretty big topic and when I talk about this I want to be sure it’s all in digestible chunks.

What I took from reviewing Composer was that I could define commonly used plugins, such as Advanced Custom Fields, What the File, Webmaster User Role etc and have those easily downloaded and updated within my project. My project being whatever site I happen to be working on. The Holy Grail! Yasssss!

Because I do things the hard way, I bypassed a lot of what had already been written on this topic and went straight to tinkering around with shit I had no idea about!

I first installed and setup Composer in my theme directory. And it worked. I was able to download and install themes and plugins like a Champ… Except for the fact that doesn’t work because those files then get installed within your theme folder and not to where they should go, in their respective themes and plugins folders. Boo and a hiss! My bad. DON’T DO THIS!!!

From what I’d read, lots of people use Composer to not only grab Plugin files, Theme files AND WordPress Core! I hadn’t thought about getting core into the mix. In any case, my read on this was that Composer was to be installed in your project/site’s root directory, or in a directory above that. As I pondered how I could work getting Core into the mix, I ran into a problem…

What About Desktop Server?

I have been using and loving Desktop Server for a good couple of years now and recommend it to pretty much anyone who will listen, including the lady with the crusty shirt at the Gym I never go to. It’s that good, imo! So how do I version core with Desktop Server and Composer…

Well, ya don’t. At least I haven’t. Why?

Whenever I spin up a new project, I use Desktop Server’s nifty ‘Blueprints’ feature which allows me to choose different installation profiles when building a WordPress site. A couple of years ago Gregg Franklin, of DS awesomeness let me in on a nifty tip. Cloning WordPress Core/Trunk to a Blueprint folder. Boom!

Well, with that in mind, I knew that I already had a recent copy of Core to work from. So what I ended up doing was setting up a composer.json file and a composer.phar file and placed it within my Blueprint folder with Core in it. It’s not the most elegant solution, but at least when I spin up a new site via DS, that site can then easily install my starter theme and preferred plugins by issuing just two commands.

Getting up and running with Desktop Server and Composer

To get going here you should be a little familiar with Git, at the very least you need to know how to clone a repo down. 

Cloning WordPress Trunk/Core into a Blueprint

  • Find your Desktop Server XAMPP folder and go to ‘XAMPP/blueprints’
  • Clone WordPress Trunk: Now, you can use your favorite Git client, such as Tower (MacOS) or SmartGit (Win/Mac), or do it from the command line. If doing from command line, issue this command from the blueprints folder: git clone https://github.com/WordPress/WordPress

Okay, great! We’ve now got a versioned Blueprint of WordPress that we can easily update. Yeet!

Setting up Composer
Okay, I can’t guarantee I’m not going to fuck this up and send you into a mental tailspin.

  • You should be inside of your blueprint/wordpress folder.
  • Create a composer.json file and save to your blueprint/wordpress folder. I’ll get into some of what is going on in this file
    You can use my boilerplate here:

    {
    "name": "DigiSavvy Project Boilerplate",
    "description": "Plugins and Theme for Use with DigiSavvy Projects",
    "repositories":[
     {
     "type":"composer",
     "url":"http://wpackagist.org"
     },
     {
     "type": "package",
     "package": {
     "name": "some-like-it-neat",
     "type": "wordpress-theme",
     "version": "1.0",
     "dist": {
     "type": "zip",
     "url": "https://github.com/digisavvy/some-like-it-neat/archive/master.zip"
     },
     "require" : {
     "composer/installers": "v1.0.12"
     }
     }
     }
    ],
    "require": {
     "wpackagist-plugin/akismet":"dev-trunk",
     "wpackagist-plugin/what-the-file":"*",
     "wpackagist-plugin/developer":"*",
     "wpackagist-plugin/ninja-forms":"*",
     "wpackagist-plugin/jetpack":"*",
     "wpackagist-plugin/advanced-custom-fields":"*",
     "wpackagist-plugin/iwp-client":"*",
     "wpackagist-plugin/theme-check":"*",
     "wpackagist-plugin/webmaster-user-role":"*",
     "some-like-it-neat":"*"
    },
    "extra": {
     "installer-paths": {
     "wp-content/plugins/{$name}/": ["type:wordpress-plugin"],
     "wp-content/themes/{$name}/": ["type:wordpress-theme"]
     }
    },
    "autoload": {
     "psr-0": {
     "Acme": "src/"
     }
    }
    }

    https://gist.github.com/digisavvy/4f253ad84bafab6a6401

  • In your preferred text editor create a file named “composer.phar” and also save that to your blueprint/wordpress folder. It’s a Composer binary file and as far as I care, it’s that stinky-cheese eating kid that no one ever ate with in Middle-School.

Okay, so now we have a composer.phar and composer.json file here. Now what? Well, first, I do want to talk about the composer.json file a bit

What’s in the composer.json file?

All kinds of shit! I’m not going into all of it, just a few key points. This is where we set up the plugins and themes we want to download to your site.

Starting at the top
"repositories":[
{
"type":"composer",
"url":"http://wpackagist.org"
},

These lines tell us about a repository with a type of “composer” and a url of “http://wppackagist.org.” WPackagist is a site with a Composer repository that mirrors the WordPress Plugin and Theme repos! How cool is that? Updates around 15 minutes or so. Extra Yay!

 {
 "type": "package",
 "package": {
 "name": "some-like-it-neat",
 "type": "wordpress-theme",
 "version": "1.0",
 "dist": {
 "type": "zip",
 "url": "https://github.com/digisavvy/some-like-it-neat/archive/master.zip"
 },

This next block is where I’ve setup my starter theme, Some Like it Neat. You’ll note that this package is not on WPackagist, instead it’s coming to us from its spiffy Github repo. My theme isn’t properly version numbered, cause I’m a fucking hack like that.

Now with our two repositories setup I can run a command and Composer will download any plugins I’ve defined as well as my theme! My pants just got tighter thinking about… if I wore them, that is!

"require": {
 "wpackagist-plugin/akismet":"dev-trunk",
 "wpackagist-plugin/what-the-file":"*",
 "wpackagist-plugin/developer":"*",
 "wpackagist-plugin/ninja-forms":"*",
 "wpackagist-plugin/jetpack":"*",
 "wpackagist-plugin/advanced-custom-fields":"*",
 "wpackagist-plugin/iwp-client":"*",
 "wpackagist-plugin/theme-check":"*",
 "wpackagist-plugin/webmaster-user-role":"*",
 "some-like-it-neat":"*"
},
"extra": {
 "installer-paths": {
 "wp-content/plugins/{$name}/": ["type:wordpress-plugin"],
 "wp-content/themes/{$name}/": ["type:wordpress-theme"]
 }
},

okay, so here’s where we define our plugins and lastly our theme. Pretty straight forward. But look at that “extra” block there. Dafuq is that!!?

Well, Composer allows us to define an install path for our dependencies. From what we can see here our plugins and themes will go where we expect them which is to wp-content/plugins/plugin-name or wp-content/themes/theme-name

But before we all go getting too excited, all we’ve done is set up our config files for Composer. We actually have to install Composer on a per-project basis.

Creating a New Project and Running Composer

So far all of our work has been inside of the blueprint/wordpress folder. Now it’s time for us to actually spin up a new project.

  • Open up Desktop Server and create a site.
  • On the next screen is where you can select your blueprint. Select the newly available WordPress ‘blueprint’ you created and then proceed as usual to finish building your site.
  • Now, open a terminal (don’t lose your shit, this is easy-peasy here) and navigate to your new site’s root directory aka / aka forward-slash.
  • Run this command: curl -sS https://getcomposer.org/installer | php This should install Composer for this project
  • Now this is where the nifty shit happens. Run this command: php composer.phar install Hopefully if everything went according to plan and installed properly, Composer should be installing your plugins and themes, if you defined them. Go on, check your plugins/themes directory. Fucking cool, right?

So that is your long-winded, yet abbreviated, guide to WordPress + Composer.

Resources

Leave a Reply