WordPress Theme Development

This article is about developing WordPress Themes. If you wish to learn more about how to install and use Themes, review Using Themes. This topic differs from Using Themes because it discusses the technical aspects of writing code to build your own Themes rather than how to activate Themes or where to obtain new Themes.

Why WordPress Themes

WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to take advantage of in order to instantly change their website look.

You may wish to develop WordPress Themes for your own use, for a client project or to submit to the WordPress Theme Directory. Why else should you build a WordPress Theme?

  • To create a unique look for your WordPress site.
  • To take advantage of templatestemplate tags, and the WordPress Loop to generate different website results and looks.
  • To provide alternative templates for specific site features, such ascategory pages and search result pages.
  • To quickly switch between two site layouts, or to take advantage of aTheme or style switcher to allow site owners to change the look of your site.

A WordPress Theme has many benefits, too.

  • It separates the presentation styles and template files from the system files so the site will upgrade without drastic changes to the visual presentation of the site.
  • It allows for customization of the site functionality unique to that Theme.
  • It allows for quick changes of the visual design and layout of a WordPress site.
  • It removes the need for a typical WordPress site owner to have to learn CSS, HTML, and PHP in order to have a great-looking website.

Why should you build your own WordPress Theme? That’s the real question.

  • It’s an opportunity to learn more about CSS, HTML, and PHP.
  • It’s an opportunity to put your expertise with CSS, HTML, and PHP to work.
  • It’s creative.
  • It’s fun (most of the time).
  • If you release it to the public, you can feel good that you shared and gave something back to the WordPress Community (okay, bragging rights)

Theme Development Standards

WordPress Themes should be coded using the following standards:

Anatomy of a Theme

WordPress Themes live in subdirectories residing in wp-content/themes/. The Theme’s subdirectory holds all of the Theme’s stylesheet files, template files, and optional functions file (functions.php), JavaScript files, and images. For example, a Theme named “test” would reside in the directory wp-content/themes/test/. Avoid using numbers for the theme name, as this prevents it from being displayed in the available themes list.

WordPress includes a default theme in each new installation. Examine the files in the default theme carefully to get a better idea of how to build your own Theme files.

WordPress Themes typically consist of three main types of files, in addition to images and JavaScript files. One is the stylesheet called style.css, which controls the presentation (visual design and layout) of the website pages. The second is the optional functions file (functions.php). The other files are the template files which control the way the site pages generate the information from your WordPress database to be displayed on the site. Let’s look at these individually.

Theme Stylesheet

In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments. The stylesheet must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

The following is an example of the first few lines of the stylesheet, called the stylesheet header, for the Theme “Twenty Ten”:

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team
Version: 1.0 
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:
License URI:

General comments (optional).
*/

The comment header lines in style.css are required for WordPress to be able to identify a Theme and display it in theAdministration Panel under DesignThemes as an available Theme option along with any other installed Themes.

Stylesheet Guidelines

  • Follow CSS coding standards when authoring your CSS.
  • Use valid CSS when possible. As an exception, use vendor-specific prefixes to take advantage of CSS3 features.
  • Minimize CSS hacks. The obvious exception is browsers-specific support, usually versions of IE. If possible, separate CSS hacks into separate sections or separate files.
  • All possible HTML elements should be styled by the Theme, both in post/page content and in comment content.
    • Tables, captions, images, lists, block quotes, et cetera.
  • Adding print-friendly styles is highly recommended.
    • You can include a print stylesheet with media="print" or add in a print media block in your main stylesheet.

Child Themes

The simplest Theme possible is a child theme which includes only a style.css file, plus any images. This is possible because it is a child of another theme which acts as its parent.

For a detailed guide to child themes, see Child Themes or this great tutorial by op111.

Functions File

A theme can optionally use a functions file, which resides in the theme subdirectory and is named functions.php. This file basically acts like a plugin, and if it is present in the theme you are using, it is automatically loaded during WordPress initialization (both for admin pages and external pages). Suggested uses for this file:

  • Define functions used in several template files of your theme.
  • Enable features such as post thumbnails, custom header and background, and navigation menus.
  • Set up an options menu, giving site owners options for colors, styles, and other aspects of your theme.

The default WordPress theme contains a functions.php file that defines many of these features, so you might want to use it as a model. Since functions.php basically functions as a plugin, the Function_Reference list is the best place to go for more information on what you can do with this file.

Template Files

Templates are PHP source files used to generate the pages requested by visitors, and are output as HTML. Let’s look at the various templates that can be defined as part of a Theme.

