New Screencast: Designing for Wordpress: Part Three

* July 17th, 2008 *

by: Chris Coyier

In part three of this series, we finish up the structure of the site and start diving into the details. The typography is set up, the right sidebar is set up, and the footer if flushed out. Then we use SimplePie to pull in the external RSS feed and jQuery to pull in the “social” stuff. Not exactly WordPress related, but I warned you! Then we look at styling up the rest of the WordPress layout types like Single pages (with comment styling) and Pages. At the end we pop open the design in a bunch of different browsers to see how it holds up.

Fair warning: this is a long one again at almost a full hour. This will be the last one in the WordPress series, I will get all the files together and tidied up and make them available for download soon.

Also note: I am doing a test on the video page this week. There is a bit of a new layout, which now includes links to things mentioned in the video. The video is also displayed in Flash video format instead of a Quicktime embed. This should help folks who have been having problems with viewing the videos online. The trade off here is that the file size is 3 times bigger (this week is a behemoth 315MB), and the quality is slightly worse. Most of them won’t be this long, and hopefully I can figure out a way to get better compression and higher quality, because I think this will really the viewability of these things. The iTunes subscriptions and regular RSS feeds will still have regular links to .mov files. Although… since those might not be used on the web anymore, I might turn them into .m4v files so they can be AppleTV compatible.

I’ll probably keep up with this Flash thing for a few weeks and see how it goes, if it works out, I’ll go back and do the rest of the archives like this.

Responses

Niki Brown
July 17, 2008
[ permalink ]

Chris - Thanks so much for this series! Its really helpful!
Philipp
July 17, 2008
[ permalink ]

Hey Chris! I follow your screencasts quite a while. Since the Wordpress series it has developed into a kind of thriller. Its really fascinating to follow your steps and I am pretty happy bout the length and the quality (both Content and Video/Audio!)!
If you could send it as m4v at least I would watch it on my AppleTV! YEAH!!
Cheers from Yokohama
Thomas Offinga
July 17, 2008
[ permalink ]

Thanks Chris! The tutorials have been sooooo useful so far!

Thanks!
Todrick
July 17, 2008
[ permalink ]

Thanks for a beautiful series on wordpress you really helped this newbie out.
jamie
July 17, 2008
[ permalink ]

Hey chris. Thanks for the wordpress. It’s awsome. I am falling in love with wordpress thanks to you. I am watching the latest right now and I got to the part where you are deleting the postmet data from the index.php. I am a noob coder with all kinds of code and one thing I have learned is when you don’t want to use code. It is better to comment out the code so that it stops functioning than to remove it. This way in the future if you do want to use it, You won’t have to figure out how to rewrite it or figure out where it goes. Just a coding tip.
Majesticskull
July 17, 2008
[ permalink ]

It’s a awesome serie! But i think the quicktime embed is much better quality =/
(sorry for the poor english)
Alex Tran
July 17, 2008
[ permalink ]

Concerning your video/encoding problems . . . were you aware that v9.0.115 of the Flash Player and above support playback of videos using the H.264 codec? The H.264 codec achieves a high level of compression while still retaining the original video quality.

That would give you the benefit of still using a Flash Player while having a better quality, smaller file size video.
Chris Coyier
July 17, 2008
[ permalink ]

@Alex Tran: No I wasn’t aware of that…. Do you know how I can covert my .mov files into that format. Right now I convert to Flash using the “Adobe Flash CS3 Video Encoder” that came with the CS3 suite. Doesn’t seem to have many options concerning codecs.

Or - would I be leaving the video in the .mov format (only compressed with H.264 instead of “animation” like I’m using now), but the flash player I’m using on the site would still recognize it?
Alex Tran
July 17, 2008
[ permalink ]

@Chris: You can try QuickTime Pro, but that will cost you some money. Not a bad investment since QT Pro is a decent Swiss Army knife of video conversion.

But if you’re looking for free, here are some free ones to check out:

FormatFactory

MediaCoder

Any Video Converter

Not much experience with any of those, but they may do what you’re looking for.

