Elite By Design » Blogging

The Ultimate WordPress Guide For The Absolute Beginner Part 1

Brian Lovin — Mon, 19 Jan 2009 06:01:10 +0000

I personally recommend WordPress to every client I work with or any person who asks me how to get started in the online world. Why? Because I trust WordPress.

Wordpress is easy to use, easy to learn, and easy to maintain. The problem comes when people simply haven’t been immersed into the online world long enough to learn how to use this powerful tool to their advantage.

I am bombarded with questions about ‘how to do this’ and ‘how to do that.’ Unfortunately, there has never been a resource I could point to that would be the ultimate learning center for an absolute WordPress beginner…until now.

I have created this post as an ultimate guide for people who have little to no experience with websites or the internet. Please pass this on to someone who may be struggling to learn or is constantly asking you WordPress-related questions.

This is part 1 in a 2 part series. Today we’ll be covering why you should choose WordPress, how to install the software, and how to use themes.

Want to skip to a certain section? Use the links below:

What Is A CMS?
Why WordPress?
WordPress Installation
Uploading A Theme

Let’s get started.

What Is A CMS?

Wikipedia defines a CMS, or content management system as:

A content management system (CMS) is a computer application used to create, edit, manage, search and publish various kinds of digital media and electronic text.

CMSs are frequently used for storing, controlling, versioning, and publishing industry-specific documentation such as news articles, operators’ manuals, technical manuals, sales guides, and marketing brochures. The content managed may include computer files, image media, audio files, video files, electronic documents, and Web content.

In a nutshell, a CMS provides a way to collect, store, and electronic data and media that is important to you, and then share it with the world.

Currently, there are many CMS options available. Some of the most notable ones are Joomla, Drupal, Expression Engine and WordPress.

This guide is an introduction to WordPress, one of the most versatile, easy, and manageable CMS’s on the web.

Why WordPress?

Why WordPress? This is one of the most frequent questions I encounter from readers, clients, family, and friends. Why should they choose WordPress out of all the other CMS solutions? What makes WordPress better than Joomla, Drupal, Expression Engine, or any of the others?

It’s Not Better
I’m not here to tell you that WordPress is better than any other CMSs out there. That would be just plain wrong. Each person has their own online needs that might be best suited for Joomla, Drupal, or Expression Engine or another system.

However, I am here to tell you that in the past year and a half, I have found WordPress to be a more ‘people-friendly’ CMS that allows for someone who has little to no experience online to become immersed in a community driven and resourceful environment.

Ease Of Use
WordPress is easy to use. With the latest interface redesign in version 2.7, WordPress is easier and more intuitive than ever before. Managing blog posts, pages, comments, users, plugins, and more is just a couple of clicks away.

Easy To Learn
All it takes is one guide (like this one) for someone to learn WordPress. While the system is complex and may take many months to master, it only takes a couple of hours to get the hang of using the numerous tools that WP offers.

So Much More Than Just A Blog
Finally, WordPress helps people create so much more than blogs. It is a platform that allows for the creation of businesses, stores, portfolios, products, and communities. The problem with other so-called blogging platforms is that they are trapped in their own software, allowing no room for expansion or diversity. The beauty of WP is its ability to adapt to many different and unique situations that each blogger may have.

WordPress Installation

So, assuming you have chosen WordPress as your CMS of choice, you are now wondering how to get it set up on your site. Before you begin, there are a few things you will need:

A domain name. Where will you install WordPress if you don’t have a website!
A host. You will need a host to give you server space for your WordPress installation and your content. There are thousands of hosts out there, from major corporations, to independent hosting solutions from individuals.
Elite By Design is currently using Host I Can. (Aff. Link)
A FTP client. FTP, or file transfer protocol, is in its simplest terms, a way for you to upload content to your server directly from your computer. You will need a FTP client to install WordPress themes, plugins, and in some cases, to Install WordPress yourself.
I am currently using File Zilla as my FTP, however feel free to look up other clients that may better suit your needs.

Once you have the above list of items, you’re ready to begin.

Installing With Fantastico

