Thought Sparks » Tutorials

Checklist for Setting Up a WordPress Website

Phil — Tue, 17 Jun 2008 11:30:34 +0000

Setting up WordPress websites has become a regular part of my work. Much more than just for blogs, the platform is ideal for rapidly launching sites. In fact, nine out of ten WP sites I launch are non-blogging sites. I thought for my sake and for others who are looking for a checklist for what needs to be done to setup a WordPress website, I’d punch out a basic checklist for the process. This may get quite lengthy, but hopefully it will be a helpful resource to make sure all the bases are covered.

Hosting

Search for and select domain an open domain.
Sign-up with host and document access information.
Setup ftp access and document access information.
Setup MySQL database and document access information.
Create sub-folder on host with the same name as domain (This allows easy launching of additional sites on same host) and point domain to sub-folder.

WordPress Install

Download and unzip latest version of WordPress.
Save wp-config-sample.php as wp-config and edit database access information in the top of the document. The documented info from your host provider, i.e. database name, host, username and password should be entered.
Upload WordPress and go to the domain address in the browser.
Click to install and be sure to copy the temporary Admin password into notepad and log-in to instigate the installation.
Immediately change the Admin password to something familiar so that you don’t lock yourself out of WordPress.

Basic WordPress Configuration

During installation check the "I would like to block search engines, but allow normal visitors" during the configuration process. To change the setting later go to "Settings" under the Privacy link and change the option to "I would like my blog to be visible to everyone, including search engines…".
Search for and upload a theme to modify. For CSS gurus who want to configure I highly customized site, I recommend using the Sandbox theme. Not a lot of bells and whistles, but it provides a strip-down template to build from scratch.
Change the Permalink. Under settings in WP 2.5+ go to Permalinks and change the default. My favorite is the simple Custom Structure: /%postname%/.
Write a Page called "Home" and set it as the default homepage. Under "Settings" click on "Reading" and for "Front page displays" click "A static page" and select "Home" for under the "Front page" drop-down.
Setup the basic landing pages and sub-pages for the site. When a sub-page is created, under "Page Parent" select the parent page.
Delete the site Description. In most cases I have no need for the "Tagline" that is used for blogs. I’ll add-in my own meta tags later. Go to "Settings" which brings-up "General Settings" and delete the "Tagline".

Install Plug-ins

Download the FCKEditor for WordPress plugin. Unzip and upload folder to wp-content/plugins/. Then activate the plugin. This will instigate a much improved wysiwyg editor for pages and posts.
Download and install the WordPress Database Backup plugin. This nifty plugin can schedule to email you a backup of the database on a weekly basis. You will still need to download your site periodically, but what an amazing function to capture the content from the site.
Download and instlal cforms II an amazingly powerful forms configurator. This plugin is the most robust configurator I’ve found which both drops form submissions to a user-friendly database on the site as well as sends email submissions to the designated manager of the contacts.
For sites requiring mobile access WordPress Mobile Edition plugin detects mobile users and serves-up the page in readable mobile format.
The Search Pages plugin enables the search function to return results from both pages and posts.
Install Google Analytics for web stats.

Design the Theme

Create a back-up of the site before beginning to tweak the design.
For a simple, straightforward site: replace the header image, modify color scheme, font treatment and spacing as needed.
Tweak the navigation to display pages and ditch the other widgets except the search form. If hard-coded changes are needed in the navigation, start by inspecting the header.php, functions.php and possibly sidebar.php files. These will most likely contain the code for the menu.
Populate the site with enough content including images to get a feel for how well the navigation and flow of the site works.
Make adjustments to accomodate what is stipulated in the scope document. If you are working with a client, a scope document will save you grief as you will have the stipulated requirements for the site. This will help scope creep to get out of hand.

Before Going Live

Create an account for content managers.
Orient the user with the site with basic update training.
Check for browser compatibility in major and current search engines. There’s much debate on this subject. Generally I ensure at least the current and previous versions of FireFox and IE work well.
Go back to the Privacy setting and enable search engines to find the site.
Spell check and surf the site looking for content or graphical errors. Ideally, it’s good to ask other folks to hit the site as well.
Use the free online ad credits the host gives with a new account to help launch the site and emphasize to the client that ranking in the engines takes time.

