Responsive Theme and Patterns

These past few weeks I finally started getting serious about responsive sites and finally completed my Bluelime Media website conversion. I started almost a year ago, but never got around to finish it. I had the chance to work on a few responsive sites this year and I predict that more and more websites will opt for responsiveness in the future, so as the saying goes, one must practice what you preach.

Lucky for me, Robert Dall at 32 Spokes, offered to help me convert the Bluelime Media HTML5 basic starter theme to a responsive version. Following an intense week of tweaking, refining and testing, I’m pleased to say that a responsive version of my starter theme is now available for anyone to grab on Github.

Like my other themes, this theme contains the bare minimum. The theme also only has one option for mobile navigation. There are loads of different options one could choose and one couldn’t possibly include them all.

If you’re looking for different responsive patterns, you might want to visit and bookmark Brad Frost’s collection of responsive patterns. Brad has compiled an amazing list of useful patterns and resources.

Mon Cahier Child Theme

I’m extremely happy with the feedback I’ve received so far on Mon Cahier, but there have been a few questions about how to change a few things. I thought I would put together a short tutorial on how you can do this by making a child theme.

First thing you’ll need to do is make a new folder. You can call your folder anything you want, but it cannot be the same name as the parent theme and it shouldn’t contain any spaces. I’m going to use mon-cahier-child as my folder name. (You can grab a copy of my child theme if you want.)

Next create a new style.css and insert the following lines of code:

/*
Theme Name: Mon Cahier Child
Description: Child Theme of Mon Cahier
Author: Insert your name here
Template: mon-cahier
Version: 1.0

*/

@import url("../mon-cahier/style.css");

Your child theme must have a style.css and it must contain the Theme Name, Template and import the parent stylesheet. The Author, Version and Description are optional, so you can leave those out if you want.

Once you have your child theme set up, upload it to your theme directory via FTP, navigate to Themes in your admin, and activate it. Your website shouldn’t look any different yet. We need to make more changes first.

Let’s say you wanted to change the body font-family to Helvetica instead of Georgia and the headings to Georgia instead of Cutive.

Looking at the parent theme you’ll find, on line #69, the style for the body copy and the headings on line 85. Adding the following lines of code to the style.css of our child theme will give you the result you’re looking for:

body,
button,
input,
select,
textarea {
	font-family: 'helvetica', sans-serif;
}

h1,h2,h3,h4,h5,h6 {
	font-family: 'Georgia', serif;
}

There you have it. With just a few lines of code, we managed to change our fonts. You could go a step further now and change the sizes, widths of the various columns, etc…

But what if you wanted to make bigger changes like change the title of the archives? That’s possible too, but needs a bit more effort digging through the code.

Right now, if you navigate to a category, you’ll notice that the heading of the category, displays, “Category Archives: name of category”. To change this, make a copy the archive.php template from the parent and insert it in your child theme.

Open your copy of archive.php in your text editor and look for the words “Category Archives”. You’ll find these on line #22 which looks like this:

printf( __( 'Category Archives: %s', 'mon_cahier' ), '<span>' . single_cat_title( '', false ) . '</span>' );

Changing it to:

printf( '<span>' . single_cat_title( '', false ) . '</span>' );

formats the category headline as you want.

The same can now be done for tags, authors, etc…

Removing the sidebar from pages is done in a similar fashion. Make a copy of page.php and insert it in your child theme. Once opened in your text editor, you’ll find on line 30. Just delete that line of code and that will remove the sidebar from all pages.

The hardest thing about making a child theme is finding which file does what and what code to remove or edit. But once you’ve started poking around, you’ll get the hang of it and the best part is that by mucking about with the child theme, your not touching the parent, so you always have a backup. You could of course, just change the parent, but then if there’s a theme update, you will loose all of your changes, so it’s best to always make a child theme.

To learn more about child theming, have a look at the Codex. At the bottom of this page, you’ll find a few links to other resources, one of which is the excellent tutorial by Siobhan McKeown which shows you how to use Firebug to make a child theme.

Releasing themes using underscores as a starting point

One of my year’s goal for 2012, was to release a theme in the WordPress theme repository. Releasing a theme is an easy enough thing to do as long as you follow all the guidelines and ensure that your theme meets all of the requirements. But the bar is set quite high. Although I’ve been building/creating themes for years now and average one a week, creating themes for the masses is a whole different ball game.

I unsuccessfully tried in 2010 and then got busy, so just keep “Adding a theme to the repo” on my teuxdeux list. Then a few months ago, Ian Stewart and his team at Automattic announced the release of _s theme.

This theme is the perfect starter theme for anyone wishing to create themes. It’s not meant to be used as a parent theme, but instead, it’s your foundation.

