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…

Dealing with hackers and spammers

Having a WordPress site is loads of fun. Being able to create content, make your own edits and upload images and documents without having to contact your web designer is an absolute delight. However, dealing with hackers and spammers is not that great. Granted hackers and spammers do attack non-WordPress sites, but they seem to be targeting these more frequently. There are of course ways to protect yourself.

How do you know if your site has been hacked? If you notice weird spammy words in your website content, in your Google search result or if you’re site redirects to a strange url, then you’ve been hacked. If you’re not 100% sure, try Sucuri SiteCheck. It will scan your site for malware, blacklisting and out-of-date software for free.

How did this happen? Hackers either managed to figure out your FTP password or they used a vulnerability in either the WordPress core files or a plugin.

Here are a few things you can do to prevent this from happening:

  1. When creating FTP passwords use a generated word that cannot be pronounced, uses a few symbols and a mixture of upper and lowercase letters. Of course these passwords will be more difficult to remember, but using a tool like 1Password or LastPassword can help.
  2. Make sure to upgrade your WordPress site every time a new version comes out. These updates usually include fixes to vulnerabilities and are very important.
  3. Make sure you upgrade your plugins as well for the same reason. If you have lots of plugins and aren’t using them all, don’t just deactivate them, delete them.

If you’re site has been hacked, then you’ll need to clean up the files. I normally delete the WordPress core files (everything but the wp-config.php and wp-content folder) and re-install everything. I also do a manual scan of the theme files to make sure that hackers haven’t messed anything up. If this feels a bit intimidating, you might want to contact Sucurri Security. For a small fee they can clean up infected sites and you can also hire them to scan your site and keep an eye on it annually.

If you’ve been blacklisted by Google or spammy words appear in Google search results, you’ll need to log into your Google webmaster tool and submit your site for reconsideration once it’s clean.

Although spammers are less harmful, they are equally as annoying. If you’re site is new and you haven’t publicized your email address, you might want to install the email address encoder plugin. This plugin will simply scramble your email address making it harder for harvesters to grab it. If on the other hand your email is already out there, then I’m afraid that once it’s on a spam list, there’s not much you can do.

Spam comments can also be detrimental with more and more evidence pointing to the fact that these are not simply generated by robots but actual people. The first thing to do is to install Akismet which will do it’s best to trap spam comments. But Akismet alone is insufficient.

Be warned against comments that seem harmless. They might praise your work or congratulate you on your blog and let you know that they are bookmarking it right now. These types of comments are simply tests to see if you will accept them or not. Once you’ve approved them, then they’ll attack your blog much more fiercely.

Finally, one of the most effective ways to reduce spam is simply to close comments after a few weeks. Most readers leave comments on newer posts. Closing off comments automatically after a few weeks is very simple. Log into your WordPress admin, go to settings > Discussion and check the box that says “Automatically close comments on articles older than __ days” and enter the number of days you want to use.

I just did this myself recently and the influx of spam comments has been reduced dramatically.