The quickest, easiest way to get your WordPress installation up and running is through a program called Fantastico. Fantastico tends to come standard with most hosts. To see if you have access to this program, log into your cPanel account (usually http://yourdomain.com/cpanel) and look for Fantastico (or Fantastico De Luxe in some cases).

Be aware that many people have made convincing arguments against the use of this program, mostly on the grounds that later upgrades of your WordPress installation will mess up your site. My fix? A plugin (we will cover these later in this tutorial) called the WordPress Instant Upgrade plugin.

If you would like to use Fantastico as your install method, keep reading. Otherwise, scroll down a little ways and I will explain an alternate method of installation.

Installing WordPress is possible with Fantastico in just three quick steps:

Step 1
Open Fantastico

Step 2
Click ‘WordPress’ and then ‘New Installation.’

Step 3
Fill in the necessary fields and click ‘Finish Installation.’

5 Minute Install

WordPress totes the famous “Five Minute Install” for WordPress users who want to install the software manually. They have written a thorough and complete guide in the WordPress Codex which you can read here.

Here is the text taken off the previously mentioned page to save you a step in your WordPress install process:

Here’s the quick version of the instructions, for those that are already comfortable with performing such installations. More detailed instructions follow.

1. Download and unzip the WordPress package, if you haven’t already.

2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.

3. Rename the wp-config-sample.php file to wp-config.php.

4. Open wp-config.php in your favorite text editor and fill in your database details as explained in Editing wp-config.php to generate and use your secret key password.

5. Place the WordPress files in the desired location on your web server:
If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server.

6. If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), rename the directory wordpress to the name you’d like the subdirectory to have and move or upload it to your web server.

For example if you want the WordPress installation in a subdirectory called “blog”, you should rename the directory called “wordpress” to “blog” and upload it to the root directory of your web server.

7. Run the WordPress installation script by accessing wp-admin/install.php in your favorite web browser.

8. If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php

9. If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp-admin/install.php

That’s it! WordPress should now be installed.

Installing A Theme

Now that you have WordPress installed, you will probably want to start exploring different ways to make your site appear to your visitors. The design of your site, as installed through WP, is known as a “theme.”

There are literally thousands of free WordPress themes out there for your to install, as well as some premium themes that will cost you money for added customization options and support.

When picking your theme, keep the following in mind:

Your target audience – are they going to be tech savvy, or do they need a theme that is simple to read and navigate?
Legibility – While some themes have very cool flashy effects, make sure to never sacrifice legibility over looks.
Sidebars – Some themes come with one, two, or three columns in which you can put content. When choosing your theme, think about how you want to organize your content.
What “fits” – Choosing a theme isn’t rocket science. Just find a theme that you like, that you think will work for your site, and has some aesthetic appeal, and then go with it.

So where can you find themes for your new WordPress installation? A simple google search for “free wordpress themes” will give you thousands of results.

Here are a few links to take a look at also that might help you find that perfect theme:

100 Excellent Free WordPress Theme

45 Excellent Free WordPress Theme

15 High-Quality Premium-Like Free WordPress Themes

50 Beautiful Free WordPress Themes

Installing A Theme

Installing a theme is quick and simple.

1. Download the theme of your choice

2. Open up your FTP client and login. Find your /www/ folder.

3. Navigate to your wp-content directory (/www/wp-content)

4. Navigate to the ‘themes’ folder (/wp-content/themes)

5. Create a new directory with the title of your choosing (Right Click > Create Directory).

6. Click and drag the theme you downloaded into this new directory

Done!

