Categories
Lynda.com Video Tutorials

Building WordPress Child Themes with Twenty Twelve – new and updated course on lynda.com


If you are following my courses on lynda.com you may have noticed that there is an update for my WordPress 3: Building Child Themes course. But this is more than an update. With all the developments and new features of WordPress, I thought it better to completely revamp the course to incorporate new tips, techniques, functions and features to make your experience building child themes as up to date as possible.

For the all new WordPress 3: Building Child Themes course I also chose to use the new Twenty Twelve theme as the parent theme. Twenty Twelve has been out for a little over a month, but only as an add-on. When WordPress 3.5 comes out in early December however, it will become the new default theme in WordPress. That means if you jump in now, you’ll have a head start on everyone else using Twenty Twelve and building child themes off it.

The course looks at how to build a standard child theme and best practices around how to create new styles, add new functions, and alter the different template files to give the child theme a personal touch and make it do what you want. I’ve also added in some clever new elements towards the end like a dynamic welcome message that only appears on the front page.

The original Building Child Themes course was hugely popular and I am hoping that this new and improved version will be even more so. But don’t take my word for it: Head on over to lynda.com and check WordPress 3: Building Child Themes out for yourself!

If you don’t already have a lynda.com account and you want to try it out, go to lynda.com/trial/mor10 and get a free 7 day trial.

Categories
Speaking Engagements

Deep Dive into WordPress – a one day intensive at SFU with Mor10

Deep Dive into WordPress with Morten Rand-HendriksenWant to take control over your WordPress site or maybe just start one? Want to share your writing, photography, ideas, recipes or something else with the world but don’t know how? Deep Dive into WordPress – a one day intensive I’m hosting at SFU on August 12, 2012 is designed to give WordPress virgins a solid footing and those already familiar with the application new insights into what the application can do to make you and your content more visible on the web.

Follow this link to reserve your seat!

The Canadian Centre for Studies in Publishing is hosting a series of Digital Media Workshops over the summer and they approached me to create one on WordPress. I am hard at work refining the program which will be a primer touching on all important aspects of the application, from setup, security and SEO, to how to create and publish better content and integrate your site with social networks to get the word out.

If you have a WordPress site or want to have one, this is the class you need to take.

Head on over to the CCSP website for the full writeup, information and signup

Categories
Theme Weekend

Theme Weekend #1: Come Together, Right Now, Over Themes

Open source is all about collaborative coding, but more often than not that coding happens in isolation, the contributors only connecting via bursts of zeros and ones over global networks. And though this works quite well, it does little to establish true relationships and encourage conversation, idea exchange and innovation. For that to happen physical proximity and face-to-face interaction is required. What was needed was a meeting place, an agora where like-minded people could come together over a common goal. This is how Theme Weekend came to be.

Check out all my photos from Theme Weekend on Flickr.

The Inception

I’ve been talking about it ever since the idea popped into my head around January 2012. It was based on the same lofty “built it and they will come” principle that the 12×12 Vancouver Photo Marathon came from, and with the first event completed it is clear that principle is still sound.

Theme Weekend attendees
The inception of Theme Weekend came from three things: My own experiences working with designers and developers, conversations with members of the Vancouver WordPress community, and requests from members of the Vancouver WordPress Meetup of hosting hands-on classes and events: The interaction point between designer and developer is a much joked talked about area of frequent conflict. The simplistic view is that this is because the two sides have different ideals and goals and don’t understand each other, but my feeling is it’s because they don’t speak the same language and don’t have the experience of working together necessary for that common language to establish itself. Speaking to members of my own community I realized the only real interaction that takes place between these two groups is through clients or emails. There is no common meeting point where they can work together in a non-competitive or non-task oriented environment. In addition we’ve gotten frequent requests from both designers and developers to host hands-on events that focus on “actually building something”. Combine these three observations and the answer is clear: Theme Weekend is long overdue.

The First Theme Weekend

The Theme Weekend Class Photo
In early June I announced I was looking for some collaborators to pull off the first edition of Theme Weekend and Joachim Kudish and Pauline Lai immediately voiced interest. Joined by my trusted partner in crime Angela the four of us worked out the practical aspects of how to organize the event, nailed down a venue, got a sponsorship from the WordPress Foundation and started promoting the event.

