WordPress for Designers: Day 13

Get ready to jump straight into WordPress coding as we continue on with our Wordpress for Designers series. As suggested by many of our readers, we will go straight into WordPress and begin coding our theme. Today, we will cover a basic reset, as well as begin coding our home page. Start your servers, launch your text editor, and let’s go!

Day 13: WordPress Coding

Clear Those Floats!

My mistake. At the end of the screencast, I forgot to mention to clear the floats that we used on the logo and the navigation. You should make sure the header.php file includes this, the code below reflects the markup you need:

<div id='header'>
  <h1 id='logo'><a href="<?php echo get_option('home'); ?>/"><span>Paper</span> Business</a></h1>
 <ul id='nav'> <?php wp_list_pages('title_li='); ?> </ul>
 <br class='dirtyLittleTrick' />
</div>

This will clear any floats used in the logo or in our navigation. If you prefer to use a different method of clearing floats, such as using the ‘overflow’ property, feel free to do so!



48

Comments
  • Yay. I was waiting for the 13th part for so long already. I learned a lot already and build my own blog along with this series.

    Thumbs up!
    Sebastian

  • Dammit, now I forgot to mention one thing: Your screencast is awfully quiet on my macbook. Could you turn up the volume for the next ones? This would be great – and I’m sure quite some people would appreciate it – the ones without external speakers :)

    Sincerely
    Sebastian

  • Magdy says:

    First to comment!!

    Man finally!
    Can’t wait anylonger!

    Thank you for the great work.
    Keep it up!

  • Kevinsturf says:

    cool new tut. thanks great one

  • Hassan says:

    Hey Drew, Thanks a lot for this tutorial. Learning a lot :)

  • Sagnik says:

    The wait is finally over……..Great tut. Thanks Drew!

  • Sagnik says:

    The wait is finally over……..Great tut. Thanks Drew! Waiting for more…

  • Gavin says:

    Just finished watching the screen-cast and I want more! lol seriously this is a great series. I am so glad that you decided to go straight from the PSD to WP. Hope you had a good easter to and I am looking forward to the slider!
    Gavin

  • Matt P says:

    Another great screencast to the series. Thanks Drew these are really helping me out.

    Just wish you could rattle these out a little quicker ;)

  • Matt P says:

    Oh forgot to say!

    Anychance you could bypass the slider till the end and just fill the space with something, then once the the wordpress series is ending go back to it?

    Its just if the slider will take a few screencasts to get sorted, some of us will be waiting ages to complete the other steps in finishing our themes.

    I know i’ll prob get shot down for this as the slider is very popular. Sorry….

    Just a thought

  • Magdy says:

    Waiting for more!!!

  • Hamza Oza says:

    Awsome Video Drew.

    Keep It Up!

  • Sankalp says:

    Haven’t watched video yet but seems cool.

    I’ve used Starkes Reset Theme before but would like to know more when I watch it tonight.

    Thanks Drew & Nettuts team.

  • Mike says:

    Did I miss something here? Or am I the only one who was under the impression you would be theming the site you spent the first 10 videos building?

    I kinda thought that was the point so was pretty shocked to see you starting again with a clean install.

  • WillxD says:

    This tutorial is great ;) ! very nice!

  • Nicholas says:

    Thanks for the overview Drew. I have been really enjoying this WP post.

  • Garrett says:

    Is there any difference in using ‘home.php’ as opposed to ‘front_page.php’ and setting that page as home in the WP backend?

  • Hassan says:

    Hey Drew, What happens to all that we coded recently? All that is useless, i mean we know we learned stuff from that but is that useless for like putting up the graphics and stuff together?

  • Sean Smyth says:

    Thanks again for the videos. Keep up the good work.

  • Cody says:

    Hey Drew, you could still release the source but without the images right. It would be a lot more convenite for some instead of having to pause write it then contiue. Just saying, but I really enjoy this series. Been with it since day 1. I also think skipping the slider for now is a good idea.

  • Michael says:

    Hey Drew I LOVE this series I have been following it since i found it (think you were on day 5 by then) I used Chris’s tuts on css-tricks to get started then found yours. They compliment each other very nicely.
    I would also like to put in and say skip the slider for a while. and lastly i want to put in a vote for a future idea in this series to discuss the rss portion of WP as i would love to have more than one rss based of different categories ect.

  • Dave says:

    Been looking forward to day 13, loving these tuts Drew

  • Nigel says:

    Love these tutorials Drew! I am up to Day 8 and I’m trying to catch up to now. For a php newbie like me, you make it easy to understand.

    Sometimes, I get confused with php syntax. What does : mean in a if or a loop statement?

    what does && mean?

    Sorry if these are newb questions but I’m a designer and a weak coder :P

    Can’t wait to get started on the psd!

    Thanks

  • CgBaran Tuts says:

    Great one again thanks

  • ThaClown says:

    Great, the Reset WP files save alot of time!

  • Shibi Kannan says:

    Hey,
    Great show really. I really like the step by step CSS tips and the organization is brilliant. I didn’t know Starkers theme was updated – gotta grab it right now. Thanks for the info. I wish the next series could be on Joomla theme development. One thing that distinguishes Joomla from Wordpress (while there are many other things) from purely CSS point of view is the collapsible columns stuff and ability to move around chunks of webpage anywhere you want provided you have different positions declared in the template files. It would be lot more interesting to play around with CSS specifically for Joomla.
    Keep up the good work.

  • Justin says:

    Great tutorial! I’m waiting for the next one in my e-mail :)

  • Hey guys,

    Thanks for all the great feedback and suggestions. There are a lot of suggestions and questions so I will try to get them all done one by one here:

    @Sebastian- Of course, I’ll be sure to turn up my mic volume for the next series. Thanks for letting me know.

    @Matt P- I wish I could too, unfortunately, these take a lot longer to make than one might think ;)

    @Mike-We will be using all of the skills and knowledge that we learned in the previous days to take a finalized design, and turn it into WordPress. If your upset that the code we did previously is not needed anymore, then I am sorry. However, it was the knowledge and know how you needed, not the code itself.

    @Garrett- I don’t think there is a difference. If I remember correctly, WordPress will look for a home.php and use that if it is available. I chose to do it this way so people could get familiar with creating custom page files.

    @Hassan- Please see my reply above to Mike. All of that coding that we did as absolutely necessary. We will still be doing all kinds of coding in this series and using all of the knowledge we learned to apply it to this theme, I am not sure what the issue is. You have to know the code and how it works before you can jump into a final design.

    @Cody- I will talk with Jeffrey and see what we can do about some of the source code minus the images.

    @Shibi- I have never worked with Joomla but I am sure if the demand is there we will have a Joomla series someday. Thanks for your nice words as well!

    Re: The Slider-We might wait a day or two, especially seeing as it seems a lot of you would like to move on and at least finish the basics of the front page before moving onto the slider. I haven’t decided if we will skip it for Day 14 or jump straight into it yet, I’ll let you all know.

    @Everyone-Thanks you all so much for all the nice words and support you have shown throughout the entire series. It really means and lot and keeps me going strong with these screencasts. I hope you all had a great Easter holiday :) Keep the suggestions coming!

  • Penny says:

    I missed Day 1 and can not find it in the archives. Help!

  • TwoSmooth says:

    These screencast are great! I am a graphic designer with some webpage knowledge, but I never learned CSS or anything other than dreamweaver and flash. I decided a month or so ago to dig deep in building a new site for myself using CSS. I quickly found there are a ton of resources out there. Unfortunately, I gave up because there was too much and my learning style is more classroom; listen to the teacher, then do. I came across your screencast by accident while looking at blog hosting possibilities. All that to say thanks!! I spent weeks trying to figure out where to start and you gave me all the tools I’ve needed. I’m all caught up now and waiting for the next episode. Keep up the good work!!

  • Blake says:

    Hey, nice new episode, I’m lovin’ this series…

    Got a question though… where is the part where you defined the current_page_item in the markup of the theme? I watched you style it and saw that it worked when you went to the About page, but when I scrubbed back through to see when you made that code for the HTML of the theme I couldn’t find it. I searched the source of my local Wordpress installation too to see if it was a default WP tag but it came out empty. Am I being dumb, did I miss something?

  • Randy says:

    Awesome job! Thanks so much. Happy you will be raising the volume. I am hard of hearing and have been pressing the headphones against my ears throughout. ouch.

    @Blake That is built into WP. Look here(scroll down the page)
    http://codex.wordpress.org/wp_list_pages

    Thanks!

  • jason buck says:

    Got a question though… where is the part where you defined the current_page_item in the markup of the theme? I watched you style it and saw that it worked when you went to the About page, but when I scrubbed back through to see when you made that code for the HTML of the theme I couldn’t find it. I searched the source of my local Wordpress installation too to see if it was a default WP tag but it came out empty. Am I being dumb, did I miss something?

    @ Blake current.page.item is a class that WordPress adds to the navigation for the pages. It is not something that you need to hand code, it is done for you.

  • John Bon says:

    I was waiting for the Wordpress portion.
    Can’t wait to watch!

  • Colin says:

    Love the tutorials so far! they are explaining some of the thigs i have been wonding so far, now i have an answer. thank you cant wait for the next ones to come!

  • Nick Nolte says:

    I can’t wait for the next tutorial

  • ger says:

    i use only dreamweaver before but this is very good save a lot off time thanks look forward what to come you never to old to laern

  • When does day 14 come out? I can’t wait!

  • vrizo says:

    I love these videos! I’ve got a website all done in html/css, but I wanted to give wordpress a try. But I cannot for the life of me get wordpress to show my images! I only get those little error boxes. Very frustating… Any ideas?

  • DJ says:

    Where is day 12??? It probably isn’t tagged correctly and this just skips from day 11 to day 13. I’ll do a search….

    Ah, found it under sitenews… doesn’t look like it’s tagged wordpress or screencasts.

  • paul says:

    Shawn Cope has an updated version of a blank theme called blankSlate, for 2.7
    http://shawncope.com/2008/12/17/wordpress-blank-slate-theme/

  • Ravi says:

    hi

    How to make a static home page or other static page for wordpress

  • Zac says:

    The nav looks easy to do when you’re using text, but how do you do it if you’re using images and sprites. I know how to do it with html/css but if youre getting the pages dynamically I wouldnt. Do you just manually put in the nav?

  • Emmanuel says:

    Great tutorial, is great the way take it over it really makes it easy for beginners with WP

  • Gabri says:

    Great screen cast drew , i have one question how can i sort the page links as i wish cause it`s sorted alphabetically and appears like that on all pages ?

    I`m using the latest WP release 2.8.2 .

  • Kevin says:

    Drew these have really been insightful and I have really learned a lot as a newbie to WP and re-skinning. I have the same question as @Gabri re: the pages. My page (or our nav) are set up alphabetically, how do we sort them like yours with Home as the starting button?
    Many thanks again and keep up these amazing tutorials!
    Kevin

  • Tim Lemons says:

    The Starks theme. Is it compatible with 2.8?

    Thanks

  • Nelson says:

    Hi Drew,

    This is the best tutorial I’ve ever come across. Thanks so much for putting this together. Its been very help ful in putting my site together.

    QUESTION….

    I want to exclude the “home” link from my navigation. I’m suing this code in the header.php:

    I’m supposed to put the page ID number in between the second “=” and the end apostrophe. I tried to find the page ID for the home page but couldn’t.

    Can anyone help?