How to Install and Style WordPress 2.5

It is quickly going to be time to redecorate my website for the “net 2.0 Age.” I have severely looked at two platforms, Drupal and Joomla, with which to accomplish this.

WordPress

Drupal and Joomla offer complete programs that, inside the case of Drupal, consists of a weblog and forum as middle modules. Theming these systems can be finished thru both CSS (Cascading Style Sheets) and Hypertext Preprocessor (Private Domestic Web page or Php: Personal home page) code modifications. But, those systems are complicated and getting to know sufficient to put in, manipulate, and customize these platforms can be a frightening assignment.

Read More Articles :

After studying the two systems, inclusive of using them each on my take a look at bed platform and at the Internet, I decided to test WordPress as a probable option to my future web desires. I was amazed to find out that the trendy model of WordPress is straightforward to put in, easy to apply, and easy to subject matter. In this article, I can describe the way to set up and customize WordPress 2.5.

install WORDPRESS IN Five clean STEPS

Style

(1) Download WordPress

The primary installation step is to Download WordPress from. I created a directory on my Computer known as “WordPress” wherein to gather the documents and pix I can use for my WordPress installation and customization. As soon as the Download completed, I saved the the.Zip report.

(2) Unzip WordPress

After saving the document, I opened it with the zip/unzip software I take advantage of and decided on all the documents. For the reason that I could be testing and modifying WordPress locally to start with, I “extracted” the files to the foundation listing of the Apache server I use for my Computer test mattress.

If I had been going to put in WordPress “for real” on a live internet web page, I might have used an FTP patron to upload the the.Zip file to the favored directory at my website hosting carrier and unzipped the record there. Firefox has a high-quality and *loose* FTP customer, FireFTP, that can be used for the add.

(3) Create the Database

Install

At this factor, the WordPress database needs to be created. WordPress requires a database to save the website content material and different statistics. I exploit MySQL for my database server both on my Computer take a look at the mattress and on my stay websites. I take advantage of phpMyAdmin as an interface to MySQL.

Growing the database is clearly simple the usage of phpMyAdmin. I simply begin phpMyAdmin, enter the database name, and hit the “Create” button. WordPress will create the tables it needs inside the database.

(4) Create wp-config.Hypertext Preprocessor Install  Style  WordPress

WordPress needs to understand a way to get right of entry to the database As soon as it’s been created. That is what the wp-config.Personal home page report is for. WordPress includes a report called “wp-config-sample.Personal home page.” This file desires to be modified with the database get entry to information and renamed to “wp-config.Personal home page.”

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

As a stronger safety measure, I acquired a completely unique SECRET_KEY and pasted this into the report. I then stored the edited report as wp-config.Personal home page. The text beneath shows the code I changed:

// ** MySQL settings ** //

define(‘DB_NAME’, ‘WordPress’); // The name of the database

define(‘DB_USER’, ‘travel’); // Your MySQL username

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

define(‘DB_HOST’, ‘localhost’); // 99% risk you might not need to change this fee

// alternate SECRET_KEY to a unique word. You might not recollect it later,

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

// to get a secret key generated for you, or simply make something up.

(5) Run the WordPress Installer

After finishing the edit of the wp-config.Personal home page report, I started out the setup script with the aid of entering this URL to my Apache server into my browser:

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

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

yourdomain.Com/wordpress/wp-admin/install.Php

The first setup screen asks for the blog name and gets in touch with electronic mail cope with.

The next display screen announces aa success set up and presents a username and password for the administrator. Be sure to save this password!

The setup is now complete. I’m able to now log into WordPress and begin managing the blog, customizing the theme, or including content material.

Or, I will click the link on the pinnacle of the log-in display screen and go to the weblog’s Home Page.

If you don’t manually create a wp-config.Hypertext Preprocessor record, WordPress will spark off for the data it desires and attempts to finish the setup.

That’s it! WordPress ought to now be set up.

STYLING WORDPRESS — THE JAKOB Layout

The cutting-edge Layout for my Private internet web page, SelectDigitals.Com, is based totally on paintings and philosophy of Jakob Nielsen,.Nielsen’s work has been devoted to creating usable net web sites that supply content that is easy to locate and smooth to examine.

The Layout of Nielsen’s website online (and my website, by means of permission) is elegantly easy and has the primary intention of turning in content. WordPress also has the primary goal of delivering content. So, my first WordPress Design will undertake to maintain the appearance and sense of our websites with the added feature of vacationer interactivity. I’m able to refer to this because of the Jakob Layout.

There are six essential additives that make up the look of the default WordPress blog:

1. Header Photo,

2. blog Title,

3. The tagline,

4. Page,

5. Historical past, to and

6. Footer.

So as to make the Jakob weblog load quick, I determined no longer to apply a header or footer Picture; and for the reason that Layout will essentially be the default WordPress subject matter with a brand new coat, only a bit Photograph Design paintings needs to be performed. In reality, I best had to create one Photo generate the weblog Page with its two column effect. The weblog Web page will “go with the flow” focused in a darkish-blue *frame* Historical past on being able to serve to border the Page.

Creating the Photo

A look inside the photo directory for the default WordPress subject matter shows the default photos used for the Kubrick appearance. For now, there is handiest one record of a particular hobby: kubrickbgwide.Jpg. For the Jakob Design, the other Kubrick pix are not needed however will be needed for the “Fancy”, more complex Design.

The weblog’s Web page will be comprised of a “slice” through the middle of the brand new Layout. The slice is a narrow picture the width of the blog Web page.

I began my Design with the aid of laying out a simple Web page in Adobe Illustrator. I like using Illustrator for the artwork of this type, even though other programs could be used, too.

