The Scoop

The Header

The main index.php first calls the php header file.  This file populates the top of the index page and contains these elements:

1. Good ol’ doc type, character set and meta tags
2. Beginning of the Body tag
3. Beginning of the Page tag, which I’ve included so that I can style the body and page
4. My Header, which is basically just my banner image, and
5. My top horizontal Navigation Bar which mirrors my website

Because I’ve modified the header file for includes, basically all static data, I really don’t need to call this file at all.  I could just put this static data in the index.php file itself….and I just might!  But, for now, let’s move on…

The Container

Next is an element called “Container”.  I’ve added this element so that I can include the background image from my website, and then nest all elements up to the footer within this container.  Basically, again, this is mirroring my website design.

The Content

Inside the “Container” is:

1. An element called Content with a class style for a narrow column.  From here on I’ve basically left the code as was in the default files, and changed the way they looked through CSS.  The narrow column allows for posts on the left and a sidebar navigation on the right.
2. First to populate is “Posts” if there are any, with styles for the heading and content
3. Next is the metadata, which contains the category the post was filed under, the author, date and time, comments, etc., and
4. A left and right navigation, which allows you to scroll through the posts (I’ve deleted this in my main index page).

The Sidebar

Next, the main index page calls for the sidebar, which in my case is the right side navigation.  The elements contained in the sidebar are:

1. A call to a “widgetized sidebar”….not sure yet what this is as I don’t have any widgets installed yet….so I’ve left this as is for now.  Also, some other calls and ifs for searches and not founds….again…I’ve left these alone for now.
2. Now the meat….If you are displaying your archives by year, month or day, or however you’ve set this up in admin, this is the first category to populate.  Mine is setup to display my archives by month.  But I didn’t like the category name “Archives” so I changed the header of this category to “Topics by Month”.  You basically have to search for <h> tags for the text and change to whatever you’d like it to say.
3. Next is the Categories that populate automatically.  Again, you change the <h> tag to say whatever it is you’d like it to say.
4. Finally, was a category called “Meta”, which included a login and links to stuff.  I basically removed this from the sidebar and added a header called “Designer’s Corner” which will include links to designer’s and developer’s that I read and go back to often.
5. Here I also closed my container div, as my footer is outside of the container.

The Footer

Finally, the main index.php file calls the footer.php file:

1. I’ve edited this file again to mirror my website, so the elements are basically my footer style.  I’ve left the “Powered by WordPress” slogan, just styled it a little differently.
2. Finally, I close the page, body and html tags, and Voila! we have a completely styled WordPress blog.

So here we have it!  In order to style the main page the way that I want it to look, I have edited these documents, all with ease:

1. Stylesheet – style.css
2. Main Index Template – index.php
3. Header – header.php
4. Sidebar – sidebar.php
5. Footer – footer.php

But….this is only the main page.  What happens when someone clicks on one the links?  What happens when someone clicks on the post and goes to another page that shows the posts and comments?  Oh noes!!  Have we been taken into oblivion??  Another topic will cover this….

~Bri

Enjoyed this post?

Subscribe to my feed, follow me on Twitter or refer me to your friends and associates!

Tweet Me	Share Me	Digg Me