WordPress 2.5 Installation and Styling Tips Designing Your Website translation jobs
Home More Articles Join as a Member! Post Your Job - Free! All Translation Agencies
Advertisements

WordPress 2.5 Installation and Styling Tips



Become a member of TranslationDirectory.com at just $12 per month (paid per year)





It's soon going to be time to redesign my web site, http://www.selectdigitals.com, for the Web 2.0 Age. I have seriously looked at two platforms with which to accomplish this, including Drupal (http://www.drupal.org) and Joomla (http://joomla.org/).

Drupal and Joomla offer comprehensive packages that, in the case of Drupal, includes a blog and forum as core modules. Theming these platforms can be accomplished through both 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 a daunting task.

Royce Tivel photo After studying the two platforms, including using them both on my test bed platform and on the Internet, I decided to take a 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.

In this article, I will describe the installation process for WordPress. I will then show how to customize the default theme. This article was originally written for WordPress 2.5 but has been updated to be a useful guide for installing and theming even the latest WordPress version.


Install WordPress in Five Easy Steps

(1) Download WordPress

Download Worpress The first installation step is to
Download WordPress. I created a directory on my PC called "wordpress" in which to collect the files and images I will use for my WordPress installation and customization. Once the download competed, I saved the .zip file.


Saving the Download

(2) Unzip WordPress

After saving the file, I opened it with the zip/unzip program I use, WinZip, and selected all of the files.

Unzip the Download

Since I will be testing and modifying Wordpress locally to begin with, I "Extracted" the files to the root directory of the Apache server I use for my PC test bed.

Extract the Files

If I were going to install WordPress "for real" on a live web site, I would have used an FTP client to upload the .zip file to the desired directory at my hosting service and unziped the file there. Firefox has a terrific and *free* FTP client, FireFTP, that can be used for the upload.

(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 both on my PC test bed and on my live sites. I use phpMyAdmin as an interface to MySQL.

Creating the database is really simple using phpMyAdmin. I simply start phpMyAdmin, enter the database name, and hit the "Create" button. WordPress will create the tables it needs in the database.

Wordpress Directory

(4) Create wp-config.php

WordPress needs to know how to access the database once it has been created. That's what the wp-config.php file is for. As shown in the image below, WordPress includes a file called "wp-config-sample.php." This file needs to be modified with the database access information and renamed to "wp-config.php."

Create Database

Open the config file with any text editor and modify the highlighted text. The critical entries are the 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

Update 2009: there are more secret keys in later WordPress versions; this link will generate all keys that are needed.

<?php
// ** MySQL settings ** //
define('DB_NAME', 'wordpress'); // The name of the database
define('DB_USER', 'rtivel'); // Your MySQL username
define('DB_PASSWORD', 'MyPassword'); // ...and password
define('DB_HOST', 'localhost'); // 99% chance you won't need to change this value
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');

// Change SECRET_KEY to a unique phrase. You won't have to remember it later,
// so make it long and complicated. You can visit http://api.wordpress.org/secret-key/1.0/
// to get a secret key generated for you, or just 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.

// You can have multiple installations in one database if you give each a unique prefix
$table_prefix = 'wp_'; // Only numbers, letters, and underscores please!

// Change this to localize WordPress. A corresponding MO file for the
// chosen language must be installed to wp-content/languages.
// For example, install de.mo to wp-content/languages and set WPLANG to 'de'
// to enable German language support.
define ('WPLANG', '');

/* That's all, stop editing! Happy blogging. */

define('ABSPATH', dirname(__FILE__).'/');
require_once(ABSPATH.'wp-settings.php');
?>

(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:

http://www.yourdomain.com/wordpress/wp-admin/install.php


The first installation screen asks for the blog name and contact email address.

Blog Title and Email

The next screen announces a successful installation and provides a username and password for the administrator. Be sure to save this password!

Username and Password

The installation is now complete. I can now log into Wordpress and begin managing the blog, customizing the theme, or adding content.

Login Screen

Or, I can click the link at the top of the log in screen and Back to Select Digitalsgo to the blog's home page.

Default Home Page

"Automatic" WordPress Installation

If you don't manually create a wp-config.php file, WordPress will prompt for the information it needs and try to complete the installation, as shown in the following screens:

No wp-config

Required Database Information

Database Setup Information

Run the Install

Blog Title and Email

Username and Password

That's it! WordPress should now be installed.


The Jakob Design

The current design for my personal web site, SelectDigitals.com, is based on work and philosophy of Jakob Nielsen. Nielsen's work has been dedicated to making usable web sites that deliver content that is easy to find and easy to read.

The design of Nielsen's site (and my site, by permission) is elegantly simple and has the primary goal of delivering content. WordPress also has the primary goal of delivering content. So, my first WordPress design will endeavor to maintain the look and feel of our sites with the added feature of visitor interactivity. I will refer to this as the Jakob design.

There are six major components that make up the look of the default WordPress blog:
  •  Header Graphic,
  •  Blog Title,
  •  Tagline,
  •  Page,
  •  Background, and
  •  Footer.
The image below shows these components.

WordPress Design Areas

In order 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, little graphic design work needs to be done. In fact, I only needed to create one graphic to to generate the blog page with it's two column effect. The image below shows the basic page I'll end up with after the redesign is completed. The blog page "floats" in a blue background, indicated by the blue "frame" around the page.

New Page

Creating the Graphic

A look in the image directory for the default WordPress theme shows the default images used for the Kubrick look. For now, there is only one file of particular interest : kubrickwide.jpg. For the first, Jakob design, the other Kubrick images are not needed but will be needed for a "fancy", more complex design.

Default Kubrick Image Directory

The blog's page
will be created from a "slice" through the center of the new design. The slice is a narrow image (40 pixels high) the width of the blog page (760 pixels). There are two columns on our blog. The left-hand column is a yellowish color 510 pixels wide; the right-hand column is a bluish color and is 230 pixels wide. There is a small 10 pixel "bar" at each end of the slice that is filled with the page background color, a very light yellow.

I began my design by laying out the basic page in Adobe Illustrator, as shown below. I like using Illustrator for artwork of this kind, although other programs could be used, too. The "slice" is shown by the dashed lines.

Artboard

The image below shows the slice. The image is not full-sized and has a black border around it so that it will show clearly. Other images in this article will be resized as required and will have a similar black border (stroke) around them.

Page Slice

Renaming and saving the slice
as kubrickwide.jpg has the following results:

Page Slice

As new content is added, copies of the slice will be stacked vertically for the two-column background. Only this one, small slice will need to be downloaded to a browser to generate the blog's home page. The Blog will, therefore, load very quickly.

Pretty easy so far, right? The rest of the design will can be accomplished through the theme's CSS file and/or through the WordPress administrative 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. The yellow highlighted text will be deleted or changed and the added or modified text will be shown with a green background. Before making any changes to the default CSS file, I always make and save a copy of the original. The CSS file can be opened and modified with any text editor.

/* Begin Typography & Colors */

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #d5d6d7 url('images/kubrickbgcolor.jpg');
background: #636f89; /* Set the Body background color to blue */
color: #333;
text-align: center;
}

#page {
background-color: white;
border: 1px solid #959596;
border:none;
text-align: left;
}

#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 */
border: none;
}

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 */
margin: 20px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
border: none;
}

#header {
background-color: #73a0c5;
background-color: #fffef2; /* Very light yellow */
margin: 0 0 0 1px;
padding: 0;
height: 200px;
width: 758px;
}


/* End Structure */


After making and saving these changes to the style.css file, the newly designed blog page, already shown above, is accomplished.

There is one major problem with the Jakob design as it is. For pages other than the home page or where there is no sidebar, the content spills over into the right-hand column, as shown below:

The Jakob single-page problem.

This problem can be solved by creating a new "slice" for pages that do not use a sidebar and then modifying the header.php file to use it. I called the new "slice" singlebgwide.jpg and saved it to the images directory:

New Slice: singlebgwide.jpg color #ffffdd

singlebgwide.gif

header.php Changes


<style type="text/css" media="screen">

<?php
// Checks to see whether it needs a sidebar or not
if ( !empty($withcomments) && !is_single() ) {
if ( !is_single() ) {
?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/singlebgwide.jpg") repeat-y top; border: none; }
<?php } ?>

</style>

Pages without the sidbar now look like this (text has been changed):

singlebgwide.gif

Before leaving the Jakob design,
I want to point out another potential problem with the styling. What happens, if for some reason, your background images do not load? Will your blog still be usable without the theme images?

The image below shows what happens to the Jakob design when the Kubrick and other images do not load:

no-images.jpg

Because of the blue-body background, the text is hard to read. Selecting a more approprate background color would be a good idea. The other designs in this article, as well as the default Kubrick design, work quite well without their images. In fact, for an initial design, working with background colors only and without images might be a good place to start.

Fancy Dress

Although I like the simplicity of the Jakob blog design, it will not appeal to everyone. Lots of people just love "glitz." The price of a fancy WordPress dress is often a slower loading blog with no increase in usability. However, for those who want to "dress up" the appearance of their blog, 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, but with gradients. There also appears to be a very small drop shadow under the page.

Because of the complexity of the default page, additional graphics are required and, thus, additional slices will are needed. Additionally, when a more complex body background is desired in which to "float" the page, a "seed" image for this might also be required (this is what the kubrickbgcolor.jpg image is for).

Fancy Blog Design

As before, I created a drawing of the blog page in Illustrator. The page, 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).

Next, using the Rounded Rectangle Tool, I drew a 736px X 584px rectangle and filled it with the yellow gradient. Essentially, 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.

Blog Page with Gradient

Kubrickbgcolor In order to insure 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 image will be used to "paint" the body background. This is an important step as the background used for the body and the background used for the page must match perfectly for this design.

Creating the Slices

Disable Stroke and Fill Using the Rectangle Tool, I placed a 760px X 200px rectangle on top of the layout described above. I positioned this rectangle at the top of the layout and used it to make a slice for the header graphic. Before doing this, I disabled stroke and fill.

Create Header 1

Create Header 2

Make Slice

I saved the slice as kubrickheader.jpg.

I created the footer and page slices in a similar fashion and renamed them as kubrickfooter.jpg and kubrickbgwide.jpg, respectively. The three images are shown below (resized to fit the page).

kubrickheader

kubrickbgwide

kubrickfooter

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, make two copies of kubrickbgwide.jpg and rename 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. The yellow highlighted text will be deleted or changed and the added or modified text will be shown with a green background. Before making any changes to the default CSS file, I always make and save a copy of the original. The CSS file can be opened and modified with any text editor. For the Fancy design, the CSS changes are minimal.

/* Begin Typography & Colors */

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #d5d6d7 url('images/kubrickbgcolor.jpg');
background: #e7e7e7 url('images/kubrickbgcolor.jpg');
color: #333;
text-align: center;
}

#page {
background-color: white;
border: 1px solid #959596;
border:none;
text-align: left;
}

#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;
border: none;
}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
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;
margin: 20px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
border: none;
}

#header {
background-color: #73a0c5;
background-color: #e7e7e7;
margin: 0 0 0 1px;
padding: 0;
height: 200px;
width: 758px;
}


/* End Structure */


After the design and CSS work, the page displays as shown below.

Fancy Blog

Update 2008: WordPress Comes To Select Digitals

Select Digitals has entered the Web 2.0 Age with a new WordPress Blog. I installed the latest version (2.65) of WordPress as described in this tutorial. I then modified the theme. Visit the Blog to learn more about the installation and how I themed the site. Here is what the site looked like when first installed and themed:

WordPress at Select Digitals

Update 2009: Upgrade to Version 2.7.X

Blog.selectdigitals.com is now running WordPress version 2.7.X Visit the site for detailed information about how it's present theme styling was achieved. The blog has many articles, tips, and tutorials that can help you style and manage your own WordPress blog.

Yours for a more successful blog, Royce Tivel




Published - March 2009









Submit your article!

Read more articles - free!

Read sense of life articles!

E-mail this article to your colleague!

Need more translation jobs? Click here!

Translation agencies are welcome to register here - Free!

Freelance translators are welcome to register here - Free!









Free Newsletter

Subscribe to our free newsletter to receive news from us:

 
Menu
Recommend This Article
Read More Articles
Search Article Index
Read Sense of Life Articles
Submit Your Article
Obtain Translation Jobs
Visit Language Job Board
Post Your Translation Job!
Register Translation Agency
Submit Your Resume
Find Freelance Translators
Buy Database of Translators
Buy Database of Agencies
Obtain Blacklisted Agencies
Advertise Here
Use Free Translators
Use Free Dictionaries
Use Free Glossaries
Use Free Software
Vote in Polls for Translators
Read Testimonials
Read More Testimonials
Read Even More Testimonials
Read Yet More Testimonials
And More Testimonials!
Admire God's Creations

christianity portal
translation jobs


 

 
Copyright © 2003-2024 by TranslationDirectory.com
Legal Disclaimer
Site Map