All that is left to do now is log in to your WordPress administration panel (http://yourdomain.com/wp-admin). In the left sidebar, click ‘Appearance’ and then ‘Themes.’

If everything went smoothly, you should now see the theme that you just installed. Simply click the theme, and on the pop-up, click ‘install.’ That’s it!

Play around with different themes and find something that works for you. There are thousands of options out there, so don’t hesitate to keep searching for something better and new.

Stay tuned for part two by subscribing to the feed.

25 More Most Incredible Photoshop Tutorials

Brian Lovin — Sun, 04 May 2008 12:39:49 +0000

After the astonishing success of our first installment of 23 Most Incredible Photoshop Tutorials, I’ve decided to make a much needed update to features some of the newer tutorials that have been released over the last month or so.

Like I’ve said before – it’s all about the process, not the end result. Don’t pass over a photoshop tutorial simply because you don’t like the finished product. Work the tutorial anyways to learn all the tools, tricks, and methods used in Photoshop to give some really neat effects.

Creating The Windows Vista Lighting Effect

Golden Sunsets With Gradient Maps

Turn Day Into Night

Create A Sleek, High-End Web Design From Scratch

The 5 Essential Photoshop Reflections

Loading Interface

Design A Cartoon Grunge Website Layout

Part I: How To Add Flaming Decals To A Modern Car Design

Part II: How To Add Flaming Decals To A Modern Car Design

Create Cool Neon Effects

Making A Crystal Ball

Create A Stunning Wallpaper Design

Create A High Gloss Graduation Hat Icon

Design The Firefox Logo In Photoshop

Super Retro Game Cartridge Design

Design A Shiny Photorealistic Apple Remote

Fiery Photoshop Space Explosion Tutorial

Panoramic Images In Photoshop

Create A Glassy Logobox

Easy Depth Of Field Effect

Create A Floating Menu In Photoshop

Add Dynamic Lighting To A Flat Photograph

Make A Sign Banner Using Light And Shadow

How To Create A 3D Shelf Element

Design A Flickr Box

I hope you enjoyed this collection of Photoshop Tutorials

For more Photoshop tutorials check out the new tutorial site, The Tutorialist.

Get Inspired – A Beautifully Dirty Blog Design

Brian Lovin — Fri, 22 Feb 2008 04:14:14 +0000

I found this blog, Plognark, literally just a matter of minutes ago and I was stopped dead in my tracks. This theme is beautiful – and dirty! This design almost takes an “underground” theme as it shows the grungy earth and everything hiding within, through this artists beautiful hand-drawn illustrations. I’m admittedly not the biggest fan of the header text, but the drawings behind it more than make up for anything I don’t like.

Need to get inspired to create a fresh design? This is a great place to start your search.

On a side note, while you may all not be a fan of this author’s content, I would highly recommend flipping through Plognark’s pages and taking a look at all the drawings this writer has created for each post. Talk about time and dedication! These drawings are enough to get me to pull out my own pen and paper – and I’m sure they’ll do the same for you!

Free “Lumpy” Vectors

Brian Lovin — Mon, 18 Feb 2008 06:21:22 +0000

New from Vecteezy: Lumpy Brushes. This looks like it could be a fun brush/vector design to use later on down the road. What do you think?

5 Photo Editor Programs For Macs

Brian Lovin — Sun, 10 Feb 2008 21:42:13 +0000

Coincidentally after I got a comment on my iPhone webclips post asking what some good image editors were, PSDTuts wrote a post containing just the information needed. Here are the top 5 alternatives to Photoshop for Mac users.

Navigation Bar In Photoshop – Tutorial

Brian Lovin — Wed, 26 Dec 2007 03:38:27 +0000

This is my first tutorial so it is fairly simple and straight forward. This is as easy as it gets in Photoshop, but I think that this tutorial can yield some pretty cool results. I’m going to show you how to make a sleek, very clean navigation for your website.

Lets start with a 500×200 pixel canvas. I filled it in with a medium gray color.

Next, I used the marquee tool to get a rectangular selection (sorry for the difference in background colors, just ignore it)

Go ahead and fill that selection in with any color you want. Then, add the following layer styles.
I chose 2 light grays as a gradient overlay – darker in the bottom and a very, very, very light gray up top.

I threw in a drop shadow just to give the nav bar some depth. This step is completely optional.

I then added an inside stroke with a dark gray of 1 pixel

Finally, I threw in a very faint inner glow to give the bar some highlights.

You should hopefully have something looking somewhat like a nav bar by now.

Select the nav bar by command, or control, clicking on the thumbnail for your nav bar layer. This will select the entire bar. From there, go to Select>Modify>Contract and contract the selection by 2 pixels.

Make a new layer, fill in the selection with white. Then transform (Cmd+T) the white section so that it covers about half of the nav bar.

Lower the opacity of the white layer to about 25%. This is now our gloss for the nav bar.

Now let’s work on the selected page portion.

Start by making a selection as wide as you prefer. Fill it in with any color.
I then added the following layer styles. I chose the color blue as my selected page color. Feel free to choose any color scheme you would prefer – I have done this with yellow, red, orange, green, and blue and they all look great.
My gradient is a dark blue to a slightly lighter blue.

I then added just a very faint drop shadow.

Next came another very, very, faint inner glow.

Once you finish the layer styles, command click on your selected page layer to select it.Then go Select>Modify>Contract and contract the selection by 2 pixels.

Fill that selection in with white and then transform it so that it covers about half of the selected page layer.

Next, lower the opacity so that you can barely notice the white layer. Mine is set at 6%.

The last step is to add text. Use whatever font you like, I generally like to keep mine thin and small, but do whatever suits your preferences. I made my text a medium gray color.

To finish everything off, I added a dark gray text to the rest of the nav bar. Replace these words with whatever suits your needs.

That’s how to make a simple, yet sleek looking navigation bar in Photoshop.My total time for the design was about 2 minutes. Hopefully it will be just as easy for you.I hope you enjoyed this tutorial. Keep checking back for more in the future – soon they will start getting more complicated and in depth.

For more Photoshop tutorials check out the new tutorial site, The Tutorialist.