The most effective way to easily build an optimized site is with WordPress. Yes, WordPress is a blogging platform, but it can also be used as a content management system (CMS) to power your entire Web site.

Use these resources to get a good feel for how WordPress operates:

• WordPress

• Empowered by WordPress

• The book, WordPress for Dummies

And, for an explanation of the basic elements of a WordPress site, check out “The Basic Anatomy of a WordPress site” post on Empowered by Wordpress.

Planning your Site:

Make an ambitious list of what you would like to have on your site. Don’t hold back on an idea you may have for your site based on an assumption that it will be too difficult or too expensive to implement.

The plugins available for WordPress are at:

• http://wordpress.org/extend/plugins/

This site will give you ideas on the types of things you can add to your site. You will discover that you can easily utilize plugins to accomplish seemingly difficult functions.

I find these are pretty typical functions most entrepreneurs, small businesses, authors, and publishers are looking for:

• Image Galleries

• Streaming Video

• E-commerce

• Amazon Widgets

• Blogs/Podcasts/Vidcasts

• Random Quote Generators

• Newsletters

• Mailing list sign-up

• RSS feeds from other sources

• Events listings

• Forms for submissions

• Social Media Newsrooms

Choosing a Theme:

• Go to http://themes.wordpress.net/

Make certain you only search for themes that are “widget ready.”

• You can also purchase themes from TemplateMonster.com. Again, make certain any theme you choose is “widgetized.”

• Do not choose a theme before you plan your site, however. You want your theme to accommodate your content, not vice versa.

• Choose at least twelve themes that you like. You will find that you will not be able to use many themes that you choose for various reasons.

• Try and look only at the overall look and feel of a theme, with the idea that the colors, fonts, images, and most anything else can be customized to fit your needs.

Installing WordPress and Beyond:

• Use the following documentation to help with all of these steps:

  • http://codex.wordpress.org/Getting_Started_with_WordPress

  • http://codex.wordpress.org/WordPress_Lessons

• Installing WordPress

  • Choose a host. WordPress works best on a WordPress-friendly host. I use WestHost. They are affordable, reliable, and have fantastic tech support. Their personal starter plan for $6.95 a month is all you will likely need.

  • For a list of other WordPress-friendly hosts, go to WordPress.org.
  • Carefully read the installation guide on WordPress.org. WordPress is installed differently when you use it as a CMS than if you only use it to blog.

• Next Steps

  • Installing your theme
  • Customizing your theme
  • Deciding which plugins you need based on your initial plan
  • Installing and setting up your plugins (Always read the readme.txt file!)
  • Setting up your sidebars
  • Building your pages
  • Posting blog entries

On Open Source Etiquette:

The developers have put a lot of time into these projects. Please show them respect by:

• Never deleting the credits from the footer of a theme, or from a plugin
• Making donations to the open source developers whose plugins you are using

When using the support forums:

• Always search the forums thoroughly for an answer to your question before posting.
• Give back if you can: check the recent posts for questions from newcomers you might be able to answer.

Here are some sites powered by WordPress to help inspire you:

AlaskanArtandPhoto.com

AccoladesPublicRelations.com

DaltonPublishing.com

EmpoweredbyWordPress.com

LesMcGehee.com

OwenEgertonNewsroom.com

JoeOConnellNewsroom.com

GaryKentFilmmaker.com

RicWilliams.com

KelleyBurrus.com

OwenEgerton.com

RobertStikmanz.com

AmyWink.com

And, if you’re looking for even more information, rest assured that help is readily available to you. WordPress and the people who contribute to it are perfect examples of the Social Web in action. On WordPress.org you will find a plethora of help, not only from their documentation, but also from the community that has sprung from this demonstrated spirit of interactivity, sharing, and collaboration.

And don’t forget to have fun!

Since the last post, we have built several more newsrooms. Two for authors Owen Egerton and Joe O’Connell; one for improv guru and author, Les McGehee; and another for Accolades Public Relations.

As Christine so kindly pointed out, I did not finish the entry I promised about adding content boxes. So here goes…

First of all, let’s use Owen’s newsroom as a model, so go here:

What we are going to do is create scrollable content boxes for specific categories. So, look at Owen’s newsroom and notice that there are 4 content boxes in the main body, Media Coverage, News Releases, Book Reviews, and Events, and 2 on the left sidebar, About the Author and Multimedia Gallery. So, each of the posts within each of the boxes is tagged with its respective category. For example, every post that is put in the “Media” category, automatically shows up in the content box “Media Coverage” and nowhere else. Likewise, every post in the category “Multimedia” will appear in the “Multimedia Gallery” box in the sidebar.

First of all, you will need to create styles for your boxes. Here are what mine look like for the main (center) area:

#content
{
position:relative;
display: block;
margin: 0 215px 20px 215px;
padding: 10px;
padding-top: 10px;
text-align: left;
background: #FFF;
}

#content1
{
position:relative;
overflow : auto;
height : 350px;
width : 95%;
padding : 5px;
border : 1px solid #c0c0c0;
margin-bottom : 2px;
}

#content2
{
overflow : auto;
height : 250px;
width : 95%;
padding : 5px;
border : 1px solid #c0c0c0;
margin-bottom : 2px;
}

Where the content div is the main content area, and the content1 and content2 divs are the boxes themselves. What is most important to note about these is “overflow:auto;” - that is what allows the content to scroll.

Now, here is how we create the boxes:

In your main template index file:

Put this line of code within your main container, or at least before you call any of your boxes into existence:
<?php rewind_posts(); ?>

Now, you are going to call The Loop as many times as you have content boxes, here is the first of Owen’s:

<h1 class="category">Media Coverage</h1>
<div id="content">
<div id="content1">
<?php if (have_posts()) : ?>

<?php $my_query = new WP_Query('category_name=Media');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>

…(the rest of your usual code here)…

<?php endif; ?>
</div>
</div>

Then, the next one:

<h1 class="category">News Releases</h1>
<div id="content">
<div id="content1">
<?php if (have_posts()) : ?>

<?php $my_query = new WP_Query('category_name=News');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>

…(the rest of your usual code here)…

<?php endif; ?>
</div>
</div>

And so forth…

The main thing to note here is how the code is filtering out only categories with specific names, so you can change those names all you want - just make a note of what they are.

Now, the sidebars are a bit different. In our example, here is the style for the multimedia box:

#mediasideblock {
overflow : auto;
height : 800px;
width : 95%;
padding : 5px;
border : 1px solid #c0c0c0;
font-size : 11px;
margin-bottom : 2px;
}

So, within your sidebar code (between your ul tags), you would place something like this:

<?php rewind_posts(); ?>

<li>
<h2>Multimedia Gallery</h2>
<div id="mediasideblock">

<?php if ($posts) : foreach ($posts as $post) : start_wp();?>
<?php if (in_category(10)) { ?>
<div class="left_sidebar">
<?php echo $post->post_excerpt ?> <?php the_content(); ?>
</div>
<?php } ?>
<?php endforeach; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?></div>
<li/>

Where you would use the respective category number and your own styles.

One other thing I should note, is that you want to go to Options/Reading and increase “Show at Most” to a large number, like 200, since you want all of your posts to show.

I hope this is helpful. Please let me know if I need to clarify more. And please send me links to the newsrooms and other “empowered” sites you are building out there - I would love to feature them!

Have fun, and stay empowered!

D

While building Kelley’s site, she directed me to SHIFT Communication’s Social Media Newsroom (SMNR) template, saying “Hey, wouldn’t it be great if we had one of these?”

Of course, I agreed. Not only did I see the potential benefits of such a site to my present clients, as well as to my own publishing company and authors, but I could foresee the tremendous contribution Todd Defren’s template will inevitably make to the Web 2.0/social media movement.

So I poured over SHIFT’s SMNR presentation and dove in…

The biggest challenge for me was not (necessarily) getting all of the elements on the site, rather, doing it in a way that would make it easy for the end-user to maintain once it was set up. Because, as most of you know, it is my intention to ultimately “empower” people to that end. Therefore, much of the pre-thought for the site was in figuring out how a user would add their latest press release link, media coverage entry, multimedia elements, updated team information, etc. There is still much streamlining to do in regards to that, but a firm enough foundation is in place, so that training an end-user should be pretty painless.

