September Developer Meetup Notes – Making WordPress Plugins and Themes Extendable


This presentation was about how to add your own hooks to plugins and themes.

Other Cool Stuff Talked About

WordPress Plugins to Check Out

  • MinQueue – Plugin to minify and concatenate enqueued scripts and styles

Slack Stuff

WordPress uses Slack now. Check it out:

  • Prowd – A Slack integration to recognize your team’s work.
  • Tatsu – Standup meetings for remote teams
  • Polls – Add polls to slack

Misc Stuff

  • GitUp – Makes git painless
  • Kanbanize – Online Kanban software
  • speetest-net – NPM package for running a speedtest from the command line

July Meetup Notes from WordPress St. Louis West – WordPress security using iThemes Security

Jason Yingling, Developer at Red8 Interactive hosted our first Meetup in St. Charles. The turnout was great for our first event. Thanks to OPO Startups and the rest of the Red8 crew for making us feel welcome. We’re looking forward to the next meetup out west!

Jason talked about WordPress security using iThemes Security, a popular security plugin. Even if you don’t use iThemes Security (and why not? It’s a really good plugin) there are a lot of tips and tricks that can help make your site more secure. Check out the presentation below.

If you’d like to know more, Jason is hosting the August WordPress St. Louis West on the 24th. He’ll be talking about how to go from a PSD to a WordPress template. RSVP today!

Westward Ho!

This month we’re going to try something new. A meetup for our Western community. No, we’re not donning cowboy hats and spurs, we’re having an event at the new OPO Startups building in St. Charles!

Nice place they have there, eh?
Nice place they have there, eh?

This is a trial to see if a more westerly event can sustain itself within the community. If things go well, this will be an addition to our existing Developer and General meetups on the first Monday and third Wednesday of the month, respectively. We’re going to try for the fourth Monday of the month.  For this first go-rough, the talented Jason Yingling from Red8 Interactive will be talking about security using iThemes Security.

Join  us!

Quick WordPress Optimizing Tips

Last week I sat in on this great A List Apart: On Air event titled  “Designing for Performance” It was their first online-only panel with four great presenters. Along the way I picked up a few tips and tricks I wanted to share with you all.

Here’s a few quick things you can do to improve the performance of your WordPress site.


Before we begin, if your site is accessible from the web, punch in its URL into one of the following tools (or both!).

Make a note of the scores you’re given. We’ll compare them at the end.

Use a caching solution

The first thing you can do? Install a caching plugin or setup an in-memory cache. For folks on shared hosts (Bluehost, Hostgator, etc) the easiest (and often only) option will be going with a plugin. My plugin of choice is WP Super Cache.  Why this one in particular? It’s been around for ages, is super easy to use while still being customizable, and it’s authors include Donncha O Caoimh and Automattic. A pretty good pedigree if you ask me.

If you don’t want to do much mucking around, just install the plugin and turn on caching. This will allow your site to serve static version of your pages. This make your site quicker as WordPress (and the PHP/MySQL behind the scenes) doesn’t have generate a new page for each visitor.

Advanced options that I like to use are in the screenshot below. I like to make sure I enable  compressing pages as less data has to get tossed around. “Don’t catch pages for known users.” is handy if you’re an individual editor (or have a small team). This tells WordPress to alway serve up a new page to folks who are logged in to your site. This way you always see your updates without having to clear the cache.


Compress your theme’s images

Let’s say you’re building a theme from scratch, using a child theme, or even just uploading a nice crisp PNG for your site’s header image. In each case WordPress  will use images within the theme to display common elements – like that header image. When these elements appear on every page your site has to serve up that image to every viewer, every time.

One way to speed up your site is to make sure you compress these common images as much as possible. This doesn’t mean degrade their quality with heavy compression like jpg images, but to remove as much metadata and use more advanced compression algorithms as possible.

Side note: Another big win for leveraging smaller images is to make sure you’re not uploading giant images to only have them displayed at small sizes. That’s a whole ‘nother post on its own!

How do you do this? Grab an application like ImageOptim or RIOT.

With either of these apps you can drag and drop in your images and let the tool do its magic. This includes background images, header images, or even icons used across your navigation and widgets.

Here’s an example of a recent optimization from a theme I optimized. This is using ImageOptim. Either tool uses a whole suite of tools behind the scenes to make the best optimization quickly and with great results. imageoptim-example

I saved a whopping 47% on average in this theme. In the case of my background tile image I saved a whole 80%. Not to bad. (Here’s another example with less impressive, but still good, results.)


Set up a caching rule

Even with something like WP Super Cache in place you still might need to set up some rules about static content. Static content is things like images, documents, multimedia files, etc.

For these files, WordPress delivers the file for a visitor every time. Even if they leave and come back five minutes later!

