WP Theme Lesson #1: Intro
- Filed under: Tutorials
Intro is the first lesson of my tutorial series about creating WordPress themes. I will not teach you everything all at once. That will only confuse you. What I’ll show you is not a reference. It’s meant to teach you step-by-step, level-by-level. If you want a reference to everything WordPress themes, then read WordPress.org’s documentations, Design and Layout. Otherwise, learn from my lessons.
This lesson covers:
- Basic Rules
- Lingo / Terminology
- Hierarchy
Basic rules:
- Rule #1: Close everything in the order that you open them.
In The Wrong Way to Close, the closing ul tag is out of order.
Every tag is wrapped by the < and > characters, the presence of the forward slash, /, indicates whether each tag is an opening or closing tag. <> is open. </> is close. In the example, I used the ul (unordered list) and li (list item) tags. Notice how the opening and closing li tags sit inside the opening and closing ul tags. That’s called nesting.
- Rule #2: Every theme has at least two files - style.css and index.php. You tell your theme where everything goes within index.php and how everything should look like within style.css.
Here is the complete list of files (don’t worry about this list yet):
- style.css
- index.php
- home.php
- single.php
- page.php
- archive.php
- category.php
- search.php
- 404.php
- comments.php
- comments-popup.php
- author.php
- date.php
Lingo:
- Template - A set of codes that you can use in multiple places without having to write the same codes again and again.
- Template file - A file that contain one or multiple sets of codes (templates). Every page is made up of multiple template files. For example: index.php file, style.css file, sidebar.php, etc.
- Theme or WordPress theme - All the files you’re using: texts, images, codes, etc. Note: WordPress theme and WordPress template(s) are two different things, despite some people consider them the same.
- Post - Currently, you are reading a post. Furthermore, it’s simply an entry of your blog. In example, one page of a diary.
- Page - A special type of post that is not orangized by categories. It is separate from the rest of your posts. Note: In WordPress, page and Page are two different things. Whether you capitalize the “P” makes a huge difference.
Hierarchy:
The diagram below simply shows you what the WordPress system will look for, in case one of your theme file is missing. I listed only six files, instead of thirteen in the diagram because those are the main ones that you should focus on. Further down this tutorial series, you will learn about the rest of the files.
I’ve indicated the level of importance of each file by its position. Top, left is most important. Bottom, right is least important.
Hierarchy or levels of importance exists for template files because if the archive.php file, which handles the look for archive pages, is missing, then WordPress will point to the index.php to control how the archive page will look like.
If the single.php template file is missing, which template file does it look for to display a single post view? It looks for index.php.
If you have any question, feel free to ask. Please do it through the comment form below, instead of emailing me. That way, others looking for the same answers don’t have to repeat their questions.
Follow this WordPress Theme Tutorial Series from the beginning.
Thank you for this tutorial series - maybe I can finally create something I really want instead of having to tweak and not really being happy with my “theme of the week”.
Did you fully understand this lesson Kim? I want to know what’s confusing so I can edit this one and improve on the next.
Hi Dude,
You must have an option to print this series. There is a print plugin. I will try to find that for you and let you know about it.
Regards
Alpesh Nakar
Hey. I never thought of that. Thanks Alpesh!
There seems to be a plugin for everything when you’re using WordPress. I love it!
Now I don’t have to create printable versions via .pdf.
There is also a plugin that allows you to convert a page into PDF.
[…] 说到WPdesigner，这个网站是Small Potato的个人åšå®¢ï¼Œä»–å‰äº›æ—¥å开始了一项挑战：在三å天内设计三å个WordPress主题。现在他已ç»å®Œæˆäº†è¿™ä¸ªæŒ‘战（详情点击），转而开始写关于如何制作WordPress主题的教程了。 […]
[…] WP Theme Lesson - Small Potato […]
This is exactly what our community needs! I found in on http://www.johntp.com and I am excited to read these series of articles. I do pretty good with tweaking themes to make them more personal for me… but for a long time I have wanted to create my own. As far as custom themes go, I really like your work and consider your themes to be on the top as far as quality, design, and looks. I find most of your stuff on Theme Viewer.
I really appreciate the time you have taken to create these series of posts. I know that it is very hard work, and I wanted to let you know that your efforts do not got to the way side. Awesome! Awesome! Awesome!
- Garry
I would consider when you have the series complete to wrap them all up in an e-book .pdf and provide the book for a small price… maybe just $1.00
The value is by far so much more… but I know you want to contribute and help the community… but also there is a little balance to, you need to make a little money from time to time…. at least to cover hosting fees and such…
If you were to wrap this all up into a .pdf and sell it for a dollar and have 1000 people download it, you are looking at a nice chunk of change…
I personally would have no problem paying up to $5 to $10 dollars for the whole write up nicely organized into a .pdf.
Just my thoughts… I am not trying to tell you what to do, only want to explain that as a consumer, I would definitely buy this if it was in e-book form or another.
Awesome job! Really cool… you are a total class act!
- Garry
[…] WP Theme Lesson #1: Intro […]
@Garry - I didn’t think I could do that. Thanks for your suggestion. 1-5 dollars here and there will for sure cover hostings.
[…] the rules, structure, and hierarchy of a WordPress theme […]
As promised.
Print Plugin http://www.lesterchan.net/portfolio/programming.php
Cheers!
Alpesh
Thanks Alpesh. I’ll check out this plugin.
[…] #1 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 Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing (wp_list_pages) #6cGet Archives and Links #6d Search Form and Calendar #6e Widgetizing Sidebar #7 Footer […]
ok, i’m starting this “class”. i’m currently reading in lesson numero uno. LOL
Hi Small Potato: Just call me Big Dummy. I downloaded a template and have been trying in vain for 2 weeks to manipulate it into what I want for a site. No luck. So now I’m determined to learn to make my own, and have looked at your tutorials, but am getting nowhere because I can’t download XAMPPlite to my C drive.
If I left click to download it puts the file on the desktop under documents and some other junk, and the place to double click setup_xampp.bat does not appear.
If I right click and select “save to” I can put it on C drive, as xampplite.exe, but the next step gets this error msg:
C:\XAMPP~.EXE
The NTVDM CPU has encountered an illegal instruction
C5:0db3IP:01b6OP:63 29 20 4f 70 Choose “Close” to terminate the application.
You’re probably thinking “If he can’t do a simple download he’ll be hopeless at the rest of this”, but I’m stubborn and will persist. Can you help?
Brian,
It doesn’t matter how you download it. I would just download, then drag it to the location that you want it, which is My Computer > Local Disk… I believe.
If you can’t install it, don’t worry. Make a dummy install online instead of offline.
Hello small potatoe
I need your help because I encouter a error message when I type http://localhost/wordpress in the url
this is the error
“Error establishing a database connection”
This either means that the username and password information in your wp-config.php file is incorrect or we can’t contact the database server at localhost. This could mean your host’s database server is down.”
I dont know what is the problem may be the username or password??
I write my database name, and user name and a password in the wp-config.php
The local server is running well (Xampp control) I mean the
Appache and SQL
So can you help me to solve this>>?? please?? I got a head ache because it is my first time using wordpress and I am very grateful to see yur nice tutorial …..but I need your help
all your need is database name, user, and “localhost”
don’t use a password
nice and clean explanation of the layout, username sh ould be “root” without quotes
password just leave it blank as potato said
Thanks you
Small Potato and njoker
Now it works…..thank you so much
Now I can see the blog,,,,But I have another problem..because I cannot login to the admin to do the editing…
the username is “admin” and I type the password that they gave me in the third step..I hope you know what I mean..
and when I Login it brings me to the same page (LOGIN PAGE again) wihtout any error message…like password incorrect or invalid username,,,,I try to login again and again but it the same thing…it always display the login page…without any error message….
I dont know what is the problem can you help me plizz
thanks
[…] I’m posting it now to reiterate the first rule in my WordPress tutorial series, which is close everything in the order that you open them. […]
Mr. Potato,
Thanks so much for putting this tutorial series together! What a lot of work, but a huge help for the WP community.
Checking out your tutorials now.. I would like to be learn about wordpress themes and how they work.. Been able to mod themes to my likings but haven’t made my own theme from scratch yet. Thanks!
Wouldn’t it be nice if you had “next” and “previous” links at the bottom of each tutorial post?
Wow, this tutorials look great… I am going to learn step by step on how to create a theme. I have been looking for it for a long time. I am setting up a blog now and I am sure this information will come in handy for me.
Thanks…
Thanks KP, you can post at the forums for help, if you need any that is.
Small Potato,
Thanks for tell me that there is a forum too… that’s another great info… I will sign in to take a look…
Cheers…
Great! Good tutorial
Hi Dude, well, thanks for everything in this tutorial, i really need help for this. I’m tired to install wp themes.
I am now taking this tutorial, thank you!
nada
I’m really looking forward to following this tutorial as I accidentally messed up my experimental WP site trying to make my own theme.
I’m doing it online though, don’t like the sound of installing it on my pc!
[…] WP Theme Lesson #1: Intro » WPDesigner (tags: wordpress tutorials design themes) posted 24.06.07 02:36 AM by mpty; “links for 2007-06-24″ is tagged lobby; it can be found at all times here […]
Thank you Dude,
I appreciate very much that you teach me not asuming that I know something and this way I can learn everything and easy. It is a great tutorial. You will do great if you will put it in a book.
Been looking for a WP tutorial like this for ages, excellent stuff - will follow your tutorial to the end my good man!!
time to start all over again now
One Meelion thank yous! This is /exactly/ what I need to make it all kind of come together and make sense in my head. I’ve been really rusty with web design and development and now I can see the light at the end of the tunnel.. whew!
-=- christopher
my Las Vegas blog
Very Good lessons.. thanks a lot..
[…] #1 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 Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing (wp_list_pages) #6c Get Archives and Links #6d Search Form and Calendar #6e Widgetizing Sidebar #7 Footer #8 How to Validate #9 Style.css and CSS Intro #10 hex Codes and Styling Links #11 Widths and Floats #12 Post Formatting and Miscellaneous #13 Styling Sidebar #14 Footer and Diving Index #15 Sub-template Files #16 Comments Template […]
All I can say is, “Thank you, Thank you, Thank you!!!!!” I have been wracking my brain for weeks! 4 to be exact and this finally helps me arrive at some level of structure and clear guidance. Thanks, Small potato… you’re a big ‘ole Spud upOnHere!
Great information on Wordpress Tutorial Series for beginner. Thank you for your hardwork.
Hello. Thanks for the wonderful tutorial. What is the difference between page and Page?
A page is any page. A Page is a type of blog post that’s separated from regular blog posts.
Hello Small Potato I have a problem of installing one of the gallery plungins known as Lazyest-Gallery..when I installed I get a message
WARNING : Specified gallery folder does not exists: gallery/
I followed the installation process
How to install:
===============
0. If you have a previous version of Lazyest Gallery we reccomend to follow
the “How to upgrade” section.
1. Unpack the archive to your wordpress plugin dir ( /wp-content/plugins/ ) AND
be sure that it will be placed inside a folder named “lazyest-gallery”.
2. Create a folder for the gallery where albums will be placed if you haven’t one already, better in the WordPress root folder. *
3. Activate plugin in the Wordpress backend.
4. Go in the new Options -> Lazyest-Gallery page of the Admin panel and adjust the configuration to suit your preferences.
5. Create a new page and write [[gallery]] in the content, save and it’s done.
Need help pliz…
cheers
luczpt
This would be extremely usefull. Thanks.
Been messing around with themes from others and sometimes end up getting messed so bad that the blog has to be down for days.
Ben, you might want to install WordPress to a test server account, or use XAMMP, or another tool to run a local development server that you can use to test and develop themes, plugins and the like.
You shouldn’t have to be down for days and having a test bed should take care of it.
Nice Tut, I’ll start my Blog following next lessons, Thanks
As you go through this awesome tutorial, you will come to a point - as I did - where you need a quick reference to all of the Wordpress template tags. I made a file that contains a single sheet of all the template tags that will print nicely on one 11×17 inch standard print. Tack it up on your wall! I put it on one of my websites to share with others. It’s available on there in Microsoft Word or Adobe PDF format.
Wordpress Template Tags Quick Reference Sheet
Download and Enjoy!
-=- christopher, editor for “While Las Vegas Sleeps…”
Thanks for the nice intro tutorial.it is very easy to understand .
Hi…all I wanna say is a biig thanx for this…I finally found what i really needed! Great stuff!
[…] what am I proposing? Note: If you get confused†- educate yourself on the .php files of Wordpress here and […]
Keep up the good work SP. This article is really informative. This was my first visit to your site and from now on I will regularly visit this blog.
Nice tutorial guess i’ll read the whole series
Jackpot!! Wow! I can’t wait to read all the posts and learn, learn, learn. You should publish a book! Thanks.
[…] A very descriptive and usefull tutorial on how to create a Wordpress Theme. Small Patato makes it looks easy. Even has a step by step guide on how to setup and run Wordpress form your Windows XP or Vista Machine. for more Information see here […]
thank God for you!
[…] 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 […]
Just a small suggestion, since you’ve posted most of the posts for this already, how about adding a “Next” link that points to the next step in the tutorial. I know a lot of users would be expecting that; Besides, it’s no big deal to add a link in WordPress anyway.
Cheers and great work!
Merry Christmas!
[…] Dari WP Theme Lesson #1: Intro […]
[…] WPDesigner » WP Theme Lesson #1: Intro WP Theme Lesson #1: Intro […]
Why single.php file is used. ?
single.php is for controlling single post view templates
Hi,
I found this great site through Google search for the keywords “wordpress tutorial theme”. My search for coding wordpress themes tutorials really ends here. Thanks a lot for mentioning everything in details. I just completed this first tutorial.
brillliant. added your site to mixx.com and mahalo. thanks!
Thanks Jansie
can I create my own blog page without knowing HTML code?
you can install a blog, but you cannot create your own theme without knowing html.
there’s no program that will write the code for you like dreamweaver does for websites. Why can’t you use dreamweaver ? Thanks for your help
LOL that first sentence was a question… I forgot the question mark
So how much is this different than just making regular pages with xhtml and css? I mean say I have a regular website. Can I convert it into wordpress or can I only use those six file names like style.css (Because i have my own way of coding). What is the advantage of wordpress? (The only reason I think I want to do it is because I want to learn about PHP and be able to have widgets and other such things like the archive (I have no idea how to make an archive or search box on a regular site but I am good at coding with valid xhtml and css)
[…] is called WP Designer which is operated by a guy named small potato. On his site, he has a complete tutorial on the basics of setting up a Wordpress template. I spent about 2 hours going through the tutorial […]
This tutorial is awesome! I feel totally empowered now to create my own theme. Thanks!
I’m attempting to create a theme for WP and I was wondering if it would be possible to have everything in one index.php file. Are there conditionals I could use to determine if the url is looking for a single article, list of articles, etc.?
Wow, I’m already lost!
This is great. Glad to have stumbled upon this page. Well done.
Very useful. Thanks
is it possible for me to create a blog similar to http://www.perezhilton.com or http://www.thedirty.com
I love the post ! , But when it comes to text on the web, i still prefer the old printout .
Can you provide the tutorial in PDF format ?
I hope i am not the only one with this Q ….
Great job btw