Hope that helps.
Adrian
July 17, 2008
[ permalink ]

IMHO Flash = Fail…

Keep flash player if you want, but give us an alternative - downloadable .m4v files should be fine for everyone

But the best solution, at least for me, is video podcast. One simple RSS feed and all of us can have latest “episodes” waiting for us in iTunes or any other media player of choice

I also have to say that you’re doing very good job delivering high-quality css tips, tricks, tutorials, screencasts etc. Many thanks!

Cheers,
Adrian

btw - I’m sorry for but english is not my native language
Kevin
July 17, 2008
[ permalink ]

Hey Chris,

I had the same problem that you did with the single page div (classified “post”) not having a closing tag. Like you mentioned in the video, I think that this is a problem with the starkers theme. It took me a few hours of anguish to figure it out - somebody should tell E. Stocks about this issue.

Thanks for the great screencast & WP series!

-Kevin
Ross
July 17, 2008
[ permalink ]

Chris, great Wordpress podcast series. You’re doing God’s work.

As far as I’m concerned these PS-HTML-CSS tutorials are all you need to do to secure a growing audience. More!

Ross
kurt
July 17, 2008
[ permalink ]

its very useful if we can download it.
mike
July 18, 2008
[ permalink ]

I just discovered your site and there is a lot of good stuff here. The video quality is fine.

This was an interesting series, it’s always good to see alternative methods for theming WP but I would have been a lot more impressed if you had validated your code.
webmonkey-in-ireland
July 19, 2008
[ permalink ]

Chris, some brilliant stuff here..Just came from del.icio.us. Love the way you’ve used video on your site. Great post.
Some user
July 19, 2008
[ permalink ]

Come guys! forget flash.
Christ, keep using Quick Time!.
Beau
July 20, 2008
[ permalink ]

Hey Chris,

I noticed some discussion on Flash video and the h.264 codec so I thought I’d chime in on it. I’d done some reading about it before when I was considering using a Flash Player for a project; it’s part of the Flash Player itself, so people will need to have the latest version to have the h.264 compatibility. What it does (or at least what I’ve gathered from research) is allow the Flash Player to stream content of most any filetypes…so you don’t need to convert anything to .flv. That way, you still get the quality of a .mov file (including HD resolutions!) but presented with Flash. I’m no Flash expert, but I think a good look at implementing it can be found on this blog:

http://www.communitymx.com/content/article.cfm?page=2&cid=5CAB4

Hope that helps you out!
Jyst
July 21, 2008
[ permalink ]

Chris,

YOU’RE A LEGEND!!! Thank you so much for doing this.
Afe
July 23, 2008
[ permalink ]

Thanks Chris, I found this series very helpful.
kristarella
August 6, 2008
[ permalink ]

Haven’t quite finished watching this one yet, but I thought I’d chime in while I have a chance and say, FeedBurner has it’s own little script that you can grab titles from your site. It’s under the publicise tab somewhere, saves using another tool, since you’re already using FeedBurner anyway.

Also, I’d love if you kept offering downloadable vids too. I download them and watch them on the train when I have the chance.
William
August 7, 2008
[ permalink ]

I want to thank you for your video series - great teacher you are! I have a question? In WP admin when I try to click on “Theme Editor” in the Design area - I get a HTTP 500 error. I Googled for answers and found very little information — what I did find was to name the style.css with the correct theme name at the top: /* Theme Name: name-of-theme */

I did this and still get the dreaded HTTP 500 error. If you have a work-around on this issue - please share

Thank you!
William
August 7, 2008
[ permalink ]

Another Question? You ever ran into the problem where your RSS Feed title is “Untitled” — after Googl’n for answers - I couldn’t find any real answer to solve this problem. Do you have any suggestions?
Chris Coyier
August 7, 2008
[ permalink ]

@William: I have no idea on the 500 error. I don’t think it’s my theme itself? I’m able to use the theme editor just fine. Might be a problem with permissions or your host or (most likely) your WP install. Your RSS title should be whatever you have the name of your blog set up as in the setting panel of WP. Sounds like another symptom of a bad install if you have it in there right and it’s still showing untitled.
William
August 7, 2008
[ permalink ]

