From Sampler to Sower

Building a WordPress Website

Late last week I told you about a new series we will be launching at Water’s Edge in about three weeks called “My Brand New Life.” Now here’s the first post showing the work that’s going on behind the scenes to get this thing off the ground. In this post I’ll walk you through what we’ve been doing to get our website launched for this series.

But before I go any farther I should probably point out that this is primarily about designing the architecture for the site. We’re still developing the artwork, and that will come later. What’s more, for those of you well versed in WordPress, this will proabably be pedantic. But I tried to avoid omitting any of the steps involved for any newcomers to a self-hosted wordpress blog.

To begin with, we registered the domain name mybrandnewlife.org. Of the available permutations of that phrase and others like it, it seemed most memorable. We registered the domain with ipowerweb.com the same company that provides hosting services for our youth group website. There are other cheaper options, but it was a convenience pick more than anything as the one time price difference wasn’t significant enough for me to choose to shop elsewhere.

If I was starting from scratch, however, I’d probably set the site up with bluehost.com. They tend to be a little cheaper than Ipower, and as an hosting provider officially recommended by WordPress, installing the most recent version of WordPress couldn’t be easier. This blog, for example, is hosted by bluehost.com.

[In the interest of full disclosure: If you sign up with Blue Host through the above link, I may recieve a commission. However, that's not why I recommend Blue Host - I recommend them because I use them and prefer them to other hosting services I have tried.]

Having registered the new domain, we used Ipower’s domain management controls to point the domain at our youth group’s website (watersedgeyouth.com) until the new site is up and running at full speed.

Then we installed WordPress to a new directory in our Ipower account: www.watersedgeyouth.com/mybrandnewlife. WordPress.org offers what is, in my opinion, the world’s best blogging software. And to further sweeten the deal, it’s open source, which means free. WordPress.com will allow you to set up a free blog which they host, but WordPress.org gives you the software to host your own blog with the wordpress interface on your own site.

Why did we choose to go with blogging software?

• Building the website with blogging software will make keeping the site up to date easier. Now, designing the code and writing the content are two different tasks. And the site can be updated by people with little HTML or CSS knowledge. And yes, we could have done the same thing ourselves with php and mysql, but why reinvent the wheel if WordPress does it better for free?
• Building the website with blogging software will increase interactivity. Remember our goal here is not to further isolate students by sucking them into their computers, but rather building a digital commons where our students can meet up and interact, even when they’re not together in real life. WordPress already has commenting features built in to facilitate discussions as opposed to merely broadcasting our content.
• With WordPress, a lot of the code ninjery has already been done. The fact is, there are few things new under the Sun. And no matter how creative we get with this series, chances are someone else has already done something like it. Maybe they haven’t done all the things we want to do in a single internet campaign, but the various elements will have likely been tried before. And if someone tried it, there’s also a good chance they made a widget for it. Widgets are code extensions for WordPress blogs. Many can be found at WordPress.org and even more can be found simply by googling whatever brilliant idea you’re looking to incorporate in your blog.

Click on image for larger version

Once we installed WordPress, the next step was to install a theme to change the look of the site. Like widgets, WordPress.org has more themes than you can shake a memory stick at and countless more are a mere Google click away. We chose to install Zeke 1.0 + Widgets by Michael Pollock of solostream.com. We chose Zeke, not so much for the visual elements (we’ll end up changing most of those anyway) but rather for it’s layout (and it’s familiarity – it’s the same one we tweaked for watersedgeyouth.com.) You can see a sample of the unedited Zeke theme installed in our blank blog on the right.

Some of Zeke’s strong points include it’s three column layout (let’s us stick widgets in a small middle sidebar and put video promos in a wider sidebar) and the featured post function. This is one of my favorite features of Zeke. If you create a category of posts called “Featured” it will place the most recent featured post from that category in a wider text box, just under the nav bar. It’s like a sticky post on steroids. Brilliant!

To install our WordPress theme, we downloaded the theme from solostream.com, unzipped it and ftp’ed the whole thing into our wp-content/themes directory. (One could save a little bandwith by ftp’ing the zipped file to the server and unzipping it there, but I like having a copy of the theme on my hard drive for reference.) Once the transfer is complete, log into WordPress and select the “Themes” option under the “Appearance” menu. Select the theme you want to use from the “Available Themes” and when the preview opens, select “Activate” in the top right corner.

Now that our blog is installedand our theme activated, it’s time to start tweaking.

First thing we changed was the background image. The theme of the series is “My Brand New Life” and our graphics will feature the motif of a sunrise from outer space, hopefully communicating the idea of the dawning of a new day in our lives.

The image for our background was purchased from istockphoto.com my favorite place to purchase photos. If I’m blogging and there’s a shot I want that I can’t take myself, I frequently search for quality creative commons images. However, I often find the difference in quality between a professional image from istockphoto and the free images available elsewhere is worth the price. And a professional quality image is a must have when it comes to a website like this.

Of course, the image I purchased didn’t have the aspect ratio I wanted. So I took it into my image editing software (I use Corel Photo-Paint X3), changed the size, and made sure the starfield and lens flare extended to the full width if the new image.

Once the image had been fixed to work as our background, I ftp’ed it to the wp-content/themes/Zeke10/images/ directory on our website.

To change the background in our theme, I logged into WordPress on our new website, and under the “Appearance” menu selected “Editor.” This, by default, opens the style.css file for your active theme in a text editor. In the attributes for the “body” tag we changed the url attribute to reflect the filename for our new background.

Second, we developed a color scheme for the new website. I like to use Adobe’s online color scheme tool, kuler. If you do any graphic design at all, I’d thoroughly recommend kuler. With it you can select a base color and then generate color schemes according to the major rules (analogous, monochromatic, triad, etc.) Or, as we did for this site, you can upload an image (in this case our background image) and then generate a number of color schemes based on that image. What’s more, with a free Adobe ID, you can save any color schemes you create.

Next, we changed the background for our post area. Because we didn’t want the default theme background to appear behind our header, we took the background information out of the “#wrap” style ID in the stylesheet. We designed a new background to go behind our posts that matched the color scheme we generated in kuler. We then uploaded the new background image to the wp-content/themes/Zeke10/images/ directory and added a background attribute to the “contentleft” ID in the stylesheet, using the URL function to point to the new post background. Finally, because we want to be able to see the background through our posts, we added an opacity attribute to the ID tag as well.

If you’d like to see the CSS style sheet for the mybrandnewlife.org website, it can be found here.

Viola! Now we have a theme capable of three columns, with feature post capabilities. Now to test it out. WordPress comes with a first post, and we added a second Lorem Ipsum post just to check out how the background would work as the content area grew.

We added the “Recent Posts” and “Recent Comments” Widgets to Sidebar 1 (the middle column) and a custom text widget to sidebar 2 (far right) to test out the sidebars. In the text widget, we embedded a youtube video because eventually we will use that side bar for promotional videos highlighting each week’s theme. To get it to fit nicely we had to tweak the height and width attribites of the embed tag.

NOTE: When changing the height and width of an embedded youtube video, there are two sets of height and width attributes and both must be changed. And obviously, you need to use numbers in keeping with the aspect ratio of your source video. In our case the original embed size was 425×344. (Divide 344 by 425 and you get a big long string of decimal places. We wanted a video with a width of about 250, so we take the result of 344/425 and multiply it by 250. I played around with starting numbers close to 250 until I came up with a result that was as close as possible to a whole number. The result was a video that is now embedded at 248 x 200).

And now we have a skeleton, waiting to be fleshed out. Next up will be designing a banner to count down to the launch of our new series, but that will be fodder for a future post.