Posted 02.18.2015

How to Segment your MailChimp List into Groups

MailChimp

The “Problem”

I know that I have a variety of interests and (for now) I want to blog about all of them in the same place. However, I’m not so naive as to believe that everything I’m writing about, is something you’re interested in too. I want to make sure I don’t bother you with content that’s not useful and interesting to you.

So…you may have noticed, if you sign up for my email updates, you have the ability to pick which categories you’d like to receive updates for.

Sign up for Email Updates

If you’re intersted in implementing a similar solution on your site, I thought I’d explain how I accomplished it on mine.

Publishing within WordPress

Categories within WordPress

  1. Each section (Photography, 101, Design, Programming, My Life, and Finder’s Keepers) is set up as a category within WordPress. When I’m posting, this makes it easy enough.

Creating a List within MailChimp

  1. Within MailChimp I have a single list for AMYHAYWOOD.com updates. Inside the list, I’ve created Groups for each category. To do so, go to the Lists page and click on the Create List button.

Create a List within MailChimp

  1. Fill in the form appropriately. (Note: You will probably be asked at some point to confirm that you have access to the Default “from” email so make sure it’s an inbox you have access to.)

Create a MailChimp List

  1. Next, under the Manage Subscribers dropdown, select Groups.

In MailChimp Manage Subscribers

  1. Click on the Create Groups button.

MailChimp, Create Groups

  1. As you can tell from the form options, there are several ways you can implement groups on your signup forms. Obviously, I went with checkboxes. Then, just fill in the details. When you’re done, click on the Save button.

Create a Group in MailChimp

  1. I didn’t have any addresses to import, so I clicked the Done for Now button.

MailChimp Groups, Done for Now

Creating a Campaign within MailChimp

  1. Then, within Campaigns, I have a Campaign set up for each category. On the Campaigns page, click on the “Create a Campaign” Button

MailChimp Create a Campaign

  1. Select an RSS-Driven Campaign from the menu

Choose a Type of Campaign within MailChimp

  1. From WordPress, I’m using a separate RSS feed set up for each category. This functionality is actually built into WordPress by default. It’s just a matter of figuring out what your URL is.

    Once that’s been determined, enter the the feed URL into MailChimp. Choose when you want to send out updates and on what days. Then, click the next button in the bottom right.

MailChimp, Create a Campaign

  1. Select the list you want to send to. Select Send to a new Segment. Then, select Group: Categories from the dropdown (NOTE: Instead of “Categories”, it may say whatever you labeled it as within the Campaign) and whatever category you want to send to. Click the next button in the bottom right.

Send to a MailChimp segment

  1. On the next screen, name your campaign. There are several other settings you can modify, I tend to keep the defaults. Then, click the next button in the bottom right.

Modify MailChimp Campaign Details

  1. Select the Theme you want to use. I won’t go into email templating here, but there’s a good Basic RSS theme that accomplishes our purposes just fine. Click on the next button in the bottom right.

Select a MailChimp Theme

  1. Make any tweaks to the design and content you want displayed. Then, click the next button.

Modify the MailChimp Design Template

  1. On the last screen, make sure your settings are correct and there are no issues. If you’re good to go, click Start RSS button in the bottom right.

MailChimp Start RSS

Getting the Embed Form

  1. Within MailChimp, go back to the Lists page, next to your list, select Signup Forms from the Dropdown form.

MailChimp List Signup Form

  1. I typically go with the Embedded Forms option.

Embedded MailChimp Form

  1. Make any changes to the form being displayed, then, copy and paste the code onto your site.

Embedded MailChimp Form

Badda-Boom! Badda-Bing!



Updated 02.18.2015

How to install WordPress Plugins with Composer

What happens when you’re working with another WordPress developer, both developing a site locally, and someone updates the plugins on their local version? Their syntax and implementation may be different than yours if it was a major release. Suddenly, your local copy is broken. No fault of your own, just inconsistencies within the project.

What do you do? How do you prevent that from happening?

Let me present another scenario. Maybe this one will hit a little closer to home. Everytime you set up a WordPress site, you have to go through the same motions of downloading, installing, and activating a set of plugins. Maybe you’ve upped the ante a little bit and have a set of files on your local machine you just copy and paste everything over. Regardless, it’s still a pain when those plugins are updated. You have to visit each individual site, download the revised plugin code and replace the existing copy on your hard drive.