WordPress allows you to define separate templates for the various aspects of your site. It is not essential, however, to have all these different template files for your site to fully function. Templates are chosen and generated based upon theTemplate Hierarchy, depending upon what templates are available in a particular Theme.

As a Theme developer, you can choose the amount of customization you want to implement using templates. For example, as an extreme case, you can use only one template file, called index.php as the template for all pages generated and displayed by the site. A more common use is to have different template files generate different results, to allow maximum customization.

Template Files List

Here is the list of the Theme files recognized by WordPress. Of course, your Theme can contain any other stylesheets, images, or files. Just keep in mind that the following have special meaning to WordPress — see Template Hierarchy for more information.

style.css
The main stylesheet. This must be included with your Theme, and it must contain the information header for your Theme.
rtl.css
The rtl stylesheet. This will be included automatically if the website direction is RTL. you can generate it using a plugin called the RTLer.
index.php
The main template. If your Theme provides its own templates, index.php must be present.
comments.php
The comments template.
front-page.php
The front page template, it is only used if you use a static front page.
home.php
The home page template, which is the front page by default. If you use a static front page this is the template for the page with the latest posts.
single.php
The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
single-<post-type>.php
The single post template used when a single post from a custom post type is queried. For example, single-books.phpwould be used for displaying single posts from the custom post type booksindex.php is used if the query template for the custom post type is not present.
page.php
The page template. Used when an individual Page is queried.
category.php
The category template. Used when a category is queried.
tag.php
The tag template. Used when a tag is queried.
taxonomy.php
The term template. Used when a term in a custom taxonomy is queried.
author.php
The author template. Used when an author is queried.
date.php
The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.
archive.php
The archive template. Used when a category, author, or date is queried. Note that this template will be overridden bycategory.phpauthor.php, and date.php for their respective query types.
search.php
The search results template. Used when a search is performed.
attachment.php
Attachment template. Used when viewing a single attachment.
image.php
Image attachment template. Used when viewing a single image attachment. If not present, attachment.php will be used.
404.php
The 404 Not Found template. Used when WordPress cannot find a post or page that matches the query.

These files have a special meaning with regard to WordPress because they are used as a replacement for index.php, when available, according to the Template Hierarchy, and when the corresponding Conditional Tag returns true. For example, if only a single post is being displayed, the is_single() function returns ‘true’, and, if there is a single.php file in the active Theme, that template is used to generate the page.

Basic Templates

At the very minimum, a WordPress Theme consists of two files:

  • style.css
  • index.php

Both of these files go into the Theme directory. The index.php template file is very flexible. It can be used to include all references to the header, sidebar, footer, content, categories, archives, search, error, and any other page created in WordPress.

Or, it can be divided into modular template files, each one taking on part of the workload. If you do not provide any other template files, WordPress will use a default version. For example, if you do not have either a comments.php template file, WordPress will automatically use the wp-comments.php template files using Template Hierarchy. (Note: As of version 3.0, the default files aren’t guaranteed to be present or to be the same as they have been. It’s much safer to supply your own template files.)

Typical template files include:

  • comments.php
  • footer.php
  • header.php
  • sidebar.php

Using these template files you can put template tags within the index.php master file to include these other files where you want them to appear in the final generated page.

Here is an example of the include usage:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

For more on how these various Templates work and how to generate different information within them, read theTemplates documentation.

Query-based Template Files

WordPress can load different Templates for different query types. There are two ways to do this: as part of the built-inTemplate Hierarchy, and through the use of Conditional Tags within The Loop of a template file.

To use the Template Hierarchy, you basically need to provide special-purpose Template files, which will automatically be used to override index.php. For instance, if your Theme provides a template called category.php and a category is being queried, category.php will be loaded instead of index.php. If category.php is not present, index.php is used as usual.

You can get even more specific in the Template Hierarchy by providing a file called, for instance, category-6.php — this file will be used rather than category.php when generating the page for the category whose ID number is 6. (You can find category ID numbers in ManageCategories if you are logged in as the site administrator in WordPress version 2.3 and below. In WordPress 2.5 the ID column was removed from the Admin panels. You can locate the category id by clicking ‘Edit Category’ and looking on the URL address bar for the cat_ID value. It will look ‘…categories.php?action=edit&cat_ID=3’ where ‘3’ is the category id). For a more detailed look at how this process works, see Category Templates.

If your Theme needs to have even more control over which Template files are used than what is provided in the Template Hierarchy, you can use Conditional Tags. The Conditional Tag basically checks to see if some particular condition is true, within the WordPress Loop, and then you can load a particular template, or put some particular text on the screen, based on that condition.

For example, to generate a distinctive stylesheet in a post only found within a specific category, the code might look like this:

<?php
if ( is_category( '9' ) ) {
    get_template_part( 'single2' ); // looking for posts in category with ID of '9'
} else {
    get_template_part( 'single1' ); // put this on every other category post
}
?>

Or, using a query, it might look like this:

<?php
$post = $wp_query->post;
if ( in_category( '9' ) ) {
    get_template_part( 'single2' );
} else {
    get_template_part( 'single1' );
}
?>

In either case, this example code will cause different templates to be used depending on the category of the particular post being displayed. Query conditions are not limited to categories, however, see the Conditional Tags article to look at all the options.

Defining Custom Templates

It is possible to use the WordPress plugin system to define additional templates that are shown based on your own custom criteria. This advanced feature can be accomplished using the template_redirect action hook. More information about creating plugins can be found in the Plugin API reference.

Including Template Files

To load another template (other than header, sidebar, footer, which have predefined included commands likeget_header()) into a template, you can use get_template_part(). This makes it easy for a Theme to reuse sections of code.

Referencing Files From a Template

When referencing other files within the same Theme, avoid hard-coded URIs and file paths. Instead reference the URIs and file paths with bloginfo(): see Referencing Files From a Template.

Note that URIs that are used in the stylesheet are relative to the stylesheet, not the page that references the stylesheet. For example, if you include an images/ directory in your Theme, you need only specify this relative directory in the CSS, like so:

h1 {
    background-image: url(images/my-background.jpg);
}

Plugin API Hooks

When developing Themes, it’s good to keep in mind that your Theme should be set up so that it can work well with any WordPress plugins users might decide to install. Plugins add functionality to WordPress via “Action Hooks” (see Plugin APIfor more information).

Most Action Hooks are within the core PHP code of WordPress, so your Theme does not have to have any special tags for them to work. But a few Action Hooks do need to be present in your Theme, in order for Plugins to display information directly in your header, footer, sidebar, or in the page body. Here is a list of the special Action Hook Template Tags you need to include:

wp_head()
Goes in the <head> element of a theme, in header.php. Example plugin use: add JavaScript code.
wp_footer()
Goes in footer.php, just before the closing </body> tag. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer. Very commonly used to insert web statistics code, such as Google Analytics.
wp_meta()
Typically goes in the <li>Meta</li> section of a Theme’s menu or sidebar; sidebar.php template. Example plugin use: include a rotating advertisement or a tag cloud.
comment_form()
Goes in comments.php directly before the comment form’s closing tag (<tt</form></tt>). Example plugin use: display a comment preview. As of WordPress 3.0, you should use the default comment form instead, see comment_form().

For a real world usage example, you’ll find these plugin hooks included in the default Theme’s templates.

Untrusted Data

You should escape dynamically generated content in your Theme, especially content that is output in HTML attributes. As noted in WordPress Coding Standards, text that goes into attributes should be run through esc_attr so that single or double quotes do not end the attribute value and invalidate the XHTML and cause a security issue. Common places to check are titlealt, and value attributes.

In a few cases there might already be a template tag for common cases where safe output is needed. One such case involves the “title” attribute when used with the_title() for post and page titles. To avoid a security vulnerability, usethe_title_attribute() instead. Here’s an example of correct escaping for the title attribute in a post title link when using translatable text:

<?php echo esc_attr( sprintf( __( 'Permanent Link to %s', 'theme-name' ), the_title_attribute( 'echo=0' ) ) ); ?>

Replace deprecated escape calls with the correct calls: wp_specialcharshtmlspecialchar with esc_htmlclean_url withesc_url, and attribute_escape with esc_attr. See Data_Validation for more.

Translation / i18n Support

To ensure smooth transition for language localization, use the gettext functions for wrapping all translatable text within the template files. This makes it easier for the translation files to hook in and translate the titles into the site’s language. See more at WordPress_Localization and i18n for WordPress Developers.

Theme Classes

Implement the following template tags to add WordPress-generated class attributes to body, post, and comment elements. For post classes, apply only to elements within The Loop.

Template File Checklist

When developing a Theme, check your template files against the following template file standards.

Document Head (header.php)

  • Use the proper DOCTYPE.
  • The opening <html> tag should include language_attributes().
  • The “content-type” meta element should be placed before everything else, including the title element.
  • Use bloginfo() to fetch the title and description.
  • Use automatic feed links to add feed links.
  • Add a call to wp_head(). Plugins use this action hook to add their own scripts, stylesheets, and other functionality.

Here’s an example of a correctly-formatted HTML5 compliant head area:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