It didn’t take long to get the 20 seats filled, and on Saturday the 20 participants along with our three volunteer “floating experts” Catherine Winters, Christine Rondeau, and Andrew Ozz and the organizing team set up at Vancouver co-working mecca The Network Hub for two days of WordPress geekery. For a full recap of what transpired, check out Joachim’s post.

This was just the beginning

Theme Weekend attendees
Anyone who knows me knows that my ideas are always huge, all encompassing and intended to expand and evolve. Theme Weekend is no different. From the original idea – get some WordPress designers and developers together to build themes over a weekend – the idea quickly evolved to something more akin to a targeted Open Source creating event . Theme Weekend will be an event template that can be used to host events around anything and everything open source all around the world.

The first key component of Theme Weekend is the “theme” part: Each weekend has to have a specific goal in mind, clearly defined and curated. The first installation was about creating general WordPress themes. The next one will likely be about creating free WordPress themes for a specific pre-defined audience or even a specific organization or cause. But Theme Weekend doesn’t have to be about creating WordPress themes. It can be about creating Drupal templates, or Joomla templates, or WordPress plugins, or Orchard whatevers. The point is to bring people together to create something while learning from each other. And I believe giving these people a specific target to work towards makes that process far more effective.

The second key component of Theme Weekend is to ensure what is created at the event continues to evolve after the event. For that we landed on the use of GitHub as a repository for all the projects. This proved to be a bigger hurdle than we anticipated due to the unfamiliar nature for most of the concept of version control, but this is a hurdle I think can be overcome with good documentation and careful planning. By using a version control system and publishing everything in public on the web, the team members themselves and others interested can continue working on the projects long after the event is over. And as Theme Weekend becomes more prevalent we’ll see a burgeoning archive of crowd-created open source projects appear on the web for the world to use and contribute to.

Coming Soon: ThemeWeekend.org

To ensure that Theme Weekend spreads and evolves I am working on a website that will be hosted at themeweekend.org. On the website you’ll find a full and evolving rundown of how to host a Theme Weekend along with lists of upcoming Theme Weekends, archives of past Theme Weekends, and links to all Theme Weekend projects. The site will serve as a central hub for the even concept and will allow us to evolve the concept by letting you and others interested take part, organize, collaborate, improve and make the event into all it can be. We’ll start off with the lessons learned from the first event this past weekend and expand from there. And hopefully we’ll soon see Theme Weekends pop up elsewhere around the world bringing communities together to do what we all love to do: Create Open Source greatness just because we can.

Theme Weekend is powered by us, the Pink & Yellow Not For Profit Society, and is hosted in conjunction with whomever decides to organize an event. We provide the template, you use it to create something awesome.

Categories
Theme Weekend

Theme Weekend registration is live

Registration for the first ever Theme Weekend is now live. Head on over to WPYVR.org and put your name in the hat to take part in this awesome (if I may say so myself) new event!

Theme Weekend, held on the weekend of June 30th and July 1st 2012, brings together 20 designers, developers and WordPress enthusiasts to build WordPress themes in a weekend.

The event takes place at The Network Hub in downtown Vancouver and costs $15 per person. All funds raised will be put towards food and beverages for participants.

The event has a simple set of parameters: On Saturday morning the participants will form groups that each will build a WordPress theme over the two days of the weekend. The themes will be hosted on GitHub and will be made available to the public. Throughout the event the groups can seek help from each other and from the floating pro developers and designers. The goal of Theme Weekend is simple: foster creativity and collaboration, team building and to learn from one another.

For a full writeup of Theme Weekend check out the original blog post.

Categories
Lynda.com Tutorials

WordPress 3: Building Child Themes – new course at Lynda.com

LEGOs used as illustration for the WordPress 3: Building Child Themes course on lynda.comChild Themes are by far the easiest way of creating a new look and introduce new functionality to a WordPress powered site. By creating a WordPress child theme you get all the benefits of the parent theme while gaining the ability to create custom styles, custom layouts and custom functions just for you.

In May 2011 I went to Ventura, California to record my new course WordPress 3: Building Child Themes for lynda.com. The course takes you through the entire child theme building process – from picking a parent theme to creating new styles and layouts, customizing and adding menus, sidebars and footers, integrating the Featured Image (post thumbnail) functionality throughout the theme and even adding custom jQuery functions. Here’s a sneak preview:

The course and its materials were created to make it easy for everyone to get started customizing WordPress sites and comes as a direct extension to my WordPress 3 Essential Training course (also available from lynda.com). Although the course uses the Twenty Ten theme as the parent theme all the code samples and techniques demonstrated can be used to build child themes from any other theme.

