How to Create Wordpress Themes - Lesson 3 by ciccone85


More Info
									              WordPress Theme Tutorials
                   How to Create Wordpress Themes?

Lesson #3: Starting Index.php
Step 1: Open Xampp Control.
Navigate to your xampp folder. Usually My Computer > xampp or C:\xampp.

Double click on xampp-control.exe. A window will pop up. Click on start for Apache
and MySQL. Your pop up window should mirror the image below:

Now that it’s turned on, you can minimize that window.

Step 2: Create your theme folder.
Go to your wordpress themes folder. It should be at xampp/htdocs/wordpress/wp-
content/themes. Create a new folder. Name it tutorial.

Step 3: Create index.php and style.css files.
Open up Notepad or the text editor of your choice. Notepad is at Start > Programs >
Accessories > Notepad.

Copy and paste everything from this file: index.txt to your Notepad window.
Save your notepad in the tutorial folder as index.php

Open another notepad. Leave it empty. Save the empty notepad as style.css, in the same
folder. Close the style.css notepad.

So now you have two files: index.php and style.css.
index.php Explanations:

Click on the image above for the full view. I will explain to you what each circled area

Doctype – Indicates what kind of codes you’re using to code your theme. Doctype is not
important at this point. I’m pointing out Doctype so you don’t have think about it.

<html> is where my web page starts.

<head> is where the head of my web page starts. Every web page has a head and a body.
</head> is where the head ends.

<?php bloginfo(‘stylesheet_url’); ?> is a PHP function that calls for the location of the
style.css file so my theme can link to it and style everything on my pages. Anytime codes
are wrapped in <?php and ?>, it’s PHP and it’s different from the rest of my codes. In
PHP, <?php is start and ?> is end.


         <?php – start PHP
         bloginfo(‘stylesheet_url’) – call for the location of style.css
         ; – stop calling for style.css. The semicolon is one way of closing a set of codes
          within PHP.
         ?> – end PHP

Moving on…

<body> – This is where the body starts. The body is everything that I see and read on a
web page. Reading this tutorial means I’m looking at the body of the web page. </body>
is where the body ends.
</html> is where my web page ends. Nothing else after that.

Step 4: Copy and paste everything in style.txt to your style.css file. Save and close it.

Step 5: Setting up your theme.
Open up a browser.

Type: http://localhost/wordpress/wp-login.php. Go to it and login into your WordPress
administration area. (You’re able to see the login page because you opened the Xampp
Control in the first step. Otherwise, your browser will give you a Not Found error.

Looking at the administration area. Click on Presentation and click on the theme named
Tutorial to activate it.

Notice, your theme does not have a thumbnail screeshot yet. The box is empty. Once
activated, WordPress will tell you.
Now open up a new browser or tab (if your browser has tab browsing) and go to
http://localhost/wordpress. You should then get a blank page. I mean completely blank.
If it isn’t blank, you’re at the wrong page.

Your theme has been set up. That’s it for this lesson. Next up, we start working on the
header template.

Don’t forget to close your Xampp Control. Double click on its tray icon in your
toolbar, click Stop for Apache and MySQL. Then click exit.

To top