It will soon be time to redesign my website for the “Web 2 “0 Age” I h” ” e seriously looked at two platforms, Drupal and Joomla, with which to accomplish this. Drupal and Joomla offer comprehensive packages that include a blog and forum as core modules in the case of Drupal. Thiplatfoplatforms’ngng can be achieved through CSS (Cascading Style Sheets) and PHP (Personal Home Page or PHP: Hypertext Preprocessor) code modifications. However, these platforms are complex, and learning enough to install, manage, and customize these platforms can be daunting. After studying the two media, including using them on my testbed platform and the Internet, I decided to look at WordPress as a possible solution to my future Web needs. I was surprised to discover that the latest version of WordPress is easy to install, easy to use, and easy to theme. I will describe how to install and customize WordPress 2.5 in this article.
INSTALL WORDPRESS IN FIVE EASY STEPS
(1) Download WordPress
The first installation step is to download WordPress from the website. I created “WordPress” directory on my PC to collect the f ” les and ” “ages I will use for my WordPress installation and customization. Once the download was completed, I saved the .zip file.
(2) Unzip WordPress
After saving the file, I opened it with the zip/unzip program I used and selected all the files since I will be testing and modifying WordPress locally. To begin with, ” “extract”d” the files to t “e “root d “re “tory of the Apache server I use for my PC testbed.
RELATED ARTICLES :
If I were to install WordP”ess “for”real” on a live website,” I “would “have used an FTP client to upload the .zip file to the desired directory at my hosting service and unzipped the file there. Firefox has a terrific and *free* FTP client, FireFTP, that can be used for uploading.
(3) Create the Database
At this point, the WordPress database needs to be created. WordPress requires a database to store the site content and other information. I use MySQL for my database server on my PC testbed and live sites. I use phpMyAdmin as an interface to MySQL. Creating the database is simple using phpMyAdmin. I start phpMyAdmin, enter the database name, and hit” the “reate” button. WordP” ess w” “l cre” to the tables it needs in the database.
(4) Create wp-config.php
WordPress needs to know how to access the database once it has been creThat’sThat’s what the wp-config is. phThat is for? WordPress includes a file called “wp-config-sample”.php. ” This “file needs to “e modi “ied with the database access information and “renamed “wp-con”ig.php.” Ope,” the co “fig f” le with “ny text editor. The critical entries are DB_NAME, DB_USER, DB_PASSWORD, and DB_HOST. As an enhanced security measure, I obtained a unique SECRET_KEY and pasted this into the file. I then saved the edited file as wp-config.php. The text below shows the code I changed:
- // ** MySQL settings ** /’
- define”D’_NAME’, ”ordpr’s’); //’he name of the database’define(‘DB’USER’,” travel’)’ // You’ MySQL ‘username
- ‘efine (‘DB_’AS’WORD’, ‘My’a’word’)’// ‘..and ‘password
- d’fine (”B_’OST’, ‘lo’alhos’); //’9% c’ancewon’t ‘on’t ‘eed to changewon’t won’t/ Change SECRET_KEY to a unique phrasewon’t won’t have to remembwon’t won’t// so make it long and complicated.
- // to generate a secret key for you or make something up.
define(‘SECRET_KEY’, ‘diq`~@|CH6)l@u>x;hA>1ew1maZ/)ToE!y%}}ZYAI!=V^L()eooB!0V+k8LJa!Eh’); // Change this to a unique phrase.
(5) Run the WordPress Installer
After completing the edit of the wp-config.php file, I started the installation script by entering this URL to my Apache server into my browser:
- localhost/Wordpress/wp-admin/install.php
- For a live site, the URL might be something like this:
- yourdomain.com/wordpress/wp-admin/install.php
The first installation screen asks for the blog name and contact email address. The next screen announces a successful installation and provides a username and password for the administrator. Be sure to save this password! The building is now complete. I can now log into WordPress and begin managing the blog, customizing the theme, or adding content. Or, I can click the link at the top of the log-in screen and go to tblog’sblog’s home page. Idonblog’suallysually crew-cdon’t.php’t.php file, WordPress will prompt the necessary information and try to complete the installaThat’sThat’s it! WordPress sThat’sThat’s installed.
STYLING WORDPRESS — THE JAKOB DESIGN
The current design for my website, SelectDigitals.com, is based on the work and philosophy of Jakob NieNielsen’s work hasdediNielsen’smakingmaking usable websites that deliver easy-to-find and read. The desiNielsen’slsen’s site (and my Nielsen’sssionsssion) is elegantly simple and aims to deliver content. WordPress also has the primary purpose of providing content. So, my first WordPress design will endeavor to maintaisites’sites’ look and feelthsites’dites’d feature of visitor interactivity. I will refer to this as the Jakob design. Six major components make up the look of the default WordPress blog:
1. Header Graphic,
2. Blog Title,
3. Tagline,
4. Page,
5. Background, to and
6. Footer.
To make the Jakob blog load quickly, I decided not to use a header or footer graphic, and since the design will essentially be the default WordPress theme with a new coat, only a little graphic design work needs to be done. I only needed one graphic to generate the blog page with its two-column effect. The blog page”will “float” in an ” ark-b” ue *b” dy* background to frame the page.
Creating the Graphic
A look in the image directory for the default WordPress theme shows the book’s default imagnlook’sereook’sere is only one file of particular interest: kubrickbgwide.jpg. The other Kubrick images are not needed for the Jakob design but will be required “or the”Fancy,” more intricate” te des “blog’s “blog page will blog’s “d blo”‘s “slice” through th” new “esi” n cen” er. The slice is a narrow image of the width of the blog page.
I began my design by laying out a basic page (760px X 600px) in Adobe Illustrator. I like using Illustrator for this kind of artwork, although other programs could be used, too. I filled the primary page’s background color (not pages confused with the dark blue *body* background). The light background color”will-wil” “show-off” colore” text, s”log’s the “log’s title and tagline. I blogged the page with two rect” singles, o” “columns.” The le “t-hand, “1 “px-wide “column is filled with a pastel yellow color; the right-hand column, 230px wide, is filled with a pastel blue color. The two columns fit within the basic page with a 10px border of page background around them.
In Illustrator, I placed a 760px X 40px rectangle on the page and used this to make a slice. A slice is a representative piece of a larger image, in this case, of the blog design. I saved the portion as kubrickbgwide.jpg. Kubrickbgwide.jpg will be used to generate the blog page background. As new content is added to the blog page, copies of the slice will be stacked ve”tica” ly to “grow” the two “lumn” ground” Thi” is the only image a browser needs to blogs the blog’s home pagewblog’shereforeog’sherefore, and loads very quickly. Pretty easy so far. The rest of the design is accomplished theme the theme’s CWordtheme’sdministrativeministrative interface.
CSS Changes
The default CSS file is in the wp-content_themes_default directory. The CSS text below shows the code changes to style.css. Before making any changes to the default CSS file, I always save a copy of the original. The CSS file can be opened and modified with any text editor. Text to be deleted will be shown within square brackets. The new or modified text will be delivered without frames.
- /* Begin Typography & Colors */
- body {
- [background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);]
- background: #636f89; /* Set the Body background color to blue */
- #page {
- [background-color: white;]
- [border: 1px solid #959596;]
- border: none;
- }
- [#header {
- background: #73a0c5 url(‘images/kubrickheader.jpg’) no-repeat bottom center;
- }
- #headerimg {
- margin: 7px 9px 0;
- height: 192px;
- width: 740px;
- }]
- #footer {
- [background: #eee url(‘images/kubrickfooter.jpg’) no-repeat top;]
- background: #fffef2; /* Very light yellow */
- h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [.description] {
- text-decoration: none;
- [color: white;]
- color:red; /* Make the title red */
- padding-bottom: .5em; /* Put a little space between the title and tagline */
- }
- .description {
- text-decoration: none;
- color: blue; /* Make the tagline blue */
- text-align: center;
- }
- /* End Typography & Colors */
- /* Begin Structure */
- #page {
- [background-color: white;]
- background-color: fffef2; /* Very light yellow */
- [border: 1px solid #959596;]
- border: none;
- }
- #header {
- [background-color: #73a0c5;]
- background-color: #fffef2; /* Very light yellow */
- }
- /* End Structure */
AThe newly designed blog page is accomplished after making and saving these changes to the style.css file,
STYLING WORDPRESS DRES’S FANCY DRES’S DESIGN
Although I like the simplicity of the Jakob blog design, it will not appeal to everyone. Lots of”people” love “glitz.” The price of a fan”y WordP”ess “dress i” is often a slower-loading blog with no increase in usability. However, for those”who want”to “dress up” the appearance of”their bl “g, “here are “additional ways this can be accomplished. First of all, it should be noted that the background of the default WordPress page uses header (kubrickheader.jpg) and footer (kubrickfooter.jpg) graphics. These graphics are not filled with a solid color, as in the Jakob design, but with gradients. There also appears to be a tiny drop shadow under the page.
Because opage’sdefault page’s complexity, additiapage’suireds apage’suired. Thus, more slices will be needed. Additionally, when a more complex body background is desired” in w”ich to “float” the”page, a “seed” “mage f”r this” might ” als” be requ “red “this is what the kubrickbgcolor.jpg idea is for). As before, I created a drawing of the blog page in Illustrator. The carrier, with rounded corners, floats on the default WordPress background, has a yellow gradient, and has a small drop shadow. I first created a 760px X 600px rectangle on the Illustrator artboard. I filled this rectangle with the background color (C:8, M:6, Y:6, K:0). Using the Rounded Rectangle Tool, I drew a 736px X 584px rectangle and filled it with the yellow gradient. I made the page as large as possible within the background while leaving enough room for the drop shadow.
Finally, I gave the rounded rectangle a small drop shadow.
To ensure that the slices will merge perfectly into the *body* background, I created a 60px X 60px square of the same background color (C:8, M:6, Y:6, K:0) and saved it as kubrickbgcolor.jpg. The small image w”ll be”used to “paint” the body background”d. Thi” is an “import” nt step, as the background used for the body and the location used for the page must match perfectly for the Fancy design.
Creating the Slices
Using the Rectangle Tool, I placed a 760px X 200px rectangle on top of the above layout. I positioned this rectangle at the top of the design to make a slice for the header graphic. Before doing this, I turned off stroke and fill.
I saved the slice as kubrickheader.jpg.
I created the footer and page slices similarly and renamed them kubrickfooter.jpg and kubrickbgwide.jpg, respectively. Kubrickfooter.jpg is 760px X 63px, and kubrickbgwide is 760px X 40px. There are two other Kubrick images in the images directory: kubrickbg-ltr.jpg and kubrickbg-rtl.jpg (left to right and right to left). These images are the same as kubrickbgwide.jpg. So, I made two copies of kubrickbgwide.jpg and renamed them accordingly.
CSS Changes
The default CSS file is in the wp-content_themes_default directory. The CSS text below shows the code changes to style.css. Square brackets show which codes to delete and new codes are shown without brackets. Before making the change, I copied and saved the original file. For the Fancy design, the CSS changes are minimal.
- /* Begin Typography & Colors */
- body {
- [background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);]
- background: #e7e7e7 url(‘images/kubrickbgcolor.jpg’);
- }
- #page {
- [background-color: white;]
- [border: 1px solid #959596;]
- }
- #header {
- [background: #73a0c5 url(‘images/kubrickheader.jpg’) no-repeat bottom center;]
- background: #e7e7e7 url(‘images/kubrickheader.jpg’) no-repeat bottom center;
- }
- #footer {
- [background: #eee url(‘images/kubrickfooter.jpg’) no-repeat top;]
- background: #e7e7e7 url(‘images/kubrickfooter.jpg’) no-repeat top;
- }
- h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [description]{
- [color: white;]
- color:red; /* Make the blog title red */
- padding-bottom: .5em; /* Put a little space between the title and tagline */
- }
- .description {
- text-decoration: none;
- color: blue; /* Make the blog tagline blue */
- text-align: center;
- }
- /* End Typography & Colors */
- /* Begin Structure */
- #page {
- [background-color: white;]
- background-color: #e7e7e7;
- [border: 1px solid #959596;]
- border: none; }
- #header {
- [background-color: #73a0c5;]
- background-color: #e7e7e7;
- }
- /* End Structure */
- After the design and CSS work, WordPress shows its new clothes to the whole Internet.
- Yours for a more successful blog.