I’m very excited to announce this new course and I hope you like it too. If you’re not already a member of lynda.com you can get a 7 day trial membership by visiting lynda.com/trial/rand-hendriksen.

Go forth and start child theming!

 

Categories
Speaking Engagements Tutorials WordPress

WordCamp Victoria Presentation: 10 Theme Hacks to Improve Your Site


Above is the slide deck for my WordCamp Victoria presentation entitled “10 WordPress Theme Hacks to Improve Your Site”. Unlike my regular presentation this one is entirely slides based which means if you just read the slides, you’ll get the gist of it. Below are all my code examples along with links to further information, example sites and related tutorials to give you some context. Knock yourself out!

Replace Site Title with a Linked Image

This is my number one pet peeve. When people visit a site they intuitively expect the logo or header image to be a link back to the home page, and it should be. When it’s not they (and I) get annoyed. Making your header image link back to your home page is not hard. All you have to do is wrap the header image code in a simple anchor tag that leads back to your root URL and you’re good to go. For simplicity the code looks like this:


<a title="<?php get_bloginfo( 'name' ); ?>" rel="home" href="<?php echo home_url( '/' ); ?>">

… the image code …



For a more in-depth explanation check out the tutorial Twentyten Header Image as Home Button.

Enable WordPress 3 Custom Menus

The WordPress 3 custom menu function is built into the TwentyTen theme and most newer themes, but older themes usually just have hard-coded menus. Adding WP 3 custom menus to a theme is not hard though. It requires a function call in the functions.php file and a template tag in the template file of your choice (usually header.php and/or footer.php). Here’s that code:

In functions.php:


register_nav_menus(
        array(
                'menuName' =>__('Menu Name'),
                ' primary' =>__('Primary Menu'),
                '2ndMenu' =>__('2nd Menu'),
        )
);

Where menuName is the identifying slug for WordPress and Menu Name is the actual displayed name in WordPress Admin.

To display a menu you can either call it based on the slug:


<?php 
        wp_nav_menu(array(
                'theme_location' => 'primary'
        )); 
?>

… or the name defined in the Menus admin area:


<?php 
        wp_nav_menu(array(
                 'name' => 'Menu Name'
        )); 
?>

Menus Outside the Box

Menus don’t have to be regular boring one or two word one-line elements. Because WordPress allows HTML in the Navigation Label you can add more interesting designs like we did on the 12×12 Vancouver Photo Marathon site. On this site we added a simple span tag around the text that displays under the menu heading and then used CSS to change how it displays. Sorry, no code examples – it’s just straight up CSS and out of context it makes no sense.

WordPress 3 Custom Background Images and Colours

The TwentyTen theme introduced a very cool custom background function built right into the admin interface (under Appearance -> Background). This is not a function found in TwentyTen but a core function found in WordPress. That means you can activate it in any theme. All you have to do is call it from the functions.php file:


add_custom_background();

The function injects CSS style code right into the HTML pages which means it’ll override your theme CSS file no matter what. That in turn is why it’ll work on any theme as long as you run WordPress 3.0 or higher.

Adding Featured Image (post-thumbnail) Functionality

Featured images are great, if you know how to use them. They also do way more than just displaying thumbnails (which is why I think the function should be renamed).

To activate the function add the following code to your functions.php file:


add_theme_support( 'post-thumbnails' );

This will add the function to you Admin panel. To display the featured image (in the size you want) in your theme use one of the following functions:


<?php the_post_thumbnail(); ?>

Variations:


<?php the_post_thumbnail('thumbnail'); ?>




Custom Page Templates

Custom page templates allow you to individualize the look of different pages on your site. They can be used to create custom front pages, differentiated legal pages or even custom query pages that pull in posts from multiple categories.

A custom page template is basically a regular page template with a commented out tag at the very top that looks like this:


<?php 

/* Template Name: Whatever */ 

?>

Custom Category Templates

Custom category templates can be used to create differentiated category index sections in a site. Some good examples are the Reeltime Videoworks show reel page and testimonials page and Design Schooled Kids’ press page.

A custom category template can be made in one of two ways. Either create a file with the name category-ID.php where ID is the ID number of the category or category-slug.php where slug is the slug for the category. These files will automatically become the category tempaltes for the defined categories.

Custom Header, Sidebar and Footer

