Jun 11
WordPress 2.8 upgrade woes
As you may have noticed the new version of WordPress – 2.8 – was released yesterday. And that started a cascade of people complaining their blogs were all of a sudden gone – replaced by a plain white page. I’ve been plugging at this all night and into today and I’ve found some nasty little bugs/inconsistencies that seem to be the main culprits in the woes of so many WordPress fans.
Problem: After Automatic Update the site turns white!
The main culprit is the automatic upgrade feature included with WordPress 2.7. For a lot of users (me included), the automatic upgrade does not fully update and/or replace the necessary core files and actually ends up putting them in the wrong place. As a result the update is not completed and the database is not updated either.
The result of this is that both the public pages of the blog as well as the admin areas are replaced by white blank pages. Not exactly what you want from a simple update, right?
Solution: Delete everything and do a manual install, then a manual database update
Unfortunately if after the auto update your blog is gone, you have to do a manual upgrade. And I mean a complete manual upgrade. I’ve done this with three separate blogs now and it’s painfully obvious that for whatever reason simply replacing files does not do the job. To get things up and running again you have to fully delete your entire WordPress install from the server and then upload a fresh new version of WordPress 2.8. And that’s not all. Even after uploading a fresh version of 2.8, your site will probably still be white. To solve this you have to manually update the database by going to http://www.yoursitename.com/wp-admin/upgrade.php. Only after this is done will you have access to the front and back end.
How to safely upgrade to WordPress 2.8
This is especially important for people with blogs hosted by 1and1.com
If you do not like the prospect of potentially spending several hours banging your head against your desk while your blog disappears and your inbox fills up with emails from people telling you your blog is gone I strongly urge you to do a complete manual upgrade if you want to go to 2.8 right now. Or better yet, just wait until whatever it is that is causing this mess is fixed. The good people behind WordPress have published a great and easy to understand guide on how to manually upgrade WordPress and I suggest you follow it to the letter (including all the backup stages – trust me, you don’t want all your work to disappear!)
I’m confident that the problems that have been reported will be ironed out by the developers in a matter of days, but until then I’m going to ignore the “Please Update Now!” warning at the top of my admin panel.
Mar 02
Anny gets shortlisted for the Best Job in the World proving the power of social media
In preparation for WordCamp Whistler 09 I threw together a website for my sister-in-law Anny Chih to support her application for the Best Job in the World. Today she found out her application is one of the 50 shortlisted from close to 35,000 videos submitted. Of course this is mostly due to the video Angela and I made for her but it also shows that a sound social media strategy will pay off in the long run.
When we made the website we had three main goals in mind:
- Strong search engine presence (a.k.a. SEO a.k.a. Search Engine Optimization)
- Striking appearance – no matter what people say, having a website that looks good increases the chances of people actually visiting and reading what’s on it
- Harness the power of social media
Search Engine Optimization is Snake Oil – Just use WordPress and you’re good to go!
The first point was a simple one. As I’ve said before and will repeat here, using WordPress as the base for your site pretty much guarantees good and relevant SEO right out of the box. And when coupled with the All-In-One SEO Pack plugin it is a veritable SEO powerhouse. The goal was to get the site to the top of Google searches for “best job in the world” and “vancouver” and that was achieved with minimal effort. I have to stress here that we did not do any SEO tricks or link pimping or anything along those lines: The site ranking is solely based on good coding and well written copy.
Design with the target audience in mind and people will flock to your site
The second point is always where people get stuck. And I’m no exception. But fortunately for me Anny had a very specific look in mind and with that and some of her sketches as a base it wasn’t all that hard to come up with an overall look. You can read more about the design process in this earlier post. What’s important to note here is that the entire site design was built around quick load times, semantic code and easy editability. It was built on the Typograph core and uses clean text for all its functions. I also spent a lot of time organizing the layout in such a way that it would be easy to understand and navigate for the visitors. At the end I was so happy with the overall design that I used the root of it to design my newest project StopLivingInThePast.com.
Twitter – when used correctly – can be a powerful tool
The third and final point was my first real experiment with social media. I added a Twitter box to my sidebar a while ago and it has generated both interest and a lot of followers but I never really sat down and tried to use Twitter actively to gather interest for anything (basically because I never had anything I wanted to gather interest for). With the creation of AnnyChih.com Anny and I discussed ways to build interest for her site and her application and Twitter seemed an obvious addition. So with her handle @AnnyChih she started Tweeting actively, at first by mooching off my followers and then quickly expanding to other IslandReefJob applicants and so on and so forth. And in a week or so without any deliberate campaign to build numbers she had gained a high number of followers that were actually interested in what she had to say.
In addition Anny went beyond Twitter to interact with other applicants on sites dedicated to the job search and was able to build quite a following there as well. The trick on both Twitter, in forums and in blog comments was to present a mix of funny commentary, helpful advice and information. And by providing more than just blatant self promotion and random noise she built a solid following over just a few weeks.
Just how solid didn’t really become apparent to us until the news broke earlier today that she had been shortlisted. In a matter of minutes she was getting Tweets and comments of support from all over the place and TV and radio stations were calling her for interviews. In short order she was featured on CBCs The National, Virgin Radio’s The Rush, ABC Brisbane’s All-Day Breakfast and the Afternoon Buzz on Talk 1410AM largely because the Twitter community was able to get the word out.
So what should you get out of this long self-congratulating piece? That WordPress is a great place to start if you want your site to not only work but to get noticed, that by spending some time considering your target audience and designing your sites around them you can build a larger audience and that social media, when used correctly, can greatly enhance your brand and your reach.
Now go vote!
Finally I’d just like to extend my heartfelt congratulations to Anny and ask instruct everyone to vote now and vote often (you can vote once per day from as many email addresses as you can get a hold of).
Jan 30
New WordPress-based Site: AnnyChih.com
Two weekends ago my sister-in-law Anny Chih asked for some help sprucing up her WordPress blog. She wanted to apply for The Best Job in the World – the Tourism Queensland online video contest where you post a 1 minute video application to become the island caretaker of the beautiful Hamilton Island in Australia – and use the blog to showcase her talents and provide information about both herself and the islands.
Her blog was running the default theme but she wanted something that reflected the contest and also her own sunny disposition. She sketched up a rough draft in PhotoShop and let me get to work on it. I set aside one day to finish the entire redesign (totally crazy) and here is the result.
WordPress as CMS
Off the top you’ll notice I switched the front page to a static one to showcase the video and some info about the contest and Anny herself. The blog portion of the site has been moved to the back end and is accessible from the main menu and also from the Recent Posts box on the bottom right hand side.
Custom Field Boxes
At the bottom of the front page there are three boxes containing from left to right info on the contest, Anny’s 4 most recent tweets and the titles of the 5 most recent posts. The three fields are populated using custom fields from within the WordPress admin area so that they can easily be changed later. In the case of the Twitter box it is populated using the technique outlined in my Create a Twitter Box in Your Sidebar tutorial.
I used this site as an example during WordCamp Whislter last weekend to demonstrate how you can use custom fields for advanced layouts. The entire talk with code examples will be posted over the weekend.
Subtle Graphic Effects
I usually spend a lot of time making sure the sites I design have compelling and interesting graphics. In the case of Design is Philosophy I took the principle to the extreme but on AnnyChih.com I focused more on subtlety. For example, the background graphic with the bubbles is separated from the header image so that if you change the size of the browser window you’ll see the two images moving independently of each other. It’s a very subtle effect but it means that even people using smaller screens see the circle graphic Anny came up with.
Within the pages and posts I’ve also added graphic elements like the glowing underlines using CSS. It’s a simple trick that makes the content look more refined than simple solid lines.
Threaded Comments
One of the major upgrades in WordPress 2.7 was the inclusion of threaded comments. By activating and styling this fucntionality the visitors to the site now have the ability to carry on conversations without being confused by the comment order. Again it’s a subtle effect that greatly enhances the experience for the visitor.
Jan 12
Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?
I am speaking at WordCamp Whistler on January 24th on the topic of using WordPress to create, design and manage “non-blog” web sites – in other words using WordPress as a CMS. If you follow this blog you know that I’ve been working with this concept for a long time and that in almost every case I use WordPress as a base for my client sites. There are many reasons for this, foremost that from a client perspective it is more user friendly than any of the other open-source CMSes out there. Add to that the almost infinite extensibility through plug-ins and other hacks and how easy it is to create custom themes and layouts and you have what in my view is the best backend solution for small and medium scale web projects.
In my original pitch I asked for a one hour session. But unbeknownst to me Tris Hussey (who is looking for your input on favourite plug-ins etc), another WordPress as CMS expert, had pitched almost the exact same topic to the event. Rather than pick sides and give one of us the full hour, it was decided that we would each get a 30 minute session so we both get our foot in and the attendees can get two different perspectives. Which is a great idea: This is by no means an exact science and while I’m sure Tris and my approaches compliment each other they will be vastly different. And that “double perspective” will give the listeners a far broader understanding of the subject matter than if one of us were to do the session by ourselves.
So what should I talk about?
With the reduced time comes the inevitable question: What should I talk about? Those who know me know that I will take up whatever time I am given and I’ll always have plenty more to say. In the case of WordPress as CMS I could probably hold a week long seminar and still only cover the basics of what you can do. In my original pitch I outlined a series of topics that form the foundation of this technique. These include basic WordPress anatomy, theme and CSS hacks, taxonomy, custom templates, custom themes and a discussion of why WordPress is the ideal platform for “regular” web sites.
I could talk at length on all of these topics but I think the attendees would be better served with a broader approach that covers the basics of several of them for further study later on.
What do you want to learn?
Rather than set my talk in stone right now, I’d like to hear from the people who are actually going to the event and let them shape the session. So what do you want me to talk about? What do you think you would have the most use of? WordPress anatomy? Custom fields as layout tools? Theme hacks? Taxonomy? The choice is yours. Here is a preliminary break down of the session and then I’ll let you, the listener, decide the final result:
Working Title: WordPress as CMS – Building the Non-Blog WordPress Site of the Future
Suggested topics covered:
WordPress Anatomy
What does WordPress really do? How does the stuff you create in the back-end end up on the pages and posts? What is the difference between posts, pages, indexes and all the other options? And how are these things connected?
The Basic Hack: Custom Templates
Want more control of the appearance of your pages? Custom templates give you complete control with minimum effort. Learn some basic theme hacks and understand the template structure.
Custom Fields Can Be Used for Anything!
One of the most powerfull and underused functions in WordPress is the Custom Fields. By understanding how they work you can use them as a layout tool to create menus, boxes and other elements that will make your site stand out.
Make the WordPress Taxonomy Work for You
The WordPress taxonomy (hierarchial structure, i.e. categories, sub categories etc) was built for blogging. But if you reframe your thinking of what blogging really is you’ll see that the same taxonomy combined with page parenting gives you a solid base for non-blog taxonomy and dynamic page creation.
That’s what I have. Now it’s up to you! Drop your thoughts in the comments below and together we’ll create a session customized to the people who are there to learn.
Dec 19
Using Conditional Custom Fields for Advanced Layouts
An often overlooked function in the WordPress arsenal is Custom Fields. Overlooked because to most it makes no sense: What do you use a custom field for? And how do you use it? The answers to these questions differ depending on how the WordPress theme has been set up: Custom fields can be used for everything from passing information to plug-ins like Next Gen Gallery to feeding custom areas in the template with information. But it goes way beyond that. Custom Fields can also be used to create advanced layouts and design variances that can be triggered on a page by page or post by post basis. And this tehcnique can be edhanced further by adding conditions to the scripts so that the changes only appear when the field is actually activated.
Understanding custom fields
You can add custom fields to any WordPress post or page through the custom fields interface found right underneath the main text area. The custom field contains two elements; a name and a value. These are pretty self explanatory: When the template asks the server for the name, the value is returned. But this also means that unless the template actually asks for the field by name, nothing is returned. An example to show how this works in real life:
A web site for an art gallery requires each artist page to have a series of sub-pages containing an artists statement, bio, CV and image gallery. Although adding an unordered list directly to the text body of the page would work, it would require the addition of style elements and tags – something WordPress doesn’t like very much. Not to mention it’s also cumbersome and messy. A better solution is to place all the style tags in the template and then just feed the menu in the form of a standard unordered list from a custom field, in this case with the name “artistMenu”. Then all that’s left is to get the template to call for the info in the custom field like this:
<div id="artistMenu"> <?php echo get_post_meta($post->ID, "artistMenu", true); ?> </div>
When the template is opened, the content of the custom field named “artistMenu” is placed as a string inside the artistMenu div. (To understand exactly how the php code works you can read about the get_post_meta template tag in the WordPress Codex.)
Making the custom fields conditional
The problem with the example above is that even if there is no custom field defined, the div is still placed in the page taking up space. Not a big problem when it’s just a horizontal menu but if you use a custom field to populate something larger, like an image gallery or a text box, it will look weird if the box is left empty. One way of avoiding this is to make two separate templates, one with the custom field code and one without, but that can quickly become complicated. And the whole idea here is to make things simpler, not more complicated. A better way is to make the code and the call for the custom field conditional on whether the custom field has been defined in the first place. This can be done with a simple if statement:
<?php if((get_post_meta($post->ID, "artistMenu", true))) { ?> <div id="artistMenu"> <?php echo get_post_meta($post->ID, "artistMenu", true); ?> </div> <?php } ?>
Using conditional custom fields as design elements
Now for the really cool stuff: Because we can make custom fields conditional, and because we can populate them with pretty much anything, we can use them not only to add images or text but also to add all new design and layout elements. In the site I built for Sablok & Salbok Notaries Public I used this technique to create a header element that only appears if the custom field is populated by an image or text. The actual appearance of the element is controlled by standard CSS. You can see this layout element as the blue horizontal area in the image and on the front page of the site.
In this particular example the custom field can be populated by an image. Rather than forcing the user to input all the image code in the custom field manually I added some extra code in the template that gathers the width and height of the image and creates the proper element code. As a result all the user has to do is provide the URL for the image. There is also an or condition in the if statement so that the custom field code in the template is triggered either when an image field or a text field is defined:
<?php if((get_post_meta($post->ID, "image", true)) || (get_post_meta($post->ID, "text", true))) { ?> <div id="subheader"> <?php if(get_post_meta($post->ID, "image", true)) { $size = getimagesize(get_post_meta($post->ID, "image", true)); ?> <img src="<?php echo get_post_meta($post->ID, "image", true); ?>" alt="" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" /> <?php } ?> <?php if(get_post_meta($post->ID, "text", true)) {?> <?php echo get_post_meta($post->ID, "text", true); ?> <?php } ?> </div> <!-- END SUBHEADER --> <?php } ?>
