We kick off our very first WDSK volume with an extended tutorial on building and deploying a custom
WordPress themed website. Being this is the very first volume, you're not expected to know much about web development. The very fact that you're here, reading this, qualifies you to proceed.
WDSK's primary purpose is to aid me and few folks as we rebuild our church website from the ground up. Right now, I'm the only one in the group who knows how to do this. By the end of the process, I'm hoping everyone will know how to do it. That's where WDSK comes in: I'll document as much of the knowledge-transfer as possible and make an artifact of it here, where I hope it will useful to anyone interested in learning how to build a website.
We're using WordPress in Volume 1 because it's one of the best avenues available to someone wanting to move quickly into web development without having to learn a billion other things. Once you get upright and walking in it, you can start to learn those billion other things. Eventually, you may move on to other tools as you start getting board with WP and PHP. For now, I hope you'll find it just the thing to get going.
Volume 1 Roadmap
Setting up your development environment
Wiring things up and playing around with WordPress "out of the box"
Project Management 101: From defining goals to hammering out a timeline (client management will have to wait for another volume)
Design Global, think Mobile
Getting Design Right / Working with a Designer
HTML & CSS! with an emphasis on responsive techniques
Creating Your Core Templates
From Templates to WordPress PHP Files
Auxiliary Pages: Search, 404, etc.
MetaBoxes and other advanced things
RSS & Integration with Social Media
Hosting and Initial Push
Initial Content! (When's it ready to push live? and other such questions)
By "your development environment", I mean "everything you need in order to produce and maintain your project on your local machine."
By "setup", I mean "setup".
Components of the WordPress DevEnv
A good text editor
The latest version of WordPress
A GitHub account
###A Good Text Editor*
The more code you write, the more you'll care about having a good text editor. At a minimum, you'll want an editor that allows you to view and switch between all your project files easily.
Though there are free editors out there, I'd highly recommend you invest in either Sublime Text or (if you work from a mac) TextMate. These are editors don't require any fancy knowledge to get started, but they have plenty of advanced awesomeness for you to grow into.
If you can't stomach the cost, fine. Get a free one. Recommendations:
These aren't the only good free ones out there, they're just the ones that I've used at one time or another.
###The Latest Version of WordPress
Go to wordpress.org and download the latest version onto your machine. I'd recommend setting up folder on your machine called "Wordpress_Versions" and download into that. That way, as you start new projects later, you'll have all your WP downloads all in the same place, each named according to its version.
In order to get WordPress doing its thing locally, you're going to need a local web server running on your machine. You'll need the ability to run PHP (PHP is one of the many computer languages that can be configured to run on a server as part of a web application; it's the one used by WordPress). You'll also need a database (a MySQL database, to be precise).
It's easier than it sounds to get these three things up and running on your machine. Thanks to the awesome community of open source software developers who have made it easy for us.
MAMP: Mac, Apache, MySQL, PHP: Simple InstallerWAMP: Windows, Apache, MySQL, PHP: Simple InstallerLAMP: Linux, Apache, MySQL, PHP: If you're using Linux, you're probably able to install each of the components on your own. If you're feeling lazy and just want to get started, google for "install LAMP in one command line" include your Linux distribution name as well.
With MAMP (and I presume WAMP), you can set the document root manually by clicking Preferences > Apache. I'm pretty sure the default LAMP (well, pretty much the default Apache) configuration is /var/www. More info here. You can change it using the DocumentRoot directive (search "DocumentRoot Directive" here for more info).
Git is a version control system that will serve you nicely as you begin tinkering around with various projects. If you have no idea what I'm talking about when I say "version control", it's time to learn-up!
###A GitHub Account
GitHub is a place of magic and wonder, and you need to be a part of it. It's pretty much the place for storing, viewing, using, and collaborating on open-source code. It can also become the place where you keep your proprietary code as well, but you'll need to upgrade to a paid account for that.
But the main reason you'll want a GitHub account right now is because you'll want to use (and perhaps enhance) my WordPress starter kit which I have on there.
Less is a beautiful way to write CSS (and less of it). We'll talk about that later. For now, all you need to know is that you can download a program that will automatically watch and live-compile *.less files to *.css files. Grab the version appropriate to your OS:
Buckle your seatbelts! By the end of today's session you'll be running your very own WordPress installation. At least, that's the hope. I mean, everything might crash spectacularly, but at least you're now wearing your seatbelt.
Configure and Start Apache
It's going to be easiest to proceed if we all set up Apache to listen on port 8888. The easiest way to do this is to search your computer for httpd.conf (it will be inside the apache folder you just downloaded and installed along with your (L/W/M)AMP install). Scroll down to to where you see the word "Listen". If it isn't already 8888, change the number after "Listen" to 8888. Now save and close this file. If you're wondering about the significance of what you just did, check out [the wiki article on it](http://en.wikipedia.org/wiki/Port_(computer_networking\)) and this (less technical) overview of network ports in general.
WAMP: Click on the WAMP icon in your taskbar (bottom right), and select "start all services"
MAMP: Open MAMP and click "Start Servers"
Rolled your own on Linux: Su to root, run apachectl start (find more commands here)
Say "Hello World!"
Before we say hello to WordPress, let's say hello to the world! Start by opening up Apache2's document root directory (see the last vol 1.1 for more info on finding the document root) and create a file in it named hello.html. Paste the following text in it:
Now open your browser and navigate to http://localhost:8888. You should see the words "Hello World!" written in big, bold typeface. If not, be glad you're wearing your seatbelt. Also be glad you have access to google. You know what to do!
Make sure PHP is working
Create a file in your Apache document root called test.php. Copy and paste in the following:
<?php phpinfo() ?>
If PHP has been installed properly, you should get a page that looks looks something like this.
Create a Database
If you're using MAMP or WAMP, or if you have installed phpMyAdmin as part of a LAMP install, go to your local phpMyAdmin page. In MAMP, you can get to this by opening the MAMP application and clicking "Open start page" and clicking on the phpMyAdmin link. With WAMP, there should be a quick-launch link from your WAMP taskbar icon.
The default login should be root/root.
Once you're logged in, you will see a text box with the label "Create a new database". Type in "wordpress_1" and click "Create". Done.
If you're not using phpMyAdmin, you can use the mysql command line tool to create the database. You may have to play/google around to get mysql recognized as a command. Once you do though, check out this reference for what you can do
Copy over and configure Wordpress
Copy the entire WordPress folder you downloaded during last session and paste it into your Apache document root directory. Rename this folder to wptest.
Now fire up http://localhost:8888/wptest. You should see a page that says you need to create a configuration file, and you should have an option to create one with a click of a button. Press the button. Continue to the page where you can enter your database information. Your database is named wordpress_1, your username/password should be "root", your host is "localhost". And it is fine to leave the table name prefix set to the default. Continue.
You'll be brought to a page that enables you to set up your site/blog with a title and all that good stuff.
Hello World! from Wordpress!
Now that you're all set up with your first complete WP install, go back to http://localhost:8888/wptest. You should see the default version of a WordPress blog with it's default first post and Sample Page.