@ChrisCoyier: Thank you for answering so soon! I switched from what I called the theme back to what the original theme was called in the style.css:

Instead of –

/* Theme Name: Marblehead */

Back to –

/* Theme Name: Starkers */

After the change, I got back into my Theme Editor. If anyone has this same problem, this is what helped me. The “untitled” thing is still a mystery :|???

Thanks for taking the time to make those videos!
kristarella
August 7, 2008
[ permalink ]

William, if you want to change the theme name it’s probably a good idea to activate a different theme. I’m not sure how much it effects it, but maybe the database got confused.

No idea about the RSS feed, sorry. Is it somewhere that we’re able to look at it?
William
August 8, 2008
[ permalink ]

@kristarella, the Website I am practicing with is — http://www.marbleheadllc.net –

I actually run my own server and had taken the advice of Chris Coyier that it was probably a bad WP install - so I just totally deleted the marbleheadllc.net account - reinstalled it - reinstalled WP - and installed the Starker design I worked on.

1.) The RSS “Untitled” cleared up after re-setting everything.

2.) The HTTP 500 still continues if I change the Starker theme name in the style.css to my chosen theme name instead. I will just keep the Starker theme name until I get to mess with it more.

The blog that I just set up is my first blog from scratch instead of using a template and replacing that templates graphics with my own graphics and CSS. It doesn’t have much, right now, but I know I have learned lots from designing it. I was tired of taking my PSD-work to blog designers when I knew I could stop being a slacker and learn this myself - Thanks to Chris Coyier (again) for taking the time out to show us slacker-Web designers how to WordPress blog-design.

- William
kristarella
August 8, 2008
[ permalink ]

Glad the problem cleared up.

If your web host has a forum they might be able to answer the question about the 500 error, since that error is usually a server thing.

K.
kylesteed
August 16, 2008
[ permalink ]

Chris,

Thanks so much for this awesome three part series. I recently just updated my website and made the move to harness the power of WordPress. You can read more about it on my site at: http://www.kylesteed.com/weekly-update/

Keep up the good work!

-Kyle Steed
kylesteed
August 21, 2008
[ permalink ]

Chris,

Something weird happened last time I tried to leave a comment on here. It never showed up. Hmm…

Anyways, thanks for the wonderful three part series. I finally combined wordpress with my existing site last week and am loving the results. I wanted to let you know that I wrote a post about it and gave you some props for helping me out with it. Thanks again.

Here’s the post: http://www.kylesteed.com/weekly-update/
Svein Are
August 23, 2008
[ permalink ]

Great screencast. So inspiring to watch. Did you find out what make Opera shift the content up just as it loaded? I have the same problem om some of the internal sites here at my work, so I am curious if it is the same thing.
Chris Coyier
August 23, 2008
[ permalink ]

@Svein: Yeah the fix was kind of not a big deal I didn’t end up talking about it. I think I just used padding to extend that top bar down, which for whatever reason worked better than bottom-margin. I didn’t dig into it very far…
Chris Coyier
August 23, 2008
[ permalink ]

@kylesteed: Sorry about that man, I found you comment in the spam filter and saved it. Make sure to shoot me a note if you ever see that happen. I don’t ban anybody or any comment unless it’s flat out rude, so chances are it just got stuck and I only periodically check spam.
Oguz Celikdemir
October 3, 2008
[ permalink ]

Hello,
the “#27: Designing for Wordpress: Part Three” quicktime file doesn’t available in web server.
So, if there is no handicap for you, could you please re-upload it again? Thanks,
Chris Coyier
October 3, 2008
[ permalink ]

Not sure what the deal was there… I just reuploaded it.
Davor
October 25, 2008
[ permalink ]

Hi Chris. I just wanted to say thanks. I just finished developing my first theme for wordpress and your screencasts were the best guides possible! Your effort is very much appreciated.
Chad
October 27, 2008
[ permalink ]