The easiest way to do this is to modify your .htaccess file and add a few rules for static content. The .htaccess file tells your site to give folks a locally cached version of the file and to ‘expire’ the item in the cache after so many minutes. This greatly helps in the loading of those (newly optimized) theme images I mentioned in the last tip, and any other files visitors consume on a regular or repeat basis.

I’m going to direct you to this post that has the handy steps on caching static content.


Minify your CSS

You’re using a child theme, right? Or maybe a custom theme built from a starter framework? Once your site is ready for production you can shrink your CSS files to make things a little quicker.

Minifying your CSS takes the human-readable version of your CSS file, with all it’s great inline comments and indents, and strips all that junk out. The computer doesn’t need any of that!

Now you’ll want to keep an un-minifed version around for future changes. Take a copy of your style.css file in your theme directory and rename it. Call it style-original.css or something and set it aside.

Now, copy and past the content of your style.css file into a tool like CSS Minifier or CSS Compressor. These tools will strip out any comments or spaces (making your file pretty much unreadable by humans) and reduce the file size (and therefore load times) of your CSS.

Copy the minified CSS back into style.css and save. If you have to make new updates down the road (always in your dev environment first, right?) you can re-load your human-readable CSS file, make your edits, and minify again.

On a few sites I manage I was seeing upwards of 60% file size savings. When were talking about mobile devices in not-so-good coverage areas that could be the difference between your site loading and a visitor leaving.



This is just a few things you can do quickly to improve the performance of your site. Making your site load quickly for visitors make them more likely to hang around and helps with your search rankings.

How much of an impact does it make? Remember those tests I asked to your run at the beginning of this post? Here’s a before and after (totally unscientific) comparison to a site I manage. I ran the default tests from Just using these tips made one score go from a C to a B and another from an F to a B!


If you have tips or tricks you use to make your site’s a little quicker, let me know in the comments below. Thanks for visiting and I hope to see you at one of our upcoming meetups!

Photo by _chrisUK – Licensed under Creative Commons

February general meetup notes – Multi-site and Multi-tennet


  • McCreary on multitenancy: “a simple solution to a complex problem”
  • Me: “To make things simple, you must first make them more complicated.”



Continue reading February general meetup notes – Multi-site and Multi-tennet

January Developer Meetup Notes – Intermediate CSS and CSS Preprocessors

When it comes to CSS Preprocessors, there are 2 big ones: Sass and Less. In Matt’s presentation he covers Sass stating that the two really have about the same features and Sass just has a bigger following.

Slides will go here when Matt sends them!

 Key Features of Sass

 Sass in WordPress

Automattic’s _s theme (pronounced “Underscores”) uses Sass by default. It is also a good reference of how to setup your Sass files for ease of use. Check out _s’s Sass folder here.

Useful Tips

  • Want to try out your own Sass code online? Check out
  • Matt showed some of his code and noted that he keeps a Sass file called shame.scss for all of his “hacks” he is not proud of…I like the idea

December General Meetup Notes – WordPress Custom Post Types with Nile Flores

December’s General Meetup was lucky enough to have Nile Flores present on Custom Post Types.  Here’s Nile’s presentation.

Nile is a professional web designer and developer from Centralia, Il about an hour east of St. Louis. She covers it all, WordPress, design, SEO and more.
She’s a very active member of the WordPress community and a co-organizer of WordCamp St. Louis.  We thank Nile and everyone who came out for helping to make it yet another great meetup.
For our January meetup we’re going to be talking about theme structure and creating custom themes. Join us!

November 2014 General WordPress Meetup Notes – “How to Get in Trouble with CSS”

I put together some notes from our General Meetup last month. Thanks for everyone who braved the cold and came out. I had a blast putting this together and am looking forward to Nile’s presentation later in December.

Box Model

First, let’s talk about the Box Model. The best way to approach CSS is to understand that all it does is apply rules to the boxes that make up our webpages.

