Category Archives: WordPress

Using JavascriptMVC in WordPress

I’m working on a project which is going to involve some pretty extensive JavaScript coding. From experience, I know that any moderately sized or larger coding project needs to be well planned out and organized. But JavaScript typically isn’t.

So I did a lot of researching, and I’ve found a framework that appears to be fairly industrial strength. By this I mean that it is fairly well documented, provides examples, and has internal support for testing and automatic documentation generation.

I’m talking about JavascriptMVC. It is a little intimidating at first, mainly because it does provide all the things listed above. But having done some quick prototyping in my environment (PHP, Zend, WordPress), it appears to fit nicely and provide just the MVC+Test+Doc environment that I need.

I’m going to be merging JMVC into my existing WordPress installation. It appears that I’ll need to deal with the jQuery.noconflict issue which I plan on doing by redefining “var $ = jQuery;”. I’ll then be embedding the JMVC steal.js code using my custom child template (in functions.php).

This is really exciting. I’ll post more as I go. If anyone else has tried this before, please leave me a comment.

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.

Feeding your WordPress posts to Facebook

The RSS supported built into WordPress makes it easy to write a post in one place and have it appear in other places like FaceBook and Twitter. FaceBook automatically generates multiple RSS feeds based on categories and/or tags, so you can get as fancy with this as you want. For example, you can create a tag “FaceBook” and then have only those posts tagged “FaceBook” appear on your FaceBook.

To enable your WordPress posts to appear in you FaceBook stream, simply configure Account -> Application Settings -> Notes and select “Import my blog” on facebook and point it to your WordPress blog URL. If you just list the blog URL you will get all posts. Alternatively you can use the URL to a specific category or tag.

To keep the size of the post fed to FaceBook reasonable, set your WordPress reading settings “For each article in a feed, show:” to “Summary”.

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.