You can also create custom headers, sidebars and footers sort of the same way. You make and call them the same way. For example if you want a custom header you create a new header file called header-custom.php and then call it using the standard get_header() function with a small difference:


<?php get_header('custom'); ?>

where ‘custom’ can be anything.

Better Context Links

One of the things that bug me about standard WordPress themes is that they display links to the next and previous posts in the single post view. These links don’t really provide a lot of value. Instead you should be displaying the two latest posts from the current category. So I made a small theme add-in you can dump into your theme for some better context. The add-in adds links to the two latest posts in the current category including the title, publishing date and short description. To install it download the related.php file here (right-click and choose “Save As” – it’s a straight up php file), add it to your theme directory and call it using the following code in your single.php file:


<?php get_template_part('related'); ?>

That’s all you have to do.

Categories
24 Days of WordPress Tutorials WordPress WordPress Themes

Day 24: Vidunder – a Free WordPress theme just for you

I promised something big, and here it is. On this 24th and Last Day of WordPress (for 2010 at least) I give you the new Vidunder WordPress theme that you see running on this very blog.

Download Vidunder right here!

More customization than you’ll ever need

Vidunder (means “wonder” in Norwegian) is a Twentyten child theme that takes what Twentyten does and builds on it. There are so many customization options in this theme it’s hard to list them all but here are the highlights:

Custom colours

The colour scheme of Vidunder is by default orange. But you can change it to any colour you want. Simply go to Appearance -> Background and change the colour. This will change the background colour as well as the link colours and some other elements.

Custom logo

To change the logo go to Appearance -> Header and upload your own. The logo is 87 x 87px and if you want a transparent logo like the one you’re seeing here you need to upload a PNG of exactly that size. If you don’t care about transparency you can upload any image file and WordPress will help crop it to size for you.

Twitter updates in the header

To activate Twitter updates in the header go to Settings -> General, scroll to the bottom and enter your Twitter handle. The theme will go to Twitter, get your latest tweet and display it in the header for you.

Custom header image

Using the Appearance -> Background setting you can also upload a custom header image of your choosing. This is independent of the custom colours.

Custom Author Box

Custom Author Box and Related Posts

To display the Custom Author Box underneath single posts go to Users -> My Profile and define your name, email address, website, bio and Twitter handle (yes, Twitter handle). The author box will grab your Gravatar and display it along with your info. If you don’t have a bio defined the Custom Author Box will not show.

Related Posts

If there are two or more posts in the current category the two latest ones will be displayed under the current post. The Custom Author Box and the Related Posts box can be hidden by the viewer by clicking the Hide button in the top right corner.

Sidebars Gallore

The theme features 9 widgetized areas. In addition to the standard twentyten areas there is Custom which is a full-width area jammed up against the header. You can see it displaying the graphic ads for my books and video series here. Use it with causion. In addition there are Left and Right. Experiment at your own leisure.

And last, but not least…

Download Vidunder right here!

God Jul og Godt Nytt Ã…r!

Now go install Vidunder, mess around with the settings and get your WordPress site going for the new year!

Categories
24 Days of WordPress Tutorials

Day 23: 24 Hours of Free Lynda.com Access + The World’s Best Turkey

On this 23rd Day of WordPress I figure you are pretty well tied up in planning for the holidays and not really in the mood to get down and dirty with some hard core code examples. So I have something a little bit different for you: 24 hours of free access to Lynda.com and all its amazing tutorials! (Don’t follow the link now unless you have 24 hours to spare. Wait until you can sit down and relax in front of your computer for a full day undisturbed) That way you can take the time during the holidays to sit down and devour my WordPress 3 Essential Training course along with the hundreds of other fantastic videos on the site. I strongly recommend you set aside a full day for this and that you have a large pot of coffee handy because there’s a lot to learn in Lynda’s libraries and the pass really only lasts for 24 hours.

Be sure to come back tomorrow for the huge finale of this article series. Trust me, you will not be disappointed.

And now for something completely different:

How to cook a perfect turkey

So, seeing as I don’t technically have a tutorial for you today I decided to serve up something else instead: How to cook a perfect turkey. This is actually my father’s recipe, honed and refined over many years, and for the last 8 years I’ve been following it to the letter for raving reviews. And now you can too!

This recipe covers both turkey and stuffing. I recommend getting the turkey one size too big so you are guaranteed leftovers for sandwhiches the next day.

