When most folks think of an ideal August weekend in NYC it usually involves going out to the Hamptons, boating on the Hudson River, hanging out at your 1%er friend’s rooftop pool, or maybe just hanging out in Central Park. Did I forget, hanging out in Brooklyn Marriott hotel conference rooms? How did that slip my mind? If you’re a WordPress developer or designer, then you were in luck, because WordCamp NYC 2014 took place at the Brooklyn Marriott August 2-3.
Not really sure why, but WordCamp NYC only takes place every two years which I find surprising. Considering there were 4 tracks running simultaneously, I have no doubt that the area could support a conference every year. Regardless, I’ve put together a collection of my notes from the conference. Hey, better late than never.
One of the best ways to analyze your site and see how it renders is to use the Chrome Developer Tools Timeline. This shows what is going during your page loads and can identify where there are hold-ups that can then be addressed.
WordPress Examples Toolkit – Richard Dinh
Richard’s presentation focused on creating a repository of WordPress examples on GitHub. Having these examples in place allows a developer to reuse code and not have to recreate the wheel each time they’re working on a new project. Here’s a list of examples from Richard’s repo:
- JS Example
- filter example
- custom menu
- custom meta boxes
- short code example
- batch example
- books – custom post type
- customize theme
- plugin activation
- CSV import
- tiny mce add on
- widget drop down demo
- query vars
Large Multisite Networks – Sam Hotchkiss
Ever since I learned that it possible to run multiple sites off a single WordPress installation I’ve wanted to learn more about how to set it up and possibly use for future projects. Unfortunately, one of the first things that I learned in Sam’s presentation is that for the small-to-medium size projects that I work on, having a multi-site set-up would be overkill. Despite that, I found the presentation very interesting and came away with some great info that may be helpful down the road.
- easy to create new sites based on template
- easy to update
- only one management account
- one db to share content
- plugin/theme restrictions
- can’t modify core for single site
- offering website as a part of “complete business package”
- divisions or employees of a single company (mortgage brokers -> legal)
- customized solution to a well defined vertical
Tips and Tricks 101
- be mindful of performance and bloat
- install BruteProtect
- WPMU Dev has awesome tools – they’ve done 90% of the way there.
- hire an awesome server admin – hard to find a good one
Tips and Tricks 201
- put as little functionality into your Themes as possible – plugins
- use MU plugins strategically
- use version control
- use customizer – save to wp_options
- make smart decisions for your users
- not cheap
- everything takes longer
- if client is cost sensitive, frame your costs through the lens of per-site cost
- don’t be afraid to suggest other suggestions
Ever since I first heard about Sass, I was excited about the capabilities including variables, mixins and @extend, but as is life sometimes, I couldn’t find time to start using it in real world projects. Luckily, this year I was given the opportunity to lead a site development project earlier this year and was able to implement Sass into our workflow. Like many people say, it does make CSS fun again.
- how can you make it part of your life?
- introduces programming into CSS
- faster, easier, and more organized
Why Love It?
- cool stuff
- strong community
- _s (underscores)
- almost anything can be a variable
- great for defining colors and font stacks
@extend & placeholder selectors
- use extend for clearfix
- can’t use in media queries
- Sass has partials
- do one thing and refurn a result
- calculate modify color
- let CSS do the calculations
- Rems are a great responsive unit, need pixel fallback for IE8
Media Query Bubbling
- media query goes right in the selector properties
- nice and together
What sucks about Sass
- code bloat
- adds complexity
- requires node.js
- sequence of steps you chain together
- can use functions.php to target file that’s not style.css and use that for main CSS
More Sass Info
Advanced Custom Fields – Jared Novack
One of my first big breakthroughs in using WordPress was when I discovered how to use custom post types. This unlocked the ability to create so many different experiences with content and made WordPress significantly more powerful. I was vaguely familiar with the Advances Custom Fields plugins, but had always used Types as my custom post type creator.
- Harvard Law Review – subhead, customize where it shows up.
- no photos, but has different graphics
- drag and drop, related topics field
- checkbox on the side, custom field appears
Killer ACF5 feature
- can store fields as JSON data.
- worlds largest book publisher
- different sites with different content and fields
- teaser and trailer, emails sign up
Make your own fields
- custom field type with visual radio button
- /acf-field-type-template on GitHub
At the last WordCamp in 2012, I saw Tracy speak and learned a great deal about child themes and was able to incorporate the what I learned into several projects. When I saw that she was speaking again I made sure that I attended her presentation.
Use a starter theme
- they’re meant to be hacked
- they give you a head start
- they often come with your framework built in
- have very little design built in
Underscores – fan favorite
Need to have a starter – will take work, but will get you where you want to start
Know the WordPress template hierarchy
Make unique templates
– can make custom pages based on slug
Register Nav Menus
- put them where you want them
- make life easier for clients
- register the menu in functions.php
- load menu in the front end template
- register in functions.php
- load the sidebar into template
- check out dynamic sidebar
Register Custom Thumbnail Sizes
Why register custom thumbnail sizes?
- control the width, height and crop
- use unique images in loops
- add custom sizes to functions.php
- x_crop_position and y
- check codex add image size
- load them in your template
- does all the work for them, avoid Photoshop
Write Your Own Queries
- use fewer plugins
- have control over field
- gain total design freedom
Pro Tip – Transients API
BONUS – use a CSS preprocessor
- it’s fun
- it’s powerful
- it makes your life better
- Use Version control like Git or subversion
- Learn version control with Git
- Tortoise control for windows
The next couple of talks I went to were on NONCE and advanced topics and I don’t think my notes really do the topics justice, so I’m just going to move on to Day 2.
These Fragments I Have Shored Against My Ruins’: Modernism, Post-Modernism, and Responsive Web Design – John Eckman
OK, so looking at that talk name could make you go in one of two directions. I’ve heard the terms Modernism and Post-Modernism before, but I didn’t really know what they meant. So, even if some of the WordPress stuff was going over my head, at least I could take a stab at learn some art concepts. The presenter, John Eckman, has made quite a career shift from PhD and potential career-academic to web designer to CEO of 10up.com, a web design studio with multiple offices across the U.S. There were two main takeaways from the presentation
We keep trying to make the web into something it’s not.
Responsive Web Design is more than a set of techniques: it’s a push that forces us out of the collective hallucination of fixed web design.
These quotes, at least for me, really helped tie together the concepts of Modernism and Post-Modernism and made them more concrete. We, as humans, are always trying to control our environment and mold it into the things we know and have real experience with, but what is real? We’re still just figuring out what the web is and what it’s capable of and it’s those who can see the potential are those who will mold and shape the future, not to use it as a new tool for the same old paradigms.
Underscores, A 1000 Hour Head Start – Konstantin Obenland
So after the more abstract presentation, it was time to get back into WordPress goodness. During other presentations, several people had brought up Underscores and how it’s a great place to start to build themes. I had heard of it before the WordCamp, but knew almost nothing about it. After Konstantin’s presentation, I’ve been very motivated to learn more and start using it for my next projects.
- not a parent theme
- not a framework
- foundation for a new theme
- just right
- experience from 5 default themes experience from creating themes for millions of users on WordPress.com
- maximum flexibility with minimal content.
- lack of features
- everything but styles
- readable code
- active community
Lynda.com even has a course on underscores.
I bounced around a few more presentations, but at that point and I already had a list of objectives and things I wanted to start preparing for and my brain was full and any attempts to add more information could only be distracting. I really like the idea of using Underscores as a starter theme, setting up a library of reusable code snippets, then building child themes on top of that custom Underscores theme.