The High Cost of Low Cost Themes

One of the reasons why people love WordPress so much is because there are so many resources, such as thousands of themes to chose from. Unfortunately, just like everything else, the quality of all of these themes can’t be guaranteed.

I was recently asked by two clients to help them out with their new websites. Both were almost ready to launch, but weren’t happy with a few things in their WordPress admin.

The first client, hired a developer and was a bit shocked to hear that they wouldn’t be able to update WordPress ever, or any of their plugins. The developer they hired, purchased a theme that was no longer supported and broke if anything was updated. Not only does this open you up to security vulnerability, it’s also just shoddy work. This is the equivalent of me buying my friend a new laptop running a XP them being stuck with using IE8 forever. I’m not sure my friend would appreciate.

In the second instance, the client also hired a developer who purchased a commercial theme but the updates weren’t an issue. However, they had no idea how the admin worked. The entire WordPress admin had been transformed and even I, after a few hours, didn’t know what was what. In addition, the final site loaded 32 javascript files and 17 external stylesheet, so was running super slow.

In both of these cases, I spent a few hours poking around the theme and tried to figure out what was going on. But I gave up very fast. Both contained so many files, it was hard to understand what was needed and what was not. In the end, I simply re-built the themes from scratch. Both were happy with the way the site displayed on and functioned on the front end, they just wanted to have an easier back end to manage.

In my opinion both of these commercial themes displayed what I resent most from them:

They have too many options.
Theme vendors want their theme to satisfy a large pool of clients, thus the more features there are, the better. These options come at a price though. More options, means more complexity with increase in error, and more files to load which makes your site load slowly.

Many love to customize the WordPress admin.
Perhaps this is meant to be helpful, but it’s not. As soon as you modify an interface, you’re asking your audience to relearn how things are set up. People shouldn’t have to re-learn out the WordPress admin works when switching from theme to theme.

So how do you know which theme you should use?
That’s a great question.

You might think to yourself that free themes won’t be as good, but the quality of themes in the WordPress.org repo has improved greatly over the years. In addition many theme foundries release their themes for free on WordPress.org and then offer a pro version for a fee. Before purchasing these, I would encourage anyone to look at a few free versions first.

If a theme from a foundry caught your eye, the first thing I would recommend before buying it, is to look at the theme’s rating and look at how the developer is addressing support issues. Are questions in the support form answered well and in a timely manner? Have many people written great reviews or are all of them one star only?

Make sure that the theme you are purchasing contains 99% of what your looking for. If all you want to do is change one or two colours, that’s easy enough to do with some custom CSS or a child theme, but if you want to make major changes to the layout, then you might as well start from scratch or look at free themes. Keep in mind as well, that purchasing a theme may not save you all that much. Hiring a good developer who builds theme from scratch will  be able to give you a bespoke theme made just right for you.

 

 

Bold Headline now available in French and Polish

I received a request from a fan of my Bold Headline theme earlier this month which led me down an interesting rabbit hole. This fan, Dariusz, wanted to use my theme but would like a Polish version of it. Not knowing any Polish myself, I asked if he could provide the translation, which of course then led to his next question, how do I do that?

Since I use underscores as the base of all my theme work, I knew that the theme was internationalized, but I didn’t really know what that meant. In order for a theme to be used in another language, one must wrap all english content in the _e function.

<?php _e( 'Some text to translate and display.', 'textdomain' ); ?>

Underscores already does all that, so I didn’t need to worry, but now what?

Turns out translating a theme is quite easy.
Read more…

WordPress Theme Customizer

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.

Learning Child Theming with Twenty Twelve

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.

Deux-Milles-Douze

Mon Cahier now offers RTL support

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

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

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.