Navigation Menus (header.php)

  • The Theme’s main navigation should support a custom menu with wp_nav_menu().
    • Menus should support long link titles and a large amount of list items. These items should not break the design or layout.
    • Submenu items should display correctly. If possible, support drop-down menu styles for submenu items. Drop-downs allowing showing menu depth instead of just showing the top level.

Widgets (sidebar.php)

  • The Theme should be widgetized as fully as possible. Any area in the layout that works like a widget (tag cloud, blogroll, list of categories) or could accept widgets (sidebar) should allow widgets.
  • Content that appears in widgetized areas by default (hard-coded into the sidebar, for example) should disappear when widgets are enabled from Appearance > Widgets.

Footer (footer.php)

  • Use a wp_footer() call, to appear just before closing body tag.
<?php wp_footer(); ?>
</body>
</html>

Index (index.php)

  • Display a list of posts in excerpt or full-length form. Choose one or the other as appropriate.
  • Include wp_link_pages() to support navigation links within posts.

Archive (archive.php)

  • Display archive title (tag, category, date-based, or author archives).
  • Display a list of posts in excerpt or full-length form. Choose one or the other as appropriate.
  • Include wp_link_pages() to support navigation links within posts.

Pages (page.php)

  • Display page title and page content.
  • Display comment list and comment form (unless comments are off).
  • Include wp_link_pages() to support navigation links within a page.
  • Metadata such as tags, categories, date and author should not be displayed.

Single Post (single.php)

  • Include wp_link_pages() to support navigation links within a post.
  • Display post title and post content.
    • The title should be plain text instead of a link pointing to itself.
  • Display the post date.
    • Respect date and time format settings unless it’s important to the design. (User settings for date and time format are in Settings > General.)
    • For output based on the user setting, use the_time( get_option( 'date_format' ) ).
  • Display the author name (if appropriate).
  • Display post categories and post tags.
  • Display an “Edit” link for logged-in users with edit permissions.
  • Display comment list and comment form.

Comments (comments.php)

  • Author comment should be highlighted differently.
  • Display gravatars (user avatars) if appropriate.
  • Support threaded comments.
  • Display trackbacks/pingbacks.

Search Results (search.php)

  • Display a list of posts in excerpt or full-length form. Choose one or the other as appropriate.
  • The search results page show the previous search term. It’s a simple but useful way to remind someone what they just searched for — especially in the case of zero results. Use the_search_query or get_search_query (echo or return the value). For example:
    <h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2>
  • It’s a good practice to include the search form again on the results page. Include it with: get_search_form().

JavaScript

  • JavaScript code should be placed in external files whenever possible.
  • Use wp_enqueue_script to load your scripts.
  • JavaScript loaded directly into HTML documents (template files) should be CDATA encoded to prevent errors in older browsers.
<script type="text/javascript">
/* <![CDATA[ */
// content of your Javascript goes here
/* ]]> */
</script>

Screenshot

Create a screenshot for your theme. The screenshot should be named screenshot.png, and should be placed in the top level directory. The screenshot should accurately show the theme design, and should be saved in PNG or JPG format.

Theme Options

Themes can optionally include an options page. For example code, see A Sample WordPress Theme Options Page.

When enabling an options page, use the edit_theme_options capability instead of switch_themes for options panels, unless the user actually should be able to switch Themes to be able to use your options panel. WordPress itself uses theedit_theme_options capability for menus, background, header, widgets, et cetera. See more at Roles and Capabilities andAdding Administration Menus.

A note about network mode and Theme options:

If you are using the edit_themes capability anywhere in your Theme, and the Theme is running on a network-enabled WordPress install (previously WordPress MU), be aware that the edit_themes capability used for accessing Theme options pages will prevent site admins in a network from seeing the options menu. Use edit_theme_options instead.

Theme Testing Process

  1. Fix PHP and WordPress errors. Add the following debug setting to your wp-config.php file to see deprecated function calls and other WordPress-related errors: define('WP_DEBUG', true);. See Deprecated Functions Hook for more information.
  2. Check template files against Template File Checklist (see above).
  3. Do a run-through using the Theme Unit Test.
  4. Validate HTML and CSS. See Validating a Website.
  5. Check for JavaScript errors.
  6. Test in all your target browsers. For example, IE6, IE7, IE8, Safari, Chrome, Opera, and Firefox.
  7. Clean up any extraneous comments, debug settings, or TODO items.
  8. See Theme Review if you are publicly releasing the Theme by submitting it to the Themes Directory.

Quoted from: codex.wordpress.org

Advertisements

Installing Your Own WordPress Engine

