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

A Rule of 5 to Live By…

Many of my colleagues who work with WordPress have, by now, no doubt  read Matt Mullenweg’s post regarding giving 5% back to the WordPress open source project. It’s a notion that has inspired a lot of discussion already and I don’t think I have much to add to it. I can contribute to the noise, however.

From a literal standpoint, 5% can be tough to make sustainable.

“How do you eat an elephant? One bite at a time”

— Creighton Adams

The fact is that there are so many ways we can contribute to the thing we make a living off of that is, essentially free. You don’t have to be a “Nacin” you can just be you and contribute in your own way.

While just as important, if not more so, to growing adoption of WordPress, the community around it is a big responsibility. It takes a lot of people a lot of time to organize meetups, WordCamps and other related events. And these folks are volunteers, too, just like those contributing to support forums, UI/UX and bug-squashing.

I haven’t contributed anything to core at this point, but I have contributed to community building around WordPress and that’s been a rewarding thing. One thing I try to tell people who attend meetups or WordCamps is that the things you come for at these events don’t have to end there. You can go and take them out into the world and make your own contributions.

I look to a friend of mine, Roy Sivan. The guy basically didn’t hire me for a job a few years back, I’m not bitter though! I  hadn’t seen him for a couple of years after that interview where I didn’t get the job. Then he started coming to WordPress events; then he started contributing in online communities; then he started speaking at events, including his first WordCamp, in LA. He’s going to speak at another WordCamp and will no doubt spend countless hours online contributing his thoughts and opinions and helping people and will likely make some core contributions at some point, if he hasn’t already.

More than squashing a bug or committing a patch the WordPress community has big sharp claws that pull you in. People are often amazed that they’ve been “outside of the loop” and “had no idea” such community existed. But it does. And you can take part. You don’t have to organize events; you can attend them, learn from them and then share what you know. You can speak, tutor or donate your services and time.

This post isn’t about any perceived slight against community building. I think all methods of contribution to the WordPress project are thankless in their own special ways. But in whatever way you contribute take note of the ripple effect that YOU have in the community. Maybe the things you do gives the community the next person that does something or says something great.

It doesn’t have to be 5% either; I think the ability to take ownership of your stake in the project you make a living from is enough. Whatever that ownership means to you is just fine. For me, I’m going to keep helping nurturing my local community; getting more folks to share and take part and, who knows squash a bug or two and submit a patch at some point. Boom!

What will your 5% look like?

Appending Markup to Slides in Soliloquy

This is a simple little snippet. On a project I’m working I had a need to include social share buttons with each item in a carousel slider.

Anyone who asks me knows that I’m a big fan of Soliloquy, from Thomas Griffin Media. I’m a fan because it’s a simple solution with some nifty add-ons and does what I need it to without too much fuss.

With the 2.x update Soliloquy added some filters to their plugin, making adding your own markup to your slides easier.

