Paul de Wouters

Display your WordPress posts in a grid layout with Shapeshift

Published by on March 19, 2016

In this tutorial, I’ll walk you through making a WordPress posts grid layout with the help of the Shapeshift script!

Before getting started, make sure you have a working WordPress install and a theme you can customize.
Next, download the Shapeshift script and place jquery.shapeshift.min.js in a ‘js’ folder under your theme root folder.

Ok, so we need to add some CSS styles required by Shapeshift. If you’re running a Genesis child theme, then you can use these:

.blog.js #content,
.archive.js #content{
position: relative; /* shapeshift jquery plugin requires this */
}

.blog.js #content .post,
.archive.js #content .post{
position: absolute;
width: 165px; /* width in rems or px is fine. percentages not so good, even for responsive */
}

.blog .navigation{
clear: both;
}

Otherwise, check out the guide and adapt it to your theme markup.

After the CSS, let’s add the necessary Javascript to trigger Shapeshift. Create a new Javascript file in the same folder as Shapeshift, and add this code into it. You’ll notice I disabled drag and drop as it doesn’t really make sense to me to keep it on a blog, but feel free to set it to true

You may have noticed I added a .js class to body, this is because if Javascript is disabled, then the styles won’t apply and the layout will fallback to a default layout. Without that, it would look broken.

The next step is to load the Shapeshift script and our custom script with the theme:

Because of the relative positioning, the pagination gets positioned at the top of the page, so let’s move that out of #content.

Another solution for Genesis is to use the Grid Loop plugin by Bill Erickson, the difference is that this script allows for different heights for the posts. With Shapeshift, if you’re displaying the featured image on the blog page, then you could set the thumbnail height to 9999, then use Regenerate thumbnails plugin. Now, your featured images can have different heights, making the layout more interesting.

This would probably work well for a gallery too.

Genesis layouts and Tribe Events

Published by on March 19, 2016

UPDATE: After further testing on a recent project, I’ve found that this method still wasn’t a full solution, as the events list view still fetched the default content/sidebar layout.
There’s a more suitable filter to hook into to force the layout

The challenge: display the main events page with the full width template, and the single events with the default Genesis layout.

It took me a while to figure this out, so I want to write it down while it’s fresh in my mind and hopefully it can save someone else some time and grief.

I first played around with the Tribe custom templates, explained in detail here:
http://tri.be/support/documentation/events-calendar-themers-guide/#templates

This does not work with Genesis.

Then I found this lengthy tutorial from Tribe themselves and thought I was saved.
http://tri.be/tutorial-integrating-the-events-calendar-w-genesis/

This solution does not work anymore. Well, it has part of the solution which is the genesis_pre_get_option_site_layout

The strange thing is that the filter wasn’t getting fired on the Events pages. I did a search for that filter in the Genesis code, but couldn’t find it, even stranger. Turns out the last part of the filter name is actually a variable, so that’s why I couldn’t find it!
What it does is allow you to filter any Genesis option dynamically, you just need to know the option key – in this case ‘site_layout’.
Ok, so with this knowledge, why isn’t the filter firing for this particular option? Well, I figured that the plugin didn’t know about it, and that made me remember a code snippet from wpsmith that enables Genesis layouts on custom post types. By the way, bookmark that site, it’s awesome. Thanks Travis!
This is what I ended up with

Ok, now the next step was to set the option for the ‘tribe_events’ custom post type. Just go to a single event, and select the layout you want, then save. This will set the ‘site_layout’ option for this post type enabling the genesis_pre_get_option_site_layout filter to fire.
Now just use this snippet to force a layout for the calendar view:

EDIT: if you’re forcing the layout to full width content, you may need to disable the sidebars as an extra step. I don’t know why they are being displayed though.

That’s it. An essential part of being a good WordPress developer is the ability to remember solutions you used in the past and adapt them to solve new problems

Useful Sass mixins for working with rem units

Published by on March 19, 2016

With the latest version of Genesis, Studiopress has revamped their default stylesheet, including the use of the rem unit for font sizes and padding / margin.

This will take some getting used to, as you can see in the conversion table below:


This style sheet uses rem values with a pixel fallback.
The rem values are calculated per the examples below:

12 / 16 = 0.75rem
14 / 16 = 0.875rem
16 / 16 = 1rem
18 / 16 = 1.125rem
20 / 16 = 1.25rem
24 / 16 = 1.5rem
30 / 16 = 1.875rem
36 / 16 = 2.25rem
42 / 16 = 2.625rem
48 / 16 = 3rem

Further reading on the use and compatibility of rems:

http://caniuse.com/rem

http://snook.ca/archives/html_and_css/font-size-with-rem

If you want to use different font sizes, you’ll have to start doing some math to convert your pixels to rems.
Plus, you’ll have to declare the font size twice because you need a fallback for browsers that don’t understand the rem unit


font-size: 36px;
font-size: 2.25rem;

I suggest you start learning Sass. It’s not difficult to get started with, especially on a MAC, you can grab Codekit which will do the heavy lifting for you.
There are many tutorials on getting started with Sass around the web, here are a few:
On this youtube channel, you’ll find Sass and Compass tutorials:
http://www.youtube.com/user/LevelUpTuts/videos?view=1&flow=grid

Once you’ve got your theme Sass-ready, you can start using these useful functions:

A Sass mixin for calculating padding or margin from pixels
https://github.com/SimonWpt/rem

A Sass mixin for calculating font sizes from pixels:
http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/

Now, I had to modify this slightly, because the base font size was 13px.
So I defined the base font size as 81.25%, instead of 100%.Then I changed how the font size mixin calculates the rem units

Now you can just use this:

@include rem(‘padding’, 16px 0 0 0);

@include font-size(1.3);

Other Sass mixins you might find useful
http://css-tricks.com/custom-user-mixins/

Tools I use for WordPress development

Published by on March 19, 2016

 Here’s a list of WordPress development tools that I rely upon for my daily development work:

Hardware:

A custom-built PC with Windows 8 and 8Gb RAM. Gets the job done.

Development software:

PhpStorm

What? No Sublime Text?
I took the time to set it up for the way I work, and I like how easy it is to use xdebug for live debugging my WordPress development.
Check out this post for more information on getting set up.
I also added a WordPress coding standards configuration that applies WordPress code standards best practices at the click of a mouse. A real time saver.
Thanks to @Rarst for that.

DesktopServer

I tried XAMPP and running a ubuntu server from Virtualbox, before settling on Desktop Server, which makes it really easy to create new WordPress installs for development. And it comes preconfigured for running xdebug. (mentioned above)
Xdebug is like a secret weapon. Set a breakpoint in your code and you can run it line by line and view the variable values. It’s indispensable for serious coding. Also, it beats adding a bunch of var_dumps in the code.

Fire.app
This little app handles compiling my Sass files, very handy. There isn’t an app like Codekit for PC yet, so that will have to do for now.
Did I mention PhpStorm has a live preview feature for the browser that works with the Livereload chrome extension?

Spoon.net
Spoon.net allows me to test websites in a variety of browsers, and I can run IE8 alongside IE10. No support for IE9 on Windows 8 though.

Photoshop
This one is pretty obvious, when you’re converting designs to HTML/CSS.

CSS Hat
I just started using this. Seems like a handy tool to quickly get styles from Photoshop layers.

Filezilla
Git command line
Github: for my personal development projects and WordPress plugins still in development.

Virtualbox with MAC OS

Communication:

Gmail with Google Apps
Skype: for IM or voice calls.
Pidgin: great little app for IRC.

Productivity

Evernote: I suggest reading the Evernote Bible, if you’re not sure how to use Evernote. I grabbed it for free, but it’s available on Amazon for cheap. Basically, I use it for managing my projects, code snippets, screenshots, to save reference material, articles , tutorials,…

Toggl: to track time spent working on projects

Basecamp: I don’t have an account myself but several clients use it for their projects.

Listary : a nifty utility to quickly access folders from the open/save dialog.

Billing

I try to avoid recurring subscriptions and Pancake App is as good as any of those services, but it’s a one time payment and you install it on your own server. Own your data!
PancakeApp

Automatic greyscale WordPress thumbnail images with WPThumb

Published by on March 19, 2016

One of the features of a site I built recently for a client was a scrolling marquee or ticker of client logos at the bottom of the screen.

The requirements were as follows:

  • Logos are to continously scroll in an infinite loop.
  • Logos are to be greyscale and color on hover
  • The animation must be smooth across all modern browsers
  • The effects must work in all modern browsers and IE8
  • Must work with WPML
  • Easy for the client to deal with (no multiple images to upload)

This is the story of how something that at first seemed quite straightforward would take me a lot longer than I initially planned.

First attempt: Flexslider

Flexslider, being the first responsive slider script is very popular, and so I thought it would be a good choice for this site, to make the featured project slideshow at the top of the page, and the carousel at the bottom.

Unfortunately, Flexslider doesn’t support infinite scrolling, instead it jumps back to the first slide in a rewind effect. Not what I wanted.

Second attempt: bxslider + jQuery Black and White script

I was really happy to discover bxSlider. It’s an awesome and versatile script which made it really simple to have a slideshow and the infinite scrolling ticker/marquee on the same page.

So that was one part of the puzzle solved.

Now the jQuery black and white script seemed to work pretty well. But after further testing, it seemed to slow down the ticker and caused some jumpiness in the animations. As I later discovered, most of these greyscale scripts use the canvas element which causes two issues: it’s not very performant, hence the slowdown on my carousel. And it doesn’t work with images loaded from different domains. This results in a security error.

Why does this matter? Because the site I was working on was multilingual and each language was running on different domains. The scripts were being loaded via wp_enqueue_script and I was using get_stylesheet_directory_uri to determine the path dynamically which is best practice. Unfortunately this resulted in a mix of different domains, images coming from the current domain I was on and the scripts always being loaded from the main language domain.

I did find a fix for this via the WPML support team who were very helpful. It requires to filter the function get_stylesheet_directory_uri and replace the main language domain with the current domain

At the same time I had posted a question on Stackoverflow asking about the security issue, but as most of the time, the only answers were snarky comments about the quality of the question. As I lost hope I put a bounty on the question and expanded it more by including more information, but never got a reply.

I then posted the question on wpquestions.com, and got a few answers about implementing CSS3 filters. Which I had already tried. Then someone helped me out by pointing out that some images were missing the www part of the URL which was causing the security error. They also found an error in the script I copied. So that seemed to be the end.

Third attempt: CSS3 filters

I mentioned the slow performance of the jQuery solutions, so even though the problem seemed to be fixed, neither I nor the client were happy with the result, so I kept looking for a solution. At the same time I was trying out jQuery solutions, I also thought about using CSS3 filters. There are a few good tutorials on achieving cross browser greyscale filters on the internet so I tried them out. Unfortunately, IE10 does not support them, and in Firefox, the images weren’t even being displayed in the carousel anymore. Plus, the animations weren’t so smooth anymore. I guess CSS filters are taxing on the rendering and CPU.

Fourth attempt: the ImageFX plugin by Otto

At some point I remembered this post from ottopress, explaining how to make a greyscale thumbnail automatically and decieded to give it a go. I installed the plugin and created the different thumbnail sizes, but no dice. It didn’t work. Otto confirmed that the plugin was using deprecated functions, since 3.5, the image editor has had an overhaul and now uses a different set of classes and functions to manipulate images. I then started looking at the WP_Image_Editor class in the core files, and thought I could just use the new functions to replicate what Otto did in his tutorial. I figured out that I needed to provide the image as a ‘resource’ to the imagefilter function. But the WP_Image_Editor doesn’t have a get_image function that returns the image as a resource and the image property is protected, meaning it’s only accessible by child classes.

Fifth attempt: WPThumb and CSS

Before attempting to extend the class myself, I had another intuition. I remembered the WPThumb class / plugin and that it leveraged WordPress functions to manipualte thumbnails on the fly. A bit like Timthumb, but more secure.

So I asked the developer on Github if it could do greyscale and indeed I had not only a positive answer, but Joe provided me with the actual code needed to achieve the solution.

This is the final code for the front page template

And the WPThumb greyscale filter

and a wee bit of CSS

 

#carousel li {
height: 64px;
}

#carousel li a:hover .fade-image-layer1-col{
margin-top: -41%;
}

 

Conclusion

I’m quite happy with the result, as all the image processing is done server side, the carousel animation remains fluid.

The client can upload images normally without any extra manipulations.

The only thing missing would be a fade in animation of the color image, but CSS transitions cause the carousel to be jumpy when an image is hovered.

Also, for some reason, in Firefox the scrolling is not as smooth as it should be.

Welcome to Github, what’s next?

Published by on March 19, 2016

So you’ve just registered on Github because a friend or colleague told you it’s a great place to learn from other people’s code and play farmville? Good for you! Now go and follow these awesome developers! You’ll learn tons by looking at their theme and plugin code.

Joe Hoyle from HumanMade

Justin Tadlock, maker of Hybrid Core

Tom McFarlin, WP Tuts author and Hello Dolly Podcast

Gary Jones Genesis contributor

Bill Erickson Genesis contributor

Jared Atchinson Genesis contributor

Andrew Norcross author of the popular metaboxes class

Frank Bültge author of popular plugins like Adminimize

Deckerweb author of many Genesis plugins

Jeffrey Way Nettuts author

Chris Coyier CSS tricks

Pippin Williamson  author of Easy Digital Downloads

Andrew Nacin WordPress core developer

Mark Jaquith WordPress core developer

Alex King Crowd Favorite

Thomas Griffin Expert Genesis developer

Konstantin Kovshenin Automattic

Michael Fields theme wrangler at Automattic

Brian Gardner author of the Genesis theme

Brian Richards author the Startbox theme (suggested by Brad Thomas)

WebDevStudios great team of WordPress developers, thanks Ozh

and feel free to follow me : Paul de Wouters

I’ll expand the list based on your suggestion, so if you’re following some great WordPress developers on Github let me know in the comments!

WordPress development project assessment questions

Published by on March 19, 2016

When I receive a new request to develop a WordPress site, I go through a list of questions in my head to help me estimate a project’s complexity.

