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

Genesis Starter Theme Using Bourbon Neat

And I’m at it again! This time I decided to cobble together a very basic Genesis Starter theme that uses Bourbon Neat. You can find that project here: https://github.com/digisavvy/genesis-bourbon-neat.

Plugging away with different tools is a lot of fun actually and you learn different tricks; apply new ways of thinking and more. I feel like I’ve been on this anti-framework kick of late. I’m not anti-framework. I think they’re great, actually! I just understand better what they are and what they can do to enable me to do my job better. I guess that’s what it really comes down to.

I wanted to break down a Genesis starter theme to its most basic elements, visually, by having a lean CSS base to start from so that you only have to build up and not have to tear down, so to speak. It’s kind of like _s (underscores) in that regard. Have a look and let me know whatcha think!

My WordCamp OC 2013 Saturday Talk

Linda Sherman had mentioned that my talk from WCOC 2013 hadn’t been posted to WordPress.TV. Not a big deal, but it went better than my hungover Sunday presentation. So after pinging my buddy, Jason Tucker, he was able to get the video uploaded to the site and so I can share it with ya! =)

Having some time to think about this and how I’ve grown since this talk, there’s a couple of amendments I’d mention and really break things down by stating that we’re all using a Framework of some sort (unless you’re building from scratch). Genesis, Headway, TwentyFourteen… They’re all Frameworks of some sort… Anyway, video is below. Have a look and lmk what you think.

Direct Link

The Story of “You.” A Bit on WordPress Themes and Business.

I was on WP Watercooler earlier this week. And we talked about what WordPress themes best help businesses reach their goals. It was a lively talk, of course.

This is a topic that’s near and dear to me and it’s been covered by my buddy, Mr. Lema. Now, I can’t tell any one specific business owner what theme will best match their goals. I can’t. But what I can do is share a story that I think illustrates this point well enough.

I want to tell you about a meeting I had with a client of mine a couple of weeks back… So, there I was, standing at the front door of an office that was a pretty messy canvas, if you will. They were moving into this new space. Getting things ready. They had a custom made logo mounted to a wall. Around the corner were these beautiful mahogany desks that were being hand-finished; there was a tree that had been brought in from some far off place; there other decorations that were being ordered from etsy and on top of that, white-colored appliances were “out” for not being in style with the new digs… Whew. There was a lot in motion that day.

Great, so why does any of this matter and how does it relate to the story?

Well, I’m getting to that! But I still have more story to tell! You see, this client puts on a hell of an event. They don’t do weddings; they don’t do company retreats (well, if you’re big enough then maybe they would). These guys do events for companies of global scale. Think Microsoft; think Pepsi; think BIG! These guys do amazing work. The attention to detail they bring into their own office is what they bring to their events, just multiply that effort by one hundred.

One of their people mocks up and creates 3d illustrations of the event area, using Google Sketchup. They use to-scale environments, artifacts, furniture; you name it. Then, as if that wasn’t enough, they feed in data so that their clients know what the weather and light would be like at different times of the day. It’s a complete solution they offer and they do it proudly. And they should. It’s truly amazing work.

These guys have a story to tell. They want people to know that a.) They do great fucking work and want them to be blown away. b.) They want people to know the story of who they are and how they came to be and c.) They want people to know their process and how they put all the awesome together to assemble Voltron every time out.

Ok, great. But what does this have to do with WordPress Themes?

It was obvious, within minutes, that these guys were serious about their brand and their message. That was above and beyond making a “cool site.” It had to effectively communicate those things they take pride in; those things that set them apart. Ok. No problem.

Yet, it is a problem. My client’s team has taken a lot of time reviewing many sites; coming up with things they liked and didn’t like. And through all that research they didn’t find something that would fit the bill. And this was the story I came in on.

Having observed what they were doing with their office and listening to their story, it was clear to me that the best theme for them was the theme that told their story; showcased their work and really displayed how they’re different and why. It was also clear that nothing off the shelf would do the trick. These guys were importing plants, finishing their own desks, by hand and their passionate attention to detail screamed what I already knew. The right theme for these guys, in this case, was something built from the ground up, with their story and brand in mind. And that’s what I told them. There was a moment of collective pause, but they all got it. It “just made sense.”