Knowing that Ian is an incredibly smart guy and that the theme had the Automattic stamp of approval, I proceeded to study it, poked around and came up with my very own theme – Stripay. Feel free to download it and check it out to see how it works. I also urge you, if you are a theme developer, to look at _s. It’s FREE for anyone to use and makes theming way easier.

PS: Why such a weird name? There’s a lot of themes in the repo. Stripes, stripey, were all taken, so I just started randomly choosing letters!

WordPress Resources by Code Poet

This weekend at WordCamp Seattle, I was pleased to hear that Automattic has revamped their Code Poet website. What used to be a directory of top-notched WordPress developers, is now a resources for anyone who uses WordPress to make websites.

There are loads of tutorials and WordPress how-to out there. Do we really need another? The difference with Code Poet, is that all the resources found here are written, published or recommended by Automatticians. So you can be sure that it’s the best info.

I myself had a lot of fun last night taking the WordPress quiz. I failed to get the Master ranking, but Expert is pretty good. I’ll have to review those questions I missed.

But before that, I’ll be reviewed one of their first eBooks, “Getting Pricing Right“.

Oh and in case you were wondering, yes, it’s all FREE.

WordCamp Seattle 2012

One of the best thing about WordPress is the online community and the many ways one can learn how to use WordPress as a blogging platform or as a CMS. WordCamps are always a lot of fun and a great way to meet other developers and bloggers. This year, I’ve been fortunate to have been selected as one of the speakers at WordCamp Seattle. Check out the schedule and come and say hi.

My slides used for the presentation can be found here.

The theme created for this presentation can be viewed here.

Integrate JQuery Masonry in your WordPress theme

Floating divs can be quite frustrating at times.  When these are added side by side, they usually stack as best as they can but they create gaps.

Leveraging JQuery Masonry can help us achieve a much better layout and it’s integration in a WordPress theme is pretty easy. If you’re not familiar with this technique, jQuery masonry allows you to flow blocks of content similarly to a mason wall. It’s pretty neat and there are many great WordPress themes that incorporate it.

Read more…

Stop Building Sites In Subfolders? I disagree.

Drew McLellan wrote an interesting article on March 9, 2011. Of course a year later, comments are closed (as they should be unless you want to get daily viagra offers) and I couldn’t add my thoughts, so I thought I would explain why I build sites in a subfolder on the live server.

Drew specifically talks about Perch. I’ve never worked with Perch or any CMS other than WordPress, so perhaps his article is spot on. But when developing WordPress sites, I favour developing in a subfolder on the client’s server.

If the client has an existing site, I create a new subfolder, set up a fresh installation of WordPress, including a database and start working there. I’m a big fan of the BackWPup plugin and set that up during development as well, that way there’s a backup of the theme and database if anything goes wrong.

When it’s time to go live, WordPress provides a simple step to give WordPress it’s own directory. No files but two need to be moved to the root directory and WordPress takes care of the urls. So there’s no danger or messing about with links and losing any page relationships.

By working on a temporary server, I’ve learned the hard way that no two servers are the same. Just last week, I proceeded to set up WordPress on a client’s hosting provider only to find out that they are running a lower version of PHP than required. I’m glad I found that out sooner rather than prior to launching. Now the client has time to look into new hosting.

Additionally, you might not believe this, but clients sometimes disappear and never provide copy. Gasp! Shocking I know. This happens to me at least once a year. I set up the site, make sure everything is ready to go, give the keys to the client and then wait until they tell me they are ready to go live and everything goes quiet. By having them on a subfolder on their live server, the ball is in the court and I don’t have to maintain a temporary site on my server.

I build on average 50 WordPress sites a year and this is my workflow. It makes sense when working with WordPress. What are your thoughts?

Build a custom image slider using a Custom Post Type

In a previous tutorial, I showed you how one can build a custom image slider using the wp_get_attachement_image function(). This method works very well, but of course there are more than one ways to build a slider. The method of choice will depend on your functionality requirement.

The wp_get_attachement_image function() is great if you want to create a slider out of one post and multiple attachments. For example, portfolio pieces would fall in that category.
But what if instead you wanted a slider to feature multiple posts, with one image each, which would link to different pages? The slider itself would work the same way, but you’ll need to set your back-end a bit differently and use a different loop in your template.

This tutorial will show you how this can be done using a custom post type. Here’s a sneak peek at the demo site. The files used to create the theme as well as the slider snippet can be downloaded here.

Read more…

Build a custom image slider on your home page using built-in WordPress functions

Image sliders are quite popular and add a nice visual element to any website. You could use a plugin to add one to your site, but wordPress has all of the functionality built-in for you to integrate one in any theme of your liking. If you’re a theme developer, you’ll want to follow along and add this code snippets to your collection.

I recently created a site for my colleague and very good friend Barbara. You’ll see that her home page has a very simpler slider. If we ignore the header, sidebar and footer, this page is very simple. In the following tutorial, I’ll walk you through each step and show you how to integrate a slider like this.
Read more…