WordPress for Designers: Day 5

Continuing with our WordPress theme development series, today we will learn how to split and call our seperate theme files and include them in our theme. Splitting theme code into different and organized files is a vital part of WordPress development. We will also look at some very helpful php functions and useful WordPress template tags to create our widgetized sidebar.

Day 5: The Sidebar

Be sure to click on the “Full Screen Toggle” to move to full screen.

Resources You Might Enjoy

Help Us!

We put a great deal of effort into bringing you these videos free of charge. If they have helped, we would greatly appreciate a submission to your favorite social networking site. Even a retweet will help! It allows us to continue providing you with top quality content. Thanks again. :)

Download the Source Code


  • Darren says:

    Nice one! I’m really loving this series.

    Hope you feel better soon.

  • Saro says:

    Great, keep it up!

  • Rick says:

    Great job. Really enjoying this!

  • Kim Andersen says:

    Great work Drew! Looking forward to day 6 :)

    I’m loving this serie, and learning a lot. Thanks…

  • NazarDesign says:

    It´s nice! Thank´s for this video…

  • Absolutely love the series. Was wondering why the 5th screencast wasn’t being done.

    Thanks a bunch!

    **runs off to build the first bit of his new theme**

  • Dennis Aaen says:

    Great work Drew! Looking forward to day 6

    I’m loving this , and I’m learning a lot from the videos. Thanks

  • Gustaf Jarnling says:

    Great work Drew!

    I really enjoy this series, it’s very helpful. Hope you’ll feel better soon.

    Best wishes,

  • twiroo says:

    Drew, thank you!

  • Crypta says:

    I really enjoy in this series!

  • M.A.Yoosuf says:

    Thanks Drew, for accepting my lil request, its rocks, but taking bit long time to procss video, hope by next week’s 3rd day there will be annother one,

    V for u man, keepit up!

  • Awesome series. I love this because I have been looking for wordpress tutorials for a long time. I get lost in the codex and have no idea where to start, I love this. Thanks for this!

  • Fannie says:

    It’s a great tutorial.
    Thanks for share. :3
    I love that tutorial, cuz I’m trying to use wordpress to be my blog.
    But I didn’t understand php language, so..this tutorial can help me learn more. :3

  • Kevin says:

    I was hoping you’d include a login link.

    Nice though, nice,


  • Bron says:

    Thanks for these tutorials – I’m sad now that I’ve caught up and have to wait now for the next one :)

    You make it so easy to follow, well done!

  • Kevin says:

    Figured out the login link Just place this in your index file where ever you want your login/logout to appear.



  • Kevin says:

    Hey, it didn’t take my code…

  • Drew says:

    @Kevin-Try wrapping your code in html code tags with your code snippert, see if that helps. Glad you figured it out, I can include a login link in the next screencast also if you wish :)

    @Everyone-Thanks for all the great comments, they keep us motivated!

  • I’m loving the Muppet references in this one.

    To be honest this tutorial set has been an amazing start for me, but it was moving a little too slow for my learning tastes, so I delved into the codex and messed around with a site that I had been working on, and now I have site set up for a client with WP as a CMS.

    Between this and the Diving into PHP on Nettuts, I now feel like I was designing and developing sites with just nouns. You both have taught me verbs.

    So thanks so much for giving me the motivation and information to get into WordPress, I have been coming back to your new tuts since I am sure in my wild exploration that I missed out on some key elements.

  • John says:

    Nice, but the video stops at the middle and I can’t watch the ending.

  • Terry Williams says:

    Great tutorial Drew! I’m learning more from you than I have from the thousands of dollars I’ve spent at school to learn web design. Keep up the great work!

    I’ve do have a problem with my CSS is not working for the sidebar nor the nav. I’ve tried everything to move these things but nothing works. Can you post or link your CSS file so I can see if I’m doing something wrong? Thanks

  • DvS says:

    Great series! It would be nice to see the css to make the sidebar on the side, instead of in the middle.

  • DvS says:

    I got it from the source – thanks.

  • Willabee says:

    I was going along nicely validating with a strict 1.0 XHTML DOCTYPE until reaching this lesson. As with most server-side HTML generation processes, WordPress produces invalid markup which I thought would have been fixed by now.

    For example, get_search_form() generates invalid markup.

    This is obviously nothing to do with you Doug and your great tutorials, I was just wondering if you have any views on this?

    For those interested in fixing the code in the sidebar to validate striuct XHTML (after some tweaking and research) I produced this code (might have to post again if markup needs escaping):

    <form id="searchform" method="get" action="">


    <input type="submit" value="" />




    Keep up the good work, I’m learning a lot.

  • Willabee says:

    Hmmm! code tags don’t escape the markup as Doug suggested in a previous comment so let’s try again …

    <form id="searchform" method="get" action="<?php bloginfo(‘home’); ?>">
      <input type="text" name="s" id="s" size="15" /><br />
      <input type="submit" value="<?php _e(‘Search’); ?>" />

    <ul><?php wp_list_pages(‘title_li=’);?></ul>
    <ul><?php wp_get_archives();?></ul>
    <ul><?php wp_list_categories(‘title_li=’);?></ul>

  • really nice videos , i started to work with wordpress now !

  • Ryan says:

    Great videos, im learning heaps! And i rofl everytime i see your new wallpaper haha!

  • ChessMess says:

    You forgot to tag this post as Wordpress

  • CgBaran Tuts says:

    Excellent post thank you!!

  • jake says:

    lol in this video you sound’s like that guy in “You suck in photoshop series”.

    Ps. I really enjoy your video cast :)

  • Ben says:

    Great video tut! This is helping immensely!

    There’s also another way to list your navigation as of wordpress 2.7. It uses the function


    This function allows you to add a “home” link by using the parameter


    i.e. wp_page_menu(’show_home=1′)

    Once again, thank you so much for your videos! I’m looking forward to going through the entire series :)

  • Laurent says:

    Hi, great video but iget some troubles with the nav, in fact i get some dots in front of each pages and the unordered list seems to be not inline like on the vid. Did i do something wrong ?

    here a capture of my trouble…