The first thing I did was find a few WordPress themes that I thought would work well as a base for the site. Todd’s choice of Mollio was a good one, but not for the softer look I wanted Kelley’s to have. My final candidates were 3-column themes that did not use images or a lot of color. It makes sense to me that these SMNRs should not be bogged down with anything other than what the media will find useful to them, so a good, clean, image-free theme seemed the best choice. I did, however, want to be sure to incorporate Kelley’s colors and logo into the look of the newsroom, so that it would still be somewhat seamless from her main site. I eventually chose GPS Fluid.

This theme came with two “widgetized” sidebars, but I chose to only use the right sidebar for widgets, and customize the left sidebar the way Todd did - with scrollable content boxes for the team information and multimedia gallery. I will go into more detail on how to create those types of content boxes using categories later (the same concept applies to the content boxes in the body area as well).

I used the following widgets/plugins to aid in the creation of the newsroom: Category Cloud Widget, IM Online, My Technorati Tag Cloud (this one is not on the site yet, but will be soon), Share This, Simple WordPress Contact Form. I also got a lot of help, as usual, from the WordPress forums.

Once the newsroom was mostly functional, I had Kelley create her purpose-built del.icio.us page, co.mments account, claim the blog in Technorati, and decide on some content to populate the sections.

One way her newsroom will differ from others is that (since she is a publicist) her media coverage, news release, and multimedia sections will also include her client’s coverage. So you will see that we populated the site with her most recent project - the book How Best to Avoid Dying by Owen Egerton. This may be something we re-think later (by adding content boxes); but for now (at least for her smaller clients) this should work well. She will likely encourage her larger clients to incorporate their own social media newsrooms.

I have a lot more to contribute to, and say about, the development of this newsroom; but for now, I just want to get it out there for people to poke around on. I would really appreciate any feedback or bug reports. It is by no means finished; but enough, I hope, to spark some conversation.

Here is the direct link: http://www.kelleyburrus.com/newsroom, and a link to Kelly’s site (http://www.kelleyburrus.com/) that will bring you there as well.

Thanks for stopping by! And, thank you, Todd, for a great contribution!

Kelley’s site has come leaps and bounds from where I left off last; but I don’t want us to get ahead of ourselves. So I want to explain how I got from the before to the after in the last post.

Here is a list of the main changes to the original theme (Sheep Theme VI 1.0)at the stage you see in the previous post.

Changed the colors
Replaced the header image
Changed the navigation image
Replaced the post image (the butterfly)

Changing colors in a theme:

I wish I could tell you that there was a place to go in all WordPress themes to change the colors of your backgrounds, fonts, and other elements of a theme, but I cannot. I can give you a general idea, however, of where to look for the codes to change. I will walk you through changing the colors on Kelley’s as an example.

First of all, go to the admin panel of WordPress. Read this WordPress documentation if you have no idea what the admin panel is. Go to Presentation/Theme Editor. There you will see the most common files associated with a WordPress theme. I will not overwhelm you with a definition of each of them, only the ones we will be changing as we go. For detailed documentation visit WordPress.org.

The colors we want to change are: the background color, the color of the menu items, and some of the font colors. These can all be changed in the Stylesheet, so click on the “Stylesheet” file on the right. This should open the file so you can make changes.

Caveat: Please save all of your theme files before you make any changes - just in case. And read this WordPress documentation.

Here is the first bit of Kelley’s Stylesheet:

body {
	background-color: #72a3aa;
	margin-top: -5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	text-align: center;	
}

Notice in the first few lines, the definition of background-color? Well, all we need to do is change it - that will change the background color of the entire site. But, what, you say, if I have no idea what that funky number means?

Don’t fear - here is a very cool site that will help you determine the hex value of a colo: Color Schemer. This site will not only help you find a hex value of a color you may want to use, but will also display an entire “color scheme” that you can use as a palette for your site. This is remarkably helpful for those of us who are color challenged…

So, if you enter the “72a3aa” in the Color Schemer, you will see Kelley’s pretty green we replaced the background with in the Sheep theme. And we can replace it with any other color we choose.

Further down the Stylesheet, we see this code:

#navigation ul li a {
	display: block;
	font-weight:bold;
	color:#FFF;
	text-decoration: none;
	background:#7d9b55;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	font-family: "Trebuchet MS";
	font-size: 1em;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;

}

#navigation ul li a:hover {
	color:#7d9b55;
	background:#FFF;
}

This code defines the “style” of the menu. Without getting too technical, this says that there is an unordered list (ul) of items (li) that make up the navigation system. There are definitions for when these items are links waiting to be clicked ( ul li a), and when the user “hovers” over the menu items ( ul li a:hover). So, you could have a different color for when the user passes the mouse over the item.

For this theme, we wanted the menu items Kelley’s green, with a “hover” color of white - so the “background” color (background:#7d9b55;) is green for when the menu sits idle, and white (background:#FFF;) when an item is hovered over. This a good example, too, of using hex “shortcuts” - notice some of these use 6 digits (FFFFFF) and others 3 (FFF) - don’t get confused, they are the same thing - it is good practice, however, to be consistent and always use 6.

Now for font colors. Notice in the code above, in (ul li a) the line “color:#FFF;” This is the color of the font (white) when the menu background is green. Then, in (ul li a:hover), the line “color:#7d9b55;” defines the color as green, when the background is white (when hovered over). This is an example of changing font colors, but we need to change quite a few of these, so let’s move on.

We want to change the font colors for the title of a post, for the date, for the links to categories and comments, for the links within a post, and for the links within the footer.

Most of the time, these styles (or classes) are self-explanatory like the navigation “class” we changed above - but other times we may need to go to the source to see which class is being used to define the text style. In order to find the class that defines the color in the post-title and others, we will go to the file called “Main Index Template” - this is the file that determines how your blog entries will look. Here is a snippet of that file from Kelley’s theme:

<div id="container">
	<div id="content">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <!-- If the post is in the category we want to exclude, we simply pass to the next post. -->
                <?php if (in_category('10')) continue; ?>
		<?php the_date('','<h2>','</h2>'); ?>
	
		<div class="post" id="post-<?php the_ID(); ?>">
			<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
			<div class="meta"><?php _e(">"); ?> <?php the_category(',') ?> &#8212; <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>
	
			<div class="storycontent">
				<?php the_content(__('(more...)')); ?>
			</div>
	
			<div class="feedback">
		            <?php wp_link_pages(); ?>
				<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>		            
			</div>

			<div class="divider"></div>

		</div>

Please, don’t be intimidated by all of this code! All we are looking for are the “classes” used to determine the color of the fonts we want to change. If we look at the code, we see that “class=storytitle” is used to “style” the title of the post, “class=meta” used for links to the categories, and “class feedback” to style the links to the comments. Now we know what classes to look for in the Stylesheet.

Back to the Stylesheet, we easily find these styles, and change the font colors they define to the nice orange of Kelley’s theme. The footer styles are usually labeled accordingly, so we would look for at class called footer, and change whatever colors we needed to. The same for any fonts we might want to change in the “sidebar” area (i.e. look for a series of classes in the stylesheet called “sidebar”)

Another way to do all of this, is to determine the hex value of the color you want to replace in the existing theme (in our case the bright blue used in the title and links in the sheep theme), and replace every instance of it in the Stylesheet with the hex value of the color you want to use (the orange in our case). I use this method quite often, actually - it saves me having to find all of the different classes that utilize that color.

We will talk about changing out the images in the next post. In the meantime, if you want to know more about Cascading Style Sheets (CSS), please visit the excellent tutorial provided by the World Wide Web Consortium.

Here is the front and back of her business card, which has many, rich design elements:

Firstly, we pulled her green, blue, and orange into the theme, and replaced the black with a rich, chocolate brown. Then, we added her logo, and the “energy” symbol she uses on the back of her card as the main design elements. These elements, along with her tag lines, make up the main header of the site, as well as a custom icon that will precede each post title.

For the large navigation image (to replace the sheep), Kelley thought she wanted something “fresh and clean” like green grass; but then I turned her on to istockphoto.com.

Oops, I forgot to warn her of how addicting that site can be. I have found myself completely re-designing a site based on an image I “just had to use” from there. So be warned. Once at istock, Kelley realized she needed something more relevant to who she was as a professional, and opted, instead, on the magazine image you see below.

There is still much work to be done, but here is the site with the main custom design elements in place:

Before:

After:

Now, we move on to building pages, customizing the sidebar, and incorporating any additional functionality using widgets and plugins…

Yes, this could have easily been step two, but I figure having a theme picked out, and a vision of what your site will be at the end, will be good for you to have through this more technical portion of the tutorial.

Kelley’s site is set up on Westhost, so this lesson will reflect that. I want to make it clear, however, that there are many other options for hosting your WordPress site - I choose Westhost because they have proven reliable to me over many years.

The purpose of this post is to help you gain FTP access (so you can upload files to your host) and to get your Westhost site ready for a WordPress installation. I will then direct you to WordPress.org for the actual installation instructions, since they do a smashing job of explaining things.

First things first: You need FTP access.

You will need this even if someone else installs WordPress for you, or you won’t be able to upload widgets or plugins.

FTP stands for File Transfer Protocol, and it acts as a “bridge” between your computer and your host’s computer to upload and download files. This used to be sort of complicated, but there are a number of very straightforward solutions to FTP nowadays.

Here is what I suggest:

1. Install the Web browser Firefox if you have not already.
2. Install the Firefox plugin, fireftp.
3. In Firefox, go to Tools, and you will see a link to fireftp.
4. In fireftp, click “Manage Accounts”
5. Account Name: any name you want
6. Host: yourdomainname.com
7. *Login: the FTP Username your host has provided you for access to your account
8. *Password: the password your host has provided you for access to your account

* This information will be in the email Westhost sent entitled “IMPORTANT! Hosting Account Information…” Your FTP Username will be username@yourdomain.com if you purchased the personal starter plan that I recommended.

So, if I had a Westhost Personal Starter Plan for www.deltina.com, this is how I would set this up:

Account Name: Deltina
Host: deltina.com
Login: deltina@deltina.com
Password: ********

9. Now, click on “Connect.” What you will see are the files on your computer to the left, and the files on your host’s computer (the files that make up your Web site) on the right.

10. On the right side, double click www, then double click on the name of your site. This will bring you to your main directory. You should see a couple files called index.html and poweredby.png. If WordPress is already installed, you will also see WordPress related files and directories that we will discuss later. Please note that this step is specific ONLY to a Westhost hosted site, your main (or “root”) directory may be someplace different with a different host.

Next, ready your site for the WordPress Installation.

There are a few requirements that must be met in order for WordPress to work properly on your site:

1. You need to install MySQL.
2. You need to install PHP.
3. You need to install phpMyAdmin

But DON’T PANIC, none of these tasks are difficult if you are using Westhost or another user-friendly host.

To accomplish these steps, go to your Westhost site manager.

Instructions for getting there are in the email you received from them about your account. To access your site manager, go to www.yourdomainname.com/manager and use the username and password they provided. Westhost has excellent documentation on how to install all of it’s site applications, including the ones listed above.

Finally, you are at a point where you can go to WordPress.org and follow their detailed installation instructions.

And do not fear, they are very straightforward - you can do it!

Next step: Customizing Kelley’s theme…

A WordPress theme is a template of sorts that contains design elements and other code that determines the look and feel of your WordPress site. For a much more detailed explanation of WordPress themes, go to the WordPress Codex. My purpose, here, is to empower you, not to bog you down with a lot of technical information.

Before choosing a theme, keep in mind that we can customize all of the colors, and change out any of the images - we can also resize or eliminate images, and rearrange or remove any of the elements, like categories, archives, calendars, links, etc.. In addition, we can replace the sidebar elements with any other elements we want, where we want them. The only thing that will not change is the content or “blogging” area itself; however, we can customize things like images designed into the entries, how the dates are displayed, etc.. This will all make a lot more sense when you see how we customized Kelley’s theme from the one she chose - chances are, you will not even recognize it.

You want to look for a theme that has the general “look and feel” that you want, including amount of white space, number of columns, menu structure (pages), etc. The only absolute requirement I have when setting up a site is that it is “Widget Ready.”

Now, go to the WordPress Theme Viewer.

Notice on the left, you can choose filters/sorting options - check the box that says “Widget Ready” and any others you want and pull down the “Any or All” drop down so it says “All.”

When your choices come up, you can click on “Test Run” to see how the theme looks in action, keeping in mind that you can customizing it greatly to fit your needs. Think about how your logo would fit in with the theme, how your other graphic elements might integrate, and where you would want place to place sidebar elements to get a feel for whether it is a good fit for you. If you are doing this on your own, though, and don’t want to bother doing any customization, you could just as easily find a theme to suit you.

Things to consider when choosing a theme:

Widget Ready themes.

Like I discuss in Anatomy of a WordPress Site, widgets are snippets of code that are easily dropped into your sidebar. But if your theme does not support them, you won’t be able to use them.

Fixed vs. Fluid width themes.

If you change the size of your browser window right now, you will notice that the text and other elements of the site change along with the size of the window - that is because I chose a “Fluid” theme for this site. Fixed width themes will get cut-off (usually at the right) if the browser window is smaller than the width of the theme. This is not usually a problem if you don’t plan to have more than 2 columns, or don’t plan to say a whole lot, or have a lot of sidebar elements.

Number of Columns.

You can have from one to four columns - one of them is always the content or “blogging” area. If you are not sure how many columns you will eventually want, it is a good idea to go ahead and choose a theme with 3 columns just in case.

Navigation

If you are going to use WordPress to “power” your site, you will want to make sure your theme has a navigation menu where visitors are used to seeing one - like at the top or to the left. Many of the themes don’t have them because they are designed as true blogs, and not as full Website templates. Sometimes, a theme is just too perfect for my needs, so I build a menu into it if it does not have one.

A caveat: Not all themes are created equal!

It is always a good idea to choose several themes you like, because coding standards are not really set for them. As a result, there is no guarantee that a theme will not have bugs in it.

If you can’t find a free theme.

Click on the flashing link on the left to go to Template Monster. There you will find WordPress themes for around $55.00. I recommend them because I have used their themes, and the code has always been clean. Again, be sure the theme is Widget Ready - they call it “widgetized,” and you will be able to tell whether it is or not under the themes specs when you click on it.

So, after all of that, here are the two FREE themes Kelley chose:

Let’s have some fun customizing the final choice…

Choosing your Front or “Home” page.

WordPress 2.1 now allows you to choose any of your “static” pages as your home page. So that when users first visit your site, they will see a static “home” page, then proceed to your blog area if they choose to.

This is a great feature for those who wish to use WordPress as their main Website, and want more of a classic Website look and structure.

First of all, let me mention that the folks over at WordPress already do a smashing job of explaining their software.

If you have experience setting up WordPress sites already, and are looking for technical insights, you have come to the wrong place. My purpose, here, is to help explain the functionality of WordPress to people who have no experience whatsoever with blogging or Web design, and who would rather not even know the technical reasons for any of it. I realize this doesn’t make a lot of sense to some of you; but there really are many, many people out there who just want a Website they can build easily and maintain with as little effort as possible, without having to know how any of it works. These are people who find their passion in other places, and I respect that.

That said, let’s proceed.

I have intentionally kept this site very basic, so it would be easy for me to demonstrate things on it without a lot of clutter in the way. So let’s take a look at it.

The Main Body Area

This is the area where the actual blog entries reside - the area you are reading right now. WordPress refers to this as “Content.” You can easily change how many blog entries display on the the home page (this one), whether you want to cut the entries short with a “read more” link (see the “What do I mean by Empowered by WordPress?” topic), and other ways.

Beginning with version 2.1 you have the option of having a regular home page as your front page, or your blog entries. With a regular home page, your blog would be another menu choice.

The Header

On this site, the header is composed of the name of the site (Empowered By WordPress), a description of the site (Powered by you…), a background image (the red striped image), and a menu that lists the static pages of the site (more on those later). The header is usually the first element that you may want to customize to suit your own needs. We could easily, for instance, replace the red-striped image with a photo or our company logo, or something similar. This will make more sense to you when we talk about choosing themes and customizing.

The Sidebars

The two columns on either side of the main body area are called “sidebars.” They are what will hold the other elements of your site, like links, categories, search tools, recent blog entries, archived entries, photos, video streams, RSS feeds, advertisements - pretty much anything else you want to add you your site. These are also where you will implement most of the plugins you add to the site. I will talk more about the other elements and plugins later, so don’t feel you have missed anything.

The Footer

This is the area of the site where credit is given. Never, ever remove the credit to WordPress or to the theme designer from the footer of a WordPress site. There are a lot of people who have donated their time to this free, open-source project, and it is never good form not to give them due credit.

Common Sidebar Elements

By “sidebar element” I mean the different elements or “modules” you can have on your sidebars. You have the option of having all or none of these elements (and any number of others), and can move them around all you want (this task is easiest if you have a “Widget Ready” theme - more on that later). Remember, too, that this is where you will be placing most of your “plugins” as well.

Let’s look at the ones that are on this site, first. On the right sidebar you see:

Pages

This element will list all of the “static” pages (pages that have information that does not change unless you edit it) you have on your site. On this site, the static pages are “about me” and “empowering services.” Notice that these “pages” have static information on them - your posts will only show up on the “home” page you are on now. Also, notice that those “pages” also show up as menu items on the top of the site. You will not need to do this manually. If your theme comes with a menu, every page you create will automatically show up as a menu choice on that menu.

Links (or Blogroll)

Underneath “Pages” you will see two headers: “Empowered Sites” & “Resources.” These are both part of the “Links” element. On many themes, you will see this called “Blogroll,” because it is used by bloggers to list the other blog sites they find of interest, and think you might too. But, essentially, they are links. You can have one long list of links, or you can categorize them like I did here (Empowered Sites and Resources are link categories). To include a link on your site, you would enter the URL and a description, and put it into a category if you would like (more on that later).

Meta

This element is usually used as a place for you to login to your administrator account (to post, make changes, add things, etc.), and to provide links to the RSS feeds on your site (more on that later), and any other sort of maintenance stuff.

Moving to the left sidebar now (I will talk about the other two items on the right sidebar in a bit):

Search

Your visitors can use this feature to search your site for any information they want. There are also a number of “search” plugins that allow them to use your search function to search Google and other sites as well for the same information.

Categories

Categories are how you, literally, categorize your blog entries or “posts.” A visitor to your site can then click on any category, and see all of the entries you have made on that topic/category. Categories have another important function, though. They are used to “tag” your site in the social bookmarking indexes, and are also used by some search engines as keywords (a lot more on this later). So choose your categories wisely…

Recent Posts/Recent Comments

These list the latest blog entries you have made, and the latest comments visitors have made on your entries. Again, any of these elements are optional, so you could just as easily not list these if you chose not to.

Archives

This element lists your “archived” blog entries by date. You can also use a “calendar” element to accommodate this - where the user clicks on a date on the calendar to see the entry for that day.

Sidebar Widgets and Plugins

Now, let’s talk about the two elements I skipped on the right sidebar, as well as the two remaining elements at the end of the left sidebar.

Perhaps you have an account with Youtube or Flickr or Myspace or something similar, and have heard them mention putting a “badge” on your site that links back to your photos or videos or whatever? If so, those are examples of “widgets.” If not, don’t fret, you will know all about such things if you stick around - but don’t think you need to - your site will do just as well without such bells and whistles.

The way it works, is that the “badge” or “widget” is really just HTML code that you simply (and I do mean, simply) copy and paste into a text box, and then place that box where you want it to show up on your site - all of the images and “functionality” really reside back at the original site (be it Youtube, Flickr, etc.). Don’t worry, there will be a lesson on that later.

So at the bottom, right sidebar of this site you will see “STATS” and “SPAM BLOCKED” - both of these elements are widgets. They are simply a bit of code pasted onto the site, that tell the remote site what to display, using your personal settings. You could just as easily be telling Flickr to display some of your photos, or Youtube to display a link to one of your videos.

STAT is a widget created to display how many visitors there have been to this site in a while (the figures come from the Gostats Website).

SPAM BLOCKED is used to display figures from a plugin called “Akismet” that helps eliminate spam-comments on your posts.

Please note that I am not using the terms “widget” and “plugin” interchangeably. A widget is a snippet of code that you can “place” onto your site, a “plugin” is an extension, or add-on that needs to be installed in order to be used. But much, much, more on plugins later.

And on the left, I have widgets for my two favorite WordPress resources: Westhost Hosting and Template Monster. Both of these sites provided me with badges (they have many to choose from) that I could use to display their “ads” (for lack of a better word) on this site. You can do the same with Google ads or Amazon listings, or any number of ways to make a few pennies a month on your blog. I prefer only to list things I know my visitors will need eventually.

The End

Hopefully, this tremendously long entry has helped you make a little more sense of a WordPress site. I especially hope that it helped you see just how very flexible and user-friendly one of these sites can be.

Now, I am most anxious to get back to Kelley’s site, as she has just emailed me her theme choices…

About a month ago I met with a local publicist named Kelley Burrus. She came recommended to me for my publishing company, Dalton Publishing.

Kelley was shocked to learn that I build all of my author’s Websites as a courtesy (all Empowered By WordPress sites, by the way), and asked whether I did it for others as well. I told her I had been brainstorming a way to offer people such a service while also empowering them to maintain the site themselves, and she loved the idea. So when I first launched the Empowered By WordPress site, Kelley was the first one on board!

What I would like to do in this series is demonstrate, step-by-step, the process of empowering yourself through WordPress, using the evolution of Kelley’s site as an example.

Step One: Securing a Host and a Domain Name

Domain name registration vs. hosting account.

There tends to be a lot of confusion about the difference between a domain name registration, and a hosting account. I will attempt a simple explanation.

When you register a domain name, you are securing your right to exclusively use that domain name. Period. Registering a domain name does not get you anything but a domain name. In order to actually publish a Website using that domain name, you need a hosting account.

A hosting account is (in most instances) space you rent on a remote computer where your Website information is stored. You can use any hosting company you want to host your Website, all you need to do is “point” your domain name to it. If you register your domain name at the same time you sign up for your hosting account, however, you won’t need to worry about pointing your domain, that step will be done for you.

In Kelley’s case, she already had a registered domain name, but we needed to secure her a place to host her site.

Choosing a good hosting company that can host your WordPress site.

You can find the minimum requirements for a WordPress installation here. In a nutshell, it says that the host’s server must meet certain requirements in order for WordPress to operate properly. Chances are, if the host uses a Linux or a Unix server, it can accommodate WordPress - if it uses Windows NT, forget it!

WordPress recommends several hosting companies on their site, and I recommend one in particular called Westhost (see link on the left). I have been with Westhost since the beginning of Internet time, and recommend them to all of my clients. You can get a very large and feature-rich account with them that will accommodate WordPress for as little as $6.95/month, and they always offer the best in open source software, so you can be sure that all of your WordPress plugins are going to work properly without having to pay any more. They have fantastic tech support as well.

Here were the steps I sent to Kelley via email for her to set up her hosting account:

1. Go to my site: www.empoweredbywordpress.com and click on the link to
Westhost on the left sidebar of the site.

2. Once there, click on “personal plans”

3. click on “order now” under “personal starter”

4. choose “point your existing domain”* and enter your domain name in the space provided.

5. choose “personal starter” under “Hosting Plan” and the billing cycle you would like

6. the rest should be self explanatory - billing info and stuff

7. you will receive one email from them confirming the order (don’t forward that one to me), and a second email within 24 hours that will explain your hosting account to you, and will contain your user-name and password. This second email you will need to forward to me, so I can then set up WordPress on your site, and change your name servers.

* If you do not have a domain name already, you will choose “Register a New Domain” instead of “point your existing domain” in number 4 above. Be sure to check that the domain name is available before proceeding, though.

Kelley had no problem with this process, so we proceeded to “point” her existing domain to the proper host (Westhost, in this case). To properly point your domain to a host, you need to know what their “name servers” are. You can think of name servers as a host’s address. When you originally registered your domain, you should have received a user-name and password to access your domain registration account. Use these to gain access to your domain registration, and change the name servers to those of your new host.

It can take as long as 48 hours for new name servers to take effect on your domain, so now we wait…