Ingredients

  • Turkey (I get Butterball – it’s been a success every time)
  • Ground beef (500g is good for 5-6 people)
  • Ground pork (same ammount as the ground beef)
  • Whole oats or dry bread crumbs – 1/4 the volume of the combined meat
  • 4 – 6 eggs
  • A block of butter
  • Cream and/or homo milk or another rich type of milk
  • Oregano
  • Merian
  • Thyme
  • Rosemary
  • Salt & Pepper
  • A splash of Port wine
  • A bottle of cheap sweet white wine
  • Gravy
  • Lingonberry jam (get it at IKEA) or in a pinch cranberry jelly
  • One onion per person
  • Two potatoes per person
  • Carrots and some other greens

Tools

  • A sharp knife, preferably a fillet knife
  • Pliers
  • Large needle
  • Twine
  • Blender

Prepping the turkey

Thaw the turkey in the fridge for around 4 days until it is not a solid block of meat. If you’re in a hurry you can thaw it in running cold water. Do not under any circumstances thaw it in the open by leaving it on the counter for a day. It will result in a visit to the ER for all your guests.

Once the turkey is thawed, look inside the neck area. Usually you’ll find a small bag containing the heart, liver and giblet as well as the neck. Take these out and place the neck to the side. Cut the heart in four pieces and remove the heart valves and any big fatty tissue or other hard bits. Next spread the giblet in three and cut off the white tendon material that is holding the pieces together. Toss the heart, giblet and liver in a blender and make a mush out of it. This will be added to the stuffing later for that signature turkey taste.

Now for the turkey. Take your knife and cut around the ends of the legs all the way to the bone. The goal here is to cut through the many tendons that run along the bone. Grab the tendons one by one with your pliers and run the knife carefully up under the skin along the tendons as far as you can. Be careful not to poke holes in the skin. Try to cut the tendons loose as far in as you can and pull them out. This is a seriously laborious task and it’ll take you at least 30 minutes for both legs. It seems unneccesary and frustrating, but the end result is well worth it: Tender, non-chewy drumsticks.

Making the Stuffing

When all the tendons are out (I think there are at lest 6 or 8 per leg – two big ones and a pile of small ones) it’s time to make the stuffing. Take the beef and pork and mix it together (pork has less taste btw so if you want to have more of a turkey flavour add more pork and less beef. For the last few years we’ve gone 100% pork). Cut out a quarter of the meat and fill the space with whole oats, then add the meat in again. Mix in eggs (4 for a small turkey, 6 for a large one), some cream, a splash of port wine and a mix of spices. This is a bit of a trial and error type thing so feel free to experiment. Finally add in the mush from the turkey innards and mix the stuffing until it has a homogenous consistency.

Stuffing and stitching the turkey

Grab your block of butter and cut out a bunch of flat pieces. With the bird breast up run your hands up under the skin of the turkey to separate it from the meat and place some nice large chunks of butter on each of the breasts, on each of the thighs and some other meaty places. This will make the meat more moist. With the butter in place stuff the turkey full of the stuffing. Fill the cavity from behind and then add in from the neck as well. If there is any stuffing left wrap it in aluminum foil so it won’t burn and place it next to the turkey in the oven.

When the turkey is properly stuffed, grab your big needle and twine and stitch it shut. You want to close all the holes completely so do your best Frankenstein stitching here. The goal is to make the turkey leak-proof to keep all the moisture inside. Finally tie the legs together and run some twine around the whole bird to tie the wings tight to the body. Basicaly you want to turn the bird into a big football so it cooks better.

Final touches

Take your turkey football and place it in a tray. Place the leftover stuffing next to it along with the neck wrapped in aluminum foil (if you want to eat it) and fill the rest of the tray with quartered onions, sliced potatoes, carrots and other stuff.

Preheat the oven to 440 degrees Fahrenheit. Right before you put the turkey in the oven, crack open your bottle of cheap sweet white wine and pour the entire thing over the turkey so that the liquid stays in the pan. Cover the bird with aluminum foil so it doesn’t burn and put it in the oven on the bottom rack. The sugars in the wine will plug all the pores in the skin of the bird and keep more of the moisture inside. As a bonus the wine also gives the turkey a nice taste and smell.

When the liquid around the turkey starts to bubble, lower the temperature to 350 degrees and let it cook for a long time (about 1 hour per kilo, so probably 5 – 6 hours depending on the size).

