Category Archives: Development

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

Support for Variables
Nested rules
Interpolation (being able to use a variable in the name of CSS selectors)
Conditional logic (if/else statements)
Looping (for, each and while loops)
Debugging support

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 http://sassmeister.com
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

Design, Development, Education, Meetup News

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

December 3, 2014 Chris Koerner Leave a comment

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.

Rules

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.

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

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>
</div>

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

Inline

<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 {
rule:options;
rule:options;
}

#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.

Cascading

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.

Example:

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:

Make a folder in your wp-content/themes/ directory. Give it a unique name.
Create a file called “style.css”
Edit header info to reference the parent theme.
Activate your child theme.
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.

Example:

@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:

http://alistapart.com/article/why-sass
http://blog.millermedeiros.com/the-problem-with-css-pre-processors/
http://blog.blakesimpson.co.uk/read/37-less-sass-the-advantages-of-css-preprocessing-explained

Additional Resources:

https://developer.mozilla.org/en-US/docs/Web/CSS

—

Photo by Mikel via Flickr – Licensed under Creative Commons

Design, Development, Education, Events, General, WordCamps

WordCamp 2015

November 17, 2014 Aaron Leave a comment

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 2015.stlouis.wordcamp.org, or follow the organizers on Twitter at @WordCampSTL.

See you all next March!

Development, General, Tips and Tricks

October General Meetup Notes

October 20, 2014 Aaron Leave a comment

Thanks to everyone for coming out Wednesday night. It was a really good turn out and we had some interesting discussions and questions. I didn’t have slides to share so I thought I’d write a quick post to summarize everything we went over and aggregate the resources/links that were discussed. So without further ado…

The Basics of Theme Customization

In the broadest of terms, there are three “levels” of customization that we talked about. They are, from easiest to hardest:

Customizing using the built-in WordPress customizer
Using a child theme to customize presentation
Creating a copy of an existing theme and modifying

Using the built-in customizer

This approach, while also the easiest, is the most limited in scope. For an option to be customizable via the customizer the theme developer needs to add functionality via the theme’s functions.php file.

The customizer can be accessed via the “Appearance” menu in the WordPress admin menu.

The options that appear on this page vary from theme to theme, but most themes that include this functionality allow you to customize background colors, links colors, menu, widgets, and other similar things. Certain theme “ecosystems” like ThemeForest or Elegant Themes, or frameworks like Genesis, have custom theme options that are independent of the built-in WordPress customizer but function similarly.

Building a Child Theme

If you’re looking to go beyond the basic customization allowed by the customizer (either built-in or custom), the recommended way to do this is to create a child theme. Child themes inherit all of the functionality and presentation from the parent theme with the exception of the customizations you make.

We covered the basic steps to create a child theme:

Create a new folder in the wp-content/themes
Create a style.css file and copy the required header information from codex and modify for your new child theme.
Create a functions.php file and copy the code snippet from the codex that will tie your child theme to the parent theme.

Once you’ve done these steps, log in to your WordPress dashboard and activate your new theme. If you’ve done everything correctly your site will resemble the parent theme. After you’ve verified that the new theme is working, feel free to add any of the custom CSS, HTML or PHP to make the theme your own.

ProTip: Use Chrome/Firefox/Safari inspector tools to find css and edit it “on the fly”.

A quick warning about using child themes; when the parent theme updates there is a small chance that the developer may change something that breaks your customization (i.e. renaming an element’s id or class), but this isn’t considered to be a “best practice” so you should mostly be fine.

“Forking” an Existing Theme

The most advanced way to customize a theme is to create your own theme by copying an existing theme and modifying its theme files. At the least, you’ll have to edit style.css so WordPress won’t attempt to update your new theme if the existing theme is updated.

If you purchased the theme from Code Canyon, Theme Forest, or another, there may be some ramifications if you distribute the theme. I would consult the license that came with the theme for specifics. All the themes found on wordpress.org are open source, but it is a good practice to always give credit to the original author.

tl;dr

Useful plugins:

What The File – “adds an option to your toolbar showing what file and template parts are used to display the page you’re currently viewing”
Page Builder – “Build responsive page layouts using the widgets you know and love using simple drag and drop”

Relevant Codex Articles:

Helpful Sites:

WP Test – “A fantastically exhaustive set of test data to measure the integrity of your plugins and themes”
Stack Overflow – “a question and answer site for professional and enthusiast programmers”
WordPress Stack Exchange – WordPress specific section of Stack Overflow
GenerateWP – “The easiest and the fastest way to create custom and high quality code for your WordPress project using the latest WordPress coding standards and API’s”

Thanks again to those who came out to the meetup, I hope to see all of you again next month or at the WordCamp San Francisco watch party. Feel free to reach out to me on twitter with any questions, I’m @coderaaron.

Development, Education, General, Meetup News, Tips and Tricks

August 2014 General WordPress Meetup Notes

September 3, 2014 Chris Koerner Leave a comment

We had a great turnout this month – even with the Cards game happening just a few blocks down the street. Thanks to everyone who came out!

Main Event

The main topic of the night was covering some handy tools that help you keep tabs on your WordPress site. We covered Uptime Robot, Infinite WP, and Google Analytics.

Uptime Robot

This handy website lets you know when your site is down. When a site is down that means that visitors aren’t able to see the site and won’t know why! By using Uptime Robot you can setup alerts to be notified via email or SMS when your site is inaccessible.

This is a free service and you can track up to 50 sites! They don’t have to be WordPress sites at all – this works for any site you’re interested in tracking. The service is hosted, so there isn’t even an installation process. Just sign up, add your sites, set how frequently your site should be checked and wait!

It’s also super handy if you have multiple sites across clients. You can know before they do when a site is having an issue. You can quickly figure out what’s going on, and let your clients know preemptively!

Infinite WP

Infinite WP makes managing plugins and theme updates across multiple separate WordPress installations a breeze. You install a simple client on your web host, a plugin on each of your sites, and away you go!

Infinite WP will let you know when your sites have an update available and you can update by site (all plugins at once), by plugin (this plugin on all sites where its installed), or even piece mail – one at a time. There are a ton of add-ons for Infinite WP that extend it’s capabilities even further.

A recent update also brings easy backups to your sites. So your workflow could be something like:

Get a notification of an update via Infinite WP
Backup your Dev/Test site.
Update your Dev/Test site to make sure things are hunky-dory.
Backup your Production site(s).
Update your Production site(s) without leaving your beach chair.

All of that without leaving Infinite WP.

Google Analytics

We could have easily spent multiple evenings covering the various ways you can leverage Google Analytics it’s that powerful. In a nutshell Google Analytics allows you to keep track on how visitors get to your site, what they do on your site, and some demographic information like geographic location and what browser it uses. It becomes even more powerful when you get into developing campaigns and set goals for your visitors.

Say for example you’re promoting a big event or a new item in your store. You can send out emails, tweets, and Facebook updates with a specific URL that will tell you, in Google Analytics, which outlet lead to that person arriving at your site, and what percentage of visits turned into ‘conversions’ – someone did something you wanted them to do like sign up for a newsletter or buy something.

Google has some great resources on getting started with Google Analytics. Integration with WordPress is a snap with numerous Google Analytics plugins. My particular fave is Google Analytics for WordPress by Joost de Valk.

Bonus Tools

A few other tools that were mentioned in the similar vein that we didn’t get to spend a lot of time on are listed below. Take a look and you might find a handy addition to your utility belt.

IFTTT – Hook up WordPress to hundreds of other services all with simple to create ‘recipes’. Want your Instragram photos to automatically publish to your blog? Easy peasy .

Piwik – Don’t like Google? Want to host your own analytics? Pwiki’s your solution.

Woopra – A real-time analytics package. See who’s on your site right this minute. Some say better than Google Analytics!

Next Month

In September we have the talented Gregory Ray taking us through the best practices and dark art secrets of Hardening WordPress. Join Gregory and the gang on Wednesday, September 17th at Lab1500.

Photo by Dean Gugler – Licensed under Creative Commons

Development, Education, General, Guest Writer, Tips and Tricks

The many, many uses of Advanced Custom Fields

August 7, 2014 Brian Goldstein 1 Comment

Editors note: This is a guest post by Brian Goldstein. Brian is a freelance WordPress developer in University City. He’s also nearly completely self-taught. To see some of his work or to get in touch, check out briankappgoldstein.com. If you’d like to be a guest writer here on STL WP, let us know.

There are a few plugins I tend to use on just about every WordPress install I do – for me or for a client. I always use a back-up plugin, SEO by Yoast, and I’ll almost always use Advanced Custom Fields.

As a developer or a designer, it’s tempting to hide everything away from your clients, so they can’t break the site you’ve just built. ACF helps maintain the design and code integrity of the site while giving your client a way to update content without you. It uses the same logic as the WordPress Loop, so implementation and troubleshooting is simple.

In this article I’ll show 3 simple use cases from a few sites I’ve worked on recently.

Example 1

A common way to use ACF is with another popular plugin, Custom Post Types UI which makes creating custom post types a breeze. Once you create a custom post type, you then create the field groups you want to use and then make them available only for that post type. Once you enter in all the information, be it text, images, or video, you write a php loop calling in those custom post types. Here’s a more concrete example:

Here, each of these boxes of content are custom post types. One advantage is that once your client “gets” how to make a new blog post, they also know how to change a custom post type. Here’s a screenshot of the editing view of one of these custom post types.