Not everyone fits that bill, of course. There’s a number of beautiful themes out there. My colleague and friend, Devin Walker, is a theme-wizard. Really. And he makes things that can be customized and used for most purposes. The right theme should communicate your passion; your story and why you do what you do. It sounds hokey. Believe me, I know. And there are a great many businesses that run a theme based off of some other turn-key solution and they run with it. Nothing wrong with that. If that theme helps you communicate your business’s most critical points, by all means, do work and get that thing running. But, there’s a certain something to seeing something built, just for you; something that no one else has… I love doing that; I love building things that “just work” and service a particular need.

So, what should I do, then?

Understand what your business is about. It’s not just about selling this product or that; it’s not about doing this one thing better than the next guy, well, it sorta is… But you know what I mean. Know why you’re in business; know why people like working with you; know what makes your product better and be in touch with why you do what you do. I know it sounds cliche, but people really connect with quality and also the reason behind what you do and why. The detail of thought hat goes into this is absolutely crucial and you should work with someone who knows what they’re doing, so they can help you flesh out your direction.

So, ask yourself: What is the story I want to tell about my business?

On Frameworks Coming to the Rescue

WordPress FrameworksMy last two talks at WordCamps have been about Frameworks vs. Parent/Child Themes vs. Starter themes and why you might choose one over another, given any particular project. It’s not the most exciting topic, but it’s one that’s relevant to a good number of WP Devs out there.

If you have worked with WordPress theme development for any length of time, then you know what tools work best for you. Maybe it’s Roots Theme every time; maybe you’re a Genesis Person; or maybe you roll your own every time. That’s great.

For the last year or so, I’ve been building everything from a starter theme. I love the control that I have and that I’m really building something from very little. It’s been more satisfying, as a theme dev and also has forced me to learn a lot more about WordPress than I would have thought; and continually humbles just how much more there is to learn. That’s a good thing.

Well, this week, a friend and mentor of mine came to me in a bit of a bind. You know the kind: “Dude, we need this site built in a week and the budget is X dollars where ‘X’ doesn’t quite match up to the amount of time and headache the project is likely to exact upon your already hectic schedule. I, as a general rule, turn down this type of work. In this case, I just couldn’t. This is someone who gave me a lot of their time and experience when I was really coming on board as a business person back in 2010. With a sigh I said, “Sure, buddy, let’s hash details.” The good thing was that everything was available. FTP Access, cPanel access, design PSD, content. Awesome! I like that! They even had a theme up and running, too. It just needed to be “finished.” Well, digging into the thing was awful. It was the shoppica theme, which you can buy on ThemeForest… But don’t. Just. Don’t.

The theme was firing off a ton of errors while the site was in debug mode and there were plugins loading directly from the theme that was causing conflicts with other plugins… Gah! You know how this can go, right? If you’ve built sites for clients, you’ve been in the trenches and know how this goes. And so did I. I’ve travelled down the deep and dark paths of “poorly built” themes and regretted the journey each time. I said, no way, not again and I began to weigh my options…

Take the existing design and put it in Underscores and go; or take a framework and go that route. Underscores was appealing, but I’m not a fast developer by any stretch. Not at all. I knew that to rebuild the design from a starter theme was going to take a good 7 or so days of work (considering I have other projects I’m working on, too) but this was due in 5 days. I know the Genesis Framework rather well and it had been my trusted tool of choice before I started using Underscores. It was a no brainer. It’s as though I reached into the closet and pulled out my trusty hi-tech plasma sword. All told, I rebuilt the site in about 10hrs with some pretty heaving customizations to the homepage and also adding a means to create landing pages (leveraging Advanced Custom Fields Heavily). I was pretty damn relieved and my friend was, too, obviously.

The moral of the story here, and one of the reasons why I just love the WordPress eco-system, is that there are just so many cool ways to skin a cat (don’t actually skin a cat though, that’s kinda fucked up). It’s not as though my route was the best one to take, but it did work for me and it really came down to knowing my tools and getting out there and using them. In this instance all the stuff that makes working with a framework great (having set typography, pre-made grids, basic responsiveness etc) really ramped up my ability to deliver in a timely fashion. This is why we, as developers, SHOULD be experimenting with the various tools available to us.

Some Like it Neat Child Theme