There must be an easier way…and there is!

Composer

I’ve started using Composer in my workflow, now most of those headaches have evaporated.


First things first

Let’s get Composer on your machine (COUGH Mac).

If you visit Composer’s site, it will explain your options in more detail. My preference, though, was to install it globally so that the composer command can be run anywhere on your system.

Open the Terminal and from the command line, run:

curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer

NOTE

If the above fails due to permissions, run the mv line again with sudo.


On to the fun part…

Within your WordPress project directory, create a file called composer.json.

Wordpress Project Structure

As the extension suggests, this is a preference file, written in json that describes the plugins you’ll be installing and their version numbers.

Here’s my broilerplate. Feel free to copy it and use it as a stating point for your own projects.

Let me walk through it line by line.

The first few lines are pretty obvious. Name is the name of your project. You can replace ahaywood/PROJECTNAME with your information. Ideally, this should reflect your repo name.

Under authors, you can change “Amy (Haywood) Dutton” and “email” to include your name and email address respectively.

I’m going to jump down to line 27, where it reads extras. This defines the paths for both plugins and themes. As you can tell, I have a wp-content folder within the root that includes sub directories for plugins and themes.

On line 33, I’ve listed all the plugins that the project requires.

WP Packegist makes this easy. They mirror all the WordPress plugin and theme directories as Composer repositories.

What does that mean?

If you got to WordPress.org and find a plugin you want to implement, you can also find it on WP Packegist.

Take the first plugin I have listed: Backup WordPress. The part of the URL that comes after /plugin is the name of the WP Packegist repo.

Backup WordPress on WordPress.org

If you’re still not exactly sure what the name of the repo is, WP Packegist just implemented a search on their site. (Quick Note: I searched for “Backup WordPress,” first, and it did not return any results. But, searching for “backupwordpress” returned what I was looking for.)

Backup WordPress on  WP Packegist

Line 34 includes the full name of the repository: “wpackagist-plugin/backupwordpress”.

Screen_Shot_2015-01-08_at_6_27_33_PM

You can also see there are several other plugins from Wp Packegist that I’m referencing:

"wpackagist-plugin/backupwordpress" : "3.0.*",
"wpackagist-plugin/intuitive-custom-post-order" : "2.1.*",
"wpackagist-plugin/wordpress-seo" : "1.7.*",
"wpackagist-plugin/wp-help" : "1.3.*",
"wpackagist-plugin/user-admin-simplifier" : "0.6.*"

See the Pen Highlight WPackgist by Amy Dutton (@ahaywood) on CodePen.

The number following the name is the version number. The star serves as a wildcard. This means for Backup WordPress, versions 3.0.1 or 3.0.4 would both qualify. You also have the option of being explicit when you define the version number:

"wpackagist-plugin/backupwordpress" : “3.0.4”

NOTE

Just checking to see if you’re paying attention here. One of the cases I made for Composer was that it would lock down your plugin files. How does that work with wildcards and version numbers, obviously 3.0.1 and 3.0.4 are not the same. — For now you can just trust me or if it’s really bothering, skip down to the section where I talk about the composer.lock file.

The only reason that Composer knows to look at WP Packegist for these packages, is because it’s defined as a reference on line 11 and 12.

"type" : "composer",
"url"  : "http://wpackagist.org"

See the Pen Reference Wpackagist by Amy Dutton (@ahaywood) on CodePen.


Setting up a Premium WordPress Plugin (or a plugin on a private repository)

You’ll notice several other repositories are referenced on lines 14 – 25:

{
     "type" : "vcs",
     "url" : "git@bitbucket.org:ahhacreative/ahha<em>plugin</em>acf.git"
},
{
     "type" : "vcs",
     "url" : "git@github.com:ahaywood/ahha-gravityforms.git"
},
{
     "type" : "vcs",
     "url" : "git@github.com:ahaywood/ahha-wp-db-migrate-pro.git"
}

See the Pen Reference Repositories by Amy Dutton (@ahaywood) on CodePen.

and implemented on lines 39 – 41:

"ahaywood/ahha-gravityforms" : "1.8.*",
"ahaywood/ahha-wp-db-migrate-pro" : "1.3.*",
"ahhacreative/ahha<em>plugin</em>acf" : "5.1.*"

See the Pen XJpeYw by Amy Dutton (@ahaywood) on CodePen.

The reason these are different is because they are premium plugins and unavailable on WordPress.org. I still want to use Composer, though, so I’m hosting them in private GitHub and BitBucket repositories

First, I tell Composer what type of files they are (vcs) and where they are located (url).

{
     "type" : "vcs",
     "url" : "git@github.com:ahaywood/ahha-gravityforms.git"
},

See the Pen EaZwRq by Amy Dutton (@ahaywood) on CodePen.


NOTE

The URL is the SSH address, NOT HTTPS.

Then, I reference them as project requirements:

"ahaywood/ahha-gravityforms" : "1.8.*",

That takes care of our composer.json file. Woo hoo


Now let’s talk about actually getting that plugin set up correctly on your BitBucket, GitHub, Beanstalk, or whatever account.

Here’s what I do: Download the plugin code. Create a folder on my computer where this code can live. I actually have a folder called COMPOSER for this exact purpose.

Composer Files in Finder

Within the plugin folder, create a composer.json file

Screen Shot 2015-01-08 at 9.13.24 PM

This file is a lot smaller than before:

  • name is the name of the repository
  • type is the type of file it is. — It could be “wordpress-plugin” or “wordpress-theme”. (Remember, when we talked about installer-paths in our first composer.json file? We defined the install paths for both a wordpress-plugin or wordpress-theme. Line 29 and 30. It actually looks at this line to know what the type of file it is and to make sure it gets installed in the right place.)
  • require this line refers tothe version of composer we’re running, NOT the version of the plugin. (Can you tell I’ve gotten that mixed up before?)

Add this folder as a local repository. My app of choice is Tower.

Add a Local Repo in Tower

Run an initial commit.

Then, create a remote repository and link it to your repository.

Adding a remote repository in Tower

Now, you’ll also need to create a tag for your commit. This relates to the version number you’re referencing in your composer.json file. I like for my numbers to match the develpers’ release numbers.

In Tower, you can click on the branch, then right click on a particular commit. Select “Create New Tag from…” in the drop down menu.

Adding a tag within Tower

In GitHub, tags are referred to as releases. So, if you’d prefer to do it from their site, you can click on the Releases tab, then Draft a new release.

Release inside GitHub
Draft a New Release inside GitHub

Updating your plugin

When you get ready to update the plugin, simply download the latest release from the developers’ site, then replace all of the code in your local repository with theirs.

Commit it, tag it, and push it to your remote repository.


F-I-N-A-L-L-Y

Let’s download all these plugins and actually install them on WordPress.

Within the root of your project folder, inside the Terminal, run composer install.

Run composer install from Terminal

It might take a while, but when it’s done, you can go to the Plugin screen of WordPress and activate all your plugins.


Troubleshooting

If you get an error within the Terminal about not having the right privileges to download the plugins, it’s probably related to your SSH keys.

I actually wrote a blog post about Setting up a Site with SSH. I can’t tell you how many times I actually reference that post myself! The post refers to SpringLoops, but the same applies here. Scroll down to where it says, “First, you’ll need to check for existing SSH keys.” Once you copy the keys to your clipboard, you can go to your service of choice, find the section that says SSH keys, and paste them there.

SSH Keys within GitHub
SSH Keys within BitBucket


Update January 26, 2015

I just moved all my Composer plugins off of GitHub to BitBucket. I had some problems. I kept getting an error everytime I ran composer update:

composer_update_error

I was finally able to get it to work, but I had to change the version number within my main composer.json file to dev-master. In context:


"require": {
     "ahhacreative/ahha_plugin_gravityforms" : "dev-master",
     "ahhacreative/ahha_plugin_wpdbmigratepro" : "dev-master"
},

Then, within each individual plugin’s composer.json, I had to add a version and dist parameter:


{
  "name": "ahhacreative/ahha_plugin_wpdbmigratepro",
  "version": "master",
  "type": "wordpress-plugin",
  "require": {
    "composer/installers": "v1.0.6"
  },
  "dist": {
        "url": "git@bitbucket.org:ahhacreative/ahha_plugin_wpdbmigratepro.git",
        "type": "git"
    }
}

Update February 18, 2015

I just ran into an issue when I was trying to deploy my site via capistrano: No submodule mapping found in .gitmodules for path.

No Submodule Mapping Found

Fortunately, this article pointed me in the right direction. Within my root directory, there’s a file called .gitmodules, I opened it up and all that was listed was the WordPress submodule:

[submodule "wp"]
	path = wp
	url = git://github.com/WordPress/WordPress.git

I added the following lines:

[submodule "ahha_plugin_acf"]
 	path = wp-content/plugins/ahha_plugin_acf
 	url = git@bitbucket.org:ahhacreative/ahha_plugin_acf.git
[submodule "ahha_plugin_gravityforms"]
 	path = wp-content/plugins/ahha_plugin_gravityforms
 	url = git@bitbucket.org:ahhacreative/ahha_plugin_gravityforms.git
[submodule "ahha_plugin_wpdbmigratepro"]
 	path = wp-content/plugins/ahha_plugin_wpdbmigratepro
 	url = git@bitbucket.org:ahhacreative/ahha_plugin_wpdbmigratepro.git

Problem solved.


composer.lock

You’ll also notice that now, in addition to your composer.json file, there should be a composer.lock file. This file locks things down. It records the exact version of the file being installed.

If you want to update your site, simply go to the composer.json file, update the version numbers and then go to your project folder, inside the Terminal, and run composer update. Yep! That simple.


This seems awfully complicated…

Like a lot of things in the dev world, it can be a lot up front. That’s the learning curve talking. But, once that’s mastered, things go a whole lot faster. So, here’s my process now:

  1. Create a WordPress project using Yeoman.
  2. Within the root folder, create a composer.json file, copying and pasting my own GitHub boilerplate gist.
  3. Go to my project in the Terminal and type cu (I have Oh My Zsh! installed with the composer plugin activated.)

That’s it! 3 steps!



Posted 01.07.2015

The Lazy Smart Programmer’s way to set up a WordPress Site

Coding

When you get ready to set up a WordPress site, typically your process looks something like this:

  1. Download the latest version of WordPress from wordpress.org
  2. Unzip it.
  3. Copy and paste the files into a local directory (you are developing locally, right?)
  4. Create a MySQL database.
  5. Run the 5 minute WordPress install.
  6. Download your starter theme.
  7. Unzip it.
  8. Copy and paste the theme file into WordPress’s theme directory.
  9. Find your base plugins that you know you’ll need. Download each of them individually.
  10. Copy and paste the plugin files into WordPress’s plugin directory.
  11. Start your custom work.

That’s 11 steps, at least! I know, if you do it enough times you could probably get that down to a 15 minute setup, and that’s probably only if you have local versions of your boilerplate theme and plugins that you can quickly copy and paste into the respective directories.

But, why? Why would you even want to waste your time doing such mindless work every time you start a project when you could be spending that time designing and developing something beautiful and original?

What if I were to tell you that you could cut down that down to two minutes…on a bad day? Interested?

If you can hang with me for the length of this post, we can get you set up and you can start being more efficient.


Remember in English class, how they told us to (1) say what you’re going to say, (2) say it, and then (3) say what you said. I always remember thinking, “That sounds redundant.” Well, I’m going to take a lesson from Mrs. Nooks. I’ll tell you a little bit about the tools we’re going to put in our tool chest, then I’ll show you practically how to use them. It may get a little technical from time to time, but try to stick with it, it will be worth it.


Node.js

A lot of services are built on Node.js. If you visit the Node.js site it says it’s built on Chrome’s JavaScript runtime. Just know, that means f-a-s-t.

If we’re going to use it, we have to install it. Fortunately for us, this is easy. There’s a big green “install” button their site. Click it.

Node.js

Once the package is downloaded, unzip, and double click on the package to install it. Hooray!

Node successfully installed!

NOTE

Grunt and Gulp also run on Node. (Blog post for the future.) Just know, for now, we’re set up for success!

 

Yeoman