All HTML elements are containers or boxes. I demonstrated this by using the 3D view in Firefox. (Right-click on any webpage, and select “Inspect element”. The 3D view is the cube icon in the top right of the inspector pane.

CSS, or Cascading Style Sheets, allow you to define the style of those boxes. Everything from the fonts being used inside, to images, borders, padding, margins, colors, even how text behaves alignment, size, orientation, etc.


You make these changes this by defining ‘rules’ to those boxes or elements in your CSS.

So let’s say we have an element. It’s a simple div and I want to give it some rules.

<p>Some text inside that’s a paragraph.</p>

First give element a name – either an ID or a class.

That element name is called a selector in CSS parlance. We’re saying, for each element named X select

<div class=''demoDiv">
<p>Some text inside that’s a paragraph.</p>

I can apply rules to that selector in a few different ways.

Three ways to define CSS (There are more, say with JS)

Here they are from worse to best


<div class=''demoDiv" style="background-color:green;">

In the <head>

In a separate file (also referenced in the head)

<link rel="stylesheet" media="all" href="demoStyle.css">

Why is this the best? You separate the presentation from structure (HTML) from content (in the case of WordPress, what’s in your database). You also can have both documents open side by side. You also don’t have to scroll up and down and up and down. And most importantly, because of CASCADING!

Here’s two examples of valid CSS rules being applied to a class and an ID respectfully.

.demoDiv {
#demoDiv {rule:options;rule:options;}

Difference between a class and an ID

See that “.” and that “#” – that tells us if something is either a class or an ID.

Does it make sense to identify multiple elements by the same ID? I think not. That’s what classes are for – to classify similar elements.


The name Cascading is important! It’s how the browser determine which rules to actually apply. There are many factors at play, and that’s ok. There’s some logic to it al.

We’re going to talk about specificity and inheritance

At this point I’m going to let someone far smarter than I explain it. Check out this article on Smashing Magazine.

The order you put your elements and their styles in your style.css don’t matter.

However it’s best practice to do high-level or ‘global’ settings at the top of your sheet, and put comments in as you go for the various sections.

At the top have global attributes like body, p, a, h3, etc.

Then sections:

  • header
  • navigation
  • sidebar
  • etc.

Order does matter in your rules!

One thing that does matter is the last rule of  a type will over ride the previous.


background-color: #000;
background: #FFF url(image.jpg) 0 0 no-repeat;

The color (should the image fail to load) will be white because it came last in this set of rules

Ok, what about WordPress!?

Let’s take a look at a CSS file from a theme like Twenty Fourteen

First, inspect and find an element in the stylesheet (using Chrome dev tools)

Child Themes

Even if you want to do nothing but tweak a few styles to an existing theme, USE A CHILD THEME. It’s easy.

If you assume you’re using Twenty Fourteen:

  1. Make a folder in your wp-content/themes/ directory. Give it a unique name.
  2. Create a file called “style.css”
  3. Edit header info to reference the parent theme.
  4. Activate your child theme.
  5. Edit CSS in that child theme’s style.css file to change (overwrite) the parent theme’s rules.

CSS Preprocessors

CSS Preprocessors were touched on at the very end of the night. Basically things like SASS and LESS allow you to define variables to your rules. When you’re ready to publish the preprocessor will render valid CSS from those variables.


@col-red: #f00;
@col-blue: #00f;
@font-family: Arial, sans-serif;
@font-s: 12px;
@font-m: 14px;@font-l: 16px;
h1 {color: @col-blue; 
font: @font-l @font-family;}
.blockQuotes {color: @col-blue; 
font: @font-m @font-family;

Preprocessors also allow for math functions to compute sizes across your entire stylesheet.

@base-size: 10px;
.small {
font-size: @base-size;
.medium {
font-size: @base-size * 1.2;
.large {
@_large: @base-size * 1.5;
font-size: @_large;
line-height: @_large + 4;

A few good reference articles:


Additional Resources:

Photo by Mikel via Flickr – Licensed under Creative Commons

WordCamp 2015

In case you haven’t heard, WordCamp 2015 is officially scheduled to take place Saturday March 14th and Sunday 15th at Washington University.

While we’re having the event in the same space as this year, the organizing team has some exciting new ideas that we’re going to be working hard over the next 16 weeks to bring to the WordCamp.

While we’ll still be posting news on this site, if you want to subscribe to the WordCamp specific mailing list, head over the, or follow the organizers on Twitter at @WordCampSTL.

See you all next March!

WordCamp San Francisco Viewing Party

We’re going to host a free viewing party for WordCamp San Francisco! They’re streaming all presentations across their two-day WordCamp. October 25-26.

This is one of the biggest WordCamps and their schedule is full of awesome presenters.

We’re going to use the amazing public space at Nebula Coworking at the corner of Jefferson and Cherokee St.. There will be two rooms, one streaming the Developer-focused track, the other the User-focused track.

We invite you to join us for both days. The presentations start at 11am (9am Pacific) each day so get there early! You can stay all day and hang out in between sessions, just like an in-person WordCamp. Check out the full schedule and RSVP today!

We’d like to have light breakfast options, snacks and drinks. If you can pitch in, please let us know. We’re also working on finding appropriate sponsorship.

For lunch we’re going to hit the town and enjoy the amazing restaurants along Cherokee. We’re working on getting some recommendations and menus for some of our favorite haunts.

This is a low-key event. Come as you are, relax, and soak up some amazing knowledge.

More details coming soon. Volunteers are needed. Sponsors are needed. Get in touch!

Skip to toolbar