Understanding WP Themes
Pages in this tutorial:
Part 1: generalities
Part 2: header.php
Part 3: index.php
Part 4: single.php
Part 5: comments.php
Part 6: page.php
Part 7: 404.php
Part 8: sidebar.php
Part 9: footer.php
Part 10: style-css
WordPress is hard to understand, it took me a very long time to understand it, but it’s not impossible. To learn how to code your own WordPress theme, you just have to understand the codes. If you know what each code does, you’ll know how to customize it and once you learn where everything is and what each line of code does, you’ll be able to correct any mistake, you’ll be able to modify the aspect of your theme as you like. I am going to show you what each code line does, so you can really understand WordPress. Please note that I am not an expert, I know how to explain a few basic things but I still have a lot to learn myself, but in my opinion this is a good start. Also, note that this is how I make my themes, there a lot of other ways (that I didn’t figure out just yet) to do themes. I do my themes in kind of an old fashioned way, if I can call it like this. I still don’t know anything about widgets or automatic navigation functions or those things. Just basic.
I am not going to use pompous words or anything that would look professional because I know how it feels like to read a tutorial and understand nothing from it. I will explain it with my own words, nothing fancy, just how I’d like someone to explain something to me so I would understand it perfectly. I really hope this will help you and you will switch to WordPress, because trust me, WordPress will make your life so much easier.
So an wordpress theme should have:
-images folder » here you will put all the images you are going to use in your theme
-preview.png » this is the preview of your theme. The size of the image whould be 300x225px and it must be .png format
Now the pages .php files. I will list them in the order we will discuss them in the tutorial
-header.php » here you have some general codes for your website, also the html and body tags for your website as well as where your container starts and the actual header image and the navigation (if you want a top navigation).
-index.php » this is actually the blog post and only that. This is what it’s shown on your home page.
-single.php » here is your blog post when someone will leave you a comment. Yes, it’s different from the one on your next page. You have to stylize this too.
-comments.php » this contains the codes for comments and comment form only. There is nothing else included in this file.
-sidebar.php » this is your sidebar.
-footer.php » this is the footer, and where your coding ends.
-page.php » this is the file for pages. It’s actually the content of the page (like the blog post, but instead of the blog post you get what you wrote on that page.
-404.php » if there is a broken link, this is what will appear. You have to modify this too.
-style.css » this is your stylesheet. Here you put all the css codes you will use on your website (exactly like a .php website, there is no difference).
So these are the files included in your theme. Before we proceed to explaining every file, I am going to go through some things about php and css so you could understand why most people mess up how their themes usually look messy and nothing is in it’s place. Also I am going to explain some generalities about these files. So please, don’t skip this part. It is really important.