We’re back with day 16 of the Build-A-Blog workshop. Now that our website looks almost ready to go, we need to add a few pages in order to better serve our audience. The first one that we want to configure is the “contact us” page… making it easier for readers to get in touch!

Pages v. Posts

In WordPress, the general “lingo” can be a bit confusing to a new user. While all of your actual content is going to be posted day after day by “adding a new post,” there is another very different option available called “adding a new page.” The difference is that posts are a lot more dynamic in nature, whereas pages are dedicated static locations on your website where you can send visitors. Essentially, think of pages as posts that are more visible and permanent on your blog. This is a convenient feature to you, because it allows us to make dedicated links to things like a terms of service, contact, advertise or about page. Today, we are focusing on this “contact us” page.

Go ahead and log into your admin panel, then navigate to “Pages” -> “Add New”

How to Design an Effective Contact Page

The contact page will serve as an important medium between you, the blogger, and the reader. Blogging is meant to be informal, so having a way for your readers to communicate back and forth with you is important. One thing to note is that you need not have your own email listed on the contact page, as you can use a script to mask the sending address and generate a contact form.

I would recommend having a few things on your contact page, and you can view the Net Fool’s contact page as a sample. Mine is actually very very old (haven’t updated it ever, all the way back since version one!)… but it still works like a charm. A few things to consider: instant messaging screennames, email addresses, name, nickname, social media IDs, live assistance and/or a contact form.

Want to install a contact form on your website? Simply download a WordPress plugin and upload it into the /wp-content/plugins/ folder through the use of your FTP client. Then, activate it through your WordPress admin section and add your form to your new page. My favoties are: CForms II, Contact Form 7 and SimpleModal.

Need help? Let me know! Get those Contact pages up and running!
-Jimvesting

We are at the midpoint of our 30 day blog building workshop, and there is still time to start along with us and get eligible to win one of 5 Business Hosting plans donated to us by HostGator. Find out details on the official contest page!

Now that our blogs are all set up and customized, it is time to start on developing the content-side of things over at our new websites. Remember, your design will get you that initial reputation (VERY important), but your content is actually the “bread and butter” of any successful blog. If you can’t write in a way that keeps readers coming back for more… good luck!

What is a Category Anyway?

When you run a blog through WordPress (or a similar script), you will need to assign each one of your blog posts into a category so that the system can more effectively manage the content that you put out. The key to categories is creating an easier way for your users to find your content, other than looking through the endless archives that your blog may have amassed.

More importantly, many blog themes nowadays take all of your categories and put them in the header (like Jimvesting.com)! This is something that is more normally done with your “pages” (which we will discuss later), but if your blog has its categories listed on the top you want to make sure that you have the best category names possible.

The default category for any post is “uncategorized,” so we clearly need to find a better way to sort our material. You will see at Jimvesting, I have already gone ahead and set up five categories: Announcements, Internet Marketing, Making Money Online, Stock Market and Working From Home. There is no limit to the number you can set up, so feel free to keep it flexible!

How to Create and Test Your Categories

Categories couldn’t be easier to set up with the new version of WordPress. There are essentially two ways to do this in your control panel of WordPress (your “/wp-admin/”). The first way is to go into the full category editor under the “Posts” tab on the left side of your screen. Simply click on “Categories” and add in the name of a new category that you would like. Don’t worry about the “category slug,” as WordPress will handle this for you if you aren’t sure exactly what it is used for (search engine optimization purposes). A newer and more intuitive way to create categories is right on your “Add New” post panel. On the right side of any screen when you are writing a new post… you can find a list of categories to label your post under. You will see in the new WordPress version 2.7 that there is an additional “+ Add New Category” feature that will allow you to edit your settings on the fly.

Want to test your categories? They will ONLY show up if there is a post that is categorized under the category name. Otherwise, you will not see the category on the frontpage of your blog. I repeat: you need to categorize your posts, or the category names will not appear! Make sure that you do this with one of your posts jsut to see how your frontpage will look once you fill up your content section before you continue… it will save you a lot of time on the end.

Win a Free 1-Month Ad Block at Jimvesting!
Simply comment in the area below with a list of three potential categories for a blog that specializes in “Gardening Tools,” and you will have a chance to win! I’ll pick one of the eligible entries (people that pick sensible categories), and announce the results on Day 17 of the competition.

-Jimvesting

We’ve completely revamped our websites, and have now customized the logo, header, sidebar and footer… that should do it! If there happens to be anything fishy about your blog’s post section, make sure to tweak the “page.php” file in your WordPress admin section.

BUT WAIT…
NOT SO FAST!

One of the biggest peeves of any web designer/coder is the way that different web browsers work. Naturally, the fact that there are many different browsers to chose from will lead us to believe that each is different from the other. The first thing that I recommend that you do before releasing your website is to make sure that your blog not only looks good to you, but that all your viewers have the same experience. We want to ensure that if a user is loading up your blog on Mozilla Firefox, it looks just as stellar to a reader using Internet Explorer or Safari.

Browsers to test compatibility:
While there are actually hundreds of browsers available (and yes, different versions of browsers produce different results), we should really only test those that come up the most. After all, we can’t have it perfect for everyone (sad, isn’t it?)… so we need to focus on our biggest streams of foot traffic. I recommend that you test on the following:

• Mozilla Firefox 2.x and 3.x
• Internet Explorer 6.x, 7.x and 8.x
• Safari 3.x and 4.x