There’s the initial run-down. This is by no means an exhaustive list. Depending on requirements the design phase could become quite lengthy. There are also a boat load of other plugins, but those are the most common ones I use for a typical configuration. I may continue to add items down the line as they come to mind. Any good suggestions will be added as well.

Six Steps to Super-Charge Photoshop Selection with Quick Mask

Phil — Sat, 15 Mar 2008 13:17:50 +0000

While Photoshop is absolutely packed with bells and whistles, there are a few key tools to unlocking its full potential. The Quick Mask feature in Photoshop is one of them. Quick Mask is essentially a selection tool on steroids. It allows one to select down to the pixel a given area of a photo. While there are many uses for selection to alter color, sharpness and other effects, a very common use is to knock-out a background around an object.

Step 1. Select the background

WIth the shift key click areas of the background that you want to knock-out. The more contrast between the background and the subject the better. In some cases, such as this image the contrast is low so we’ll need to use Quick Mask to do the finer selection.

Step 2. Enter Quick Mask Mode

Notice the icon second from the bottom in the toolbar. This is the Quick Mask toggle button. When in Quick Mask the icon has a darker parameter. It is clear at this point that some of the guitar was selected with the background.

Step 3. Paint the object

To get a very precise selection, zoom-in to get a close-up of the area to be selected. Choose the paint brush to color every area not selected. In this case we want to knock-out the background so the guitar will be painted.

Zoom-out and review for any rough spots. I find using a larger brush tends to create a smoother line as I drag it along the edge of the object.

Step 4. Switch Back to Regular Mode and Inverse Selection

One can either delete the background or choose to inverse selection to the object.

Step 5. Copy and Paste into New Window

I often prefer to paste the object into a new window so as to leave the original image in tact.

Step 6. Delete Background Layer and Save as .PNG

Finished Image

If you prefer resize, rotate image or apply other affects, upload and enjoy. Let me know if you have any questions and if this tutorial was helpful.

10 Reasons to Use List-Item Tags

Phil — Tue, 09 Oct 2007 11:02:45 +0000

We love lists and if you can compact information into a set of 10, then you’ve found the holy grail of blog post formats. Searching Google with the phrase "10 reasons" turned up 190,000,000 results.

There is something tight about a list of 10. It’s long enough to convey a good amount of information but short enough to assimilate and remember. It just seems complete that number 10. So, in good fashion, what would a post on list-items be without rounding to the number 10.

List-items are easy for humans to read. Most users scan sites for information and only get down to reading content where they find pertinent information. Readers enjoy combing through sites that provide that functionality. Sure some readers may hang on every word you say, but for the rest, lists give them ability to jump right to the information that brought them to your site in the first place.
Search engines index lists well. Lists prove popular with search engine optimization as well for much the same reason as point number 1. Search engines are designed to assist humans in finding pertinent information to their queries. Lists provide a structure to information that fits nicely within search engine algorithms. You are assisting the search engine in properly indexing your site by giving a topic and outline of information.
Lists organize thoughts and encourage succinct communication. When I start a list, I often write-out the main points and then return to the list-items to fill-in the explanations. This provides a very quick way to outline my the major points and then return to the nitty gritty details.
People read lists. There’s something welcoming about a list. It conveys a sense of confidence that the reader will be able to quickly get through the information.
Unordered lists convey a sense of collective, non-linear groups. Bullet items in presentations whether PowerPoint or on the web have become a mainstay for content structure.
Unordered list looks like:

First item

Second item
And renders like:

First item

Second item
Ordered lists show a hierarchy to information in a progressive manner. An ordered list is the same structure as an unordered list except that it uses
tags instead of
tags. The nice thing about lists is that changing those two tags applies a different treatment to the list.
Numbered list looks:

First item

Second item
And renders like:

First item

Second item

Definition lists give meaning to the list as terms and definitions by its structure. The Definition list is a lesser known and used list but can be very helpful both for search optimization and for a quick structure for glossaries.

Definition list looks like:

Guitar: a stringed instrument; played by strumming or plucking
Piano: an instrument with a keyboard that strikes wire strings

Which renders like:

Guitar: a stringed instrument; played by strumming or plucking
Piano: an instrument with a keyboard that strikes wire strings

