Building a Custom WordPress for iPhone App
Some time ago I launched the beta version of the new La Vie En Ville website and I recently finished working on the custom WordPress template. The website was made with HTML5 and CSS3 and uses @font-face for styling the titles. The font used on the website is League Gothic by The League of Moveable Type.
Custom iPhone App
To post pictures to La Vie En Ville I had to build a custom version of WordPress for iPhone. The problem with the original app is that is didn’t allow me to post pictures the way I wanted. The app posts thumbnails with a link wrapped around the image. I wanted to show the pictures without the link and with a size of 640 × 480 pixels.
I started with downloading the source code for the app at iphone.wordpress.org. Just like WordPress, their iPhone app is open source so this makes it very easy to build the app yourself.
Browsing through the code, I found out that I only had to change some lines of code in the file BlogDataManager.m to make the app work the way I wanted. Let’s take a look at the changes I made.
The first thing I changed is the return statement of the - (NSString *)imageTagForPath:(NSString *)path andURL:(NSString *)urlStr method. The original method has some classes I don’t need and I wanted the width and height to be a fixed value.
Original Code
return [NSString stringWithFormat:@"<img src=\"%@\"
alt=\"\" width=\"%d\" height=\"%d\"
class=\"alignnone size-full wp-image-364\" />",
urlStr, (int)width, (int)height];
Changed Code
return [NSString stringWithFormat:@"<img src=\"%@\"
alt=\"\" width=\"640\" height=\"480\" />", urlStr];
Next one is in the - (BOOL)appendImagesToPostDescription:(id)aPost method. This one wraps a link around the <img> tag. I didn’t want the link for the blog so I removed it.
Original Code
desc = [desc stringByAppendingString:[NSString
stringWithFormat:@"<a href=\"%@\">%@</a>",
urlStr, imgTag]];
Changed Code
desc = [desc stringByAppendingString:[NSString
stringWithFormat:@"%@", imgTag]];
The last thing I changed is in the same method. This piece of code adds a link and two <br /> tags I didn’t need.
Original Code
desc = [desc stringByAppendingString:[NSString
stringWithFormat:@"<br /><br /><a href=\"%@\">%@</a>",
urlStr, imgTag]];
Changed Code
desc = [desc stringByAppendingString:[NSString
stringWithFormat:@"%@", imgTag]];
Custom Interface
I also made some changes to the interface. Here are some screenshots of the icon and the Default.png that shows up when the application launches.
La Vie En Ville on Twitter
At first I posted the pictures for La Vie En Ville on the @vormplus twitter account. From now on you can also start following @lavieenville on Twitter. This is the place where new pictures will be mentioned.
Commenting is closed for this article.
1 Opinions posted so far. Now go post your own. To the comment form!
From:Ted
Date: 1 January 2010, 00:20
This is great! Thank you so much for posting your experience adapting the WP for Iphone app. I was trying to decide today if it would make sense to adapt the app to feature some of the stuff I’ve been doing with my WordPress/BuddyPress stuff (e.g. incorporating activity streams). You’ve totally inspired me.
Top · Permanent link to this comment