Learning Sass with CodePen

If you’ve been working with CSS for a while, you’ve probably heard of Sass and even switched to it by now. Using Sass allows you to code much faster and efficiently. Getting started can be a bit daunting though. Tools like CodeKit can help or if you’re familiar with the command line then installing Sass is a breeze, but if you’re not, then you’re stuck. That is, until now.

Dudley Storey, at The New Code has created a free comprehensive course that allows you to learn Sass while using CodePen. Because Sass is built into CodePen, you can get started right away. His excellent tutorial series, takes you through the basics,  nesting, extends and imports and concludes with loops.  If you’re just getting your toes wet, this is a great place to start.

 

Flexbox fundamentals with Wes Bos

I’ve had the chance to play with Flexbox for a while on a few different projects and it’s been super handy. Flexbox allows you to do things that floats just make you scream and pull your hair out.

Although very simple, flexbox can be a bit tricky, especially when using it in a WordPress theme where you may not have full control of how the HTML is generated ( i.e. menus and search box). One of the best guide for using flexbox is Chris Coyier’s “Complete Guide to Flexbox“. I constantly refer back to this guide every time I’m using flexbox.

A few months ago, Wes Bos released a series of videos at Flexbox.io. I was curious about these and so signed up, got the videos, but hadn’t had the chance to go through them until this week. I spent a couple of days listening and playing around with the code. Although, most of the information was a review for me, the videos clarified quite a few things and highlighted very important points. I even burst out laughing when Wes said, “now this is when people normally say, What? This flexbox stuff doesn’t work“. I had literally just said something very similar.

I must admit, I’m not a big fan of video tutorials. I would rather just see code and read a brief explanation, but these were fabulous. Wes explains things very well, he’s very clear and repeats the most important points frequently. Best of all, the videos are free, so you should really check them out if you haven’t had a chance yet.

In Video 13, Wes introduces gulp and node which he uses for auto prefixing. I had some issues installing all of this and since I never write CSS, but work with Sass instead, I opted to use mixins instead and as always, a quick search lead me to a great collection that fits the bill.

A big thanks to all you fabulous people sharing knowledge online. You’re awesome.

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 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.

Setting up Custom Content Types using Stresslimit Custom Content Types plugin

When Custom Post Types (CPT) became available with the release of WordPress 3.0 everyone was super excited about this new features and many tutorials came out explaining how to use them. These were super helpful and helped us get started and I must admit, CPT have made building WordPress sites truly pleasurable.

Some folks did point out though, that to set these up, the code needed was quite cumbersome. Of course smart folks came up with handy tools and plugins to solve this.

I was reluctant at first and didn’t think that the extra code needed was that difficult to manage, but Joey introduced me to the Stresslimit Custom Content Types plugin and I’ve been hooked on it ever since. It’s super easy to use. The plugin is designed for developers, so it doesn’t simply work out of the box, but once installed all you do is add the following to your functions.php:

sld_register_post_type( 'your-post-type' );

This new function simply extends register_post_type().

So for example, if you wanted to create a new content type called Products, you would use:

sld_register_post_type( 'product' );

It also supports the same arguments as register_post_type() so if you wanted to override the default ones, you could use something like this:

$product_args = array(
	'supports' => array( 'title', 'thumbnail' ),
	'menu_icon' => get_template_directory_uri() . '/images/admin-product.png',
	'public' => false,
);
sld_register_post_type( 'slide', $product_args );

This function works perfectly and displays a nice custom content type in our admin panel with a new icon which we’ve added to our theme file.

Things do go wrong though if you’ve omitted to upload the plugin or it gets deactivated accidentally. If that happens, you get the following error on your site:

Fatal error: Call to undefined function sld_register_post_type() in ...

As a developer, that’s not a big issue. Most of us know how to read error messages and know how to fix them, but it’s much more troubling when clients accidentally get these messages. It’s happened to me in the past and I immediately got a phone call. An easy way to avoid this is to first do a check to see if the plugin is installed, then call the function. WordPress allows you to do this easily with function_exists(). The code for our Product CPT would thus be like so:

include_once( ABSPATH . 'wp-admin/includes/plugin.php' );

if (function_exists( 'sld_register_post_type' )) {

$product_args = array(
	'supports' => array( 'title', 'thumbnail' ),
	'menu_icon' => get_template_directory_uri() . '/images/admin-product.png',
	'public' => false,
);
sld_register_post_type( 'slide', $product_args );

}

That’s it. Next time you’re working on a site needing custom content type, check it out. It makes things much easier.

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…

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…

Three ways to give your WordPress site a full screen background image

New design techniques are popping up everyday and now that there are less bandwidth issues, designers have been incorporating full screen background images in their design more and more.

If you wanted to do that yourself but didn’t know how, here are a few techniques ranging from super-easy to advanced.

Super easy plugin solution

The Simple Full Screen Background Image WordPress plugin allows you to easily upload and set a full screen image as the background of your website. Once installed and activated, you’ll see in your Appearance section a new area called, Fullscreen BG Image. You can then browse for your image, upload it and insert it like you would for a blog post. Once uploaded, the plugin will do the rest and make sure that it re-sizes to fit your browser. You may need to play with the size and resolution, but using this plugin couldn’t be easier.

Read more…

Build a custom fade in fade out slideshow

In my previous blog post, I provided a step by step tutorial on how to build a custom image slider into your WordPress. This was achieve by using Nathan’s awesome slideshow plugin. Digging a bit deeper in his code and website, I discovered that he’s also included fade in fade out transition.

If you’ve downloaded the material, took a stab at the tutorial and wish to use this transition effect instead of a slider action, all you need to do is replace the jQuery function in your header with the following:

<script>
 jQuery(document).ready(function($){
	$('#slides').slides({
	preload: true,
	preloadImage: 'http://yourthemepath.com/images/loading.gif',
	effect: 'fade',
	play:5000,
	crossfade: true,
	fadeSpeed: 500,
	generatePagination: false
   });
 });
</script>

You also no longer need the next and previous arrows.