Lists are flexible for styling. By assigning classes to lists, the list can change it’s display without changing the content. A good example of that is illustrated in the post Horizontal Tabs - CSS Video Tutorial #2.
Lists are multi-purpose. Lists can be used for vertical and horizontal menus, information content structure, options in a form and displaying graphical information such as photo galleries.
Lists make formatting quick. The nice thing about lists are the built-in type attributes that can be assigned either at the style sheet or at the point of creating the list.
Ordered list format option:
1. capital letters
3. lowercase letters
5. capital roman numerals
7. roman numerals
9. numerical list (default type)

Make Images Look Right with Attributes

Phil — Fri, 28 Sep 2007 13:20:08 +0000

When uploading an image to your blog, it’s important to include some essential attributes. Using a WYSIWYG editor like FCKEditor for WordPress gives you preset elements. The screen shot above is a typical example of some of the more common attributes that you should employ.

URL is the location online where the graphic will be posted. The upload tab allows you to send an image from your desktop to the web server.
The html code looks like .
Alternative Text or Alt text as it’s abbreviated is an important element and should always be employed. It accomplished two very important tasks.
- Provides visually impaired readers an explanation of the graphic, which was it’s original intent.
- Enables search engines to more effectively index your site for more effective optimization.
The html code looks like alt="Photo caption"
Width and Height are optional attributes. I always reduce my images to the appropriate size in a photo editor before uploading as it reduces page load time. But in the case of slight modifications, these attributes are very helpful.
The html code looks like width="150px" and height="150px" where px stands for pixels.
Border is often used to remove a border around linked images. In some cases it’s helpful to add a border to an image. To remove a border the element would be 0.
The html code looks like border="0" or border ="1".
HSpace and VSpace elements add horizontal and vertical space, which creates white space around images.
The html code looks like hspace="10" and vspace="10".
Align is primarily used to position an image to the left or right of the page. This allows text to wrap in a natural fashion around the image.
The html code looks like align="left".

The first two attributes, the URL and Alternative Text should always be set when uploading images to page content. Border, HSpace, VSpace, Align and other attributes can be set with CSS styling. Sounds like another post. Gee, I guess you’ll have to check back soon for styling images with CSS.

Font Treatment - CSS Video Tutorial #3

Phil — Wed, 12 Sep 2007 06:26:19 +0000

Today’s post features the third Cascading Style Sheet(CSS) Video Tutorial on font usage. The video is just over 4 minutes in length.

One important aspect of web publishing is effectively applying font treatments to make text more readable. With a few adjustments to fonts, the readership of a site will find it easier to assimilate the important information shared with them.

The tutorial shows how to apply several different font attributes to create a more unique and design centered presentation. While the web has some built-in limitations, these techniques will free you from the constraints of the default templates common in many blog applications.

Font Treatment - CSS Video Tutorial #3

Web Safe Fonts

As mentioned in the video, the following is a short list of some basic fonts to choose for a website:

Arial, Arial Black

Comic Sans MS

Courier

Georgia

Impact

Lucida Console

Palatino,Book Antigua

Tahoma,Geneva,sans-serif

Times New Roman, Times, serif

Trebuchet MS,Helvetica,Verdana

Symbol,Webdings

Wingdings, Zapf Dingbats

Let me know if this tutorial is helpful. If you have any other questions about fonts, leave a comment as well and I’ll do what I can to answer them as efficiently as possible. You can take styles in many directions and make simple changes that will spruce-up your site. At the same time they can get very complex especially when tweaking an existing style sheet. Go for it, just be patient with yourself as it takes a while to get the hang of it.

One important tip: before beginning tweaks to a stylesheet, copy and paste the style sheet into Notepad and save to your desktop. Each time you make significant changes and it works well, save another copy. This way if you muck it up, it won’t take you but a minute to reverse it and then wait until a later time to try again.

Horizontal Tabs - CSS Video Tutorial #2

Phil — Sun, 09 Sep 2007 01:16:41 +0000

Today’s post features the second Cascading Style Sheet(CSS) Video Tutorial on creating horizontal tabs such as are used for the top navigation of this website. The video is 4 minutes in length.