For the last half hour take the aluminum foil cover off to brown the turkey. If you have a cooking thermometer stick it in the thickest part of the breast to make sure it’s cooked properly. If not, leave it in longer.

When the turkey is done, take it out, remove the twine and cut it up. If it was cooked properly the thighs should pretty much fall off when you touch them. Because the stuffing is made of pork I safe it by nuking it a bit in the microwave just to be sure.

Serve the turkey with the potatoes, onions and other goodies from the pan as well as gravy, jam and whatever else you want.

Lykke til!

Categories
24 Days of WordPress Tutorials

Day 22: Custom Fonts with FontSquirrel.com

In Custom Fonts with Google Fonts I explained how to add custom fonts from the Google Font Directory to your WordPress site. The problem with the Google Font Directory is that it only has a limited (but growing) supply of fonts and that some of them are not very nice to look at when they get rendered in live text. Fortunately there are alternatives. My favourite is Font Squirrel. Font Squirrel offers up a huge list of free fonts ready for embedding and many of them are very nice and functional. That said I recommend using some of the more extreme fonts for headings only – setting your entire text content to a handwriting font or something really big and blocky has the potential of driving your readers away.

Adding a font from Font Squirrel requires a bit more work than adding a Google Font Directory font, but don’t fret – it’s not hard at all and the end result is well worth the effort.

1. Find a font on FontSquirrel.com

An obvious question when embedding fonts in your site is “Why can’t I just add any font I want?” The answer is a bit complicated, but here is the gist of it: Fonts are intelectual property, just like a photo, a video or a piece of writing. As such the creator can decide who can and cannot use a font and what the font can be used for. Generally speaking most fonts can be used on the web in one form or another, but there are a lot of famous and popular fonts that can not be embedded in a site using @font-face. To find out what fonts can and cannot be embedded, and whether you need to pay a licencing fee to use a font you have to read the licencing agreement for that particular font. And trust me, those things are legal behemoths and no fun to read.

A better option is to safeguard yourself by only using free open-source fonts. This is where Font Squirrel comes in. When you go to the site, click on the button that says #font-face Kits. From here you can browse all the fonts Font Squirrel have found, compiled and prepared for @font-face embedding, and better yet Font Squirrel has already dug through the licences of these fonts to make sure they allow embedding. In other words someone else did all the hard work and all you have to do is use the font (even so you should read the licence just to be sure). And the best part? The fonts are (mostly) free!

So, you go to FontSquirrel.com, click on @font-face Kits and find a font you like. Now comes the fun part.

2. Get the @font-face kit


Font Squirrel
Once you’ve found a font you like, say New Athena Unicode for example, click on it and you are taken to the page for that font. From here you can look at specimens, test drive the font with your own text (good idea if your language includes weird characters like ß, æ, ø, Ã¥, or other linguistic anomalies), look at a charecter map, read the licence for that font and get the all important @font-face kit. If you are happy with your selection click the @font-face kit button. From here you can select a subset (default is usually fine) and pick what font formats to include. I recommend including all the formats to sensure that as many browsers as possible will be able to read your fonts. With all your settings done click Download @font-face Kit and you get a zipped file to be saved on your computer.

3. Using the @font-face Kit

To use the @font-face kit you need to do three things: Add the font files and font stylesheet to your site (I recommend putting them in a dedicated folder under your theme), call the custom stylesheet from your header.php file and add the call to the font from your theme stylesheet. Here is that process step by step:

First go to your theme folder and create a new folder. For future reference I recommend naming the folder the name of the font so in my case that is NewAthenaUnicode. Extract all the content from the zipped archive and place it in the new folder. Now you should have a folder with 3 or more files including demo.html, a text document with licencing information, one or more font files (ttf, eot, svg, woff) and a stylesheet named stylesheet.css.

Next you need to call the stylesheet from your header.php file. Like we did with the Google fonts open your header file and find the call to your normal stylesheet:

Create a new line directly above and insert a link to your custom font stylesheet. To make this foolproof use the WordPress template tag to define the stylesheet address and then just add the folder you created along with stylesheet.css to it. If you are working with a standard theme it will look something like this:

If you are working with a child-theme you have to use a different template tag and the code will look something like this:

Save the header.php file and upload it along with the custom font directory to your web host and visiting browsers will now call the new fonts and have them ready to be used.

