Screencast: Part 3: Download WordPress for a Custom WordPress Theme

Now we need to go and get WordPress. Normally, you go to the WordPress home page and download it from there. Then you extract the download and place it into your server root folder. We are going to use ST2 to make our lives a bit easier with the Fetch plugin. Now all we have to do is create a folder inside our XAMPP server root (C:\xampp\htdocs) or MAMP server root (/Applications/MAMP/htdocs), drag that folder into ST2 and use Fetch to grab and extract a remote copy of WordPress. It’s so easy it’s almost fun!

We then need to start building our custom theme. So that means we need to create a folder in a special location inside our WordPress folder (wp-content/themes). In that location we create a folder called simple-wordpress.

Inside that folder we will need two core files (that are required by WordPress) which are index.php and style.css. We will also add header.php and footer.php. The code for each of these files can be found below the screencast.

index.php
[prettify]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.



[/prettify]

style.css
[prettify]
#wrapper {
margin: 15px auto;
width: 960px;
}
nav ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

nav ul li { display: inline; }

nav ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

nav ul li a:hover
{
background-color: #369;
color: #fff;
}
[/prettify]

header.php
[prettify]




Simple WordPress

header

[/prettify]

footer.php
[prettify]

© 2012




[/prettify]

Download Finished Files

finished-files-wordpress-custom-theme-part-03

Used in Video

Back to Main WordPress Page with list of tutorials on creating a WordPress custom theme from scratch.

Screencast: Virtual Host with PCs

Setting up a Virtual Host is confusing at first. It has driven me batty many times. I think I have collected enough info here for you to not have as many problems as I have had.

Here is the post I originally did after reading this great article.

To give you a visual how it works, check out the following screencast I did:

Here are some useful pieces of info from the video:

Where is my ‘hosts’ file?
C:\windows\system32\drivers\etc\hosts

Add this to the bottom of the file:
127.0.0.1 wordpress-wednesdays.com

If you don’t see the ‘hosts’ file read the following article
http://www.bleepingcomputer.com/tutorials/how-to-see-hidden-files-in-windows/

Where is the Apache config file?
C:\xampp\apache\conf\extra\httpd-vhosts.conf

Add to the bottom of this file:

Note: replace the following configuration with the info relative to how you have your files set up:

Some helpful hints:

  • DocumentRoot “C:\xampp\htdocs” – is this where your server root it? (note: it’s the default server root for a XAMPP install)
  • ServerName wordpress-wednesday.com – This should match exactly what you entered into the hosts file
  • DocumentRoot “C:\xampp\htdocs\wordpress-wednesday” – This and the Directory should match the absolute paths to where you site is on your local machine

[prettify]NameVirtualHost *

DocumentRoot “C:\xampp\htdocs”
ServerName localhost


DocumentRoot “C:\xampp\htdocs\wordpress-wednesday”
ServerName wordpress-wednesday.com

Order allow,deny
Allow from all


[/prettify]

I hope it helps. Let me know if you have any questions or can offer an improvements on the method I used.

The Power of Virtual Hosts (PC)

If you are testing a site locally on your PC, you probably have used XAMPP. XAMPP, by default is installed in the C drive and your server folder by default is C:/xampp/htdocs. As you build lots of sites, that htdocs folder gets filled with more and more folders.

Watch the screencast here!

This is a topic that I have wasted dozens of hours on over the years. It is a very geeky area and most articles online never break it down enough for the common man (or woman) to grasp. They really need to break it down to the core level for someone like me to understand.

At one point you may ask, can you move the server folder?
And the answer is yes you can.

Now, why the heck would you do some as crazy as this?
Well, the power to move your server to any folder is pretty cool but let me give you a practical example. (The entire process of moving a local WordPress site to remote is defined via several screencasts right here) You are developing a wordpress site. Well, all of your links are going to begin with http://localhost and you’ll have to export your wordpress database and do a find and replace with your .sql file to replace all occurances of http://localhost/ with http://your-real-domain/ and then import that new .sql file into your live server’s MySQL (usually via the cpaneland phpMyAdmin). Well, if you change the server folder, you can skip all those steps and save yourself time.

If that sounds cool, read this fantastic article. Summarizing the article you’ll have two make changes inside two Windows files. The only thing I would add to make this article better is that changing the ‘host‘ file on windows is sometimes problematic. The solution to this problem (which is a lame permissions issue) is to save your changes of the ‘host‘ file into your ‘My Documents‘ folder. It will add a .txt to your file and will look like this ‘host.txt‘. Then you copy that file and paste it on top of the existing ‘host‘ file. Somehow this bypasses the permissions issue. There are other ways to accomplish the same thing but I feel the solution I offered is the quickest and least painful.

Oh, and if you want to create a vitual host on Mac OS X… read this article.