In part 3 of this series, we take the HTML and CSS that we have already created for this design, and convert it into a WordPress theme. We start with a completely “blank” WordPress theme, then take different parts of the HTML and put them where they need to be in the theme. We are careful to keep as much dynamic WordPress stuff in there as possible, for example, dynamically creating the menu, loading jQuery the smart way, and more.
Links from Video:
mwehehehe! been waiting for this one. thanks :)
Excellent, this makes my day.
Still no mp4 for smatphones though… :(
so…?
Great Tutorial! I find it amazing that I learn how to design a wordpress theme from css-tricks and now Im teaching others how to design them.
Thanks Chris
thanks, I already download all the series, the explanation is very interesting and easily understood.
“… Both equally ugly”.
Lol, great screencast, Chris.
Been waiting for this all week. Awesome, awesome series.
Big e-hugs for you Mr Coyier.
Hi Chris, that was awesome, simple, and delightful. Appreciate the effort to bring this to a screen cast :) Made WordPress look easy enough for just about anyone to manipulate. Thanks,
Andrew Turn
You just taught us how to create a custom wp theme in under an hour! Thanks Chris, this will go a long way in streamlining my everyday work load.
I’ve never used WordPress but, I assume “Tour Dates” is a WordPress “Page”.
Is there a way you could create a page that pulls “Posts” from a certain category? Then you could not show dates in the past.
I just looked through the WordPress Codex and found a section using the following method. Remember to change the category name to the appropriate category name that you’re using.
// Get the last 10 posts in the special_cat category.
<?php query_posts('category_name=special_cat&showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<!-- Do special_cat stuff... -->
<?php endwhile;?>
Not so scary after all. Looking forward to the book. Would love to see a screen cast on managing/administrating phpBB sometime- it’s on my wish-list. But thanks for this screen cast. WP Template design doesn’t seem like esoteric gibberish anymore.
There is a Webcast on integrating PhpBB into wordpress on this site. Look in the video archives here https://css-tricks.com/video-screencasts/48-skinning-phpbb/
I saw the video, but I’m actually building a Joomla site. I’m using Rokbridge to integrate Phpbb and the forum is displayed in an iframe on a Joomla page. I’m finding it difficult to integrate Phpbb visually. If anyone knows of a decent tutorial on how to accomplish this I’d really appreciate it.
OK. It’s easy enough to change the phpbb css from the the ACP. Will just modify the style and stick it in an iframe. Sorry for going completely off topic.
Hey Chris! I wish you wouldn’t feel so self conscious about the time, or if your rambling. Please know it’s all good and your time is invaluable. Let others whinge. Do what you do, it’s great.
You connected many dots for me in this post. Thank-you, Thank-you, Thank-you.
Great video! I can honestly say that you were the start to helping me build websites and now custom themes for WordPress. I thought it would be way harder than this (obviously it can get way more advanced) and this comes at a perfect time since I have a couple clients wanting to manage there own blogs.
Thanks!
Excellent series. How about a wordpress-tricks.com? :-)
I’m learning and working on WP sites now, this and your other series have been most helpful.
I second Roberto, no need to worry on time & rambling. It’s all good. Plus, they made a pause button just for those who don’t have the time.
http://digwp.com/
might be what you’re looking for
your site is really a big help I’ve been downloading every tutorial videos you did….man! your an angel…I LEARN A LOT FROM THIS SITE….Thank you Sir and please don’t stop sharing your precious Knowledge…THANK YOU..is not enough…GRACE FILLED ALWAYS.!!!…Chris Coyer.YOUR THE MAN!!
Thanks! Will watch a few times to let it soak in :)
Super job. Great workflow. Talking with a friend of mine and he noted how much he appreciated you taking the time to walk down different paths– even if some weren’t correct and you backed up and did things differently. Much is learned from what your thought process is for right or wrong.
Great stuff!
Awesome. I always thought that WordPress is only for blogs, but I was WRONG :D awesome.
Thank you so much for this series, really great work!
I agree, great work and came at a very appropriate time. Grazie.
Entonce…de eso se tráta, interesanté. Inteligentemente señor Coyier, te estado siguiedo por dos años ya hoy.
Great Tutorial! Thank you very much. Just as a side note you can increase the size of the upload into wordpress when bringing in another blog or any upload by changing the php.ini file to allow a larger size. You would change the “upload_max_filesize” and the “post_max_size” variable.
Keep up the great work.
Now i finally know how to do this.
Thank you very much Chris!
Hi Chris… I’ve REALLY enjoyed this series so far. It was nice to see how a fellow wordpress designer approaches theming and I am glad to say although I take a very similar approach there were a few things that you went over where I had “Ah-haaa” moment! I hope you continue doing series like this. I must say I came back almost every day just to see if you had posted #2 and then… #3…..
Hope you go over the twitter part later on!
I really like the background of his website. I think you did an amazing job on both the screencast and the website.
Awesome tutorials! They really are helping me understand WordPress!
I honestly don’t know how far on i would be without your tutorials man, you have completley sorted me out in my attempt to be a web designer. i feel like i owe you some money or something!
chris you are a legend and i truly, truly appreciate your efforts.
Great series Chris, keep up the good work! I have never touched WordPress (and it seems that I never will, maybe =D)…but did enjoy the screencast regardless to that. It was very interesting to see how this cms works, I’m getting now really into ModX as CMS and I just can say it again…it’s so much easier to convert a raw xhtml/css theme like you had after the second screencast into a dynamically, cms generated website…if you want just to convert a theme without adding extraordinary functionality (there are sort of plugins (snippets) too) you don’t have to deal with such php stuff and figuring out where to put what…you just take the raw xhtml file and replace the desired regions with tags like {{site-header}}, {{site-footer}}, [+pagetitle+], [+content+], [+summary+] and so on… I personally would love to see the web taken over by workflows like the one in ModX =)… and also to see you making a screencast about it if you find the time to digg a bit into it =]
I can’t disagree that puttint those tags in 1 template file (ModX) as supposed to havint to put the xhtml/css into multiple template files (WordPress)…. isn’t easier
But does it enable you to have different “page templates”, for indivual pages ? Or to have your category-, links-, archive and what-not-page to style differently if needed ?
I think WordPress is the perfect combination between having not so many files and yet maintinging the ease-of-use (I mean, in theory you could delete all those files (archive.php, category.php, links.php) and ONLY do header.php, footer.php, index.php
Everything will then follow that.
The nice thing of wordpress is that if you need to, you CAN (not must) use for example:
* archive.php
* links.php
* category.php
* category-3.php (for the layout of a category with an ID of #3)
* single.php (template for single-view of blogpost)
* page.php
* page-myname.php (a custom template chooseable from the backend)
* and much much more.
But ofcourse, if you just want a simple site without any non-default thing you’re best off with weebly.com or blogspot.com – and just use one of the those themes and call it a website.
–
Temc
Good stuff!
So it’s not that hard to make a custom WordPress theme, mm…
Thanks a lot for this series!
Chris – Great screencast. I use a plugin to hide pages from the menu. It works much better then having to code it in the theme. It is called Hide Pages
Chris, didn’t you record 3 tutorials teaching how to create a wordpress theme long ago?
Dunno why you’re doing the same thing twice.
Because:
• It’s a different design with different goals and thus a different approach and different challenges.
• That was over a year ago and a lot has changed in the WordPress world and for me.
• Because I’ll do whatever the hell I wanna do.
Keep doing it!! I would love to see you do the same thing for another design even.
Just echoing the comments above I have learned so much from you in these screencasts. And my room-mate who is not a web designer keeps laughing at your comments like ‘does that make sense? I donno, whatever’.
Thanks Chris!!
You should submit those videos to WordPress.tv as well. I think a lot of WordPress user would appreciate to see this 3 part tutorial.
Keep on keeping’ on Chris! I really love and appreciate these kinds of videos… I really hope you can do some more advanced WordPress tutorials as well.
Amen, Chris.
Im still in the learning process for customizing a wordpress theme, thanks Chris, its a great help for me.
Was waiting for part 3 so I could watch the series in one go. Can’t wait to get started tonight.
Thanks Chris.
Wow… it is SO COOL that you made these videos!
(I just saw a link to them at the WordPress.org Support Forum.)
Thank you, Chris !!
[BTW– I won’t hold it against you that you are from WI and living in Chicago — I am a die-hard Vikings fan…]
awesome screen cast again.
but being a div-itus survivor I personally tend to comment my closing div’s for later on, especially given that they’re in an other file.
but great screencast, I’m definitly going to look more into the WP cms now.
Been eagerly awaiting the 3rd part….my first PSD to XHTML/CSS to WP project can now reach it’s final stage now.
Thanks again, as already mentioned by many others.
Not only does this show how to technically make the site it also goes through your design train of thought, your workings, and how you go about making the decisions you feel correct…..All equals AWESOMENESS! :-)
ps: We like the ranting…..tells us what you’re thinking.
Very good screencast as usual !
I have one question:
– when you have finished your WP site locally or on a different domain, how do you move it to the real domain.
1. Do you install WP on the real domain and then add template and content to the new WP
2. Or you copy all files including WP to the real domain?
Thanks a lot
Sylvin
I use the automatic installer and then upload just the theme (and plugins is I have any). If there is no utomatic installer I upload everything and change the database settings on the config file.
Thanks Chris for taking the time to make this stuff. It’s both informative and interesting.
Chris,
Why isn’t this screen cast showing up on the “videos” page? When you first posted this one it showed up on your rss, but I had a hard time actually finding it because the link didn’t work and it wasnt on the main page either. The only way I could actually get to it was going into the first part and clicking the link there. Just fyi and wondering why.
btw, thanks for all the really amazing stuff!
This video really helps a lot. I never thought that WordPress is also good in building a website.
Thanks so much. I have been using WP for a little while and now begin every project with WordPress and Hybrid. But until now I have used plugins and widgets for everything. This really clears alot up for me and makes me much more likely to experiment.
Of particular interest is the jQuery integration and how simple it was. I have been wanting to try some stuff with it for a long while but have been intimidated by it. Actually seeing this happen in a screencast has been PRICELESS. Thank you so much.
Great series Chris. I’m in the midst of building my own site, and thought about using WordPress but didn’t know where to begin. Now I do! Thanks!! :)
Great tutorial! I learned a lot! Thanks!
I guess I’ll watch it again, I got about 10% of that.
Great series.
But JQuery already comes with WordPress, so no need to load it.
Would be nice to have a reference to those code snippets you mentioned like how to dynamically load an image, an additional stylesheet and how to put the blog into the sidebar.
i enjoyed every bit of it, including the ramblings. great
I know most of this stuff already, but it’s always good to get a refresher, plus i always learn something new.
I was holding off on this 3 part series until it was finished. Just so i could watch all 3 back to back! I hate having to wait days between videos. :)
Hello Chris,
Since stumbling upon your site, I have learnt loads. I used to struggle to get a hand on designing sites with css but now it a breeze.
Thanks Chris and Keep the ScreenCasts coming.
Am very grateful indeed.
I loved the screencast and the way you converted the xhtml version of the site to a wordpress theme
maybe a screencast about that contact form ?! how you treat the messages and where do you send them.
thanks.
Great tutorial on building a website and then converting the site to a WordPress Theme
Verry verry nice tutorial, you cleared up lots of things for me there. Thanks
You can somebody advice? WP template to create my jquery script is not working, do not showing me pictures before and after
Chris,
Thanks so much for this series, I learned that it’s not so scary manipulating the code in WP. You made it look easy… although I feel the ending of Part 3 seemed rushed.
I don’t know if anyone else is interested, but I would love to see Part 4 and how you did the Photo gallery, Contact form, set up the ability to purchase music and the Twitter section – and the fine tuning in general.
You make excellent screencasts, please keep them coming. As someone new to this, the more information and example tutorials the better. When someone says “and then you just do this or that” at the end of a tutorial I feel left out. I don’t know how you did that, that’s why I followed the tutorial in the first place!
You inspire me, thanks for all you do!
Awesome tutorial. I plan to build my site on wordpress now, following your tutorial. I am a Joomla user normally but why not give WordPress a shot!
Thanks Chris!
Hi from france
Thank you very much for those great tuts
I’m sarting in webdesign and this is a great help
Thanks again
Thank you so much for this excellent tutorial. I am just learning CSS and have a basic question. I wanted to know how to code the twitter widget. I was super excited to learn this, but a bit let down it was not covered.
Thank you Chris, this tut has been most helpful in putting the bits and pieces together. Love the screencast as I like seeing the code bits moving around. Would love to see this go into the installation of next gen and add the shadowbox.js to it.
Also, about using google for jquery, it seems in my WP installation 2.8.5 there is a jquery folder..now is this a specific jquery script? and not the actual library?
Would using the google link in a new theme creation mess with the current WP install in any way?
thanks for all your good work.
Too bad Coda isn’t available on a PC.. one more reason to switch to MAC… lovely editor.
I built a site using WordPress (actually a static site with a WordPress blog page that looked the same as the static pages.) I also tried Drupal, Texpattern, CMS Made Simple, and Joomla.
All of these systems seemed clunky when it came to building a custom theme or template. You have to mold your design into the system. I think a ton of users backwards engineer or hack themes they download instead of really using their own design, even if they are capable of creating a great looking design using straight xhtml and css.
In the end I thought I would try MODx and now that I have a few MODx sites under my belt I am not looking back. MODx is a designers dream CMS in my book. Adding your theme/template is so much better in MODx than all the other CMS platforms I have tried, including WordPress…
Hi Chris, your site is great!
series 1-easy
series 2-easy
series 3- hash, the beginning, importing wasnt very clear. i followed the editing of different sections. that was cool.
but how about fixing the typography? and the frills? and how about using some of the wordpress widgets in this theme?
Thanks, besides your site rocks man :-)
Chris,
This is great! Thanks so much for your videos. They are super. Cheers and Happy Turkey Day!
It would be nice if you could provide the blank wordpress theme for me.. please
I loved this series! Thank you so much for your time on this. I loved the rabbit trails and the false starts–those are learning opportunities too, and are similar to my own process–it’s trial and error, at times. It was comforting to see I’m not alone in that.
I’m with Kevin, above–I would love to see a Part 4 that divulges your choices with the gallery, tourdates, merchandise, etc.
Also I was curious about the h2 title frills — I saw that you uploaded the javascript file that called them, and I saw that you uploaded the image…so why were they not showing up?
Ahhh! I just went and looked at the Kailin live site: it’s because those titles are actually h3. So you eventually had to change the js file to reflect that. Got it.
**bookmarked. Thanks very much, Chris! This will help me a lot with my studying.
Excellent chris thanks for tutorials. as you wordpress has changed since 2009 alot are you going to update this tutorials.
secondly we would want 4 part of this tutorial,
Hello from Austria.
Have now started with 39 years of developing websites. I was 3 months on the lookout for such a tutorial. Thank you very much. Will greatly help me in my works.
Thank you soo much chris ! you saved me hours upon hours of trying to find out how to highlight the current menu items :)
You are one hell of a talented designer and I hope you keep on making such helpful videos for use newbies.
Hi chris! awesome tutorial!! more than 2 years on and iv just learned a hell of a lot from it! was just wondering about that javascript file with the curly things. How do you get that to work in wordpress?
Great tutorial and thanks for the source (video) file.
Thanks buddy, I don’t know how to use word press and how to covert HTML 2 Word press, you are my always teacher, I saw first time your video tutorials, but I have regular see your video and updates…
Thanks you so much : )
thanks for sharing your tricks! I’ve learned a lot from your videos….
Hey, isn’t it possible to download this via a internet downloader like Orbit?
Can’t express how much I loved the post! one of the great post to learn about it. Thanks guys, thanks a lot!
penny auctions
Thanks for taking the time to do this Chris, found it very helpful.
Is there a part 1 and part 2?
Oops, I think I see them above: Photoshop and HTML/CSS?
I followed your tutorials and the post feed (query_posts) seems to break my sidebar when I copy the php verbatim. I found this through WordPress Codex:
have_posts()) : $archive_query->the_post(); ?>
<a href="” rel=”bookmark” title=”Permanent Link to “>
it will load the posts but how do I make it display like in the video (without it breaking)? or is there an updated version of query_posts I can use?
thank you!