New Screencast: Designing for Wordpress: Part Three
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.
Loading ...
1
Chris - Thanks so much for this series! Its really helpful!
Comment by Niki Brown — July 17, 2008 @ 6:32 am
2
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
Comment by Philipp — July 17, 2008 @ 7:14 am
3
Thanks Chris! The tutorials have been sooooo useful so far!
Thanks!
Comment by Thomas Offinga — July 17, 2008 @ 7:39 am
4
Thanks for a beautiful series on wordpress you really helped this newbie out.
Comment by Todrick — July 17, 2008 @ 8:13 am
5
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.
Comment by jamie — July 17, 2008 @ 9:30 am
6
It’s a awesome serie! But i think the quicktime embed is much better quality =/
(sorry for the poor english)
Comment by Majesticskull — July 17, 2008 @ 10:29 am
7
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.
Comment by Alex Tran — July 17, 2008 @ 10:41 am
8
@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?
Comment by Chris Coyier — July 17, 2008 @ 12:44 pm
9
@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.
Comment by Alex Tran — July 17, 2008 @ 1:46 pm
10
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
Comment by Adrian — July 17, 2008 @ 3:02 pm
11
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
Comment by Kevin — July 17, 2008 @ 5:46 pm
12
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
Comment by Ross — July 17, 2008 @ 5:48 pm
13
its very useful if we can download it.
Comment by kurt — July 17, 2008 @ 11:34 pm
14
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.
Comment by mike — July 18, 2008 @ 12:04 am
15
Chris, some brilliant stuff here..Just came from del.icio.us. Love the way you’ve used video on your site. Great post.
Comment by webmonkey-in-ireland — July 19, 2008 @ 3:02 am
16
Come guys! forget flash.
Christ, keep using Quick Time!.
Comment by Some user — July 19, 2008 @ 9:16 am
17
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!
Comment by Beau — July 20, 2008 @ 3:26 pm
18
Chris,
YOU’RE A LEGEND!!! Thank you so much for doing this.
Comment by Jyst — July 21, 2008 @ 2:46 am
19
Thanks Chris, I found this series very helpful.
Comment by Afe — July 23, 2008 @ 6:51 pm
20
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.
Comment by kristarella — August 6, 2008 @ 1:46 am
21
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!
Comment by William — August 7, 2008 @ 4:11 pm
22
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?
Comment by William — August 7, 2008 @ 4:20 pm
23
@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.
Comment by Chris Coyier — August 7, 2008 @ 6:40 pm
24
@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!
Comment by William — August 7, 2008 @ 6:54 pm
25
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?
Comment by kristarella — August 7, 2008 @ 9:07 pm
26
@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.
Comment by William — August 8, 2008 @ 12:01 am
27
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.
Comment by kristarella — August 8, 2008 @ 12:13 am
28
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
Comment by kylesteed — August 16, 2008 @ 1:02 pm
29
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/
Comment by kylesteed — August 21, 2008 @ 12:20 pm
30
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.
Comment by Svein Are — August 23, 2008 @ 1:37 am
31
@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…
Comment by Chris Coyier — August 23, 2008 @ 3:13 pm
32
@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.
Comment by Chris Coyier — August 23, 2008 @ 3:14 pm