As you can see, instead of the standard WYSIWYG (What You See Is What You Get) content editor, you can show the custom fields. ACFs documentation is a clear and an excellent resource.

After you enter the content for each custom post type, we’re ready to edit our theme files to dynamically loop in our custom post types.

On this project, because I also want to display that content elsewhere, it’s inside content-services.php, not the service.php template file. In this case, they are closely related, as we’ll see.

Here is the code for the query that calls in content-services.php on the service.php template :

We open a php block and define an array with the post type we want, then query that array in our loop. The loop pulls in our content-services.php file, where the code that pulls in our fields live. That code looks like this:

Every time you see “the_field()”, that’s pulling in the information you entered in your custom post type. Because the loop ends in services.php and this is inside that loop, you only need to make sure you close each php block, not the loop itself.

Example 2

This example and the next require purchasing the repeater field add-on to ACF. It’s one of the few premium plugins I’d ever recommend buying.

Using the repeater add-on makes displaying a lot of the same kind of information super simple.

For instance, on a restaurant site I recently built, the client needs to be able to change their menu without calling me each time they want to update a menu item. So I built out the menus using ACF’s repeater function.

Each menu section was its’ own field group – so they could add or remove the groups at will. Then, using the repeater I created 2 or 3 sub fields depending on the menu section. Next, I entered in all the data for those menu items – the name of the item, the description, and the price. Finally, it was time to code it out. Here’s what that looked like. These are inside a container div, which has at least one row, and it’s broken into 2 columns in the bootstrap grid, for some context.

Similar logic – you’re telling it to find the field group app here, and if there are rows, while there are rows, to display the sub fields Item, Price and Description.

Example 3

Using ACF repeater to dynamically insert images into a carousel.

Again, similar code: creating a loop that checks for the field, and then if there is data for the subfield, injects it into the source attribute of the img in the carousel. Because it’s just PHP, you can use it just like you use other WP tags. The client can use the photos they want to use without my involvement. You can see this example and the previous example live on plantershousestl.com.

Truth is, I haven’t even scratched the surface of what ACF can do. If you have an ingenious use for ACF, I’d love to hear from you. ACF’s simple code, easy integration on the WP dashboard, and versatility into any design you can imagine make it a go to plugin for me.

Brian Goldstein, freelance WordPress developer
briankappgoldstein.com
@briangoldstein

Design, Development, Education, General, Tips and Tricks

Themes and Plugins – Notes from the July 2014 General WordPress Meetup

July 21, 2014 Chris Koerner Leave a comment

After a roller coaster of scheduling fun we had our first Meetup in our new location at Lab1500 (home of Pushup). We talked about Themes and Plugins. For those who couldn’t make it we put together some notes from the evening’s presentations. For those of you would did make it, feel free to add your own thoughts via the comments below!

First up, Bob Barker shared with us an official Bob Barker Whitepaper. Here’s the copy from his handout.

Just another Bob Barker Whitepaper. Whitepaper (defined): useless or minimally valuable information that someone distributes so as to obtain your email address in order to send even more junk of even less value (aka fodder).

Places to check out…

Spybar – a handy toolbar that shows you the software (and plugins) used to build the site you’re visiting.
WordPress Theme Generator
- (ed note: Chris Miller also mentioned Headway as a similar solution)
WPMU
iThemes

Looking for the awesome WordPress themes? Here’s the place to find them!

http://www.wordpress.org/themes/

As of: 7-16-2014 2,620 THEMES, 106,186,898 DOWNLOADS, AND COUNTING

Looking for the awesome WordPress plugins? Find them here!

http://wordpress.org/plugins/

32,251 PLUGINS 695,392,281 DOWNLOADS, AND COUNTING

Disclaimer: All information and advice provided by Bob Barker, Mid-American Marketing Associates, The Barker Companies, Their affiliates, associates, Their Foundations, employees, or associates of any of Bob’s companies are NOT warranted or carry any guarantee whatsoever. Please seek the professional advice of an attorney or accountant before proceeding with any endeavors as a result from information provided or questions answered; we do NOT guarantee or give any warranty of the information we provide. Please proceed at your own risk.

Chris K. (that’s me) then talked about the various kinds of themes.

From the most raw and basic (and heavy code knowledge to use), to most advanced and determined (with little code editing) there are generally 4 different kind of themes.

Starter Themes
Regular Themes
Child Themes
Theme Frameworks

Starter themes

Starter themes are the raw stuff of theme design and function. Many are minimal, barebones themes that you would use to customize and develop up on. Most have few (or no) design decisions made beforehand. So no pre-defined colors, layout, grid, etc.

A few popular starter themes are:

underscores (super basic almost no design at all, lots of css ready to modify)
smpl skeleton
Roots

A starter theme should probably not be your first theme to muck with. Instead I recommend you take an existing Regular Theme and play with it first.

