Child Themes

KOA iPhone App is finished

I’ve completed the KOA iPhone app. I will be finishing testing and submit to the App Store by the end of the week.

Leander KOA iPhone App

Now I am going to create a matching website that will provide the same functionality for those poor souls that do not own an iPhone. From my experience, about 90% of all KOA campers have computers. We currently hand out a local attraction pamphlet which lists local restaurants, stores, and services. But the space on the pamphlet is limited. Providing a website/iPhone app allows providing dynamic searching and sorting, allowing a larger list to be provided.

One really cool thing about the iPhone for this sort of application is the built-in location services (GPS). Not only can I provide a list of items sorted alphabetically or by location, but I can sort the list dynamically based on the users current location, not just the distance from the KOA.

WordPress 3.0 TwentyTen Child Theme Header Image

The new Twenty Ten theme for WordPress 3.0 provides support for uploading custom header images. Uploaded images are cropped to 940 x 198 pixels. So your options are:

  1. Ensure that your header image size is 940 x 198 pixels.
  2. Modify the Twenty Ten theme to change this size
  3. Create a child theme which overrides the size

I’m going to show you how to do option 3: change the Twenty Ten theme header image size. “Creating a child theme is the way of the future” (I think that Yoda said that, but I’m not sure).

The Twenty Ten header image size is defined in the functions.php function twentyten_setup(). The WordPress team has thoughtfully provided filters to simplify overriding the default height and width:

// The height and width of your custom header.
// You can hook into the theme's own filters to 
// change these.
// Add a filter to twentyten_header_image_width
// and twentyten_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', 
   apply_filters( 'twentyten_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', 
   apply_filters( 'twentyten_header_image_height', 198 ) );

You can define filters named “twentyten_header_image_width” and “twentyten_header_image_height” which will override the default values of 940 and/or 198.

To create filters which override these values, create a functions.php file in your child theme and add the following lines:

add_filter('twentyten_header_image_height','my_header_height');
add_filter('twentyten_header_image_width','my_header_width');
function my_header_height($size){
   return 300;
}
function my_header_width($size){
   return 900;
}

In this case I am ignoring the default sizes that are passed into the filter and simply setting them to the values that I want (900×300).
Be sure to change the prefix ‘my_’ to something more appropriate and unique to your child theme to avoid possible naming conflicts.

That’s all it takes! Use the Appearance -> Header control panel to upload a new header image now. The control panel should now display the size that you set with these filters, and the new size reflected on the website.

Now having said that, I subsequently decided that I want different sizes and layouts for the front and other pages, so I ultimately modified the header.php file. Don’t judge me.

WordPress 3.0 RC3

WordPress 3.0 RC3 was released yesterday.

Once of the very cool new features being added to WordPress 3.0 is support for child themes. This capability will allow a web developer to create a new theme by overriding the settings of an existing (or parent) theme.

Combined with the new Twenty Ten default theme, this is going to make the creation of WordPress themes easier and less error-prone. The new Twenty Ten theme contains a lot of comments explaining how to derive a new theme from it.

This blog is using a new theme created this way. I’ll explain how each of the changes is made as I go along.

Note to Safari users: the new develop menu in 5.0 allows you to use Safari for web development in a manner similar to that previously requiring Firefox.  Check it out.