The last step is to add your new custom font to styles in your theme stylesheet so they are displayed. To find the correct name for your font first open the stylesheet.css file found in your custom font directory and look at the @font-face style definition. For New Athena Unicode Regular it looks like this:


@font-face {
	font-family: 'NewAthenaUnicodeRegular';
	src: url('new_athena_unicode-webfont.eot');
	src: local('☺'), url('new_athena_unicode-webfont.woff') format('woff'), url('new_athena_unicode-webfont.ttf') format('truetype'), url('new_athena_unicode-webfont.svg#webfontTqKRtuvj') format('svg');
	font-weight: normal;
	font-style: normal;
}

What you are looking for here is the font-family name which in this case is NewAthenaUnicodeRegular. Now all I have to do is put this name into my font family calls throughout my theme stylesheet and the new font will be used. As an example to add the new font to the paragraphs of this site the p style would look like this:


p {
	font-family: 'NewAthenaUnicodeRegular', Times New Roman, Times, serif;
	font-size: 0.8em;
	color: #333333;
	margin-bottom: 10px;
	text-align: justify;
	line-height: 1.5em;
}

As you can see using custom fonts from Font Squirrel in your WordPress site is relatively easy and can give your site a whole new look. Yes, it is more cumbersome than using the Google Font Directory, but not by much, and in return you have far more fonts to choose from.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

Categories
24 Days of WordPress Tutorials

Day 21: Add Custom WordPress 3 Background Functionality to Your Theme

If you’ve been playing around with the twentyten theme at all you will have noticed that under Appearance you have a new function called Background. From here you can set a background colour or upload a photo to be used as the background, either tiled or by itself. On this 21st Day of WordPress – which happens to be Winter Solstice – I’ll show you how to add this very cool function to other WordPress themes.

Adding the Custom Background function to your theme

The custom background function was introduced in version 3 of WordPress and consists of a single function call placed in functions.php of your theme. It looks like this:


add_custom_background();

Add it to your functions.php file, save the file, upload it to your server and you now have the custom background function. Simple as that.

What does the custom background function do?

When in use the custom background function adds some new style code for the body tag at the very end of the head tag of your pages. This is strictly speaking a bit of a dirty way of achieving the goal, but it works and it is in compliance with web standards. The style code is dynamically created based on how you configure the Background settings and will looks something like this:


