I’m really happy to announce that my Spine theme was added to the WordPress.org theme repository today!
Spine is a responsive theme, built with Hybrid Core and Zurb Foundation.
It was a lot of fun to develop this theme, and I’m pleased with the result.
Here’s a list of features:
2 different mobile ready navigation menus (3 menu locations)
Theme settings are integrated with the new customizer
4 color pickers to change text color
custom backgrounds
custom header images
4 different layouts (global and per page)
Translation ready (French translation available)
You can use the Foundation tabs, buttons and form styles although you’ll need to refer to the Foundation documentation for the class names. Here’s an example:
I built a little plugin that adds the ability to track Events with Google Analytics.
If you’re not familiar with Event Tracking, I suggest reading this documentation
Basically, it adds 3 fields to each nav menu items in your custom menus: category, action and label.
Download the plugin here
Props to helggatheviking for her plugin Nav menu roles which provided the basis for this plugin
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.
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
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/
Here’s a list of WordPress development tools that I rely upon for my daily development work:
A custom-built PC with Windows 8 and 8Gb RAM. Gets the job done.
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.
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
Gmail with Google Apps
Skype: for IM or voice calls.
Pidgin: great little app for IRC.
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.
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