How to Install and Style WordPress 2.5

It's soon going to be time to redesign my web sitebackground. This is the only image needed by a
for the "Web 2.0 Age." I have seriously looked atbrowser to generate the blog's home page. The Blog
two platforms, Drupal and Joomla, with which towill, therefore, load very quickly.
accomplish this.Pretty easy so far, right? The rest of the design is
Drupal and Joomla offer comprehensive packagesaccomplished through the theme's CSS file and/or
that, in the case of Drupal, includes a blog and forumthrough the WordPress administrative interface.
as core modules. Theming these platforms can beCSS Changes
accomplished through both CSS (Cascading StyleThe default CSS file is in the
Sheets) and PHP (Personal Home Page or PHP:wp-content_themes_default directory. The CSS text
Hypertext Preprocessor) code modifications.below shows the code changes to style.css. Before
However, these platforms are complex and learningmaking any changes to the default CSS file, I always
enough to install, manage, and customize thesemake and save a copy of the original. The CSS file
platforms can be a daunting task.can be opened and modified with any text editor.
After studying the two platforms, including usingText to be deleted will be shown within square
them both on my test bed platform and on thebrackets. New or modified text will be shown without
Internet, I decided to take a look at WordPress as abrackets.
possible solution to my future Web needs. I was/* Begin Typography & Colors */body {
surprised to discover that the latest version of[background: #d5d6d7 url('images
WordPress is easy to install, easy to use, and easykubrickbgcolor.jpg');]background: #636f89; /* Set the
to theme. In this article, I will describe how to installBody background color to blue */
and customize WordPress 2.5.}
INSTALL WORDPRESS IN FIVE EASY STEPS#page {
(1) Download WordPress[background-color: white;]
The first installation step is to Download WordPress[border: 1px solid #959596;]border:none;
from I created a directory on my PC called}
"wordpress" in which to collect the files and images I[#header {background: #73a0c5 url('images
will use for my WordPress installation andkubrickheader.jpg') no-repeat bottom center;
customization. Once the download competed, I saved}
the .zip file.#headerimg {margin: 7px 9px 0;height: 192px;width:
(2) Unzip WordPress740px;
After saving the file, I opened it with the zip/unzip}]
program I use, and selected all of the files. Since I will#footer {
be testing and modifying Wordpress locally to begin[background: #eee url('images/kubrickfooter.jpg')
with, I "extracted" the files to the root directory ofno-repeat top;]background: #fffef2; /* Very light
the Apache server I use for my PC test bed.yellow */
If I were going to install WordPress "for real" on a}h1, h1 a, h1 a:hover, h1 a:visited, #headerimg
live web site, I would have used an FTP client to[.description] {text-decoration: none;
upload the .zip file to the desired directory at my[color: white;]color:red; /* Make the title red *
hosting service and unziped the file there. Firefox haspadding-bottom: .5em; /* Put a little space between
a terrific and *free* FTP client, FireFTP, that can bethe title and tagline */
used for the upload.}
(3) Create the Database.description {text-decoration: none;color: blue; /* Make
At this point, the WordPress database needs to bethe tagline blue */text-align: center;
created. WordPress requires a database to store the}
site content and other information. I use MySQL for/* End Typography & Colors */
my database server both on my PC test bed and on/* Begin Structure */
my live sites. I use phpMyAdmin as an interface to#page {
MySQL.[background-color: white;]background-color: fffef2; /*
Creating the database is really simple usingVery light yellow */
phpMyAdmin. I simply start phpMyAdmin, enter the[border: 1px solid #959596;]border: none;
database name, and hit the "Create" button.}
WordPress will create the tables it needs in the#header {
database.[background-color: #73a0c5;]background-color:
(4) Create wp-config.php#fffef2; /* Very light yellow */
WordPress needs to know how to access the}
database once it has been created. That's what the/* End Structure */
wp-config.php file is for. WordPress includes a fileAfter making and saving these changes to the
called "wp-config-sample.php." This file needs to bestyle.css file, the newly designed blog page is
modified with the database access information andaccomplished.
renamed to "wp-config.php."STYLING WORDPRESS -- THE FANCY DRESS
Open the config file with any text editor. The criticalDESIGN
entries are DB_NAME, DB_USER, DB_PASSWORD,Although I like the simplicity of the Jakob blog design,
and DB_HOST.it will not appeal to everyone. Lots of people just
As an enhanced security measure, I obtained alove "glitz." The price of a fancy WordPress dress is
unique SECRET_KEY and pasted this into the file. Ioften a slower loading blog with no increase in
then saved the edited file as wp-config.php. The textusability. However, for those who want to "dress up"
below shows the code I changed:the appearance of their blog, here are additional
// ** MySQL settings ** //define('DB_NAME',ways this can be accomplished.
'wordpress'); // The name of theFirst of all, it should be noted that the background of
databasedefine('DB_USER', 'rtivel'); // Your MySQLthe default WordPress page uses header
usernamedefine('DB_PASSWORD', 'MyPassword'); //(kubrickheader.jpg) and footer (kubrickfooter.jpg)
...and passworddefine('DB_HOST', 'localhost'); // 99%graphics. These graphics are not filled with a solid
chance you won't need to change this valuecolor, as in the Jakob design, but with gradients.
// Change SECRET_KEY to a unique phrase. YouThere also appears to be a very small drop shadow
won't have to remember it later,under the page.
// so make it long and complicated. You can visitBecause of the complexity of the default page,
// to get a secret key generated for you, or justadditional graphics are required and, thus, more slices
make something up.define('SECRET_KEY',will be needed. Additionally, when a more complex
'diq`~@|CH6)l@u>x;hA>1ew1maZbody background is desired in which to "float" the
)ToE!y%}}ZYAI!=V^L()eooB!0V+k8LJa!Eh'); //page, a "seed" image for this might also be required
Change this to a unique phrase.(this is what the kubrickbgcolor.jpg image is for).
(5) Run the WordPress InstallerAs before, I created a drawing of the blog page in
After completing the edit of the wp-config.php file, IIllustrator. The page, with rounded corners, floats on
started the installation script by entering this URL tothe default WordPress background, has a yellow
my Apache server into my browser:localhostgradient, and has a small drop shadow.
wordpress/wp-admin/install.phpI first created a 760px X 600px rectangle on the
For a live site, the URL might be something likeIllustrator artboard. I filled this rectangle with the
this:yourdomain.com/wordpress/wp-admin/install.phpbackground color (C:8, M:6, Y:6, K:0).
The first installation screen asks for the blog nameNext, using the Rounded Rectangle Tool, I drew a
and contact email address.736px X 584px rectangle and filled it with the yellow
The next screen announces a successful installationgradient. Essentially, I made the page as large as
and provides a username and password for thepossible within the background while leaving enough
administrator. Be sure to save this password!room for the drop shadow.
The installation is now complete. I can now log intoFinally, I gave the rounded rectangle a small drop
Wordpress and begin managing the blog, customizingshadow.
the theme, or adding content.In order to insure that the slices will merge perfectly
Or, I can click the link at the top of the log-in screeninto the *body* background, I created a 60px X
and go to the blog's home page.60px square of the same background color (C:8, M:6,
If you don't manually create a wp-config.php file,Y:6, K:0) and saved it as kubrickbgcolor.jpg. The small
WordPress will prompt for the information it needsimage will be used to "paint" the body background.
and try to complete the installation.This is an important step as the background used for
That's it! WordPress should now be installed.the body and the background used for the page
STYLING WORDPRESS -- THE JAKOB DESIGNmust match perfectly for the Fancy design.
The current design for my personal web site,Creating the Slices
SelectDigitals.com, is based on work and philosophyUsing the Rectangle Tool, I placed a 760px X 200px
of Jakob Nielsen , Nielsen's work has been dedicatedrectangle on top of the layout described above. I
to making usable web sites that deliver content thatpositioned this rectangle at the top of the layout and
is easy to find and easy to read.used it to make a slice for the header graphic. Before
The design of Nielsen's site (and my site, bydoing this, I disabled stroke and fill.
permission) is elegantly simple and has the primaryI saved the slice as kubrickheader.jpg.
goal of delivering content. WordPress also has theI created the footer and page slices in a similar
primary goal of delivering content. So, my firstfashion and renamed them as kubrickfooter.jpg and
WordPress design will endeavor to maintain the lookkubrickbgwide.jpg, respectively. Kubrickfooter.jpg is
and feel of our sites with the added feature of760px X 63px and kubrickbgwide is 760px X 40px.
visitor interactivity. I will refer to this as the JakobThere are two other Kubrick images in the images
design.directory: kubrickbg-ltr.jpg and kubrickbg-rtl.jpg (left to
There are six major components that make up theright, and right to left). These images are the same
look of the default WordPress blog:as kubrickbgwide.jpg. So, I made two copies of
1. Header Graphic,kubrickbgwide.jpg and renamed them accordingly.
2. Blog Title,CSS Changes
3. Tagline,The default CSS file is in the
4. Page,wp-content_themes_default directory. The CSS text
5. Background,andbelow shows the code changes to style.css. Square
6. Footer.brackets show which code to delete and new code
In order to make the Jakob blog load quickly, Iis shown without brackets. Before making the
decided not to use a header or footer graphic; andchange, I copied and saved the original file. For the
since the design will essentially be the defaultFancy design, the CSS changes are minimal.
WordPress theme with a new coat, only a little/* Begin Typography & Colors */body {
graphic design work needs to be done. In fact, I only[background: #d5d6d7 url('images
needed to create one graphic to to generate thekubrickbgcolor.jpg');]background: #e7e7e7 url('images
blog page with it's two column effect. The blog pagekubrickbgcolor.jpg');
will "float" centered in a dark-blue *body* background}
that will serve to frame the page.#page {
Creating the Graphic[background-color: white;]
A look in the image directory for the default[border: 1px solid #959596;]
WordPress theme shows the default images used}
for the Kubrick look. For now, there is only one file#header {
of particular interest : kubrickbgwide.jpg. For the[background: #73a0c5 url('images/kubrickheader.jpg')
Jakob design, the other Kubrick images are notno-repeat bottom center;]background: #e7e7e7
needed but will be needed for the "Fancy", moreurl('images/kubrickheader.jpg') no-repeat bottom
complex design.center;
The blog's page will be created from a "slice" through}
the center of the new design. The slice is a narrow#footer {
image the width of the blog page.[background: #eee url('images/kubrickfooter.jpg')
I began my design by laying out a basic page (760pxno-repeat top;]background: #e7e7e7 url('images
X 600px) in Adobe Illustrator. I like using Illustratorkubrickfooter.jpg') no-repeat top;
for artwork of this kind, although other programs}h1, h1 a, h1 a:hover, h1 a:visited, #headerimg
could be used, too.[description]{
I filled the basic page with the page's background[color: white;]color:red; /* Make the blog title red *
color (not to be confused with the dark blue *body*padding-bottom: .5em; /* Put a little space between
background). The light background color will willthe title and tagline */
"show-off" colored text, such as the blog's title and}
tagline..description {text-decoration: none;color: blue; /* Make
I overlayed the page with two rectangles, orthe blog tagline blue */text-align: center;
"columns." The left-hand, 510px-wide column is filled}
with a pastel yellow color; the right-hand column,/* End Typography & Colors */
230px wide, is filled with a pastel blue color. The two/* Begin Structure */
columns fit within the basic page with a 10px border#page {
of page background around them.[background-color: white;]background-color: #e7e7e7;
In Illustrator, I then placed a 760px X 40px rectangle[border: 1px solid #959596;]border: none; }
on the page and used this to make a slice. A slice is#header {
nothing more that a representative piece of a larger[background-color: #73a0c5;]background-color:
image, in this case, of the blog design. I saved the#e7e7e7;
slice as kubrickbgwide.jpg. Kubrickbgwide.jpg will be}
used to generate the blog-page background. As new/* End Structure */
content is added to the blog page, copies of the sliceAfter the design and CSS work, the WordPress
will be stacked vertically to "grow" the two-columnshows it's new clothes to the whole Internet.