https://thethemefoundry.com/blog/wordpress-starter-theme/

Regular Themes

These are the majority of themes you’ll find on wordpress.org, elegantthemes, themeforest, etc. In most cases they are well build and well designed themes that have a certain visual appearance (trendy, retro, dark, earthy, etc.) and purpose (photography, real estate, blogging, e-commerce, etc.).

For most of these themes, many design, layout, and functionality decisions have been made for you. Most will offer some customization via the theme customizer, but to really change things up you’re looking at building a child theme and getting your hands dirty with code.

Child Themes

So let’s say you download a regular theme, make some changes, and maybe even dip into the css or functions.php to add some custom functionality or style. Then an update to that theme is released. Being a good WordPress owner, you click the big update button.

What happens?

Those custom changes are overwritten with that update. Whoops.

Let’s say you get into custom post types, or custom fields – some fairly advanced stuff. How do you keep those changes across updates to your themes? Especially with advanced themes (like the frameworks mentioned below) there are security risks with not updating – updating is good!

The answer? You should create a child theme!

What is a child theme? Like real children, they need a parent to survive and they inherent traits and capabilities from that parent theme.

A child theme allows you to modify an existing theme (even a starter theme. They too have updates!) without worrying about your changes being overwritten with theme updates.

A basic child theme is as simple as having only one file – style.css. From there you can modify any additional files from your parent theme. header.php, single.php, heck even functions.php!

There’s a great article on the codex on creating a child theme. Remember, files (and their modifications) in a child them override the parent theme files, but not overwrite them. Meaning child themes are a great way to take apart an existing theme to see how it works, without making your changes permanent.

For example, let’s say you wanted to modify the footer from a them you found on WordPress.org. You could copy the footer.php from your parent them into your child theme and edit to your heart’s content. When your site is visited, your custom footer.php is loaded in place of the existing file!

July Developers Meetup – Mobile Apps and WordPress

July 10, 2014 Eric Juden Leave a comment

This month we had two presenters: Chris Kiersch and Alex Rodriguez speaking about mobile apps and WordPress.

Chris Kiersch

Chris talked more at a high level about the difference between a mobile app and mobile website. When he sends his notes from the meetup I’ll post.

Alex Rodriguez

Alex talked about the different options you have for pulling information out of your WordPress website using APIs:

JSON REST API (more useful for those using wordpress.org self-hosted sites)
Jetpack REST API (more useful for wordpress.com hosted sites)
Thermal API (just another api that Alex had found)
Roll your own

Roll Your Own

Alex shared some code that he had created on making his own JSON API for WordPress (available on GitHub).

Presentation

The presentation is also viewable on slides.com.

Next Month’s Meetup

Next month will be more of an open discussion about plugins you’ve had problems with and how you overcame those issues. Originally it was going to be called “Plugins that Suck”, but we are hoping to find out the bad plugins and what you did to work around the problem. Did you find another plugin, talk to the developer, etc…

Other Cool Stuff

JSON View plugin for Chrome – formats JSON into an easily readable view and adds collapse buttons on the different JSON nodes.
AppPresser – a set of tools to help you build an app on top of WordPress.
Aesop Story Engine – I never got to show this to the group, but it’s a plugin for creating rich, interactive experiences using WordPress to help tell a story. I’ve not used it, but it looks really cool.
InfiniteWP – If you manage updated across multiple WordPress websites, this is a must. This is a separate product that must be installed on your server, but it monitors your WordPress websites and allows you to update plugins, themes and the core files all from one place. It’s free, but it has commercial add-ons.

Development, Meetup News

June Developers Meetup – Developing for WordPress Multisite

June 2, 2014 Eric Juden Leave a comment

Presentation

Questions From the Meetup

Calendar Plugin

There was a question about a good calendar plugin that can pull data from other sources. I believe that All-in-One Event Calendar might be able to help.

WordCamp St. Louis Planning

Want to help out with the next WordCamp St. Louis and make it even more badass? Join the group!

Next Month

Our next meetup will be about mobile apps and WordPress.

Multis

Multisite

References

Key Features of Sass

Sass in WordPress

Useful Tips

Box Model

Rules

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

Difference between a class and an ID

Cascading

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

Order does matter in your rules!

Ok, what about WordPress!?

Child Themes

CSS Preprocessors

The Basics of Theme Customization

Using the built-in customizer

Building a Child Theme

“Forking” an Existing Theme

tl;dr

Main Event

Uptime Robot

Infinite WP

Google Analytics

Bonus Tools

Next Month

Example 1

Example 2

Example 3

Chris Kiersch

Alex Rodriguez

Roll Your Own

Presentation

Next Month’s Meetup

Other Cool Stuff

Presentation

Questions From the Meetup

Calendar Plugin

WordCamp St. Louis Planning

Next Month

St. Louis + WordPress = Majestic