So i’m trying to set up a website using wordpress and learning from these tutorials, Which are great by the way!. my question is, if i have 4-5 different links like home, about, media, training, etc and i want to be able to update different media (photos, videos, etc) or blog about training (running) and also have my home page be a general blog, how would i set all that up? would i need to upload wordpress and create a seperate database for each of those links?
jamie
October 27, 2008
[ permalink ]

I thought you would just go into the admin area and edit the pages that you have created and make them there. Then tell wordpress to use your template. I think another video on wordpress working with pages would be an awsome idea.
Andris
October 28, 2008
[ permalink ]

Hey Chris,

thanx a lot for these three Videos. You inspired me a lot. I made up my own theme after watching your videos. I kinda copied the dateboxes. Sorry for that, but I really liked them.

Niki Brown
July 17, 2008
[ permalink ]

Chris - Thanks so much for this series! Its really helpful!

Philipp
July 17, 2008
[ permalink ]

Hey Chris! I follow your screencasts quite a while. Since the Wordpress series it has developed into a kind of thriller. Its really fascinating to follow your steps and I am pretty happy bout the length and the quality (both Content and Video/Audio!)!
If you could send it as m4v at least I would watch it on my AppleTV! YEAH!!
Cheers from Yokohama

Thomas Offinga
July 17, 2008
[ permalink ]

Thanks Chris! The tutorials have been sooooo useful so far!

Thanks!

Todrick
July 17, 2008
[ permalink ]

Thanks for a beautiful series on wordpress you really helped this newbie out.

jamie
July 17, 2008
[ permalink ]

Hey chris. Thanks for the wordpress. It’s awsome. I am falling in love with wordpress thanks to you. I am watching the latest right now and I got to the part where you are deleting the postmet data from the index.php. I am a noob coder with all kinds of code and one thing I have learned is when you don’t want to use code. It is better to comment out the code so that it stops functioning than to remove it. This way in the future if you do want to use it, You won’t have to figure out how to rewrite it or figure out where it goes. Just a coding tip.

Majesticskull
July 17, 2008
[ permalink ]

It’s a awesome serie! But i think the quicktime embed is much better quality =/
(sorry for the poor english)

Alex Tran
July 17, 2008
[ permalink ]

Concerning your video/encoding problems . . . were you aware that v9.0.115 of the Flash Player and above support playback of videos using the H.264 codec? The H.264 codec achieves a high level of compression while still retaining the original video quality.

That would give you the benefit of still using a Flash Player while having a better quality, smaller file size video.

Chris Coyier
July 17, 2008
[ permalink ]

@Alex Tran: No I wasn’t aware of that…. Do you know how I can covert my .mov files into that format. Right now I convert to Flash using the “Adobe Flash CS3 Video Encoder” that came with the CS3 suite. Doesn’t seem to have many options concerning codecs.

Or - would I be leaving the video in the .mov format (only compressed with H.264 instead of “animation” like I’m using now), but the flash player I’m using on the site would still recognize it?

@Chris: You can try QuickTime Pro, but that will cost you some money. Not a bad investment since QT Pro is a decent Swiss Army knife of video conversion.

But if you’re looking for free, here are some free ones to check out:

FormatFactory

MediaCoder

Any Video Converter

Not much experience with any of those, but they may do what you’re looking for.

Hope that helps.

Adrian
July 17, 2008
[ permalink ]

IMHO Flash = Fail…

Keep flash player if you want, but give us an alternative - downloadable .m4v files should be fine for everyone

But the best solution, at least for me, is video podcast. One simple RSS feed and all of us can have latest “episodes” waiting for us in iTunes or any other media player of choice

I also have to say that you’re doing very good job delivering high-quality css tips, tricks, tutorials, screencasts etc. Many thanks!

Cheers,
Adrian

btw - I’m sorry for but english is not my native language

Kevin
July 17, 2008
[ permalink ]

Hey Chris,

I had the same problem that you did with the single page div (classified “post”) not having a closing tag. Like you mentioned in the video, I think that this is a problem with the starkers theme. It took me a few hours of anguish to figure it out - somebody should tell E. Stocks about this issue.