Yeoman is a project generator. It can do quite a bit, setting up sites and scaffolding (and not just for WordPress). We’re going to take the easy way out and use a generator Wesley Todd has already created specifically for starting a WordPress project: YeoPress.

NOTE:

To run YeoPress, Node is the only thing that is required (which we just installed), however, Wesley encourages you to have git and SASS installed, too. If you don’t, no worries, it’s pretty straightforward too:

git

You can go to the git website, download the file, unzip, and double click on the package to install it. Done and done.

SASS

SASS is a Ruby gem. If you’re working on a Mac, it comes with Ruby already installed. All you have to do is open up your Terminal (GASP I know, it will be OK.) and run the command:

gem install sass

If you get an error, chances are you need to run the sudo command:

sudo gem install sass

Sudo forces your computer to run the command. It will ask you to enter your computer’s password.

If you want to check to make sure everything was installed correctly, you can run:

sass -v

You should see it return Sass 3.4.9 (Selective Steve).

Now, for installing Yeoman (yo) and YeoPress (at the same time). Within the Terminal run:

npm install -g yo generator-wordpress

npm just means that it’s a node command.

Easy.

Now, within the Terminal, we just have to navigate to the folder we want to install WordPress inside of.

If I lost you at, “within the Terminal,” it’s OK.

For the longest time, I was uncomfortable inside the Terminal, too. But, I promise, the more you use the more comfortable you’ll become. As soon as you see the benefits that the Terminal provides your workflow, it will eventually become something you can’t / won’t want to ignore.

You can get started with the Terminal here.

Now, run:

yo wordpress

You’ll see the WordPress logo appear and it will start to ask you a series of questions about how you want to set up your WordPress install:

WordPress URL
If you’re doing local development (as you should), enter that URL in.

Running yo wordpress within the Terminal

Table Prefix
This is the table prefix for your WordPress database. By default it’s wp_. Stay with that. It makes it easy when you’re looking at your database to be able to tell which tables are related to your WordPress install.

Table prefix when running yo WordPress within the Terminal

Database Host, Name, User, Password

Entering Database credentials when running yo wordpress

I use a free app on my Mac, called Sequel Pro to manage my databases. But, if you’re using MAMP, you can do everything through PHPMyAdmin.

MAMP will also list all the credentials you need (host, user, and password) on the WebStart page.

Webstart Screen in MAMP

Use Git?
More on this later, too, but for now, take my word and just say “Yes”…err, rather “Y”.

use git inside yo wordpress

Would you like to install WordPress as a submodule?

There are people that sit on both sides of the fence on this one, people for and against.

My personal take?

First, let me explain what a submodule is. Submodules are a “Git thing”. It’s essentially an external Git repo that your repo references. Think of it as a nested repo that you can update it independently.

When you think of it in those terms, it makes sense to implement WordPress as a submodule. I don’t manage the WordPress core, so why not make it seperate and reference the actual WordPress repo itself?

If you implement WordPress as a submodule, you’ll using the following commands to update WordPress later:

cd wp
git fetch && git fetch –tags
git checkout 4.1
cd ..
git add wp
git commit -m “Updated to WP 4.1”
git push

Not too shabby.

NOTE:

If you get an error, when you try to update WordPress, like: Your local changes to the following files would be overwritten by checkout. Try forcing the checkout:

git checkout -f another-branch

So… “Yes” install WordPress as a submodule.

Wordpress as a submodule

WordPress install directory
My personal preference is “wp.”

This means when I log in to the admin panel, the address will be: http://SITENAME.dev/wp/wp-admin

WordPress content directory
I go with “wp-content.”

Directories for WordPress Install

Install a custom theme?
I choose “no.” But, I think this would be a good area, in the future, to streamline my process even more.

Does this all look correct?
It’s always comforting that it asks you to double check. “Yes.”

yo wordpress - all correct?

Boom! It will download WordPress for you and set up your config file. Granted, the set up may sound a little verbose, but we just condensed that 11 step process into a few lines of code.


For future reference:

If you clone your repo and the wp directory is blank (WordPress is a submodule, remember), run:

git submodule init && git submodule update

Also, if you need to update YeoPress, it’s as simple as running the following line:

npm update -g yo generator-wordpress