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.

Your Peek Behind the Curtain

Okay, this is a new one for me.  I don’t know how, or even if, this will work, but I’m going to give it a shot.

You, dear reader, are hereby offered a All-Access Backstage Pass to our youth ministry’s creative process.  We’re bringing you backstage, and inviting you to check out what’s going on behind the curtain.

Of course, that means you’re getting a glimpse of a work in progress and not the finished product.  As such, this post, and others like it will probably be rambling and scatterbrained, big on ideas, short -at least at first- on actual implementation.

As you know if you are following my weekly updates, our youth ministry is currently in a teaching series called Mythbusters.  It’s set to conclude on Tuesday, February 17th, following our final three lessons focused on Faith, Hope and Love.  That means we’re just under one month out on our next series – high time to get working on what’s next.

Next on the teaching schedule is a Lenten series, culminating, like most Lenten seasons, with an Easter celebration.  Our teaching will be guided by the Lectionary’s epistle readings.

My goal, every Lent, is to very intentionally challenge students to develop the daily disciplines which will ground their faith in an ever deepening relationship with the God whose name they claim.  That’s not to say that during Epiphany I attempt to help they develop a superficial version of Christianity that only affects their Sunday mornings and Tuesday nights – it’s just that Lent provides an intentional time every year to teach them to focus on the presence of God in every part of their life.

And so, I find myself wondering what we will do this year to help move us toward this goal.

I’m taking as our theme verse for this series 2 Corinthians 5:17: “Therefore, if anyone is in Christ, he is a new creation; the old has gone, the new has come!”

One of the key mental images that will inspire this series will the the experience of the disciples on Easter morning.  Imagine going to bed Saturday night in despair.  You’ve cried so long you’re not sure there are any tears left.  And the only emotion greater than your sorrow over Jesus’ death is your fear for your own life.  Rumor has it the authorities are even now looking everywhere they can to find you and your friends, so they can finish what they started on Friday.

Now imagine waking up on Sunday morning, hearing the rumors.  All day you listen as the reports come in.  First the women.  Then Peter and John.  Finally the disciples who had snuck off to go fishing and the two guys who headed home to Emmaus.  Finally, Jesus himself shows up.

Sometime between going to bed Saturday night, and going to bed Sunday night (if anyone was even able to sleep) everything changed.

Another shaping image will be the sacrament of baptism, which our church will be celebrating on Easter morning.  Being buried with Christ one moment, being raised to new life the next.  One of the images that may even make it into our teaching is the flood scene from O Brother, Where Art Thou.  After teasing Pete and Delmar for being so naive to think that their baptism meant anything, in the final scene Everett prays for deliverance and a flood sweeps through the valley changing everything.

Sometime between going under the waters of baptism, and being pulled out, everything changes.

Or at least it should.

A lot of times we fail to live transformed lives.  But what would happen if you woke up one morning and found everything had changed?  If as you came up out of the water, your world was transformed?

Our theme is transformation, a relationship with God which is more than just on Sundays and Tuesdays, but influences every aspect of our life, until the only way to really explain it is to say “the old has gone, the new has come.

Toward that  end we’ve decided our series title will be My Brand New Life.

However, the question remains how do we make this something more than just a teaching series on Tuesday nights?  How do we integrate this teaching into our student’s everyday lives? How do we create a community in which such transformation can really take place?  And how do we encourage them to share what they’re learning with their friends?

Here are the ideas we’re trying to flesh out to accomplish this move from the sanctuary into our students’ everyday lives:

• A Website – We have a youth ministry website, and I obviously have my own blog.  But we will be launching a website specifically for this series at www.mybrandnewlife.org.  (Right now that domain points to our ministry’s website as we develop the site.)  Hosted in a sub-directory of our ministry’s website, this was astonishingly cheap, and judging by the responses from my brainstorming team, it will definitely get some attention and create some excitement.  The goal will eventually be that the website becomes a place to coordinate our efforts to move onto the fourth screen of our student’s lives.  (Thanks, Adam for the inspiration.)   We’re brainstorming ways of using the website to display creativity, fuel discussions, guide devotions, share prayer requests and create an increased sense of community.
• SMS/MMS integration. We’re still fleshing out all the ways this will work, but we’re interested in leveraging SMS/MMS technology (essentially txt, pix and flix messages) to enhance the sense of community, to inspire creativity and to equip students to share what they are experiencing with their friends.  We understand that SMS can sometimes have the effect of isolating students from the real world around them.  (See that kid in the corner texting his friends, oblivious to what’s going on around him?)  That’s not our goal.  Instead we want to use SMS and MMS to give them such exciting content that rather than getting lost in their cell phones they are inspired to hand their cell phone to a friend and say “Hey look at this!”  Or better yet, “Help me with this!”  We want to bring what they’re learning and experiencing in our youth ministry into their everyday relationships so they share it with their friends and engage with it all week long.
• Traditional Disciplines. Obviously, web, SMS and MMS are but tools used to get  students’ attention and to encourage creativity and community. The goal is the formation of a Christian community that is dedicated to the spiritual disciplines of prayer and meditation on God’s Word.

Obviously this is going to require fun, creativity and new ways of engaging students.  The goal is not to suck them into a website, but rather to use technology to move our youth ministry out of our sanctuary and into their everyday relationships with their friends.

How can you get involved?

First, you can “ride along” with our creative team.  We’re so early in this development that we have no artwork, no real website, nothing.  We’re all ideas and mental images at this point.  The fleshing out is yet to come.  But we invite you to follow us as we move from concept to implementation.  You get to see the lame ideas that get left on the cutting room floor, the great ideas that wither on the vine because we can’t figure out how to make them work, and the mediocre ideas that God decides to use for his glory.

• Watch www.watersedgeyouth.com/mybrandnewlife to see the website come together.  From blank template to final product launch, see the development from start to finish.  Right now, there are no links on our website to this directory.  But with this direct link you’ve got the all access pass to get you through the back door.
• Subscribe to this blog to see the thought process that lies behind the developments.
• Follow me on twitter to listen to me mumble to myself and cry out to friends for help as I try to flesh out the great ideas our creative team comes up with.

Second, you can “chime in”.  Whether it’s replying to a query twittered to the world or offering feedback in the comments on this blog, please, feel free to throw in your two cents.  After all, that’s why I’m blogging all this.  Not to say “Look at us and see what we’re doing.” If that was the goal I’d wait for the final product before I started broadcasting it to the world.  But rather I’m hoping to ask “Hey, what ideas do you have?” and “What do you think about this one?”

So, join us on this journey from idea to implementation.  And feel free to steal any of the ideas or resources along the way if they’d be helpful to you and your ministry. (After all, I’m hoping you’ll share some of your ideas with us.)