Thanks for the great screencast & WP series!

-Kevin

Ross
July 17, 2008
[ permalink ]

Chris, great Wordpress podcast series. You’re doing God’s work.

As far as I’m concerned these PS-HTML-CSS tutorials are all you need to do to secure a growing audience. More!

Ross

kurt
July 17, 2008
[ permalink ]

its very useful if we can download it.

mike
July 18, 2008
[ permalink ]

I just discovered your site and there is a lot of good stuff here. The video quality is fine.

This was an interesting series, it’s always good to see alternative methods for theming WP but I would have been a lot more impressed if you had validated your code.

webmonkey-in-ireland
July 19, 2008
[ permalink ]

Chris, some brilliant stuff here..Just came from del.icio.us. Love the way you’ve used video on your site. Great post.

Some user
July 19, 2008
[ permalink ]

Come guys! forget flash.
Christ, keep using Quick Time!.

Beau
July 20, 2008
[ permalink ]

I noticed some discussion on Flash video and the h.264 codec so I thought I’d chime in on it. I’d done some reading about it before when I was considering using a Flash Player for a project; it’s part of the Flash Player itself, so people will need to have the latest version to have the h.264 compatibility. What it does (or at least what I’ve gathered from research) is allow the Flash Player to stream content of most any filetypes…so you don’t need to convert anything to .flv. That way, you still get the quality of a .mov file (including HD resolutions!) but presented with Flash. I’m no Flash expert, but I think a good look at implementing it can be found on this blog:

http://www.communitymx.com/content/article.cfm?page=2&cid=5CAB4

Hope that helps you out!

Jyst
July 21, 2008
[ permalink ]

Chris,

YOU’RE A LEGEND!!! Thank you so much for doing this.

Afe
July 23, 2008
[ permalink ]

Thanks Chris, I found this series very helpful.

kristarella
August 6, 2008
[ permalink ]

Haven’t quite finished watching this one yet, but I thought I’d chime in while I have a chance and say, FeedBurner has it’s own little script that you can grab titles from your site. It’s under the publicise tab somewhere, saves using another tool, since you’re already using FeedBurner anyway.

Also, I’d love if you kept offering downloadable vids too. I download them and watch them on the train when I have the chance.

William
August 7, 2008
[ permalink ]

I want to thank you for your video series - great teacher you are! I have a question? In WP admin when I try to click on “Theme Editor” in the Design area - I get a HTTP 500 error. I Googled for answers and found very little information — what I did find was to name the style.css with the correct theme name at the top: /* Theme Name: name-of-theme */

I did this and still get the dreaded HTTP 500 error. If you have a work-around on this issue - please share

Thank you!

Another Question? You ever ran into the problem where your RSS Feed title is “Untitled” — after Googl’n for answers - I couldn’t find any real answer to solve this problem. Do you have any suggestions?

Chris Coyier
August 7, 2008
[ permalink ]

@William: I have no idea on the 500 error. I don’t think it’s my theme itself? I’m able to use the theme editor just fine. Might be a problem with permissions or your host or (most likely) your WP install. Your RSS title should be whatever you have the name of your blog set up as in the setting panel of WP. Sounds like another symptom of a bad install if you have it in there right and it’s still showing untitled.

@ChrisCoyier: Thank you for answering so soon! I switched from what I called the theme back to what the original theme was called in the style.css:

Instead of –

/* Theme Name: Marblehead */

Back to –

/* Theme Name: Starkers */

After the change, I got back into my Theme Editor. If anyone has this same problem, this is what helped me. The “untitled” thing is still a mystery :|???

Thanks for taking the time to make those videos!

kristarella
August 7, 2008
[ permalink ]

William, if you want to change the theme name it’s probably a good idea to activate a different theme. I’m not sure how much it effects it, but maybe the database got confused.

No idea about the RSS feed, sorry. Is it somewhere that we’re able to look at it?

William
August 8, 2008
[ permalink ]