/* Filter to Append HTML to Slides
============================================= */
add_filter( 'soliloquy_output_slide', 'tgm_soliloquy_custom_html', 10, 4 );
function tgm_soliloquy_custom_html( $html, $id, $image, $data ) {
 
 $slider_id = $data['id']; // Get Slider ID
 $slider_img= $image['src']; // Optional; Getting Image URL from slider object
 
 if ( '1937' != $slider_id ) return $html;  // If the ID doesn't match the one we want to modify, return the default HTML output. Change 1937 to your slider ID.
 
 ob_start(); ?>
 
 // Your Custom Markup to append goes here.
 
 

$data[‘id’] grabs the value of the ID slider you wish to target. You don’t need to do anything with this if you plan on appending custom markup to all of your slides.

Since I’m targeting only one slide I’ll be using the conditional statement below.

if ( ‘1937’ = $slider_id ) return $html;

Plugin your own slide ID in place of 1937.

We’re using an output buffer to hold our markup, clean it up/sanitize it and then appending it to each slider object.

Give it a spin on your next project.

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!

WordPress Pasadena Meetup for May

It’s gonna happen folks, looks like we’re having our meetup in May, after all. So come on out, learn, share and be a thug whilst drinking coffee and eating so many scones that your eyes egg-sploded

** NOTE ** This month we’re meeting at a different location: Copa Vida and they have graciously offered to host us this month. I would ask you to show your appreciation by filling up on soooooo many snacks and caffeines in liquid and solid forms!

Meetup Link: http://www.meetup.com/wordpress-pasadena/events/180626072/

My Review of Thrive Content Builder

Thrive Content Builder is a front end editor for WordPress. A tool like this is something valuable for all users. Why? For me, I want to build a decent looking landing page that doesn’t take a lot of time to set up. For less experienced users, it’s a great way to feel empowered over their content. So I saw this mentioned in the Orange County WordPress Facebook Group. I jumped-in and figured it couldn’t be any worse than what’s already out there.

So what was I going to try to build? Something of a landing page like what we see below.

Screenshot 2014-04-28 16.54.18

So what’s the problem?

If you watch the video that Thrive Themes put out for their Content Builder, they hit on the reasons why existing page-builder plugins suck. Specifically they show the awesome content screen with all the shortcodes on it, like this one here:

Screenshot 2014-05-04 23.05.01

Change the color of the borders now… Which is an over simplification of a general problem many have with builders such as Visual Composer. Layouts are achieved via an absurd number of shortcodes. Don’t get me wrong, I think Visual Composer is a good tool and my clients that use it regularly are just fine with it… When it doesn’t break after an update, which has been my frustration with that tool.

How is Thrive Content Builder Different?

Thrive Content Builder says that’s not a problem with their tool. And I guess that’s mostly true. But they still use shortcodes, too. They just present the edited content differently.

Screenshot 2014-04-28 16.30.01

The editing happens on the front end only, so you can’t use the standard editor AND this plugin. When you go to edit that page, there’s no content in the editor at all. It’s like Velocity Page in that regard.

What Does it Look Like?

Screenshot 2014-05-04 23.15.26

Nothing too crazy here. Just a palette/panel, which you can set to the right, if you want. From that palette is how you will build your pages.

You can click an element for it to pop on the screen, alternatively you may drag and drop that element where you need to.

 

How Well Does it Work?

My first impression is positive. It works pretty well, really well, really. I like how easy it is to set a page up. Clicking and dragging/dropping elements as-needed is a snap. It’s fairly easy to change an element’s attributes when you need to…

A few quick hits

  1. Works on any Post Type
  2. Set up simple landing pages easily.
  3. Only affects the Content Area, not the header or footer, of a given page.
  4. Page elements are responsive out of the box
  5. You may use your own classes and IDs on the page elements you create, to better integrate with your site’s design scheme.
  6. You can grab the HTML generated by Thrive Content Builder and paste it into the classic back-end editor if you’d rather not continue editing in the builder. That’s nifty!

 

Clicking any on-page element within the Content Builder pops-up an editor like below…

Screenshot 2014-05-04 23.28.55

That’s all well and good and is about what I’d expect. It’s a positive enough user experience.

Quickly build popular page elements, like Pricing Boxes.

Screenshot 2014-04-28 16.33.13

Yep, I hate the shit out of pricing boxes, but this thing handles them well and changing colors is possible with a single click, or entering the actual hex value. So that’s nice. There’s some other pre-built page elements in there too, such as feature grids, tabs, accordions and a couple other items. Yay!

A couple of things that I see as issues:

  1. The standard Youtube and Video share URLs do not work in Thrive’s content builder at this time. You need to grab the actual embed code, instead. They have mentioned they are working that issue out.
  2. Their editor doesn’t seem to handle existing content. You can design and build elements around existing content, but you can’t otherwise interact with it within Thrive Content Builder. You need to go to the edit screen for that to work.
  3. You will run into issues where certain page elements can’t be clicked on to change. In particular bulleted lists are problematic. You’ll notice that the check mark bullets on the right are blue. I couldn’t change their colors because I simply couldn’t click that element (and they are clickable).

How Did My Landing Page Build Go?

You tell me! http://alexvasquez.wpengine.com/test-landing-page/ — That page took just a shade under 5 minutes to build. If I was building something using real content, I could build this page out in 5 to 10 minutes, just in placing page and text elements. I think that’s pretty good!

All in all, I think Thrive’s a good solution for front-end editing; it’s still got a ways to go, but I think it’s ready for use now and support has been responsive thus far.

Check it out for yourself and let me know what you think. Thrive Content Builder Link.