Posts Tagged: theme

WordPress Theme Customizer

January 24th, 2013

One of the most exciting features introduced in WordPress’s version 3.4 was the theme customizer. The theme customizer allows you to make a few changes and preview your site before activating it.

As a theme developer this means that there’s no longer a need to use a theme options page. Otto wrote a series of great articles detailing how theme developers can implement different options and even created a theme demo for us to play with.

Since then, other developers have written great tutorials on how they’ve integrated the code in their themes. Here are few good ones:

Adding a logo uploader to your WordPress theme with the Theme Customizer, by Kirk Wight
Using the WordPress Theme Customizer to choose between excerpts or full content, also by Kirk Wight
The WordPress Theme Customizer: a Comprehensive Developer’s Guide, by Alex Mansfield

These tutorials helped me immensely in a few recent projects. My new theme Color Palette has a logo uploader and a color scheme selector. My BLM Responsive starter theme has been updated and the links to social media sites are now located in the customizer instead of a separate theme options page.

If you’ve played around with the Theme Customizer and have come across interesting themes or tutorials or if you happen to have downloaded one of mine and have comments or suggestions, please let me know.

Introducing Color Palette

January 23rd, 2013

My new theme color palette is now in the WordPress repository.

This new theme is fully responsive and comes with a choice of five different colour schemes. Once installed, just go to the theme customizer and browse through the colour options.

Color Palette Customizer

I hope that you like it and if you care to comment, don’t hesitate to do so.

Learning Child Theming with Twenty Twelve

December 16th, 2012

With the release of WordPress 3.5 comes a great new default theme called Twenty Twelve. Twenty Twelve is responsive, beautiful and a super easy to child theme. Child themes are now accepted on the WordPress repository so I thought I would try my hand at making one. You can now download my child theme, Deux Milles Douze. I also wrote a short tutorial explaining the steps I took to make it. If you’re interested in child themes, I would suggest that you give Twenty Twelve a try.

screenshot

Mon Cahier now offers RTL support

November 08th, 2012

Version 2.3 of Mon Cahier was just released today. This new version comes with Right to Left (RTL) language support for countries in the middle east and Persia. Only 10% of WordPress themes on the repository come with RTL support, which is a ashamed since it’s so easy to include. Have a look at my theme and if you speak a language that requires RTL support please let me know what you think.

The ThemeShaper WordPress Theme Tutorial: 2nd Edition

October 23rd, 2012

Back in June 2009, Ian Stewart wrote a fantastic tutorial called How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial. This tutorial proved very popular and useful for so many developers. So popular in fact, that a second edition has now just been launched. This tutorial consists on one lesson each day and uses Automattic’s Underscores (_s) as the starter theme.

If you’ve ever wanted to develop themes like an Automattician, now is your chance. Today’s first lesson entitled Develop Theme Sense covers what you need to know about WordPress themes and it’s file structure. It’s easier than you think and with the Automattic team behind you, it’s the perfect tutorial for anyone wanting to learn about theme building.

Responsive Theme and Patterns

September 30th, 2012

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

September 22nd, 2012

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.

Kitsilano.ca is featured on ThemeID showcase

August 07th, 2012

Kitsilano.ca goes Responsive

August 07th, 2012

I’ve had the pleasure of working with Rob Lewis for years on the Kits website. Rob is great to work with as he let’s me try out different designs and doesn’t demand pixel perfection. During our last conversation, he suggested the site needed a refresh and needed to be more suited for mobile viewers. Responsive sites are more and more common and I’ve dabbled a bit, but diving into a new territory is always a bit scary.

Following the WordPress theme weekend, I was inspired to give Reverie a try. Other folks seem to like it and so I thought it would serve me well. Unfortunately after about 6 hours of tinkering, I just wasn’t getting the look and feel I was hoping for. I decided instead to give Emil Uzelac’s responsive theme a go. Once installed, I created my child theme and added my style changes to the stylesheet. I soon realized that changes to the templates themselves would be needed, but the theme files were so well laid out and commented, that child theming was a breeze. In fact, I can’t remember having so much fun building a theme. I hope that the viewers at Kitsilano.ca will enjoy the changes.

Announcing Mon Cahier, a new theme available for Free

August 05th, 2012

I’m happy to announce that my second theme, Mon Cahier, has been accepted in the WordPress Theme Repository. This means that anyone can download it and install it for Free. This new theme is very simple, clean and elegant. It’s main purpose is to showcase your content. Please feel free to download it and let me know how you like it.