I put together an uber-simple child theme, called “Neat Child”, which you can download here (https://github.com/digisavvy/neat-child).

This theme isn’t for the faint of heart. That is, it’s not yet easily customizable, whether you use it as a parent theme or as a starter theme. Either way, there’s a curve to learning it. The good news is that I don’t think it’s all that hard to get ramped up. Obviously, the big thing here is that you should learn SASS, if you really want to use the theme.

If you have any thoughts on the theme feel free to let me know.

Quick Update on ‘Some Like it Neat.’

I’m still plugging away, learning and tweaking ‘Some Like it Neat.’ If you recall, it’s a project I started putting together a couple of weeks ago leading up to WordCamp Las Vegas. I’d love some more feedback/contributions, obviously.

Things to be added:

  1. Page Templates — Archive, Left/Right Sidebars, improved 404
  2. Post Format Templates — The theme already comes with post format support baked-in; I’d like to offer more specific page templating for post formats however.
  3. Internationalization aka i18n. I’d like to distribute this theme in the WP repo at some point.
  4. Customizer tweaks. Nothing crazy, but I’d like users to manage a few key areas of the theme.
  5. Microformatting — I know very little about this, so I’ll be reading up and pinging my friends on this.

Things to take away?

Perfection is achieved not when there is more to add, but when there is nothing more to take away — Some Mother Fucker

The jury is still out on that; I’ve included some questionable items such as superfish subs. I do like that it offers legacy support for IE; which isn’t something I need to worry too much about these days. It’s just “nice to have.”

I’ve mulled over the “what to include” question for a while. What does MY starting point look like? Well, for me, drop downs, extra page templates etc. But as I thought about it more I asked myself questions: Do I really give a shit about breadcrumb nav? Not really. Do I care about built-in SEO? I mean, sure. I do. But I like Automattic’s recent change in mindset in having ‘features-as-plugins’ and think that I’ll follow suit. To that end I’m using the TGM Plugin Activation to notify users of recommended plugins (just for breadcrumbs right now). I like that approach. A lot.

What’s your starting point? Drop me a comment and let me know.

Some Like it Neat

So, I ran 9 miles today. I took a nap and for the last few hours I’ve burned away on a starter theme. It’s called ‘Some Like it Neat’ and you can fork it here, on Github.

The project isn’t a big deal. It’s, like many projects, just something I’m toying around with. I want to build a lean starter theme with a little more stuff in it than something like Underscores provides. As of this writing, my blog is running an early, early version of the theme.

Who gives a shit and why are you doing this?

Your mom? For more than a year now, I’ve been rolling themes from starter themes and it’s been a lot of fun and I’ve learned so much by doing so. Previously I was a big Genesis fanboy and I still am. It’s a solid framework, in my opinion. But it has a lot of shit I don’t need. So I set out to build something a little simpler. Additionally, it would give me a chance to get my hands dirtier with Sass and using Bourbon (a Sass library  of mixins and functions) along with Neat (Bourbon’s grid framework).

That’s great, why not use Compass along with Bootstrap or Foundation. I like Foundation, I’ve used Foundation and it is a lot more than what I need. Don’t get me wrong, it’s great. But the thing I’m trying to do here is do more with a bit less. I’m using tools where they make sense. I think great flexibility can be achieved very simply. So I just want to build a simple theme, that’s easy to ramp up that you don’t have to fight against (which is the thing I am annoyed with when working with frameworks).

So what’s in the box, foo?

Good question.

  • Bourbon (Sass goodies)
  • Neat (Grid Framework)
  • Coming soon — Theme Hook Alliance to use hooks in the starter theme. Typically, hooks see a lot more use in frameworks than they do in starter themes. I love working with hooks and I think they make managing a theme so much easier. It’s just a preference.
  • Sass, of course. I’ve used it on a few projects, but I don’t really think I’m using it for all it can do. Natalie MacLees schooled me on some responsive Sass trickery a few weeks back and it’s literally changed my view on Sass from being a “nifty tool” to something that’s just badass and a must use in any project going forward.

What’s Next?

I’m going to keep plugging away on it, but my hope is to get some contributions from my local WordPress community and beyond.

Let me know what you think and feel free to contribute.

https://github.com/digisavvy/some-like-it-neat