Grow your CSS skills. Land your dream job.

#73: Building a Website (3 of 3): WordPress Theme

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:

Need more WordPress training? I have two courses on The Lodge that dig into modern day real world website building with WordPress.

Comments

  1. Permalink to comment#

    mwehehehe! been waiting for this one. thanks :)

  2. Permalink to comment#

    Excellent, this makes my day.

  3. Still no mp4 for smatphones though… :(

  4. Permalink to comment#

    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

  5. Permalink to comment#

    thanks, I already download all the series, the explanation is very interesting and easily understood.

  6. “… Both equally ugly”.

    Lol, great screencast, Chris.

  7. Been waiting for this all week. Awesome, awesome series.

    Big e-hugs for you Mr Coyier.

  8. Permalink to comment#

    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

  9. Dave
    Permalink to comment#

    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.

  10. Mike
    Permalink to comment#

    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;?>

  11. Alex
    Permalink to comment#

    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 http://css-tricks.com/video-screencasts/48-skinning-phpbb/

    • Alex
      Permalink to comment#

      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.

    • Alex
      Permalink to comment#

      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.

  12. Permalink to comment#

    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.

  13. Permalink to comment#

    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!

  14. 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.

  15. 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!!

  16. Thanks! Will watch a few times to let it soak in :)

  17. Chipp
    Permalink to comment#

    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!

  18. Permalink to comment#

    Awesome. I always thought that WordPress is only for blogs, but I was WRONG :D awesome.

  19. Anna
    Permalink to comment#

    Thank you so much for this series, really great work!

  20. I agree, great work and came at a very appropriate time. Grazie.

  21. Permalink to comment#

    Entonce…de eso se tráta, interesanté. Inteligentemente señor Coyier, te estado siguiedo por dos años ya hoy.

  22. Jason
    Permalink to comment#

    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.

  23. Now i finally know how to do this.

    Thank you very much Chris!

  24. 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!

  25. Permalink to comment#

    I really like the background of his website. I think you did an amazing job on both the screencast and the website.

  26. Permalink to comment#

    Awesome tutorials! They really are helping me understand WordPress!

  27. silvers
    Permalink to comment#

    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.

  28. LuK
    Permalink to comment#

    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 =]

    • TeMc
      Permalink to comment#

      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

  29. Lenin Yee
    Permalink to comment#

    Good stuff!

    So it’s not that hard to make a custom WordPress theme, mm…

    Thanks a lot for this series!

  30. Permalink to comment#

    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

  31. 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.

    • Mike
      Permalink to comment#

      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!!

    • Permalink to comment#

      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.

    • Chris M.
      Permalink to comment#

      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.

  32. manzDesign
    Permalink to comment#

    Amen, Chris.

  33. arnold
    Permalink to comment#

    Im still in the learning process for customizing a wordpress theme, thanks Chris, its a great help for me.

  34. Permalink to comment#

    Was waiting for part 3 so I could watch the series in one go. Can’t wait to get started tonight.
    Thanks Chris.

  35. wilsontd
    Permalink to comment#

    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...]

  36. Permalink to comment#

    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.

  37. Brussells
    Permalink to comment#

    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.

  38. 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.

  39. Permalink to comment#

    Thanks Chris for taking the time to make this stuff. It’s both informative and interesting.

  40. Permalink to comment#

    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!

  41. Permalink to comment#

    This video really helps a lot. I never thought that WordPress is also good in building a website.

  42. rgreogry
    Permalink to comment#

    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.

  43. Rob
    Permalink to comment#

    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!! :)

  44. Permalink to comment#

    Great tutorial! I learned a lot! Thanks!

  45. scott
    Permalink to comment#

    I guess I’ll watch it again, I got about 10% of that.

  46. Anja
    Permalink to comment#

    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.

  47. samson
    Permalink to comment#

    i enjoyed every bit of it, including the ramblings. great

  48. John
    Permalink to comment#

    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. :)

  49. Tonye
    Permalink to comment#

    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.

  50. Permalink to comment#

    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.

  51. Permalink to comment#

    Great tutorial on building a website and then converting the site to a WordPress Theme

  52. Permalink to comment#

    Verry verry nice tutorial, you cleared up lots of things for me there. Thanks

  53. nowastar
    Permalink to comment#

    You can somebody advice? WP template to create my jquery script is not working, do not showing me pictures before and after

  54. Permalink to comment#

    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!

  55. Permalink to comment#

    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!

  56. Permalink to comment#

    Hi from france
    Thank you very much for those great tuts
    I’m sarting in webdesign and this is a great help
    Thanks again

  57. Zack
    Permalink to comment#

    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.

  58. bobbi
    Permalink to comment#

    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.

  59. bobbi
    Permalink to comment#

    Too bad Coda isn’t available on a PC.. one more reason to switch to MAC… lovely editor.

  60. Max
    Permalink to comment#

    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…

  61. JA
    Permalink to comment#

    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 :-)

  62. Permalink to comment#

    Chris,

    This is great! Thanks so much for your videos. They are super. Cheers and Happy Turkey Day!

  63. It would be nice if you could provide the blank wordpress theme for me.. please

  64. Permalink to comment#

    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.

  65. mia ramos
    Permalink to comment#

    **bookmarked. Thanks very much, Chris! This will help me a lot with my studying.

  66. Permalink to comment#

    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,

  67. Deniz
    Permalink to comment#

    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.

  68. Permalink to comment#

    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.

  69. Seth
    Permalink to comment#

    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?

  70. Permalink to comment#

    Great tutorial and thanks for the source (video) file.

  71. kalpesh
    Permalink to comment#

    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 : )

  72. Jackson
    Permalink to comment#

    thanks for sharing your tricks! I’ve learned a lot from your videos….

  73. Fardeem Munir
    Permalink to comment#

    Hey, isn’t it possible to download this via a internet downloader like Orbit?

  74. 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

  75. Jacob Roman
    Permalink to comment#

    Thanks for taking the time to do this Chris, found it very helpful.

  76. Sculley
    Permalink to comment#

    Is there a part 1 and part 2?

    • Sculley
      Permalink to comment#

      Oops, I think I see them above: Photoshop and HTML/CSS?

  77. 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!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".