WordPress is one of the easiest web content management systems to install and use, which no doubt contributes to its popularity. Perhaps one in six websites use it.
The platform's flexibility also makes it suitable for basic ecommerce applications, particularly when the site will attract visitors via content or entertainment marketing.
This article is the fifth in a series created to demonstrate how to use WordPress to develop an ecommerce site that sells virtual products. The series will discuss the (a) site-planning process, (b) graphic design, (c) plugin selection, (d) payment processing setup, and (e) virtual product delivery. This series will also provide specific site-coding examples.
The Series to Date
- Part One: Defining the Project
- Part Two: Logo and Color Palette
- Part Three: CSS Grid, Home Page Design
- Part Four: Facing Design Challenges
- Part Five: Install WordPress, Copy Theme
- Part Six: Create a Custom Post Type
- Part Seven: More Functions for the Custom Post Type
- Part Eight: Draft HTML5 Markup
- Part Nine: CSS Begins, Font Glitch
- Part Ten: CSS Work Continues
- Part 11: jQuery Lends a Hand
Development System
So far this series has focused on the project's graphic design and requirements. For the graphics I have been using Adobe's powerful Photoshop and Illustrator software running in a Microsoft Windows environment.
Now that it is time to begin developing, I am switching to an Ubuntu 11.11 system running Apache, PHP, and MySQL. Ultimately, the Alien Authority website — like most websites — will run on a Linux-powered server, so it makes sense to me to use a Linux environment for development too.
Install WordPress
WordPress is famous for very quick installations.
Begin by downloading the most recent version of WordPress from WordPress.org, which should not be confused with WordPress.com, the hosted version.
Version 3.3.1 was the most recent at the time of writing.
Move the compressed WordPress file that you downloaded to the desired folder on your development system. I placed this file in /var/www/aa, where “aa” is a directory that I created. The decompressed folder will add a directory named “wordpress.”
You will need to create an empty MySQL database for WordPress. I did this from the terminal in Ubuntu, logging into MySQL from the command line.
$ mysql -u username -p
Replace “username” with your MySQL username. Running this line of code will create a password prompt so that you can enter your MySQL password.
Once in MySQL, create a new database. I named mine “alien” since the site I am building is called the Alien Authority.
create database alien;
Turning back to the decompressed WordPress folder, find the file wp-config-sample.php and open it in your favorite text editor. I am using Bluefish for this project.
Near the top of this file, you'll find several constants that you need to define. Everything that you need to update is clearly marked. For example, you need to replace “databasenamehere” with the name of the database you just created.
// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');
/** MySQL database username */
define('DB_USER', 'username_here');
/** MySQL database password */
define('DB_PASSWORD', 'password_here');
/** MySQL hostname */
define('DB_HOST', 'localhost');
/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');
/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');
Further down in the wp-config-sample.php file, you will find a section of authentication keys and salt (in cryptography or password protection "salt" represents extra characters added to a term or password before it is encrypted to make it more difficult to break or hack).
define('AUTH_KEY', 'put your unique phrase here');
define('SECURE_AUTH_KEY', 'put your unique phrase here');
define('LOGGED_IN_KEY', 'put your unique phrase here');
define('NONCE_KEY', 'put your unique phrase here');
define('AUTH_SALT', 'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT', 'put your unique phrase here');
define('NONCE_SALT', 'put your unique phrase here');
You want to completely replace this code with some properly salted keys. To get these keys go to https://api.wordpress.org/secret-key/1.1/salt/.
With the new keys and salts pasted in place, save this file as wp-config.php. Now open wp-admin/install.php in a web browser. In my development environment, this full URL was 127.0.0.1/aa/wordpress/wp-admin/install.php.
A short installation wizard will open in the browser. Complete the form and you should have a fully installed WordPress instance. It is worth noting that WordPress offers a very detailed guide to installation that you may want to check out.
Load a Theme
The Alien Authority website requires a very custom theme and even custom post types. But I needed someplace to start, so I copied and renamed the Twenty Eleven theme, which came with the WordPress installation.
From the command line navigate to wp-content/themes and enter the following command, making a complete copy of the Twenty Eleven theme. In the example, “aa” is the name of the new theme directory that I want to create.
cp -r twentyeleven/* aa
If you prefer, you may also do this using Linux's file system or your operating system's directory explorer.
Inside of the new directory you created, you'll find a file named style.css. Open this file in your editor, and you locate the large comment at the top of the page.
/* Theme Name: Twenty Eleven Theme URI: http://wordpress.org/extend/themes/twentyeleven Author: the WordPress team Author URI: http://wordpress.org/ Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats. Version: 1.3 License: GNU General Public License License URI: license.txt Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready */
I updated this with information about my theme. At the moment, there is not going to be any difference between this theme and the Twenty Eleven theme, but when I am done the new theme will be completely custom.
/* Theme Name: Alien Authority Theme URI: http://alienauthority.com Author: Armando Emanuel Roggio, the Elder Author URI: http://aeroggio.com Description: This is a custom theme developed for the Alien Authority site. Version: 1.0 */
I activated the newly named theme by navigating to the WordPress administration panel, at Appearance > Themes.
Finally, I deleted all of the style descriptions in style.css, giving myself a blank canvas to work with.
Summing Up
In this article, I described my development system, the WordPress installation process, and how I copied a theme.
