Nathan Waters

HTML = childs play… it’s the most basic coding for a web page, it’s easy to learn and it’s the foundation for any sort of web development. I learnt mainly by looking at the source code on various sites: just right-click, view source.

CSS = ironing… it’s something that you’d rather not do or learn, but doing it definitely makes everything look nicer/neater. You may produce/find some burn marks, but practice makes perfect. I’m still a little rusty on CSS, but I’ve just been learning by looking at what other sites do: right-click, view source and then the CSS code will either be in there or look for a bit of code in the “head” section that has “style.css” (or similar). Copy that path to the end of the domain and your browser will open up the CSS stylesheet.

PHP = public speaking… you know that learning and perhaps mastering it will produce some very cool results, but you’re scared to even learn the basics. You know everyone uses it in some form or another, but your fear gets the better of you and you push the learning aside.

I have known for a long time that just about every decent website uses PHP ranging from simple to advanced uses and integrations. But I have always put off learning it, thinking “oh, I don’t want to have to spend hours and hours trying to learn this new language when I can either use HTML or pay someone to do it”. I have a tonne of web bookmarks for php tutorials which I’ve just added in the hopes of going back later on and reading/learning it (never happened).

Well yesterday I forced myself to look into it.

I was working on the template/logo for Drop Buy which is up now, but still under development. I knew that a lot of websites have a separate header php file for the website header and one for the footer. So that you only need to make changes in the one file for it to apply to all other pages on your site. But I had thought that even this PHP coding was difficult… to the point where when I made pixTower I actually manually copied the header and footer to each and every page (yes very sad and lame lol).

….

Actually it’s easy, here’s how:

Have a search for PHP includes tutorial

In my template for Drop Buy, I only needed a header and footer (as I just included the navbar in the header). But you can “include” numerous files like a separate menu.

Soooo, what I did was:

1. Copied all the HTML code that included the top section of the site (so everything from the starting “html” until the end of the navigation bar I have)
2. Paste that into a new text file and save that as “header.php”
3. Now do the same for the footer. Copy all the HTML code which includes the footer (including the final “html”) and save that in a separate text file as “footer.php”
4. So now all that’s left is whatever content was in the middle (between the header and footer)
5. Start a new text file and save it as “index.php”
6. Add this code at the top: < ?php include "header.php"; ?>
7. Then copy the middle content beneath
8. Then add this at the bottom: < ?php include "footer.php"; ?>
9. Save, upload to your host, done.

So now when the index.php file is loaded (i.e. when someone goes to your main page) it automatically fetches the header and footer and adds them.

You can now repeat the same process for other pages, but save the file as about.php instead of index.php for example.

To display the .php pages you need to have them on a php server. So you can either set this up on your own computer using something like Apache or if that’s too complicated (as I’ve found) you can just edit the files using FTP (so upload them to your host and edit via FTP).

….

A few other tricks:

….

Notice how the URL to my pages are www.dropbuy.com.au/about instead of www.dropbuy.com.au/about.php?

Download this file (make sure it is name “.htaccess” only) and upload it to your root directory. It’s a .htaccess file which basically tells the server to treat /about as going to /about.php.

….

Need to change the page titles dynamically?

In your header.php file replace the title tags with:

…and change the title to what you want for your main page.

Then in each other file (e.g. about.php), add this at the top: < ?php $title = "About :: Drop Buy"; ?>

….

Want to change the link colour to tell people what page they’re on?

If you click on the “About” you will notice it goes to the About page and highlights the About page which helps notify the user as to which page they’re currently on.

Add this at the top of your header.php file:
< ?php
/* Set a value for $PHP_SELF (for v4.2+) */
if ($PHP_SELF == "") $PHP_SELF = $_SERVER["SCRIPT_NAME"];
?>

And then for each link add this code:

Then in you CSS file add styling definition for the class .herebar, e.g:

So what that does is it looks at what the current page is and if it is the About page then it adds the class="herebar" to the link, otherwise it adds class="contentsbar". So you just use CSS to say: highlight the text if it’s class is “herebar”.

….

Erm, damn even that simple stuff sounds pretty complicated when writing it down lol.

Hope it helps you somewhat and was understandable enough

Sorry about the messy display of code. For some reason WP was spitting out all sorts of random things, so I had to create images of the code.

I’ll post some updates on Drop Buy in the coming days/weeks. I have some more fun ahead of me trying to implement a blog and a few other little features.

edit: Now reading through this great tutorial. And these, ones.

Nathan Waters
PHPerifically something