WordPress is well known for its ease of installation. Under most circumstances installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Fantastico) to automatically install WordPress for you. However, if you wish to install WordPress yourself, the following guide will help. Now with Automatic Upgrade, upgrading is even easier.

The following installation guide will help you, whether you go for the Famous 5 Minute Installation, or require the more detailed installation guide.

Things to Know Before Installing WordPress

Before you begin the install, there are few things you need to have and do.

You need access to your site and its directory and software to proceed with the installation. These are:

Things You Need to Do to Install WordPress

Begin your installation by:

  1. Checking to ensure that you and your web host have the minimum requirements to run WordPress.
  2. Download the latest release of WordPress.
  3. Unzip the downloaded file to a folder on your hard drive.
  4. Be prepared with a secure password for your Secret Key
  5. Print this page out so you have it handy during the installation.

Famous 5-Minute Install

Here’s the quick version of the instructions, for those that are already comfortable with performing such installations. More detailed instructions follow.

  1. Download and unzip the WordPress package, if you haven’t already.
  2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
  3. Rename the wp-config-sample.php file to wp-config.php.
  4. Open wp-config.php in a text editor and fill in your database details as explained in Editing wp-config.php to generate and use your secret key password.
  5. Place the WordPress files in the desired location on your web server:
    • If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server.
    • If you want to have your WordPress installation in its own subdirectory on your web site (e.g.http://example.com/blog/), rename the directory wordpress to the name you’d like the subdirectory to have and move or upload it to your web server. For example if you want the WordPress installation in a subdirectory called “blog”, you should rename the directory called “wordpress” to “blog” and upload it to the root directory of your web server.Hint: If your FTP transfer is too slow read how to avoid FTPing at : Step 1: Download and Extract.
  6. Run the WordPress installation script by accessing wp-admin/install.php in a web browser.

That’s it! WordPress should now be installed.

Detailed Instructions

Step 1: Download and Extract

Download and unzip the WordPress package from http://wordpress.org/download/.

  • If you will be uploading WordPress to a remote web server, download the WordPress package to your computer with a web browser and unzip the package.
  • If you will be using FTP, skip to the next step – uploading files is covered later.
  • If you have shell access to your web server, and are comfortable using console-based tools, you may wish to download WordPress directly to your web server using wget (or lynx or another console-based web browser) if you want to avoidFTPing:
    • wget http://wordpress.org/latest.tar.gz
    • Then unzip the package using:
      tar -xzvf latest.tar.gz The WordPress package will extract into a folder called wordpress in the same directory that you downloadedlatest.tar.gz.
  • If you do not have shell access to your web server, or you are not comfortable using console-based tools, you may wish to deploy WordPress directly to your web server using ZipDeploy.

Step 2: Create the Database and a User

If you are using a hosting provider, you may already have a WordPress database set up for you, or there may be an automated setup solution to do so. Check your hosting provider’s support pages or your control panel for clues about whether or not you’ll need to create one manually.

If you determine that you’ll need to create one manually, follow the instructions for accessing phpMyAdmin on various servers, or follow the instructions for Using cPanel or Using phpMyAdmin below.

If you are installing WordPress on your own web server, follow the Using phpMyAdmin or Using the MySQL Clientinstructions below to create your WordPress username and database.

If you have only one database and it is already in use, you can install WordPress in it – just make sure to have a distinctive prefix for your tables, to avoid over-writing any existing database table.

Using cPanel

If your hosting provider supplies the cPanel hosting control panel, you may follow these simple instructions to create your WordPress username and database. A more complete set of instructions for using cPanel to create the database and user can be found in Using cPanel.

  1. Log in to your cPanel.
  2. Click MySQL Database Wizard icon under the Databases section.
  3. In Step 1. Create a Database enter the database name and click Next Step.
  4. In Step 2. Create Database Users enter the database user name and the password. Make sure to use a strong password. Click Create User.
  5. In Step 3. Add User to Database click the All Privileges checkbox and click Next Step.
  6. In Step 4. Complete the task note the database name and user. Write down the values of hostnameusername,databasename, and the password you chose. (Note that hostname will usually be localhost.)

Using Lunarpages.com’s custom cPanel (LPCP)

Lunarpages has developed their own version of cPanel.

  1. Log in to your account.
  2. Go to Control Panel.
  3. Click on the button on the left panel labeled ‘Go to LPCP’.
  4. Go to MySQL Manager.
  5. Add the user name and database name but leave the host name as the default IP number.
  6. Note the IP address of the database on the right which is different from the default IP number of the host indicated in the above step.
  7. When modifying the WP-CONFIG.PHP file, use the DB IP number, not ‘LOCALHOST’.
  8. When modifying the WP-CONFIG.PHP file, be sure to use the full name of the database and user name, typically ‘accountname_nameyoucreated’.
  9. Refer to http://wiki.lunarpages.com/Create_and_Delete_MySQL_Users_in_LPCP for more info.

Using phpMyAdmin

If your web server has phpMyAdmin installed, you may follow these instructions to create your WordPress username and database.

Note: These instructions are written for phpMyAdmin 2.6.0; the phpMyAdmin user interface can vary slightly between versions.

  1. If a database relating to WordPress does not already exist in the Database dropdown on the left, create one:
    1. Choose a name for your WordPress database (‘wordpress‘ or ‘blog‘ are good), enter it in the Create new databasefield, and click Create.
  2. Click the Home icon in the upper left to return to the main page, then click Privileges. If a user relating to WordPress does not already exist in the list of users, create one:
    1. Click Add a new User.
    2. Chose a username for WordPress (‘wordpress‘ is good) and enter it in the User name field. (Be sure Use text field:is selected from the dropdown.)
    3. Choose a difficult-to-guess password (ideally containing a combination of upper- and lower-case letters, numbers, and symbols), and enter it in the Password field. (Be sure Use text field: is selected from the dropdown.) Re-enter the password in the Re-type field.
    4. Write down the username and password you chose.
    5. Leave all options under Global privileges at their defaults.
    6. Click Go.
  3. Return to the Privileges screen and click the Check privileges icon on the user you’ve just created for WordPress. In the Database-specific privileges section, select the database you’ve just created for WordPress under the Add privileges to the following database dropdown. The page will refresh with privileges for that database. Click Check All to select all privileges, and click Go.
  4. On the resulting page, make note of the host name listed after Server: at the top of the page. (This will usually belocalhost.)

Using the MySQL Client

You can create MySQL users and databases quickly and easily by running mysql from the shell. The syntax is shown below and the dollar sign is the command prompt:

$ mysql -u adminusername -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 5340 to server version: 3.23.54

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> CREATE DATABASE databasename;
Query OK, 1 row affected (0.00 sec)

mysql> GRANT ALL PRIVILEGES ON databasename.* TO "wordpressusername"@"hostname"
    -> IDENTIFIED BY "password";
Query OK, 0 rows affected (0.00 sec)

mysql> FLUSH PRIVILEGES;
Query OK, 0 rows affected (0.01 sec)

mysql> EXIT
Bye
$

The example shows:

  • that root is also the adminusername. It is a safer practice to choose a so-called “mortal” account as your mysql admin, so that you are not entering the command “mysql” as the root user on your system. (Any time you can avoid doing work as root you decrease your chance of being exploited). The name you use depends on the name you assigned as the database administrator using mysqladmin.
  • wordpress or blog are good values for databasename.
  • wordpress is a good value for wordpressusername but you should realize that, since it is used here, the entire world will know it too.
  • hostname will usually be localhost. If you don’t know what this value should be, check with your system administrator if you are not the admin for your WordPress host. If you are the system admin, consider using a non-root account to administer your database.
  • password should be a difficult-to-guess password, ideally containing a combination of upper- and lower-case letters, numbers, and symbols. One good way of avoiding the use of a word found in a dictionary, uses the first letter of each word in a phrase that you find easy to remember.

If you need to write these values somewhere, avoid writing them in the system that contains the things protected by them. You need to remember the value used for databasenamewordpressusernamehostname, and password. Of course, since they are already in (or will be, shortly) your wp-config.php file, there is no need to put them somewhere else, too.

Using Plesk

See: Plesk 7 at tamba2.org

Step 3: Set up wp-config.php

You can either create and edit the wp-config.php file yourself, or you can skip this step and let WordPress try to do this itself when you run the installation script (step 5) (you’ll still need to tell WordPress your database information).

(For more extensive details, and step by step instructions for creating the configuration file and your secret key for password security, please see Editing wp-config.php.)

Return to where you extracted the WordPress package in Step 1, rename the file wp-config-sample.php to wp-config.php, and open it in a text editor.

Enter your database information under the section labeled

 // ** MySQL settings - You can get this info from your web host ** //
DB_NAME
The name of the database you created for WordPress in Step 2 .
DB_USER
The username you created for WordPress in Step 2.
DB_PASSWORD
The password you chose for the WordPress username in Step 2.
DB_HOST
The hostname you determined in Step 2 (usually localhost, but not always; see some possible DB_HOST values).
DB_CHARSET
The database character set, normally should not be changed (see Editing wp-config.php).
DB_COLLATE
The database collation should normally be left blank (see Editing wp-config.php).

Enter your secret key values under the section labeled

  * Authentication Unique Keys.

Save the wp-config.php file.

For information on enabling SSL in WordPress 2.6, see SSL and Cookies in WordPress 2.6.

Step 4: Upload the files

Now you will need to decide where on your web site you’d like your blog to appear:

Note: The location of your root web directory in the filesystem on your web server will vary across hosting providers and operating systems. Check with your hosting provider or system administrator if you do not know where this is.

In the Root Directory

  • If you need to upload your files to your web server, use an FTP client to upload all the contents of the wordpressdirectory (but not the directory itself) into the root directory of your web site.
  • If your files are already on your web server, and you are using shell access to install WordPress, move all of thecontents of the wordpress directory (but not the directory itself) into the root directory of your web site.

In a Subdirectory

  • If you need to upload your files to your web server, rename the wordpress directory to your desired name, then use anFTP client to upload the directory to your desired location within the root directory of your web site.
  • If your files are already on your web server, and you are using shell access to install WordPress, move the wordpressdirectory to your desired location within the root directory of your web site, and rename the directory to your desired name.

Step 5: Run the Install Script

Point a web browser to start the installation script.

Setup configuration file

If WordPress can’t find the wp-config.php file, it will tell you and offer to try to create and edit the file itself. (You can do also do this directly by loading wp-admin/setup-config.php in your web browser.) WordPress will ask you the database details and write them to a new wp-config.php file. If this works, you can go ahead with the installation; otherwise, go back and create, edit, and upload the wp-config.php file yourself (step 3).

Enter database information

Finishing installation

The following screenshots show how the installation progresses. Notice in Entering the details screen, you enter your site title, your desired user name, your choice of a password (twice) and your e-mail address. Also displayed is a check-box asking if you would like your blog to appear in search engines like Google and Technorati. Leave the box checked if you would like your blog to be visible to everyone, including search engines, and uncheck the box if you want to block search engines, but allow normal visitors. Note all this information can be changed later in your Administration Panels.

Version 3.0

Enter site, login, and email

All done!

Install Script Troubleshooting

  • If you get an error about the database when you run the install script:
    • Go back to Step 2 and Step 3, and be sure you got all the correct database information and that it was entered correctly into wp-config.php.
    • Be sure you granted your WordPress user permission to access your WordPress database in Step 3.
    • Be sure the database server is running.

Common Installation Problems

The following are some of the most common installation problems. For more information and troubleshooting for problems with your WordPress installation, check out FAQ Installation and FAQ Troubleshooting.

I see lots of Headers already sent errors. How do I fix this?

You probably introduced a syntax error in editing wp-config.php.

  1. Download wp-config.php (if you don’t have shell access).
  2. Open it in a text editor.
  3. Check that the first line contains nothing but <?php, and that there is no text before it (not even whitespace).
  4. Check that the last line contains nothing but ?>, and that there is no text after it (not even whitespace).
  5. If your text editor saves as Unicode, make sure it adds no byte order mark (BOM). Most Unicode-enabled text editors do not inform the user whether it adds a BOM to files; if so, try using a different text editor.
  6. Save the file, upload it again if necessary, and reload the page in your browser.

My page comes out gibberish. When I look at the source I see a lot of “<?php ?>” tags.

If the <?php ?> tags are being sent to the browser, it means your PHP is not working properly. All PHP code is supposed to be executed before the server sends the resulting HTML to your web browser. (That’s why it’s called a preprocessor.) Make sure your web server meets the requirements to run WordPress, that PHP is installed and configured properly, or contact your hosting provider or system administrator for assistance.

I keep getting an Error connecting to database message but I’m sure my configuration is correct.

Try resetting your MySQL password manually. If you have access to MySQL via shell, try issuing:

SET PASSWORD FOR 'wordpressusername'@'hostname' = OLD_PASSWORD('password');

If you are using a version of MySQL prior to 4.1, use PASSWORD instead of OLD_PASSWORD. If you do not have shell access, you should be able to simply enter the above into an SQL query in phpMyAdmin. Failing that, you may need to use your host’s control panel to reset the password for your database user.

My image/MP3 uploads aren’t working.

If you use the Rich Text Editor on a blog that’s installed in a subdirectory, and drag a newly uploaded image into the editor field, the image may vanish a couple seconds later. This is due to a problem with TinyMCE (the rich text editor) not getting enough information during the drag operation to construct the path to the image or other file correctly. The solution is to NOT drag uploaded images into the editor. Instead, click and hold on the image and select “Send to Editor.”

Automated Installation

Although WordPress is very easy to install, you can use one of the one-click autoinstallers typically available from hosting companies. Two of those autoinstallers, Fantastico, and Softaculous are described here.

Fantastico

  1. Login to your cPanel account and click on the Fantastico (or Fantastico Deluxe) option
  2. Once you enter Fantastico on the left hand side there is a ‘Blogs’ Category under which WordPress is there. Click on it.
  3. Click on the ‘New Installation’ Link in the WordPress Overview
  4. Fill in the various details and Submit.
  5. That’s it you are done!

File:fant.jpg

Softaculous

  1. Login to your host and look for Software/Services
  2. In Softaculous there is a ‘Blogs’ Category. Collapse the category and WordPress will be there. Click on it.
  3. You will see an ‘Install’ TAB. Click it.
  4. Fill in the various details and Submit.
  5. That’s it, you are done!

File:soft.jpg

Installation Instructions in Other Languages

For installation instructions in other languages, see WordPress in Your Language.

Installing Multiple Blogs

Detailed information about Installing Multiple Blogs is available.

Installing WordPress on your own Computer

Manual Installation Instructions

Use these instruction for setting up a local server environment for testing and development.

Software Appliance – Ready-to-Use

You may find that using a pre-integrated software appliance is a great way to get up and running with WordPress, especially in combination with virtual machine software (e.g., VMWare, VirtualBox, Xen HVM, KVM).

software appliance allows users to altogether skip manual installation of WordPress and its dependencies, and instead deploy a self-contained system that requires little to no setup, in just a couple of minutes.

  • TurnKey WordPress Appliance: a free Ubuntu-based appliance that just works. It bundles a collection of popular WordPress plugins and features a small footprint, automatic security updates, SSL support and a Web administration interface.
  • BitNami WordPress Appliance: free WordPress appliances based on Ubuntu or Open Suse. Native installer and Cloud images also available.

Easy 5 Minute WordPress Installation on Windows

Download, install, and configure WordPress with the Microsoft Web Platform Installer (Web PI). Installation is very easy and takes on average about 5 minutes to complete.

Step 1. Things you need to know before starting.
  1. These steps will work on Windows versions which include IIS, such as Windows XP professional, Windows Vista, Windows 7 and Windows Server.
  2. You must be able to install programs on your machine (i.e. have administrator rights).
Step 2. Navigate to the WordPress Installation Page
  1. Choose the “Install” button.
  2. If you have Web PI already installed, it will automatically be launched and you can skip to the next step.
  3. If you do not have the Web Platform Installer, you will be prompted to install it.
  4. Web PI is a tool from Microsoft that downloads and installs the latest components you need to develop or host Web applications on Windows. Everything in the tool is free. Web PI will install and configure IIS, PHP, MySQL and anything else you may need.
Step 3. Choose to Install WordPress
  1. When Web PI launches, you will see an information page for WordPress. Start installing WordPress by pressing the “Install” button in the lower right hand corner.
Step 4. Installation of WordPress and its requirements
  1. Finding Dependencies: Web PI will determine the minimum set of components and modules you need on your machine to run WordPress. It will only install what you’re missing. For example, PHP will be installed and configured to run WordPress.
  2. Configure the Database: After accepting the terms, if you need to install MySQL, you will be asked to create a password for the root account database account. Keep this password safe. WordPress will ask for this information later.
  3. Choose the site: Choose a site to install WordPress to. You may install to an existing Web site in IIS or create a new site. Use the default setting if you do not have advanced configuration needs.
  4. WordPress Setup: WordPress will need answers to a few specific questions such as the username (in the case of a new MySQL install is root) and password for your MySQL database to complete the install.
Step 5. Completion
  1. Once you enter the WordPress setup information, Web PI will finish the installation.
  2. Click, Launch in Browser and WordPress will launch.

Alternatively, the BitNami WordPress installer is a free, self-contained native installer for WordPress that includes Apache, MySQL and PHP so it works out of the box.

WAMP

If you don’t have IIS on your computer or don’t want to use it, you could use a WAMP installation. WAMP Server, or WAMP Server at SourceForge, or BitNami WAMPStack can be downloaded freely and set up all the bits you need on your computer to run a web site. Once you have downloaded and installed WAMP, you can point your browser at localhost and use the link to phpmyadmin to create a database.

Then, in order to install WordPress, download the zip file, and extract it into the web directory for your WAMP installation (this is normally installed as c:\wamp\www). Finally visit http://localhost/wordpress to start the WordPress install. (Assuming you extracted into c:\wamp\www\wordpress).

Quoted from: codex.wordpress.org