I filled the primary Page with the Page’s Heritage color (no longer to be harassed with the dark blue *body* Heritage). The light Background color will “show-off” colored textual content, together with the weblog’s Identify and tagline.

I overlayed the Web page with two rectangles, or “columns.” The left-hand, 510px-huge column is packed with a pastel yellow color; the right-hand column, 230px wide, is full of a pastel blue coloration. the 2 columns match inside the basic Page with a 10px border of Web page Background round them.

In Illustrator, I then placed a 760px X 40px rectangle on the Web page and used this to make a slice. A slice is not anything more that a consultant piece of a bigger photograph, in this example, of the weblog Layout. I stored the slice as kubrickbgwide.Jpg. Kubrickbgwide.Jpg can be used to generate the blog-Web page Background. As a new content material is brought to the weblog Web page, copies of the slice might be stacked vertically to “develop” the two-column Heritage. That is the best picture wished by using a browser to generate the blog’s Domestic Web page. The blog will, consequently, load very quickly.

Pretty easy thus far, proper? The relaxation of the Design is achieved through the theme’s CSS record and/or through the WordPress administrative interface.

CSS Adjustments

The default CSS file is in the wp-content_themes_default directory. The CSS textual content beneath shows the code Modifications to Style.Css. Before making any Adjustments to the default CSS file, I usually make and keep a replica of the original. The CSS record can be opened and modified with any text editor. text to be deleted could be shown within rectangular brackets. New or modified text can be shown with out brackets.

/* Start Typography & Shades */

 

 

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;]

Historical past: #fffef2; /* Very light yellow */

}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [.Description] {

text-ornament: none;

[color: white;]

colour:red; /* Make the Identify pink */

padding-bottom: .5em; /* Put a bit space among the Name and tagline */

}

.Description {

textual content-ornament: none;

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

textual content-align: center;

}

/* Give up Typography & Shades */

/* Start Structure */

#Page {

[background-color: white;]

Historical past-colour: fffef2; /* Very mild yellow */

[border: 1px solid #959596;]

border: none;

}

#header {

[background-color: #73a0c5;]

Historical past-color: #fffef2; /* Very mild yellow */

}

/* Give up Structure */

After making and saving these Changes to the Fashion.Css record, the newly designed blog Web page is carried out.

STYLING WORDPRESS — The flowery Dress Design

even though I like the simplicity of the Jakob weblog Layout, it’s going to no longer appeal to every person. Lots of people simply love “glitz.” The charge of an elaborate WordPress Get dressed is often a slower loading blog without an increase in usability. But, for folks that need to “Dress up” the advent of their weblog, right here are additional approaches this will be completed.

To begin with, it should be noted that the Heritage of the default WordPress Page uses header (kubrickheader.Jpg) and footer (kubrickfooter.Jpg) pix. these pictures are not packed with a stable coloration, as in the Jakob Design, however with gradients. There also seems to be a completely small drop shadow beneath the Page.

Because of the complexity of the default Web page, additional pix are required and, consequently, more slices may be needed. Additionally, while a greater complex body Historical past is desired in which to “waft” the 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 weblog Page in Illustrator. The Page, with rounded corners, floats on the default WordPress Heritage, 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 Heritage color (C:8, M:6, Y:6, Ok: ensure zero).

Subsequent, the use of the Rounded Rectangle Device, I drew a 736px X 584px rectangle and crammed it with the yellow gradient. basically, I made the Page as big as possible in the History while leaving sufficient room for the drop shadow.

Sooner or later, I gave the rounded rectangle a small drop shadow.

To be a ensure that the slices will merge perfectly into the *body* Background, I created a 60px X 60px rectangular of the identical Background colour (C:8, M:6, Y:6, Ok:0) and saved it as kubrickbgcolor.Jpg. The small photograph will be used to “paint” the body History. That is an vital step because the History used for the body and the History used for the Page ought to suit flawlessly for The flowery Design.

Growing the Slices

the use of the Rectangle Device, I positioned a 760px X 200px rectangle on pinnacle of the layout described above. I located this rectangle on the pinnacle of the format and used it to make a slice for the header Photo. Earlier than 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 fashion 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 snap shots inside the images directory: kubrickbg-ltr.Jpg and kubrickbg-rtl.Jpg (left to proper, and proper to left). those images are the same as kubrickbgwide.Jpg. So, I made two copies of kubrickbgwide.Jpg and renamed them accordingly.

CSS Modifications

The default CSS file is in the wp-content_themes_default directory. The CSS text beneath indicates the code Modifications to Style.Css. rectangular brackets show which code to delete and new code is shown without brackets. Before making the change, I copied and saved the unique document. For The flowery Layout, the CSS Changes are minimum.

/* Begin Typography & Colors */

frame {

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

History: #e7e7e7 url(‘photographs/kubrickbgcolor.Jpg’);

}

#Web page {

[background-color: white;]

[border: 1px solid #959596;]

}

#header {

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

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

}

#footer {

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

Background: #e7e7e7 url(‘photos/kubrickfooter.Jpg’) no-repeat pinnacle;

}

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

[color: white;]

coloration:pink; /* Make the weblog Identify red */

padding-bottom: .5em; /* Placed a bit area between the Title and tagline */

}

.Description {

textual content-ornament: none;

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

text-align: middle;

}

/* End Typography & Shades */

/* Start Structure */

#Page {

[background-color: white;]

History-color: #e7e7e7;

[border: 1px solid #959596;]

border: none; }

#header {

[background-color: #73a0c5;]

Historical past-coloration: #e7e7e7;

}

/* Stop Structure */

After the Layout and CSS paintings, the WordPress indicates It’s new garments to the whole Internet.

Yours for a extra successful blog,