Add a Custom Font With @font-face

Step One: Download a Font
Head over to Font Squirrel and check our their great selection of fonts that are 100% free for commercial use. I am using the font “Windsong” for this tutorial.

Step Two: Upload the Font to Your Server
After your font has been unzipped, upload it to your server. I recommend creating a separate file for fonts. (wp-content/themes/thematicchildtheme/fonts)

Step Three: Edit Your CSS File
Open style.css and add the following snippet of code:

@font-face {
font-family: Windsong;
src: url('fonts/Windsong.ttf');
}

Step Four: Apply Your New Font
Apply your font by changing the font-family to your desired font. I will be using this font on my blog title. Example:

#blog-title a {
font-family: Windsong;
}

Watch me do it:

Copyright Free Music for Your YouTube Videos

Adding music to your YouTube videos can be a headache if you do not know about copyrights. There isn’t much room for mistakes, YouTube has some pretty serious consequences for anyone who uploads copyrighted material. Your video(s) could be taken down and you may loose your account. After your account is gone that is it – YouTube does not allowed anyone with a terminated account to re-create another one.

Because of this many people fear using music at all, however, I want to encourage you that there is music available at no cost and without copyrights.

ccMixter is a well organized website full of copyright free music. YouTube is even mentioned specifically!

Before you dive in and start downloading your music of choice there are just a few things to note. Make sure when you search that you use the appropriate license. Is this for personal use or commercial use? Next, is it for a video, a game, or a podcast or etc? These things you can chose from the drop down menu. It is very important to narrow your search down. It would be a shame to find something you like and not be able to use it.

When you have narrowed down your search, make sure to click on the grey license buttons. They will tell you what you can and cannot do with the selected file.

And finally, two pieces of wisdom in closing:
1. Do not use ignorance as an excuse. If you do not know if something is copyright, it is best not to use it, just in case.
2. Give the authors credit. Remember that behind every username there is a real person. These authors have done a great service in offering their works for free. Giving them the credit they ask for is the least we can do.

If you would like more information on YouTube’s copyright policy, check our their Copyright Tips.

Thematic: Remove the Sidebar

To remove the sidebar of your Thematic child theme start by opening up your functions.php file. I have said this in every post about Thematic up to this point, and I will say it again just in case this is the first post you read. Editing the core files of Thematic (index.php, header.php, footer.php and etc) are a big no-no. There are a better way of doing things. If you are anything like me, you don’t really like reading tutorials – you are more hands on. Trust me, reading this will make your design process so much easier. Check out Ian’s post on How to Modify WordPress Themes the Smart Way.

Once your functions.php file is opened, add the following code somewhere between <?php and ?>.

// Remove Sidebar
function remove_sidebar() {
remove_action('thematic_sidebar','remove_sidebar');
}
add_filter('thematic_sidebar', 'remove_sidebar');

With that, your sidebar will have disappeared. The next thing you will need to do is to expand your content area to get rid of the extra white space. This will vary depending on which child theme you are using, I am using the power blog child theme. The file that I will open up is 3c-r-fixed-primary-988px.css. I want to draw your attention to two portions of the css:

#content {
margin-right:448px;
overflow:hidden;
}

and

#sidebar {
float:right;
margin:0 0 0 -428px;
overflow:hidden;
width:428px;
}

From #content, remove ‘margin-right:448px;’. Also remove the entire #sidebar code. Once your changes are complete, save your css file and you are finished.

Watch me do it:

“You might also like:” or “Related Posts:”

You see this handy tool at the bottom of a lot of websites now a days. I find that when I come to the end of a post and see a display of the other things I might like, I do like them! They can be a little hard to track down if you do not know what you are looking for. Therefore, my goal with this post is to direct you to what you are looking for =).

“You might also like:”

To get this for your website, head over to the LinkWithin website and sign up for your free widget. This widget is avaliable for self-hosted WordPress users, Blogger users, TypePad users, and others. Installing this widget is simple – just download the zip file and upload it to the appropriate directory. For WordPress users, the directory you would install it in, is yoursitename.com/wp-content/plugins. To customize this widget you will need some experience in HTML/PHP. PS: Please feel free to ask for help =)

“Related Posts:”

The next widget can be installed directly through WordPress dashboard. Under your Plugins tab, click on “Plugins” and search for “Related Posts Thumbnails“. It has a built in options panel which makes for easy customization. Because of its simplicity and great array of options to edit – this one gets my vote.

Thematic: Adding Thumbnail Support to Categories

This code will add thumbnail support to your categories when using a Thematic child theme. Your front page posts will not be affected.

When using Thematic it is very important that you do not touch the core files (core files meaning index.php, header.php, footer.php..). Therefore, most of our coding additions are done through the functions.php file. Go ahead and open your functions.php file. Somewhere between <?php and ?> place the following code:

// Thumbnail Support for Categories
add_theme_support('post-thumbnails');
function my_post_title($posttitle) {
    if (is_single() || is_page()) {
        $posttitle = '<h1 class="entry-title">' . get_the_title() . "</h1>\n";
    } elseif (is_404()) {
       $posttitle = '<h1 class="entry-title">' . __('Not Found', 'thematic') . "</h1>\n";
    } elseif (is_category()) {
        $posttitle = '<h2 class="entry-title">';
        $posttitle .= '<a class="alignleft" href="'.get_permalink().'">'.get_the_post_thumbnail(NULL, 'thumbnail').'</a>';
        $posttitle .= '<a href="';
        $posttitle .= get_permalink();
        $posttitle .= '" title="';
        $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
        $posttitle .= '" rel="bookmark">';
        $posttitle .= get_the_title();
        $posttitle .= "</a></h2>\n";
    } else {
        $posttitle = '<h2 class="entry-title"><a href="';
        $posttitle .= get_permalink();
        $posttitle .= '" title="';
        $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
        $posttitle .= '" rel="bookmark">';
        $posttitle .= get_the_title();
        $posttitle .= "</a></h2>\n";
    }

    return $posttitle;
}
add_filter('thematic_postheader_posttitle', 'my_post_title');

** Make sure you have a featured image set. Post thumbnails will not work without it.

I want to give a huge thank you to a member from the WordPress forums that goes by the name ‘asinglehumanbeing’. This person gave me the code to make this work.

Watch me do it: