How to Install and Style WordPress 2.5


It’s quickly going to be time to redesign my net site for the “Web 2.Zero Age.” I even have significantly looked at systems, Drupal and Joomla, with which to accomplish this.

Drupal and Joomla offer comprehensive programs that, in the case of Drupal, includes a blog and discussion board as core modules. Theming these structures can be accomplished through each CSS (Cascading Style Sheets) and PHP (Personal Home Page or PHP: personal home page) code modifications. However, these platforms are complex and gaining knowledge of enough to put in, manage, and personalize these systems may be a daunting challenge.

After analyzing the two structures, along with using them both on my test bed platform and on the Internet, I decided to check WordPress as a possible technique to my future Web wishes. I become amazed to find out that the latest version of WordPress is simple to install, smooth to use, and easy to theme. In this text, I will describe a way to set up and personalize WordPress 2.Five.

INSTALL WORDPRESS IN FIVE EASY STEPS

(1) Download WordPress

The first installation step is to Download WordPress from http://wordpress.Org/download/. I created a directory on my PC called “WordPress” wherein to collect the documents and pictures I will use for my WordPress set up and customization. Once the down load competed, I saved the the.Zip document. WordPress

(2) Unzip WordPress

After saving the document, I opened it with the zip/unzip program I use and decided on all the documents. Since I will be trying out and editing WordPress domestically first of all, I “extracted” the documents to the basis listing of the Apache server I use for my PC test bed.

If I had been going to put in WordPress “for actual” on a live net website online, I might have used an FTP consumer to upload the .Zip document to the preferred directory at my web hosting provider and unzipped the file there. Firefox has a splendid and *loose* FTP client, FireFTP, that can be used for the upload.

(three) Create the Database

At this factor, the WordPress database desires to be created. WordPress requires a database to keep the website content and different records. I use MySQL for my database server both on my PC test bed and on my stay sites. I use phpMyAdmin as an interface to MySQL.

Creating the database is surely easy using phpMyAdmin. I virtually begin phpMyAdmin, enter the database call, and hit the “Create” button. WordPress will create the tables it desires inside the database.

(4) Create wp-config.Hypertext Preprocessor

WordPress needs to recognise the way to get entry to the database as soon as it has been created. That’s what the wp-config.Hypertext Preprocessor record is for. WordPress includes a document referred to as “wp-config-sample.Hypertext Preprocessor.” This report wishes to be modified with the database get right of entry to information and renamed to “wp-config.Personal home page.”

Open the config file with any text editor. The important entries are DB_NAME, DB_USER, DB_PASSWORD, and DB_HOST.

As an superior protection degree, I received a completely unique SECRET_KEY and pasted this into the report. I then saved the edited document as wp-config.Personal home page. The textual content under shows the code I modified:

// ** MySQL settings ** //

define(‘DB_NAME’, ‘wordpress’); // The call of the database

outline(‘DB_USER’, ‘rtivel’); // Your MySQL username

define(‘DB_PASSWORD’, ‘MyPassword’); // …And password

define(‘DB_HOST’, ‘localhost’); // ninety nine% chance you won’t need to exchange this fee

// Change SECRET_KEY to a unique phrase. You won’t must do not forget it later,

// so make it lengthy and complex. You can visit http://api.Wordpress.Org/secret-key/1.0/

// to get a mystery key generated for you, or just make some thing up.

OutlineCH6)[email protected]>x;hA>1ew1maZ/)ToE!Y%ZYAI!=V^L()eooB!0V+k8LJa!Eh’); // Change this to a unique phrase.

(five) Run the WordPress Installer

After completing the edit of the wp-config.Php file, I commenced the setup script by using coming into this URL to my Apache server into my browser:

localhost/Wordpress/wp-admin/install.Hypertext Preprocessor

For a live website online, the URL might be something like this:

yourdomain.Com/wordpress/wp-admin/install.Hypertext Preprocessor

The first set up display screen asks for the blog call and contact e-mail address.

The next display proclaims a hit set up and provides a username and password for the administrator. Be positive to keep this password!

The set up is now whole. I can now log into WordPress and start coping with the weblog, customizing the subject, or including content material.

Or, I can click the link on the pinnacle of the log-in display screen and visit the weblog’s home web page.

If you don’t manually create a wp-config.Hypertext Preprocessor record, WordPress will prompt for the data it needs and try to complete the installation.

That’s it! WordPress must now be established.

STYLING WORDPRESS — THE JAKOB DESIGN

The present day layout for my non-public web page, SelectDigitals.Com, is based on work and philosophy of Jakob Nielsen, http://www.Useit.Com/. Nielsen’s work has been devoted to creating usable internet web sites that supply content that is straightforward to discover and smooth to examine.

The design of Nielsen’s web site (and my web page, by way of permission) is elegantly simple and has the primary purpose of turning in content. WordPress also has the primary intention of delivering content. So, my first WordPress design will enterprise to hold the look and experience of our web sites with the introduced function of visitor interactivity. I will seek advice from this as the Jakob design.

There are six foremost additives that make up the appearance of the default WordPress weblog:

1. Header Graphic,

2. Blog Title,

3. The tagline,

four. Page,

5. Background, interest: and

6. Footer.

In order to make the Jakob blog load quick, I determined now not to use a header or footer image; and since the design will essentially be the default WordPress theme with a brand new coat, simplest a bit photo design paintings needs to be completed. In reality, I best needed to create one picture to generate the weblog page with it is two column impact. The weblog page will “flow” targeted in a dark-blue *body* historical past so one can serve to border the page.

Creating the Graphic

A look at the photo listing for the default WordPress theme indicates the default photographs used for the Kubrick look. For now, there may be a most effective one report of pinterest:kubrickbgwide.Jpg. For the Jakob design, the alternative Kubrick pics aren’t needed but could be wanted for the “Fancy”, greater complex design.

The blog’s web page may be made out of a “slice” through the middle of the brand new layout. The slice is a slender photo the width of the blog page.

I started my layout by way of laying out a basic page (760px X 600px) in Adobe Illustrator. I like the use of Illustrator for paintings of this type, although other programs could be used, too.

I crammed the fundamental web page with the web page’s history coloration (now not to be stressed with the darkish blue *body* background). The light background shade will will “show-off” coloured textual content, including the weblog’s title and tagline.

I overlayed the page with rectangles, or “columns.” The left-hand, 510px-extensive column is full of a pastel yellow color; the right-hand column, 230px extensive, is packed with a pastel blue shade. The two columns in shape in the simple web page with a 10px border of web page history round them.

In Illustrator, I then placed a 760px X 40px rectangle at the web page and used this to make a slice. A slice is nothing greater that a representative piece of a larger image, in this case, of the weblog layout. I saved the slice as kubrickbgwide.Jpg. Kubrickbgwide.Jpg could be used to generate the blog-web page historical past. As new content is brought to the weblog web page, copies of the slice could be stacked vertically to “develop” the 2-column heritage. This is the simplest image wished by using a browser to generate the blog’s domestic web page. The Blog will, therefore, load in no time.

Pretty clean to this point, proper? The relaxation of the layout is accomplished through the theme’s CSS report and/or thru the WordPress administrative interface.

CSS Changes

The default CSS document is within the wp-content_themes_default directory. The CSS textual content below indicates the code changes to style.Css. Before making any modifications to the default CSS file, I continually make and keep a duplicate of the original. The CSS document can be opened and modified with any text editor. Text to be deleted could be proven within rectangular brackets. New or modified text may be shown with out brackets.

/* Begin Typography & Colors */

frame

[background: #d5d6d7 url(‘images/kubrickbgcolor.Jpg’);]

history: #636f89; /* Set the Body history 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-ornament: none;

[color: white;]

colour:purple; /* Make the name crimson */

padding-backside: .5em; /* Put a bit area between the name and tagline */

 

.Description

textual content-decoration: none;

shade: blue; /* Make the tagline blue */

text-align: center;

 

/* End Typography & Colors */

/* Begin Structure */

#web page

[background-color: white;]

historical past-shade: fffef2; /* Very light yellow */

[border: 1px solid #959596;]

border: none; Install

 

#header

[background-color: #73a0c5;]

background-colour: #fffef2; /* Very light yellow */

 

/* End Structure */

After making and saving those changes to the style.Css document, the newly designed weblog web page is done.

STYLING WORDPRESS — THE FANCY DRESS DESIGN

Although I just like the simplicity of the Jakob weblog design, it’ll now not enchantment to every person. Lots of people just love “glitz.” The fee of a fancy WordPress dress is usually a slower loading weblog and not using a growth in usability. However, for individuals who want to “dress up” the advent in their blog, right here are extra methods this may be done.

First of all, it should be cited that the heritage of the default WordPress web page uses header (kubrickheader.Jpg) and footer (kubrickfooter.Jpg) graphics. These photographs aren’t full of a solid coloration, as within the Jakob design, however with gradients. There additionally appears to be a very small drop shadow underneath the page.

Because of the complexity of the default page, additional pictures are required and, consequently, extra slices could be needed. Additionally, when a greater complex body history is favored in which to “go with the flow” the web page, a “seed” picture for this might also be required (this is what the kubrickbgcolor.Jpg photograph is for).

As earlier than, I created a drawing of the blog page in Illustrator. The page, with rounded corners, floats on the default WordPress history, has a yellow gradient, and has a small drop shadow.

I first created a 760px X 600px rectangle on the Illustrator artboard. I crammed this rectangle with the background coloration (C:e right, M:6, Y:6, K:z zero).

Next, the use of the Rounded Rectangle Tool, I drew a 736px X 584px rectangle and stuffed it with the yellow gradient. Essentially, I made the page as huge as possible in the historical past even as leaving sufficient room for the drop shadow.

Finally, I gave the rounded rectangle a small drop shadow.

In order to insure that the slices will merge perfectly into the *frame* history, I created a 60px X 60px square of the identical heritage color (C:e right, M:6, Y:6, K:z zero) and stored it as kubrickbgcolor.Jpg. The small image can be used to “paint” the frame background. This is an essential step as the background used for the frame and the history used for the web page should suit flawlessly for the Fancy design.

Creating the Slices

Using the Rectangle Tool, I located a 760px X 200px rectangle on pinnacle of the layout defined above. I located this rectangle on the top of the format and used it to make a slice for the header picture. Before doing this, I disabled stroke and fill.

I stored the slice as kubrickheader.Jpg.

I created the footer and web page slices in a comparable style and renamed them as kubrickfooter.Jpg and kubrickbgwide.Jpg, respectively. Kubrickfooter.Jpg is 760px X 63px and kubrickbgwide is 760px X 40px.

There are other Kubrick pics in the photographs directory: kubrickbg-ltr.Jpg and kubrickbg-rtl.Jpg (left to right, and right to left). These pix are similar to kubrickbgwide.Jpg. So, I made two copies of kubrickbgwide.Jpg and renamed them as a consequence.

CSS Changes

The default CSS record is within the wp-content_themes_default listing. The CSS text under suggests the code changes to style.Css. Square brackets display which code to delete and new code is shown without brackets. Before making the exchange, I copied and saved the authentic document. For the Fancy layout, the CSS adjustments are minimum.

/* Begin Typography & Colors */

frame

[background: #d5d6d7 url(‘images/kubrickbgcolor.Jpg’);]

heritage: #e7e7e7 url(‘photos/kubrickbgcolor.Jpg’);

 

#web page

[background-color: white;]

[border: 1px solid #959596;]

 

#header

[background: #73a0c5 url(‘images/kubrickheader.Jpg’) no-repeat bottom center;]

history: #e7e7e7 url(‘pics/kubrickheader.Jpg’) no-repeat bottom center;

 

#footer

[background: #eee url(‘images/kubrickfooter.Jpg’) no-repeat top;]

historical past: #e7e7e7 url(‘pix/kubrickfooter.Jpg’) no-repeat top;

 

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [description]

[color: white;]

colour:crimson; /* Make the weblog title crimson */

padding-bottom: .5em; /* Put a little space between the name and tagline */

 

.Description

textual content-decoration: none;

color: blue; /* Make the weblog tagline blue */

textual content-align: middle;

 

/* End Typography & Colors */

/* Begin Structure */

#page

[background-color: white;]

heritage-coloration: #e7e7e7;

[border: 1px solid #959596;]

border: none;

#header

[background-color: #73a0c5;]

historical past-colour: #e7e7e7;

 

/* End Structure */

After the design and CSS work, the WordPress indicates it is new garments to the entire Internet.

Yours for a more a hit weblog,

Royce Tivel

Previous How to Make Money Online With WordPress and Other Blogging Sites
Next Complete Study Guide for WordPress Website Building