Tag: webdesign

MistyLook Theme for a Charity blog

I got distracted again! The Development Dirctor for our Habitat affiliate was complaining about the stale content on the affiliate’s website. For some time I have been thinking about the appropriate format for a charity website. I have begun to believe that a blog style website is a natural fit for charity websites. The social networking advantage of blogs(e.g. comments, rss feeds) is probably a good tool at communicating with a diverse group of volunteers. Working off of this sketchy premise, I created a blog that I intend to offer to our affiliate.

Design Decisions

  1. My favorite blog software is WordPress.
  2. WordPress is generally available at most host providers and has lots of free themes to choose from.
  3. WordPress does not have licensing issues.
  4. I envision that most of the updates will be via posts. We need an easy method of posting with photos by non-Geeks. The ability to use multiple authors is a plus.
  5. We will need about six static pages(e.g. Volunteer, Donation, Family Selection, etc.). These will be updated quarterly to annually.

Implementation Decisions

The key for me was seeing the themes available at themes.wordpress.net. After browsing through a part of this immense collection I settled on MistyLook from the creators of WordPress Garden. It has a nice, clean, widget friendly, two column design with tabs across the top of the page for the static pages. Only the key pages are shown across the top. All of the static pages appear in the sidebar, too. I already have a widget template for Paypal donations. I don’t expect many PayPal donations but it will be easier and it requires almost no effort on our part to collect the money. The only drawback to the theme was that I had to tweak it a little to get it to work.
I added three WordPress plugins:

  1. Imagemanager to handle the photos. WordPress’s default features are pretty good but Imagemanager adds resizing and default sizes for thumbnails.
  2. Widgets plugin.
  3. FeedBurner plugin. RSS feeds are typically associated with a younger crowd. Since we have quite a few older volunteers who have just recently gotten comfortable with email, FeedBurner Email looks like a potential winner for us. Volunteers can get website updates via RSS feeds or Email.

So here is the fruits of my labor.

WordPress Hack: Rotating Banners

As you know I use WordPress as my blogging platform simply because I love PHP and the simplicity that comes with a beautiful syntax. This post shows you how to create a rotating banner for your WordPress blog.

Getting Your Banners Together

First of all this is just a dirty template hack that will not go away as you upgrade your WordPress distribution. The first step is to create a set of banners you want to rotate and name them sequentially. For example, mine are named vladville-bar1.jpg, vladville-bar2.jpg, vladville-bar3.jpg and so on. Here they are:

Vladville-bar1

Vladville-bar2

Vladville-bar3

Vladville-bar4

Look familiar? Great. Notice how only one number in the filename changes? Now upload all of these banners to the same directory, mine are in /images.

Hack The Template

The second step is to actually hack the template file. Because WordPress is PHP based you can embed PHP code anywhere in your template. Mine is in the header.php but you can use this trick anywhere you want to.

Remember how only the number was different? The only thing I did was instruct PHP to select a random number from a range and insert that number in HTML code. So here is the entire mastery:

<table background=”/images/vladville-bar<?php echo rand(1,23); ?>.jpg” width=”800″ height=”155″ border=”0″>

Thats the entire mastery right there. When the template is parsed by WordPress and PHP it will call a rand function which returns a random integer in the range between 1 and 23. I happen to have 23 images on the server so returning a random number between 1–23 will return a number of one of the images in that range. The <?php part tells the server to start interpreting the next block of text as code instead of just plain filler. The ?> stops it. The echo sends stuff back to be printed and 1,23 are parameters sent to the rand function. Every time the page is reloaded the rand() function should return a different random number between 1–23 giving my visitors a different random banner from my pool of 23. For example:

First time rand(1,23) executes it returns 5. As a result, you will see vladville-bar5.jpg

<table background=”/images/vladville-bar5.jpg” width=”800″ height=”155″ border=”0″>

Second time rand(1,23) executes it returns 17. As a result, you will see vladville-bar17.jpg

<table background=”/images/vladville-bar17.jpg” width=”800″ height=”155″ border=”0″>

Thats all there is to it but I figured I’d start slow and build up. Imagine the possibilities here, you can insert greetings based on the time of day, display random quotes, insult visitors by guessing their IQ with rand(5,30) and so on.

So get creative. Your blog does not have to be borg it should reflect your individuality. After all, its all yours.

Link to WordPress Hack: Rotating Banners

This is multi-purpose post. First I want to try this hack on my test WordPress blog. If I have time I want to try and configure a demo website to replace the current Habitat for Humanity affiliate website. The two most important characteristics that can lead to a successful HFH website is current news and photos. Using a blog can make the website easier to update and keep current. Rotating current photos on the front page makes the page more interesting for casual visitors but will require a little more computer knowlege.

My second objective is make this post using the GreatNews reader/Live Writer plugin. I have been using GreatNews for several weeks and I occasionally use w.bloggar via a GreatNews plugin to comment on other people’s posts. GreatNews supports several “Blog This” options including the plugin to w.bloggar. Today GreatNews released a plugin to make Live Writer a “Blog This” option. I was actually thinking about cloning the w.bloggar plugin to provide this functionality to Live Writer but someone beat me to it. Live Writer and w.bloggar are both nice front ends for blogs but Live Writer has a better user interface. For those who are unaware of these tools, they are the latest attempts to add a little extra word processing functionality to the process of creating new posts.

Since I prefer my websites to validate as xhtml, I run into occasional problems when I comment or include posts from other people. The html editors provided with most blogs are okay for new posts and most simple comment posts. I can look at the html code and fix the simple mistakes. When there are a lot of mistakes and you need a little extra help, Live Writer and w.bloggar can make editing the post easy and quick.

In looking at this post in Live Writer I have to admit I prefer this interface over the w.bloggar interface. It is not a hard decision. Wyswig is easier to use than raw html. It is nice that all of the links and images have the right addresses.