What is most excellent about CSS is how a few lines of code in the styles greatly alters the visual structure of a page element.

With a recently purchased microphone headset the quality of the recording is greatly improved. Let me know what you think and what else you would like to learn about in subsequent tutorials.

Horizontal Tabs - CSS Video Tutorial #2

The Body Tag - CSS Video Tutorial #1

Phil — Fri, 07 Sep 2007 13:05:39 +0000

Today’s post features the first in a series of Cascading Style Sheet(CSS) videos covering some attributes of the body tag. The purpose of these videos will be to highlight basic CSS concepts that will assist bloggers in manipulating their sites. These tutorials will be rapid fire in that I will cover information with the reader in the same manner as I would if you were sitting in front of me. Rather than creating polished presentations, these are the raw, no frills facts that you can use. My goal is to help demystify CSS so that you are empowered to make changes to your site with confidence towards creating a blog that is more personal and/or professional.

CSS Body Tag Video Tutorial

Let me know if you appreciate these tutorials and if I’m on the right track. I’m doing this for your edification, so I want these tutorials to really help you learn and apply the concepts efficiently and effectively to your site. Also, please let me know if you need more clarification and what aspects of CSS manipulation you would like to learn more about.

Home Network Best Practices

Phil — Thu, 12 Apr 2007 10:22:12 +0000

My wife often comments, "what do people do who don’t have a techie for a spouse?" For those of you frustrated with computing gotcha’s and don’t have a resident techie, here’s some simple stuff to do to keep your computing environment at home humming along.

Turn your machine off at night or for longer periods when not in use. This reduces your overall vulnerability from hacking. You’ll also save on electricity.
Use daily to several times a different virus and bot scanners. Some of my favorite free ones are:
1. AVG Anti-Virus Free at free.grisoft.com
2. Spybot-S&D! at www.safer-networking.org
3. Ad-Aware at www.lavasoftusa.com
Use an internet filter. I like K9 Web Protection at www.k9webprotection.com. It’s a great parental control and does warn you of site content before you hit the page. Great for sensitive and discerning eyes.
Remove unused programs. Use ‘em or lose ‘em.
Use FireFox to surf the web. IE7 is better on security than 6.0 but who likes IE7?
Delete the cookies from your browser often.
Don’t save passwords.
Off-load data from your drive. When a HD gets over 80% capacity, it starts to choke, especially if you do any major graphic/multimedia editing.
Run Defrag and Disk Clean-up every once in a while. I forget that this is important, but it makes a difference in performance.
Custom configure your home network interface.
1. Create a unique IP address and subnet.
2. Limit the DHCP range to only the number of machines needed. This may be necessary/convenient for laptops.
3. Even better would be to disable DHCP and enter IP, Subnet, Gateway and DNS entries into each machine.
4. Don’t enable SSID broadcast which does not display the wireless network to your neighbors.
5. Use WPA-PSK instead of WEP. WPA-PSK takes a little more work to crack with 64 character pin instead of 10.
6. Change your settings on a regular basis.
Keep your Windows OS patched with updates.
Keep your MS Office patched with updates.
Don’t surf nasty sites like porn and hate site. It will keep your mind clean (most important) and will reduce your computing liability.
Use webmail. No need to download email to your machine. Highly recommend the ever popular Google mail - gmail.com. They just got it right. If you haven’t tried it yet, do yourself a favor.
Learn to be shrewed with email. When in doubt, delete it.
Keep your ear to the ground for latest threats. You don’t have to be a subscriber to Slashdot - slashdot.org/ to keep up with the critical issues. More and more threats make the news.
Take the cover off of your desktop and blow-out the dust. If it’s in a dusty location, do this every month or two. Also, make sure your machine is well vented.
Make friends with a techie and bribe them with brownies and Diet Coke (or whatever their choice of caffeine). Then you’ll be armed when it eventually hits the fan (because someday it will).
Pray daily to God to protect you. Not kidding here. God is into the details of our lives and computing can wreak havoc to your schedule and if you blog for a living to your monitary gain.
Use a Mac and save yourself some trouble. Yeah, do as I say and not as I do. Mac’s are great. I’ve just not made the leap just yet. Windows at work, Windows at home. ¿Que lastima?