<style type="text/css">
body { background-color: #4547de; background-image: url('http://yoursite.com/wp-content/uploads/2010/12/backgroundimage.jpg'); background-repeat: repeat-y; background-position: top left; background-attachment: scroll; }


Because it’s called at the very end of the head of the page it overrides any background image or colour styling in your regular stylesheet.

The background image function is very useful for theme developers because it gives the end user the ability to muck around with the background as much as they want without having to deal with all that pesky CSS code stuff. Nuff said.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

Categories
24 Days of WordPress Tutorials

Day 20: Using JavaScript Libraries in WordPress the Right Way

If you have worked with WordPress either as a stite owner or a developer you have likely run into situations where you add a plugin or a new theme only to find that some functions that previously work no longer work. This is in almost every case caused by JavaScript conflicts where the same library (or more often different versions of the same library) is called numerous times to do different jobs. The end result is a JavaScript conflict where nothing works.

What most poeple, WordPress developers included, don’t know is that WordPress comes pre-packaged with a whole whack of JavaScript libraries ready to be called and utilized. On this 20th Day of WordPress I’ll show you an example of how to utilize one of these libraries through the use of the wp_enqueue_script() function.

Hiding and revealing the comment section with jQuery

For a project I worked on earlier this year there was a feature request for the comments section to be hidden by default and then revealed only when the visitor clicked a link. The designer wanted the comments to be revealed using a smooth sliding reveal function. jQuery has just such a function, called .slideToggle().
We can write a simple function that will achieve our goal. It looks like this:


jQuery(document).ready(function($){
	$(".commentsKicker a").click(function(){
		$("#comments").slideToggle('slow');
		return false;
	});
});

The script looks for container with the class .commentsKicker that has a link in it and when that link is clicked, the contents of the div with the ID #comments will be revealed slowly using the .slideToggle() function.

To implement this script two things need to happen. First the jQuery librar has to be innitialized and then the function above needs to be set up. Common practice is to do this by placing a new jQuery library in the theme file, usually under a folder called “js”, calling it from the header.php or footer.php file and copying the function above straight into the same file. This is both clunky and completely unneccesary. A better option is to save the above script as a .js file in your theme and use wp_encue_script() to not only load the custom function but also associate it with the jQuery library WordPress carries with it.

Setting it all up with wp_encue_script()

Before we do anything else, let’s make sure we’re on the same page. In my single.php file I’ve placed a span with the class .commentsKicker and within it is the regular comments_popup_link() function. The comments section (to be hidden and then revealed) is wrapped in the regular #comments div (this is a WordPress theme default). Finally I’ve created a sub-folder in my theme directory called JS with a file called “reveal.js” that contains the JavaScript function displayed above exactly as it is displayed above.
With all that settled we can create a new function in functions.php that will at once call our custom JavaScript file, associate it with the stock jQuery library and enque both in our theme so they become active. Let’s do it step-by-step:
In functions.php of your theme create a new function:


function revealComments() {

}

Add an if statement to prevent the script from loading on admin pages:


function revealComments() {
	if (!is_admin()) {
	}
}

Register our custom script by giving it a name, defining its location and its library dependency:


function revealComments() {
	if (!is_admin()) {
		
		wp_register_script(
			'reveal',
			get_bloginfo('template_directory') . '/js/reveal.js',
			array('jquery') );

	}
}

Enque the new cusom script so WordPress can use it:


function revealComments() {
	if (!is_admin()) {
		
		wp_register_script(
			'reveal',
			get_bloginfo('template_directory') . '/js/reveal.js',
			array('jquery') );
		wp_enqueue_script('reveal');
	}
}

Finally, add an action that tells WordPress to initiate the new function upon first load:


function revealComments() {
	if (!is_admin()) {
		
		wp_register_script(
			'reveal',
			get_bloginfo('template_directory') . '/js/reveal.js',
			array('jquery') );
		wp_enqueue_script('reveal');
	}
}

add_action('init', 'revealComments');

With the new function and action in place the cutom JavaScript will automatically load and the fancy hide/reveal effect is added to the posts.

Further reading

The wp_enqueue_script() function is hugely effective and allows for a lot of advanced functionality. WordPress carries with it a whole slew of different JavaScript libraries and even if the library you want to use is not bundled into the application you can use wp_enqueue_script() to add other JavaScript libraries. The bottom line is if you want to use JavaScripts in your WordPress themes you should do it properly by way of wp_enqueue_script(). To get a full understanding of the function, its variables and many uses check out the WordPress Codex page.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

Categories
24 Days of WordPress Tutorials

Day 19: Creating a Blog Within a WordPress Site

One of the great advantages of working with WordPress is that it has a blogging platform built right in. Some would argue that this is because WordPress is a blogging platform but I disagree. WordPress is a content management system that in its past used to be a blogging platform. But that’s and argument that is a total waste of time. The only thing that really matters is this: You can use WordPress to build a site with multiple posts, categories and other content and still have a blog inside it. And on this 19th Day of WordPress I’ll show you how.

What do you mean “a blog inside it”?

Let me explain myself here so it’s clear what I’m talking about. Imagine you are building a site for an illustrator. The site has four static pages (front page, about page, CV, and contact) and she also has a series of posts stored under categories including portfolio, articles and tutorials, each with sub-categories. But in addition to these non-blog posts she wants a section on her site called “blog” where she can post all the stuff that doesn’t fit anywhere else.

To get all this to work we need to set up a new category called “Blog” with however many sub-categories she wants, create a page called “Blog” on which to display the blog index page and finally limit the posts displayed on the blog page to only posts listed under the Blog category or its children. So let’s get started.

Setting it up

Logged into WordPress create a new page called Blog. Don’t put any content in the page as it will be used as the blog index page.

With the new Blog page published go to Settings -> Reading, set Front page displays to A static page and select your home page (whatever it is) as your Front page and the Blog page as the Posts page (remember to hit Save Changes).
Changing the front page of a WordPress site

Displaying only posts from the Blog category

To get WordPress to only display posts from the Blog category on the blog index page you need to add a query to the index.php file. The query first checks if this is indeed the blog page (is_home) and then restricts the posts displayed only to those posts in the Blog category (using the slug “blog”) or its children:


If you want to use the category ID instead you can do so by changing the variable in the query like this (assuming the category ID in question is 3):


The query_posts() function has a lot of varialbes and there are tons of cool things you can do with it so I recommend checking out the WordPress Codex page for the function as a way to expand your coding horizons.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.