@kristarella, the Website I am practicing with is — http://www.marbleheadllc.net –

I actually run my own server and had taken the advice of Chris Coyier that it was probably a bad WP install - so I just totally deleted the marbleheadllc.net account - reinstalled it - reinstalled WP - and installed the Starker design I worked on.

1.) The RSS “Untitled” cleared up after re-setting everything.

2.) The HTTP 500 still continues if I change the Starker theme name in the style.css to my chosen theme name instead. I will just keep the Starker theme name until I get to mess with it more.

The blog that I just set up is my first blog from scratch instead of using a template and replacing that templates graphics with my own graphics and CSS. It doesn’t have much, right now, but I know I have learned lots from designing it. I was tired of taking my PSD-work to blog designers when I knew I could stop being a slacker and learn this myself - Thanks to Chris Coyier (again) for taking the time out to show us slacker-Web designers how to WordPress blog-design.

- William

kristarella
August 8, 2008
[ permalink ]

Glad the problem cleared up.

If your web host has a forum they might be able to answer the question about the 500 error, since that error is usually a server thing.

kylesteed
August 16, 2008
[ permalink ]

Thanks so much for this awesome three part series. I recently just updated my website and made the move to harness the power of WordPress. You can read more about it on my site at: http://www.kylesteed.com/weekly-update/

Keep up the good work!

-Kyle Steed

kylesteed
August 21, 2008
[ permalink ]

Something weird happened last time I tried to leave a comment on here. It never showed up. Hmm…

Anyways, thanks for the wonderful three part series. I finally combined wordpress with my existing site last week and am loving the results. I wanted to let you know that I wrote a post about it and gave you some props for helping me out with it. Thanks again.

Here’s the post: http://www.kylesteed.com/weekly-update/

Svein Are
August 23, 2008
[ permalink ]

Great screencast. So inspiring to watch. Did you find out what make Opera shift the content up just as it loaded? I have the same problem om some of the internal sites here at my work, so I am curious if it is the same thing.

Chris Coyier
August 23, 2008
[ permalink ]

@Svein: Yeah the fix was kind of not a big deal I didn’t end up talking about it. I think I just used padding to extend that top bar down, which for whatever reason worked better than bottom-margin. I didn’t dig into it very far…

@kylesteed: Sorry about that man, I found you comment in the spam filter and saved it. Make sure to shoot me a note if you ever see that happen. I don’t ban anybody or any comment unless it’s flat out rude, so chances are it just got stuck and I only periodically check spam.

Oguz Celikdemir
October 3, 2008
[ permalink ]

Hello,
the “#27: Designing for Wordpress: Part Three” quicktime file doesn’t available in web server.
So, if there is no handicap for you, could you please re-upload it again? Thanks,

Chris Coyier
October 3, 2008
[ permalink ]

Not sure what the deal was there… I just reuploaded it.

Davor
October 25, 2008
[ permalink ]

Hi Chris. I just wanted to say thanks. I just finished developing my first theme for wordpress and your screencasts were the best guides possible! Your effort is very much appreciated.

Chad
October 27, 2008
[ permalink ]

So i’m trying to set up a website using wordpress and learning from these tutorials, Which are great by the way!. my question is, if i have 4-5 different links like home, about, media, training, etc and i want to be able to update different media (photos, videos, etc) or blog about training (running) and also have my home page be a general blog, how would i set all that up? would i need to upload wordpress and create a seperate database for each of those links?

jamie
October 27, 2008
[ permalink ]

I thought you would just go into the admin area and edit the pages that you have created and make them there. Then tell wordpress to use your template. I think another video on wordpress working with pages would be an awsome idea.

Andris
October 28, 2008
[ permalink ]

thanx a lot for these three Videos. You inspired me a lot. I made up my own theme after watching your videos. I kinda copied the dateboxes. Sorry for that, but I really liked them.

CSS-Tricks

New Screencast: Designing for Wordpress: Part Three

Responses

Leave a Comment

How do you keep track of design inspiration?

Friends

Projects

History

About the Author