WordPress for Designers: Day 16

Have you missed us? We’re back and ready for more action with our WordPress for Designers series! We are currently on day sixteen and each fay we are getting closer to completing our goal. Today, we go over creating and styling an entire page from scratch, including the sidebar. Furthermore, we will learn how to use multiple custom fields and text area inputs to take full advantage of the power of WordPress from the backend admin panel. Servers on, text editor running, Hanson playing on iTunes, let’s go!

Day 16

Resources you may enjoy:


  • Creadionizor says:

    Oh, man sorry to hear what happaned to you. Hope your recovver soon!

    Also Happy B-Day man!

    Great to see you back with day 16

    Greetz Creadionizor

  • wiznia says:

    Finally you are back! Sorry about the accident…anyway, this series are still great!

    Nice job Drew!

  • Jakov says:

    Hey, great tutorial. However, I think that the quality of the video isn’t good enough, when video is in the page, text is barely seen and when in fullscreen mode it is very blured out.
    P.S. Or maybe there are other ways to resize the video ?

  • sunny says:

    thanks for the screencast.. its gr8.
    btw there is a typo in your post “each fay we are getting”

  • Nice Screencast and Glad to hear your feeling much better too,

    As for when your talking about the Template Path, you can use


    That’s two ways you can easily output the theme directory :)

  • The code snippets in my previous comment didn’t output properly, so here they are:

  • Ben Russell says:

    Thanks for these great tuts. Awesome, and most helpful, as ever!

    Any way I can download these to a local HDD so I can watch offline? I have a daily train journey I’d like to use the time for watching these through again.

  • Really sorry about that, But check out this snippet which has the two codes: http://pastebin.com/f1f5797b7

    (Note to Blog Manager, feel free to edit my comments above to include the URL and delete the above comment :D )

  • Richard says:

    Thanks Drew! Good screencast, and glad to hear that you’re feeling better. The more I get to know Wordpress, the more I see the power in those custom fields. I’m using them to great effect in redesigning my own site, as well as in doing work for a client’s portfolio.

    Thanks for the good work, and happy belated birthday.

  • Kevinsturf says:

    great , a new one. I’ve been waiting soooo long for this. Thank you.

  • Adam says:

    Hanson wallpaper? Seriously?

  • Yoosuf says:

    cool, after a 1 1/2 months drew is back with the screen cast!

  • Shibi Kannan says:

    Wow, finally the wordpress series is back on track. Good to see you again Drew and hope to see more great content. Five stars

  • Devin Rajaram says:

    Hey can you answer some of these questions I have.

    First off, how can I make a page and list all of the categories that I have there and exclude a few ( I know the exclude part and how to do it) But the listing part of all the categories I don’t know how to do.

    Second, I made a post but when I checked all of text have no spaces between them, even when I add the in the html and I save, it still doesnt space them;when I go back to the post the also just disappears, does it have to do something with the css styling of the text?

    Also I’m using the excerpt and a featured post. But I have a news section and a sidebar. The sidebar shows all of the recent posts, but what I want to do is exclude the posts from the featured to be showing in the sidebar, But there is another problem whenever the post is in the featured it is also in another category. So I don’t want it to show in the sidebar when it’s featured, I also do want the post to show up in the category it should be in and not just featured.

    Ok for the news, I’m using the excerpt to show on the index.php page but in all of my posts I have a little box where I also include the excerpt for the posts that don’t get featured because on the main page; the only posts that do show the excerpt are the featured and the news on the home page. I wanted to know how can I exclude the excerpt from showing when I go on the page.php when I’m in the news category.

    I hope that’s clear, if not just reply here or catch me on my email at masterdkr@gmail.com. For anyone else who can help, feel free please.

    Thank you and good luck with your recovery.

  • TheDoc says:

    For those looking for more on Custom Fields, Chris from CSS-Tricks did a nice long screen cast very recently on just that topic!


    Great to hear things are looking up, Drew!

  • James says:

    Thanks but wheres Jeffs Diving into PHP :(

  • Roland says:

    Sure would be nice if they could keep us updated on the schedule of these series – especially when they are delayed as long as this one has been.

    I totally understand why, but I had to dig into Drew’s Twitter to find out what the deal was – just asking for a more public update of things.

  • DJ says:

    I hope you guys are paying attention to our comments – we want more screencasts – (from you and Jeff)

    Please also understand that no matter how many you create – we’ll still want more.

  • Gaspar Garcia de Paredes says:

    Why do you not include links to previous days within every screencast of this series, and do that for your other series as well? Talk about user frustration that we cannot easily go back to that first screencast, or jump to a newer one from one of the older ones…

  • James says:


    I AGREE! (PHP :P )

  • Kar Oakesl says:

    Thanks Drew… Great screencast, well worth waiting for, keep them coming.

  • Conkolas says:

    Great screencast. And btw, I’am getting tired waiting for next Jeff PHP screencast. Or that’s it and no more php series?

  • William says:

    I had trouble getting TEMPLATEPATH to work too. I used instead. I believe it finds the theme folder and then I added relative paths to images, etc.

  • Sérgio Soares says:

    nice surprise today!

    For the day 17, u could tell us and install plugins like popular posts, related posts, SEO, ect. Ah and style them

    Cheers Drew

  • Devin Rajaram says:

    @William What exactly are you trying to do, get a file? or link to a path.

    You can use

    Or if you want to link to a path you can use,

  • Devin Rajaram says:

    Also, anyone think they can help me ? With the questions I have written above?

  • Devin Rajaram says:

    O by the way, why doesnt my code show up in the comments, I written some ways you can link to the file but it just shows /file.jpg

  • William says:

    I was trying to describe that I used stylesheet_directory(); instead of TEMPLATEPATH for relative paths, but yeah, code doesn’t show up. I should have known that.

  • Marko Randjelovic says:

    Thank you!

  • luan says:

    Hey Drew,

    Thanks for the screen cast. I am also having trouble with my link paths. I used a relative path in my frontpage.php and the image worked, but would not work work on other pages such as about us or blog. I thought this could be because I was running the website on MAMP, so I uploaded the site to my server and I still have the same problem. So, I guess to go over my problem, the image for the logo.gif which is located in the header.php will show up on the frontpage.php but not on any other page. My only solution is to use an absolute path starting with http://localhost/...

    If anyone can explain this, that would be great. Again thanks.

  • pat says:

    Thanks Heaps for the series, Well worth waiting for!!

    Anyone else find problems with the wordpress text editor? Im working with the html view and my code gets destroyed! mostly p tags being added or removed!

    Most annoying! Is there a way to turn the WYSIWYG off?

  • danc says:

    Great screen cast, man. I always want to learn how to use WP, and do it from scratch. Now, I found you, Gosh….

    As others said, the quality of the video is not as good as the earliest one.

    Anyway, thanks a million, I hope that you are recovering by now.

    Last but not least, Happy belated birthday.

    p/s: looking forward to see the next episode. KEEP IT UP… :D

  • Ste Price says:

    I’m new to CMSes & this series is great & I’ve learnt so much from it but I’m a little confused about how to setup & use pages, categories, etc for clean navigation.

    I’m trying to build a portfolio website with “Home – Portfolio – Blog – Contact” as the main navigation and I want sub-navigation, in a different area on the page, of Portfolio: “All – Websites – Graphic – Art”, and in the location bar I want something like “www.mywebsite.co.uk/portfolio/websites/website-1″ where “website-1″ is a post. Hope I’ve explained it properly…

    Is this possible? Would each main navigation item be a WP page using a different page template? Would the sub-nav be categories? I’ve been looking everywhere & can’t find an answer. How does everyone else setup pages, categories, etc?


  • Bob says:

    As much as I appreciate these free tutorials, I’d still like to ask for:

    * Better quality control of the videos (this one, in particular, isn’t good)
    * Release schedule of future videos
    * Some attempt to reply to comments, or else tell us you haven’t time for it

    It seems so little to ask!

    I don’t want to seem ungrateful, but the way you’ve handled this series lately (and the way Jeff is handling his PHP series) hasn’t tempted me into supporting your paid ventures which I assume was the reason why you bothered in the first place.

  • adai says:

    It is a great Tutorials,but can you make it more claerly if you can .think you!

  • Jo6891 says:

    Pllleeeassse bring on Day 17!

  • Tonamel says:

    Yeah, TEMPLATEPATH looks too deep into the server, and doesn’t work for me either. Fortunately, there’s get_template_directory_uri(); which works exactly like I want it to.

  • Iain says:

    Good to see you back Drew, all the best for your recovery dude.

    Oh… and a very belated Happy Birthday. You rock hard (Hanson, indeed ;)

  • Daniel says:

    Hey Drew,

    We miss you so much. When will the next screencast coming? Can’t wait to continue learning wordpress from you… hungry man…. very hungry…

  • Chris says:

    I like your screen casts of WP. In any case, I am anxiously awaiting the next screen cast. I hope you get well.

  • Chris says:


    How can I have more than one blog like feature. I would like to use wordpress to handle news and projects but I want these pages to operate in a blog like way….

  • Kevin says:

    Looked over this twice and can’t seem to fix the image link issue. Everything works except for the plane_dark.png WTF? Also how do we get the light blue hover background effect like the PSD? Where is Screencast 17? If anyone out there can assist I would great appreciate your help.

  • Fras says:

    C’mon Drew!

    We need your expertise! I’m in a wordpress kinda mood so how long will it be before the next video goes up?

  • paul says:

    Loving the tuts so far, how long till we get to see the next section?


  • barat says:

    I’ve watched whole series in train (well … I travel by train often) and I like it … and it will be usefull – I have to make one blog in my company :)

    One thing – …

    margin:0 0 0 0 not 0px 0px 0px 0px …

    0 is always 0 – it doesn’t have unit :)

    It’s not an error … it’s just common sense :)