WP Theme Lesson #3: Starting Index.php
- Filed under: Tutorials
Starting Index.php is the third lesson of my WordPress theme tutorial series. If you haven’t read lesson one and two, I’d suggest you read them. Otherwise, you will not have a clue of what I’ll show you in this lesson.
It’s time to stop reading and start creating your WordPress Theme. In this lesson, you’ll get your hands dirty with some WordPress codes. This is the part where you really need a WordPress blog installed on your computer, not an online blog because offline is more convenient.
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 does.
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.
So:
- <?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.
Have a question? Use the comment form below to ask me.
Follow this WordPress Theme Tutorial Series from the beginning.
I decided to follow your tutorial, but maybe there are some basic things I needed to know sooner.
I had to install XAMPP on my own and did so. I created your suggested file structure and XAMPP runs fine, but I get the error page when I try to open up the wp-admin file.
Any ideas?
Yass C,
It’s not enough to install xampp. You have to have WordPress installed also. Please read my previous tutorials before moving on to this one, especially the tutorial with the link to xampp and wordpress installations.
Is there any real issue with not installing xampp? I have wordpress on my server, db all set, etc. Any reason not to work on line if I care to?
With an online blog, you have to keep uploading and overwriting the files to see the changes.
You can do it online, but offline is more convenient.
[…] WP Theme Lesson #3: Starting Index.php […]
Great tutorial - I understand it!
Does XAMPP have to be installed at C:\, or can it be installed somewhere else? I have loads of space on my E: drive, but C: is bursting!
I’m looking forward to the rest of this series.
I think you can install it anywhere.
Is there a MAC equivalent to XAMPP? I can run in Parallels but would rather stay native.
I don’t know. Search for “WordPress Installation on Mac”
Wonderful tutorial! I’ve been struggling with creating my own theme and I think this will help me out a lot.
Now on to lesson #4
Don’t rush it. One lesson per day. If you rush through it, you won’t remember a thing!
For MondoMan, the software for mac is MAMP (http://www.mamp.info) Really esay to install and have a widget too !!
yo small potato!
what happened with the index.txt and style.css files in this tutorial? they only contain a single line of php code and the comment. i’m a bit frustrated now. I thought this would be an extensive one.
I’m making you learn it step by step. You can’t rush through theme. Otherwise, you might as well not learn. Learning it the first time around is most important.
You’ve got 13 more lessons to go.
Hello small potato I a have problem,,,I try to open localhost but I t cant open the message display “Object not found!
The requested URL was not found on this server. If you entered the URL manually please check your spelling and try again.
If you think this is a server error, please contact the webmaster.
Error 404
localhost
03/31/07 23:28:35
Apache/2.2.4 (Win32) DAV/2 mod_ssl/2.2.4 OpenSSL/0.9.8d mod_autoindex_color PHP/5.2.1 ”
So what should I do?? The Xampp control panel is ruuning well and I dont know what is the problem because the page seems not connect to xampp lite
Have you installed wordpress?
Is your folder named wordpress?
Did you go to http://localhost/wordpress/?
helo small Potato again
yes I installed wordpress in the C:\xampplite\htdocs\wordpress
the name of the folder is wordpress
and when I go to http://localhost/wordpress the message error display
“Error establishing a database connection”
The DB name in wp-config.php is “wordpress” and the DB_User name is “wordpress” as well
As you mention, I didnt use a password,
and when I go to http://localhost/wordpress it display the same message again.
so I am confuse to solve this problem..
could you please tell me what I did wrong…???
PLIZZZ….
Then I really don’t know what the problem. I’m sorry. I can only answer wordpress theme questions. Troubleshooting Xampp Lite is beyond me.
the index txt page is not working? are you updating it at this point…
Thanks for a great tutorial
Peter - try again. I clicked on index.txt. It works.
got it I had to open the browser and view source to get it….. thanks
First thanks a lot for this tut.
Have been trying with apache, php and mysql separately without getting connected to localhost. Very frustrating.
I didn´t get it right with XAMPP either for the firtst hours, but now I´ve fixed it manually in the webbrowser I had to manually change localhost to port 3306.
Probably thats what causes luczpt , his failure too.
By the way, do you mind if I translate your tutorials to Swedish later on?
Thanks Guys
I get it…………..I solve a problem……..It is very simple,,,it happens because I forgot to turn on the MySQL in the Xampp control panel..
Now it works well I can see the blog… but I encounter another problem because I cannot login to do the editing….I type my user name “admin” and the password…but it display the login page again and again without displaying Login error or password incorrect…plizz I need your help
regards
Luczpt
Don´t know if it´s your problem, but DB_user should be ‘root’ , not wordpress
And when you have logged in from
http://localhost/wordpress/wp-admin/
a good tips is to, save it in your webbrowser in a specific folder, then it´s easy to come back.
@Alter Ego - As long as the translated version links back to this tutorial series.
Hello Small Patato,
The installation is driving me nuts. I subscribe to GoDaddy but cannot get anything to work…
Now I would like to start MySQL in Xampp, but it stays at the “starting mysql” stage.
I have a mac and downloaded the right version. Do you know what could be wrong. I’ve spent 3 very frustrating days to try to install Wordpress; I’m about to give up (it’s either that or my mental health
Thx a lot
Marianne
Why did you subscribe to godaddy? What version did you download?
Hello Small Potato!!!
I subscribed to Godaddy because I needed a place to host my website. It has room for 25 MySQL databases. I want to put on my website a blog and a calendar for events that everybody who subscribes can update with new info.
The version of MYSQL is mysql-5.0.37-osx10.4-i686.dmg
but it does not seem to want to run on my computer (macbookpro os x 10.4).
But I also subscribed to Wordpress (another 15 bucks
to be able to edit the themes, in order for the layout of the blog to look like the one of my website.
I am lost.
Thx for your advice
Marianne
If you’re already building the theme on your computer and have downloaded the Mac version of Xampp then I don’t understand why you signed up for Godaddy and WordPress.com.
Marianne - You are “subscribing” to too many services. You can follow my tutorials and do everything according to each lesson, for free. All you need to do is install the Mac version of Xampp on your computer. However, I can’t help you with installing it.
Hi Small potato
I have benefited from your tutorial a lot. Thanks a lot for that. It seems that many new users are having trouble in installing wp on local system.
here is a step by step guide for that.
http://www.tamba2.org.uk/wordpress/xampp/
hope this helps ..
I love your tutotial. Easy to understand.
i had problem with Broken Theme. It said Template is missing.
I follow every steps.. i cut and paste the index.php and style.css.
What did i do wrong?
I can’t answer that questions if you don’t show me where the broken part is.
I am not sure where is the broken part,
But i’ve tried copy the default Wp index.php and using your given style.css to create a tutorial 2. I can activate a blank presentation pg.
But when i use the given index.php i have error in presentation– template missing.
Below is the index.php that i’ve copied from your given.
; charset=” />
” />
” type=”text/css” media=”screen” />
” />
” />
” />
” />
i finally found out what happen to my missing template.
i accidentally save my index.php into index.php.txt
Reason because when i save i type
file name: index.php
save as type: text documents *.txt
encoding: ANSI
Should tune the save as type to ALL FILES.
What a stupid mistake!
hi there, i got problem when i try open file index.txt, it blank, how i can copy some code there? hope can help me… sorry, im newbie here.
nasr - try again. i clicked on it. it works.
Lol, this is the second time I do a wp template and again I land here. This tutorial is just too good to use another :-).
This is really good! Thanks
I tryed many times to install Wordpress locally and it didn’t work until I created another database in PHPmyAdmin. Then it worked great. Of course, I made all the cahnges in wp-config.php. file. Thank you very much for this post and may God bless you!
[…] Intro #2 Template Files and Templates #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d […]
I am a mac user and it looks like I will be using an online test site because the XAMPP for Mac only works on Intel Macs. So far I am liking the step by steps. I do agree with the recommendation to have this series printable. I’d like to print it out and go through it on paper.
Elysa - There will be an ebook version.
[…] Intro #2 Template Files and Templates #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d […]
so far sooooo good. thanks for making this tutorial, i really appreciate it. i think it’s the only tutorial i can actually follow w/out any mistakes or confusions, so far. THANKS.
Thanks TiFF. Hope you’ll get through the whole thing. Don’t try to learn too fast
the index.txt link comes up with a blank page
Then you should download it. Many people followed this lesson and were able to see the index.txt file. I also have not changed that file since publishing this lesson.
thanks!
I think the problem is you told eveyone to instal xxamplite, and the file structure is found under C:\xampplite….. Also, when you are downloading wordpress, and you use winrar, it unzips to a folder call wordpress 2.2.2.2. There you will find the subfolder wordpress and you put the that folder into C:\xampplite\htdocs. If you follow the instructions word for word, you will get an error like I did. On my third installation, I did it right but I had to adjust for these things I just mentioned. For the really really new newbies, maybe the author of these posts can fix the instructions for that. Otherwise, thanks for posting these instructions. They have been very very helpful.
Hugh, I didn’t write the instructions for the xampp intall. I linked to tutorial.
Also, zip or rar, when you download WordPress from wordpress.org, it doesn’t unzip to a folder with a version number. It unzips to one folder, “wordpress.”
to Marianne: I use GoDaddy for my web hosting as well. GoDaddy already has Wordpress installed. You just need to add the application if you choose to. Just log in to your godaddy account > my products > hosting account list > open your domain listed there which will bring you to a hosting control center. Go to Metropolis (top right), this is where you can add various applications to your database. Just click on wordpress and install. Follow the instructions there and you’ll be ready in a less than 5 mins. However, to follow this tutorial I think you dont need to have wordpress on your server.
to Small Potato: Thanks for this tutorial. Very well written.
Your file index.txt is missing?
No, it isn’t. I’m looking at it right now.
That’s strange all I’m getting is a blank white screen.
Not to worry have figured it out, printed off you image and done it by hand, it’s working so far
Luckily I had a few themes on file I could check for the code:)
Thanks for this SP If I can follow it anyone can
Doh! You could’ve downloaded that file. Too late hhehee.
On “Step 3: Create index.php and style.css files”, i don’t see anything to copy and paste from the “index.txt” link?
OH - my bad. I just noticed a lot of other people asked and you said to download it. I’ve got it! ha ha ha…
Linnette, click on the link with button 2 of your mouse and click on save as, then open the file in your text editor.
Small Potato, thanks for the tutorial… im still in lesson 3. so far I can understand your explanation even without html or css knowledge background.
Small Potato,
I am currently using your Digg 3-column theme for my blog. Love it. I stumbled on your site and am now trying to teach myself how to do this on my own. Thanks for the very easy tutorial.
I have a question, and I don’t know if it matters. I’m running an Intel Mac. Instead of XAMPP, I’m connecting to Apache and MySQL through MAMP, and it seems to be working just fine.
When I go to my http://localhost… site in lesson #3, the page is not blank. Rather, it displays what appears to be code or settings or something. Here is a link to a screenshot of what I am seeing. Any ideas of what it is?
Thanks.
Alan - For MAMP, I don’t think the address is simply localhost.
yeah it’s http://localhost:8888/wordpress. Sorry - i didn’t type it all the way out. could what’s displaying be there because i’m running it locally and not on a public site?
Nevermind - I got it fixed. For some reason all that extra text from that screenshot was saved as part of my index.php file. Wacky. Moving on to lesson 5…
So I’ve copied and pasted everything as you said and now I’m at the presentation stage in the administration area. Tells me I have a theme installed but it’s incomplete. That I’m missing a stylesheet. Any idea why? Thanks
Nvm. fixed now
I am stuck with this 3rd step.
Do I need to download the XAMPP? and if yes which one? there is too many to choose from on that site.
Liza - Follow the tutorial in the beginning on how to install XAMPP. If you want to follow this tutorial series from your computer then download it.
Awesome… I am happy that I am able to follow your tutorial till now.Thanks a lot. Looking for the next lesson now
Ok, folks. Got to the end of this one. Two things: Installing Xampp, well worth it! I was going to try and do everything through Dreamweaver, but this is 1000x better.
Second, Apache wouldn’t start for me. Something about not being able to bind to a socket or port. The xampp-portcheck application showed me that Skype was taking up access to what Apache needed.
Dunno how to make the two run together–I just shut Skype down.
Hi Small Potato,
First, I’d like to say thank you very much for such a thorough and in depth tutorial. I’ve been searching everywhere, and have yet to find anything so exact and comprehensive. I’ve read up to #3, but I seem to be stuck at the template, step.
I opened the .txt file, as you suggested. I copied and pasted all of the text form that file into a blank file and renamed it to a .css file.
I then logged into my WP dashboard and the Presentation page. It does not list my blank template and at the bottom of the screen, it says “broken themes” and then says that my “stylesheet is missing’.
I read Kiro’s problem above, and I did save my .php file appropriately…even asked my techie friend to check it to make sure that I did the right thing and he said yes.
I’m wondering, the .txt file that I copies and pasted and saved as a .css file…was it supposed to contain mor than just the comments that are in it? I’m going to past below exactly what is in my .css file. I have the feeling something is missing from this file.
/*
Theme Name: Tutorial
Theme URI: http://www.wpdesigner.com
Description: This is my theme for a tutorial.
Version: 1.0
Author: Small Potato
Author URI: http://www.wpdesigner.com/
*/
Could you please let me know if this is correct? I’m working on a mac if that’s of any help. :ol Any help you can offer would be great. Thank you again for this tutorial series!
Sincerely,
TF
OOPS! I just found my mistake! Sigh. I mistakenly named the file styleS.css….with an “s” at the end of the word “style”. DOh!
Thank you and no need to troubleshoot! Looking forward to moving on with the tutorial! :o) Thanks again!
Hey,
I have gotten to part 3 of the tutorial and Im not sure if I did it right. When I downloaded WP, do I put just the “Wordpress” folder into the “htdocs”? Or do I put the “Wordpress 2.3.1″ Folder and then have the Wordpress folder inside that folder? Also, I have my XAMPP running but when I go to http://localhost/wordpress/wp-login.php, it shows me a blank page.
Thanks,
PS: Great tutorial!
Just the WordPress folder, no WordPress 2.3.1 folder. Please use the support forums for future help. Thanks Pixel T.
I just downloaded xammp and right away your blog is suddenly covered with “content link”, where words in your blog and comments are hyperlinked to ads. Did I just download adware? I’m downloading tv shows at the same time, so that might be it. But now I’m really tempted to remove xammp.
ooops, its not your blog, but the geeks are sexy blog that has the hyperlinks. Anyways, the questiopn is still the same. Is there any chance that xammp comes with adware?
I’m pretty sure it doesn’t come with adware.
I’m getting this error
Parse error: syntax error, unexpected T_STRING in C:\xampp\htdocs\wordpress\…
And I don’t know how to solve it. I copied the whole content of index.php and didn’t change anything, but there’s still that error
Can’t figure out what it is…
That means you have an extra semicolon on line 1.
Step 1: Open Xampp Control.
Navigate to your xampp folder. Usually My Computer > xampp or C:\xampp.
Any alternative for Mac users?
Use Mampp
[…] WP Theme Lesson #3: Starting Index.php oleh Small Potato diterjemahkan ke Bahasa Indonesia oleh Mochammad […]
Hi Small Potato,
This is a great tutorial! Thanks for all your work. I am having a small problem (I’m sure it’s something simple).
I’ve reached step 5 but am unable to log in to wordpress. I get the following error message: “ERROR: WordPress requires Cookies but your browser does not support them or they are blocked.”
I’ve tried both on firefox and IE7 with lowest security settings (no cookies blocked) and had no luck.
In addition the following lines of code appear at the top of the login screen:
“Warning: Cannot modify header information - headers already sent by (output started at C:\xampplite\htdocs\wordpress\wp-config.php:36) in C:\xampplite\htdocs\wordpress\wp-login.php on line 12
Warning: Cannot modify header information - headers already sent by (output started at C:\xampplite\htdocs\wordpress\wp-config.php:36) in C:\xampplite\htdocs\wordpress\wp-login.php on line 24″
I am able to login to wordpress I’ve installed on a server so I can only assume it is something strange I’m doing locally.
Thanks for your help!
Christiaan
cwventer,
I had the same promblem.
Open your wp-config.php file.
I had some junk code on line 1 from when I saved the file in notepad. Look for something before the start of the php file eg:
&*x <?php
Take out the &*x ( I made those characters up but look for some junk before the start of the php file)
That worked for me.
TGK
Great tutorial! However the index.txt file doesn’t work. It displays as a blank page. Novices like me will be stuck
try downloading it SM
thanks for the tutorial… however, i seem to have a really odd error, and i know all my directories are in line. this is the error i am getting:
Warning: require(C:\xampp\htdocs\wordpress/wp-config.php) [function.require]: failed to open stream: No such file or directory in C:\xampp\htdocs\wordpress\wp-login.php on line 2
Fatal error: require() [function.require]: Failed opening required ‘C:\xampp\htdocs\wordpress/wp-config.php’ (include_path=’.;C:\xampp\php\pear\’) in C:\xampp\htdocs\wordpress\wp-login.php on line 2
could it have anything to do witht he fact that i have wamp server installed on my machine, because
http://localhost/xampp/index.php is working so i figure the connection is fine.
Avash - I have no idea dude.
could it have anything to do with the wp-config.php or wp-config-sample.php file because it mentioned it. i created a wp-config.php file and now it says simply “error connecting to a database.”
i dont mean to be a bother but was hoping you might understand that better than myself. Any ideas?
Are you sure WordPress has been installed correctly? The config file should have the name of the database and “root” as the user, no password.
sorry, i am an idiot, i messed up the install and didnt even notice. thanks though… ill enjoy the rest of the tutorial now!
Suggest you put “Next” links after each tutorial. Or are they already here somewhere and am I missing them? I have to keep going back to the contents.
Yeah, this tutorial is awesome! I just finished lesson 3 and will be doing lesson 4 tomorrow! And you´re right: I should not rush it, just take it bit by bit:-) Thank you for doing this, it is really easy to understand.
Firstly, I’d like to say thanks for the great tutorial. However, I seem to be suffering from a problem that many others have had, but no one seems to know how to solve it. Can anyone help me out, it’s driving me mad!
I’ve followed all the steps successfully up until I try to goto http://localhost/wordpress/wp-admin/install.php. Then I just get a 404 error as described in some of the previous posts above. I’ve looked everywhere for an answer and have triple checked all my DB settings and made sure my files are in order, but alas, I’m still getting the page not found error.
I’m open to any suggestions anyone may have. Please help!
what is the name of your folder?
Not to worry SP- I reinstalled Xampp lite and followed your guidelines again and eureka- it works! Thanks for your response anyway, but now I’m looking forward to getting on with the rest of the tutorial.
Hey, I did everything you asked, but somehow whenever i visit the local host thingy and try to log in with my wordpress account I get an error which says invalid username.
Please help?
Hi Small Potato,
The link to index.txt (the one that we are supposed to copy text from) is not working. Can you look into it? Thanks! And great site by the way
Merrill
Hi Again Small Potato,
Well, I found a way around it! I just right-clicked and save the text file. However, you shoud still fix the link…Thanks!
Merrill
Merrill - It’s not that it doesn’t work. Some users have to download it.
I have a strange issue. No matter what, I always get, at the top:
——–
’Meta’
Site Admin
Logout
>
——–
Even when I make my index.php completely blank. Where might that come from?
the sidebar
Hey,
I’m going through the installation process and it says I need Mysql 4 or higher. I downloaded mysql 5, but I’m not sure if I just upload the files into the same folder or what. Not too sure how to do the upgrade. I’m using xaamp
Wow!!!! i can follow your step…. this is so amazing for me…. you are such a nice guy to teach us this lesson. Thank you small potato…. expect my comment on every lesson
For some reason when I clicked on index.txt it didn’t turn up for me, the style.txt did though.
Nice tutorial, i have a problem i cant seem to log into my account dont know why. Cant even remember if i have a password or not.
my mistake now i just cant find the theme named “tutorial” in the themes menu on wordpress.
Very nice, thank you fro sharing!
Where do I go to download the index.txt file?
Hi!
In firefox i get <?!?D?O?C?T?Y?P?E? ?h?t?m?l? ?P?U?B?L?I?C? ?”?-?/?/?W?3?C?/?/?D?T?D? ?X?H?T?M?L? ?1?.?0? ?T?r?a?n?s?i?t?i?o?n?a?l?/?/?E?N?”?……………. on the site, until the -tag in IE it works..
is it a problem or shall i just ignore that?
I admit, I’m a newbie. When I set up the Wordpress locally and followed directions it gave me admin as the logon name and a password that won’t work now. I’ve tried putting in root and leaving the password blank, but it tells me I left the password blank and asks me to re-enter. Is this a GAS question or can someone help???
Hi Small Potato, I am referring to your sentence “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.” I have this error
“Fatal error: Call to undefined function bloginfo() in C:\xampp\htdocs\wordpress\index.php on line 5″
What in the world does that mean? haha