Sure I am leaving out a few names… but they are really not as important as these top three names and their most often used versions. The problem here? We cannot test multiple versions of these browsers on our computers because once you install a new version, it usually overwrites the old!

How to Test Your Blog on Different Browsers

1. The number one way to see how your website will appear on multiple screens is by using a website called BrowserShots.org. This is really my “swiss army knife” of compatability testing, and I use it on any website that I create to ensure that things look good across the board.

2. Download the Microsoft Internet Explorer compatibility tester (for looking at old versions of IE) that is called “SuperPreview“

3. Install multiple versions of multiple browsers. This is a bit messy, but can actually be done if you have the time and the elbow-grease to figure it out. For me, I’d rather stick with the first two options.

4. Use a paid service called “Browser Cam” can help you to test what your website displays on a variety of browsers, but it comes at a hefty price. Think you can stomach it? Then by all means check it out.

Make sure that your coding works, and look up solutions if anything looks a bit fuzzy (more than likely a problem in the coding). I’m not by any means an expert… so you may have to do some fiddling if it doesn’t look right. Once that is done, congratulations… your new theme is complete!

-Jimvesting

It’s lucky number 13 for the Net Fool’s Build-A-Blog Workshop, and it’s high time we work out the kinks of our footer section, eh? We’ve started to make headway on our customizations, but we need that awesome ending to leave our readers happy when they reach the end of content. Before we get started, lets take a look at what some of our participants are doing!

• Antonio has made some great progress with an already awesome looking blog called “My Info ITN“
• Johnny put our words of advice to work on his home repair blog that he named “Home Repair Helper“
• Devon, after a bit of domain name headache, got online with “Gamer Blurb“

This is just a random sampling of some of the great work we have seen so far from the Build-A-Blog Workshop. Keep up the good work and you might be featured next time we recap our participants!

Two Types of Footer Sections

I want to help you through your footer section by breaking things down into two categories. In my mind, you can have one of two types of footers: one with room for extras (like Jimvesting), and one with a simple row for links (like Jimvesting). With each, come a few advantages and disadvantages… so read carefully.

Footers with Room to Share
Is your footer more like the one at Jimvesting.com, then you need to maximize the amount of use that you get out of it! Because the viewers that scroll down to the bottom of your website are going to be, on average, more interested in your content than the usual passerby… we have to make sure that we get in one last monetization or use for our guests. Here are a few suggestions of features you should add to your footer:

• Advertisements (affiliate links work great!)
• Alexa.com widget (to boost your rating)
• Flickr Images
• Top Commentors/Users
• Site Statistics

Footers with Just a Row (or Two!) to Spare
Perhaps you own a website with a minimalist footer that you just can’t do much with? No problems here, other than leaving some room to get some link love back to the original theme designer (we don’t want to void any copyrights!)… you should always give your users a way to link back to your homepage. Additionally, you can use the space available to link to any partner websites that you might have (especially if the blog is part of a network of websites). Finally, because you have room to spare, you can always slide in an affiliate link or two and hope for the best.

Spend 30 minutes today revamping your footer section to make sure that it fits with the rest of the blog. Don’t forget to include your tracking script that we discussed on day 9 of the workshop, as well as anything else that you want to load at the end. Remember, the footer is the last thing that will load, so it is the best place to put a time-intensive script because the rest of the website will be totally visable to your viewer before they waste their time waiting!

-Jimvesting

Now that we have our logo and header in place, let’s start working on the layout of our website. We’ll start with the sidebar today, and work our way down.

Whether you have a 2 or a 3 column website, there should always be room for things like widgets and advertisements along the sides of your theme. At theNetFool.com, I have a simple 2-column design with a right-hand sidebar. The same holds true at Jimvesting.com, so I am going off of the same design thesis.

Two Parts of the Sidebar

When I think of the sidebar of my blogs, I normally consider two different areas, the first “block,” and everything else. Essentially, when you have some kind of sidebar (or bars if you are using a 3-column design ), we are going to put more emphasis on the top-fold regions. What is this “top fold?” When you load up a website, what can you see without scrolling? Everything that you can see is known as “top of the fold,” with all the remaining material being below the fold. Naturally, your most valuable real estate is “above the fold.” So this is where we want to put the things we need highlighted.

Sample Sidebar Placements:

Above-the-Fold Sidebar: Expensive advertisement blocks, newsletter subscriptions, RSS feed subscriptions, social media icons, highly-relevant material
Below-the-Fold Sidebar: Top commentators, editor’s pick articles, donation buttons, inexpensive advertisements, calendars, basic widgets

Modifying the Sidebar

Now that we have a basic idea of what we want to go where, it is important to know where to look in order to change things up to our liking. This will vary by blog theme, but should normally be in one of two places within your WordPress Administrator’s panel. If your theme is fully-widgetized, than you need only control and modify your settings in the “Widgets” section underneath the “Appearance” tab on your admin panel. Otherwise, though your blog more than likely still has widgets active, you will need to check out the hard coding by going to “Editor” in the “Appearance” section, finding your theme and entering into the “sidebar.php” file for modifications.

Normally I would suggest changing the top of your sidebar to include some kind of RSS-subscription area, or a block where you can subscribe to your newsletter. Basically, the idea of having a fast-access to getting your readers to lock into your blog is the way to go. Don’t like this? Then by all means put an advertising block or two in this region and capitalize on the high-clickthrough placement.

-Jimvesting