It will soon be time to redesign my website for the “Web 2.0 Age.” I have even researched various structures, such as Drupal and Joomla to accomplish this.
Drupal and Joomla offer complete applications, with a blog and discussion board as middle modules in Drupal. These platforms’ theming may be done through CSS (Cascading Style Sheets) and PHP (Personal Home Page or PHP: personal home page) code adjustments. However, these systems are complex, and mastering sufficient to manage and customize these structures may be daunting.
After analyzing the two systems and using them each on my check mattress platform and the Internet, I decided to look at WordPress as a possible technique for my future Web needs. I was amazed to discover that the modern model of WordPress is straightforward to install, clean to apply, and smooth to use. I will describe how to install and customize WordPress 2 in this article. Five.
INSTALL WORDPRESS IN FIVE EASY STEPS
(1) Download WordPress
The first installation step is to download WordPress from http://wordpress.Org/down load/. I created a directory on my PC known as “WordPress” to accumulate the documents and pictures I will use for my WordPress setup and customization. Once the download was completed, I saved the the.Zip report.
(2) Unzip WordPress
After saving the file, I opened it with the zip/unzip application and decided on all the files. Since I might initially be testing and modifying WordPress locally, I “extracted” the documents to the root directory of the Apache server I use for my PC testbed.
If I were going to install WordPress “for real” on a live website, I could have used an FTP purchaser to upload a the.Zip document to the desired directory at my website hosting service and unzip it there. Firefox has a super and unfastened FTP purchaser, FireFTP, that may be used for the ad.
(3) Create the Database
At this point, the WordPress database wishes to be created. WordPress requires a database to store the website’s online content and facts. I use MySQL for my database server on my PC to view the bed and on my stay sites. I use phpMyAdmin as an interface to MySQL.
Creating the database using phpMyAdmin is simple. I begin phpMyAdmin, enter the database name, and hit the “Create” button. WordPress will create the tables it desires in the database.
(4) Create wp-config.Php
WordPress desires to find a way to access the database once it’s been created. That’s what the wp-config.Php document is for. WordPress consists of a file called “wp-config-sample. Personal home page.” This record wishes to be changed with the database to get admission to statistics and renamed “wp-config.Php.”
Open the config file with any textual content editor. The important entries are DB_NAME, DB_USER, DB_PASSWORD, and DB_HOST.
As a better safety degree, I obtained a unique SECRET_KEY and pasted this into the file. I then saved the edited file as wp-config. Personal home page. The text under shows the code I changed:
// ** MySQL settings ** //
outline(‘DB_NAME’, ‘wordpress’); // The name of the database
define(‘DB_USER’, ‘active’); // Your MySQL username
define(‘DB_PASSWORD’, ‘MyPassword’); // …And Password
outline(‘DB_HOST’, ‘localhost’); // 99% danger you may not need to trade this price
// Change SECRET_KEY to a unique word. You won’t have to recollect it later,
// so make it long and complex. You can go to http://api.Wordpress.Org/secret-key/1.Zero/
// to generate a secret key for you or make something up.
Define(‘SECRET_KEY’, ‘diq`~@ZYAI!=V^L()eooB!0V+k8LJa!Eh’); // Change this to a completely unique word.
(5) Run the WordPress Installer
After finishing the edit of the wp-config.Hypertext Preprocessor report, I began the installation script by way of getting into this URL to my Apache server into my browser:
For a live web page, the URL might be something like this:
yourdomain.Com/wordpress/wp-admin/deploy.Personal home page
The first setup screen asks for the weblog call and contacts the electronic mail address.
The subsequent display announces a successful installation and provides athe administrator with a username and password. Be sure to store this password!
The setup is now complete. I can log into WordPress, manage the blog, customize the subject matter, or include content.
Or, I can click the link at the top of the log-in screen and go to the weblog’s home web page.
Suppose you don’t manually create a wp-config. Personal home page file.WordPress will search for the information it desires and try to finish the setup.
That’s it! WordPress needs to be now set up.
STYLING WORDPRESS — THE JAKOB DESIGN
The modern design for my private net wage, SelectDigitals.Com, is based totally on pthe aintings and philosophy of Jakob Nielsen, http://www.Useit.Com/. Nielsen’s paintings are committed to creating usable websites that deliver content that is easy to discover and read.
The layout of Nielsen’s web page (and my website, by way of permission) is elegantly easy and has the number one aim of delivering content. WordPress also has the number one goal of providing content. So, my first WordPress design will endeavor to preserve our websites’ look and experience with the delivered function of traveler interactivity. I will talk to this about the Jakob design.
Six fundamental components make up the appearance of the default WordPress weblog:
1. Header Graphic,
2. Blog Title,
3. The tagline,
4. Page,
5. Background, and
6. Footer.
T determined not to apply a header or footer image. To make the Jakob weblog load fast, that layout will be the default WordPress subject matter with a brand new coat and a little photograph design work that wishes to be executed. In truth, I had to create one graphic to generate the weblog page with its two-column impact. The blog web page will “float” and focuson a darkish-blue *body* heritage to serve tab order for the page.
Creating the Graphic
A look at the image directory for the default WordPress subject suggests the Kubrick look’s default photos. For now, tthe most effective file of unique interest is kubrickbgwide.Jpg. The opposite Kubrick pics are unnecessary for the Jakob layout but can be wanted for the “Fancy,” a more complicated design.
The weblog’s page could comprise a “slice” through the middle of the brand-new design. The slice is a slim photo tof the width of the blog web page.
I started my design by laying out a primary web page (760px X 600px) in Adobe Illustrator. I like using Illustrator for paintings of this type, although other packages could also be used.
I filled the simple page with the web page’s background coloration (now not to be confused with the dark blue *body* history). The light heritage coloration will “show off” colored textual content, including the weblog’s name and tagline.
I overlayed the web page with rectangles or “columns.” The left-hand, 510px-huge column is filled with a pastel yellow shade; the right-hand column, 230px huge, is filled with a pastel blue shade. The two columns are healthy on the simple web page, with a 10px border around the web page background.
In Illustrator, I placed a 760px X 40px rectangle on the web page and used this to make a slice. A slice is not aore than a consultant piece of a larger photo, in this case, of the weblog layout. I stored the slice as kubrickbgwide.Jpg. Kubrickbgwide.Jpg could be used to generate the blog-web page’s historical past. As the new content material is brought to the weblog web page, copies of the slice might be stacked vertically to “grow” the 2-column background. This is the simplest image a browser needs to generate the weblog’s homepage. The Blog will, consequently, load in no time.
It’s pretty smooth to this point. The rest of the layout is completed tthroughthe subject’s CSS document and the WordPress administrative interface.
CSS Changes
The default CSS document is within the wp-content_themes_default listing. The CSS text suggests code adjustments to fashion.Css. Before modifying the default CSS file, I continually make and store the original duplicate. The CSS report can be opened and changed with any text editor. Text to be deleted will be shown inside square brackets. The new or modified text could be shown without brackets.
/* Begin Typography & Colors */
frame
[background: #d5d6d7 url(‘images/kubrickbgcolor.Jpg’);]
history: #636f89; /* Set the Body history colour to blue */
#page
[background-color: white;]
[border: 1px solid #959596;]
border: none;
[#header
background: #73a0c5 url(‘images/Kubrick headerJpg’) 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;]
coloration:crimson; /* Make the identify pink */
padding-bottom: .5em; /* Put a touch space between the title and tagline */
.Description
text-decoration: none;
coloration: blue; /* Make the tagline blue */
textual content-align: middle;
/* End Typography & Colors */
/* Begin Structure */
#web page
[background-color: white;]
heritage-colour: fffef2; /* Very mild yellow */
[border: 1px solid #959596;]
border: none;
#header
[background-color: #73a0c5;]
heritage-shade: #fffef2; /* Very mild yellow */
/* End Structure */
AThe newly designed blog page is carried out after making and saving these adjustments to the fashion.Css report,
STYLING WORDPRESS — THE FANCY DRES’S DESIGN
Although I like the Jakob weblog design’s simplicity, it’ll not be attractive to each person. Lots of people love “glitz.” A fancy WordPress price gets dressed mostly as a slower-loading blog and does not use an increase in usability. However, for folks needing to “dress up” with the advent of their weblog, here are extra ways this could be achieved.
First, it must be noted that the history of the default WordPress web page uses header (kubrickheader.Jpg) and footer (kubrickfooter.Jpg) graphics. However, these graphics are not filled with a solid color, as inside the Jakob layout, but with gradients. Additionally, a tiny drop shadow appears beneath the web page.
Because the default page is complex, additional photos are required, and more slices can be desired. Additionally, when a more complicated body heritage is favored to “go with the flow” of the web page, a “seed” picture might be required (that is what the kubrickbgcolor.Jpg image is for).
Earlier, I created a drawing of the blog page in Illustrator. The web 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 filled this rectangle with the background color (C:8, M:6, Y:6, K: zero).
Using the Rounded Rectangle Tool, I drew a 736px X 584px rectangle and crammed it with the yellow gradient. E made the web page as large as possible inside the heritage 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 flawlessly into the *body* heritage, I created a 60px X 60px rectangular of the identical historical past shade (C:8, M:6, Y:6, K:0) and saved it as kubrickbgcolor.Jpg. The small photograph may be used to “paint” the body heritage. This is a critical step because the historical past used for the frame and the hast used for the web page fit perfectly into the Fancy layout.
Creating the Slices
Using the Rectangle Tool, I located a 760px X 200px rectangle on top of the above format. I placed this rectangle on top of the format and used it to make a slice for the header picture. Before doing this, I turned off the stroke and filled it out.
I stored the slice as kubrickheader.Jpg.
I created the footer and page slices comparably and renamed them aubrickfooter.jpg and kubrickbgwide.jpg, respectively. Kubrickfooter.Jpg is 760px X 63px, and kubrickbgwide is 760px X 40px.
There are two different Kubrick pix within the photographs directory: kubrickbg-ltr.Jpg and kubrickbg-rtl.Jpg (left to right and right to left). These photos 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 within the wp-content_themes_default directory. The CSS textual content below indicates the code adjustments to style. Square brackets show which codes to delete and new codes are proven without brackets. Before making the trade, I copied and stored the unique report. For the Fancy design, the CSS adjustments are minimal
/* Begin Typography & Colors */
frame
[background: #d5d6d7 url(‘images/kubrickbgcolor.Jpg’);]
background: #e7e7e7 url(‘pictures/kubrickbgcolor.Jpg’);
#page
[background-color: white;]
[border: 1px solid #959596;]
#header
[background: #73a0c5 url(‘images/Kubrick headerJpg’) no-repeat bottom center;]
history: #e7e7e7 url(‘photographs/Kubrick headerJpg’) no-repeat bottom middle;
#footer
[background: #eee url(‘images/kubrickfooter.Jpg’) no-repeat top;]
history: #e7e7e7 url(‘pictures/kubrickfooter.Jpg’) no-repeat pinnacle;
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [description]
[color: white;]
coloration:crimson; /* Make the weblog identify crimson */
padding-bottom: .5em; /* Put a touch space between the identify and tagline */
.Description
textual content-ornament: none;
colour: blue; /* Make the blog tagline blue */
textual content-align: middle;
/* End Typography & Colors */
/* Begin Structure */
#web page
[background-color: white;]
historical past-coloration: #e7e7e7;
[border: 1px solid #959596;]
border: none;
#header
[background-color: #73a0c5;]
history-shade: #e7e7e7;
/* End Structure */
After the layout and CSS paintings, WordPress suggests editing new garments for the complete Internet.
Yours for a more successful blog,
Royce Tivel
