When I said in Part 1 that I was going to “track my progress through the creation process” I was serious. So if you have been following this series of posts faithfully then you have made some mistakes. I know this because I have made some mistakes. That’s ok. It’s all part of the creative process. So I decided to take a quick pause, fix our mistakes and outline our next steps.
Below is a quick run down of the mistakes I’ve made so far and how to fix them:
I think I over DIVed. I know, I said they were good and believe me they are. But I spent some time peeking ahead and adding some CSS (more on that later) and noticed that too many DIV’s were getting in the way. I’m not sure if that was because I’m a CSS noob or just because I over DIVed. We will revisit this issue when we are done. The key is to build a good DIV test page in regular XHTML so you can track the behavior of your DIV’s to make sure your layout will meet your needs. I created a simple one to test out CSS styles for positioning. I’m listing it below in the event it may help you start to build your own. Just add a bunch of random text from Lorem Ipsum into your copy.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html> <header> <title>Div Test Page</title> <style> div { border: #ff8080 1px dotted ; } </style> </header> <body> <div id="outercontainer" style="width: 750px;"> <div id="innercontainer1" style="clear: left; width: 750px;"> Put lots of text HERE! </div> <div id="innercontainer2" style="float: left; width: 750px;"> <div class="mainarea" style="float: left; width: 546px;"> <div class="innermain1" style="width: 546;"> Put lots of text HERE! </div> <div class="innermain2" style="width: 546;"> Put lots of text HERE! </div> </div> <div class="rightnav" style="float: left; clear: right; width: 200px;"> Put lots of text HERE! </div> </div> <div id="innercontainer3" style="clear: left; width: 750px;"> Put lots of text HERE! </div> </div> </body> </html> |
Specific DIV’s were giving me more trouble than others. The menu DIV was not positioning well. Also, the contentContainer DIV did not seem to “contain” anything. I will address these later when we come to adding styles. For now the main thing to keep in mind is don’t add more DIV’s than you need.
Validate your page. You can use the XHTML validation tool at http://validator.w3.org/. It is a good idea to do this BEFORE you start to apply styles. Since I did not want to activate my theme I did a preview, captured the source, saved it into an .html file on my web server and then provided that URL to the validation tool. I found 21 errors. Lucky us!
The errors that I fixed included:
- My copyright tag at the bottom of the footer.php page was missing the semi-colon.
- I omitted the opening and closing UL tags at the top and bottom of the sidebar.php page. They are displayed with the PHP print command inside the <?php ?> PHP tags just below and above the sidebar DIV.
- I used the ID attribute to “label” the postHeader, postContent and postFooter DIV’s. I don’t know that this is wrong exactly, but it does create DIV tags with matching ID’s for each post displayed. The validation site flagged these as errors,but I decided that they were fine the way they were.
- I COMPLETELY forgot to add the search form. I decided to add it to the header in the header.php file. I added the following XHTML into the file after the close menu DIV:
1 2 3 4 5 6
<div id="search"> <form id="searchform" method="get" action="<?php print htmlspecialchars($_SERVER['PHP_SELF']); ?>"> <input type="text" name="s" id="s" size="15" title="Enter keyword to search" /> <input type="submit" value="Search" title="Click to search archives" /> </form> </div>
That’s really all the big stuff. Most of the other lessons learned will be discussed when we add our styles. For now let’s travel back in time to our beefed up index.php file in Part 7. There was a function that I dropped in without any explanation. It was comments_template (). Did you look this function up during your homework assignment? The function loads the comments.php file for use with single post and page views. I’m about 80% sure it’s the template in the “default” theme found at yourblog\wp-content\themes\default\comments.php. This is an example of WordPress default behavior. It is possible to “replace” this with your custom comments.php template.
If you spend time looking at widely distributed themes you will see more files in the folders than just the 5 we have created so far. This is because experienced theme builders want to control the complete presentation of the blog and assure it is consistent with their theme. In future posts we will look at creating some of our own theme specific pages for some of the more important templates.
Thank you for this great tutorial. With this informations it should be easy to build your own WordPress theme.
[...] the rest here: Building WordPress Themes – Part 8 Tagged with: [ looks-great, party, past, the-features, WordPress ] You can follow any [...]
[...] Here is the original post: Building WordPress Themes – Part 8 [...]
Thank you for the kind words. I’m still working my way through the process so there are more posts to come before we reach the end.
[...] to be able to come up with something similar. You can use a DIV test page like the one discussed in Building WordPress Themes – Part 8 and just apply styles and preview. It’s not much better than doing it in WordPress itself, but [...]