In an effort to fine tune that process, I decided to write down all these questions and actually give possible answers a score. I hope this score will help me quickly benchmark a project against previous projects, as I push more projects through this system, I’ll be able to make it more accurate and effective.

Here are the questions, and some comments about each of them:

Client parameters:

Is this a repeat client?

I’ve found it easier to work with repeat clients, as you already know what their expectations for the outcome of a project are, and it makes it easier to estimate. If it’s a bad client, why aqre you still accepting projects from them?

Client’s attention to details:

this can have a big impact on whether you’ll make a profit from the project if you quote a fixed price. If the client turns out to be really picky about every little detail, it can very time consuming to satisfy them.

Is the client easy to work with? Yes or no

Project assets

Overall completeness of request?

This is probably an area I can improve. I currently don’t have a systematic approach to communicating what is needed to begin a project. This could be solved by offering a template or form for clients to fill out.

I usually expect PSD files for every template variation, and I expect the files to be well organized with named layers and groups, grid guides,… a good example of this is Photoshop Etiquette.

If the design uses custom fonts then I expect them to be provided as a separate download. As well as any repeatable, seamless graphics that the designer has created, either as a graphic or a photoshop pattern.

A document that describes the functionality of the different areas that are not static pages. This is often overlooked, and results in a lot of back and forth with the client, and is usually a cause for underestimating a project’s scope.

A style guide: it can be simple, but it’s very helpful to have a document that outlines font sizes, colors, hover styles and such. Very often, typography and styling is inconsistent across the design files, and it’s time consuming to measure every paragraph and title in Photoshop because there’s a slight difference in color or font size. In my opinion there should be consistency in the typography and styles. This reinforces the overall look and feel.

Contents and photography

If the project includes adding the contents and images, have they been provided or do I need to extract the images and text from the Photoshop file?

I also judge the overall design, is it poor, average or excellent. Was it done with the web in mind, or does it look like a print brochure, and does the designer expect it to behave like it? Fixed heights on pages, etc…

Hosting

Most often, the client already has a hosting plan. If it’s not on my list of “approved” hosting providers, I apply a penalty. Hostgator, DreamHost, BlueHost, WP Engine are all good choices. I don’t want to mess around with VPS or custom dedicated servers that aren’t configured for WordPress.

Implementation parameters

Looking at the needed functionality, are there areas that I can use code from my existing code base for? If I can, I’ll reuse code for lightbox galleries, sliders, tabs and other such custom functionality that I’ve already developed on previous projects.

I also keep a library of code snippets in Evernote for future use/reference.

How complex is the overall functionality of the website?

Is it a typical brochure site with a few pages? Or does it have many different sections with different functionality and purpose?

Does the client have specific requirements for theme and/or plugins that don’t fit into my workflow?

Over time I developed an optimized process and I’ve chosen a few plugins and themes that allow me to be more efficient. If I can’t use those then I makes my job harder.

Will some aspect require me to learn a new skill?

Maybe learn an API or how to extend a cerrtain plugin.

Admin  Area

If the dashboard / admin requires customization, can I use a plugin like Adminimize or will it be entirely custom? I have an existing include file that lets me quickly hide or disable parts of the admin, menus, options…

Custom menus

Does the site require multiple custom menus?

Does the menu design warrant a custom walker, or use of filters to modify the default menu output?

CMS Modules

Does the site require one or some of the following?

Ecommerce, membership area, downloads area, events, testimonials, a portfolio section, something else?

Theme

How many different layouts does the design require?

How many different templates? If the site requires custom post types and taxonomies then they will require creating templates for the archives and single view, maybe different templates for categories and tags.

Does the design have many different thumbnail sizes?

Is it better to use custom thumbnail sizes or a solution like WP Thumb? (not Timthumb)

Is the display of contents consistent across the different templates?

Are there repeatable content blocks, ( use of partial templates)

Home page

How complex is the design of the home page template?

Is there a blog section? Are comments enabled?

Can I use an out of the box commenting system like Disqus or Jetpack?

Is the comments design similar to the default comments in the framework I use? (Genesis or Underscores)

Does the project require a custom search functionality? Taxonomy filtering, multiple criteria search?

Does the project require the use of custom fields? Can I use Advancde Custom Fields, which is my preferred solution. It has excellent addons like the Repeater, Flexible content and Gallery.

Front End requirements

Is the design to be responsive?

Are the typography styles complex?

Is the design graphics heavy?

Meaning lots of background images, borders, underlines to extract and convert to CSS.

Does the project require Javascript functionality such as tabs, modal windows, ajax, slideshows, lightboxes,accordions,…

What are the browser comparability requirements? IE, old IE…

What devices should the site be optimized for?

Well that’s about all I can think about for now. I’m sure I could have gone into more detail about some questions, and I’ve probably missed some that you deem important. Let me know in the comments!