Adaptive Blog Theme: Beginning Theme Development
videos

Adaptive Blog Theme: Beginning Theme Development

on Dec 18th 2012 with 31 comments
Tutorial Details
  • Screencast duration: 41 mins
  • Difficulty: Beginner
  • Topic: WordPress
This entry is part 2 of 12 in the Adaptive Blog Theme: From Photoshop to WordPress Session
« PreviousNext »

We’re picking up where the Webdesigntuts+ Adaptive Blog Theme session left off. Now we take the adaptive HTML and CSS build, and turn it into a WordPress theme.

File Preparation (style.css and functions.php)


Alternatively, Download the video, or subscribe to Wptuts+ screencasts via YouTube

header.php


Alternatively, Download the video, or subscribe to Wptuts+ screencasts via YouTube

footer.php, Registering Menus and Finishing Off header.php


Alternatively, Download the video, or subscribe to Wptuts+ screencasts via YouTube

Resources

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://twitter.com/MohsenKhakbiz Mohsen Khakbiz

    wwoooooww. I was waiting for this.
    Thanks Adi

  • http://twitter.com/borowskirafal Rafał Borowski

    Finally!!!! :)

  • krim belkacem

    finally the so waited tutorial is arrived!
    why did you waited for so long to make it real?
    thank you very much!
    i want to see more project in video tutorial premium or free!
    so thank you very much

  • Sharjeel Hassan

    Adi please Download Video Links Pleaseeeeeeeeeee, In my country Youtube is banned for the time being pleaseeee provide me Download Video Links for each video

    • lyndon baylin, jr.

      Kindly click the link ” Download the video” below the pre-load video

  • Richard

    Finally it’s here :P

  • Sharjeel Hassan

    Download Video Link Must Must needed pleaseeeeeeeeeeeee

  • http://www.wordpressguru.com.au/ Wordpress Developer Sydney

    Well appreciated Adi,
    You have done 14 tutorials to make the website community stronger and better.
    Thanks for all your time and effort.

  • http://www.facebook.com/fujianto Septian A. Fujianto

    Nice…. finally WP tuts coming..
    Thx…

  • http://twitter.com/borowskirafal Rafał Borowski

    You know…. I was thinking… all of us are inteligent people – designers, fron/back-end developers…. we do not believe in a BS like “end of the world”. But lets just say (just for the sake of argument!!! ;P) that it is really true and the world will end in a few days. Wouldn’t it be a huge waste that the World won’t see Adi’s hard work? So I’m asking Japh and the rest of WPTuts+ staff… in this difficult time (that the end of world is :P) please support us and upload the rest of tuts before this great tragedy happens ;P

    PS. I could also make myself believe in Yeti, Aliens and God if it speeds up the release process of next parts ;P

    • http://wp.tutsplus.com/ Japh

      LOL Unfortunately, there’s not enough time left. Also, if the world does end, you won’t be worrying about WordPress themes ;)

      • http://twitter.com/borowskirafal Rafał Borowski

        You know… as we don’t see the end of those tuts we might have “unfinished business” on earth and our souls may never live peacefully in heaven (or in my case hell) ;)

        • http://laranz.in/ lawrence77

          Don’t worry they schedule the posts, so you can access from both hell and Heaven. :P

          • http://twitter.com/Michele_Leo Leonardo D’Aubeterre

            omg

    • Adi Purdila
      Author

      Haha, that made my day. Nice one :)

  • http://wp.tutsplus.com/ Japh

    Hey everyone! Video download links have now been added for those who can’t access YouTube.

    • http://laranz.in/ lawrence77

      Access denied. :(

    • Sharjeel Hassan

      Really Access denied :(

    • http://wp.tutsplus.com/ Japh

      All fixed now. Apologies for the “access denied”, there was a permissions issue. @sharjeelhassan:disqus and @lawrence77:disqus

      • Sharjeel Hassan

        thx japh

  • http://www.zerodegreeburn.com/play/?thegamewall.com Patrick W

    Getting access denied on the video download links…

  • Pingback: CSS0-Tricks.com : Wordpress Tricks & Tutorials Screencast

  • http://www.facebook.com/fieldwalsh Field Walsh

    what are you using to auto open and close php by shortcut? I have text expander but cant figure out how to make it put me in the middle of the php tags.

  • http://www.facebook.com/calle.braw Calle Braw

    “define (‘THEMEROOT’, get_stylesheet_directory_url())” crashes my whole wordpress site (back and front end), mind helping me out? I’ve tested all the files (index.php , functions.php , style.css and master.css), as soon as i comment that row, it “works”.

    • Adi Purdila
      Author

      I think you made a typo. It’s get_stylesheet_directory_uri() not get_stylesheet_directory_url() (so uri no url).

      Let me know if that works for you :)

  • Pingback: Best of Tuts+ in December 2012 - Website Design Prices

  • Pingback: From Photoshop to Wordpress Theme | MBAx.me

  • Guest

    Cool :)

  • http://www.facebook.com/skids89 Nate Martin

    I cannot seem to get any image to load except for the background image. I have tried using divs with background images. I have used images. Something with the source is wrong. Whenever I upload my files to wp all of the images display a broken image link box even if I upload them as background images not a hrefs.

    • Adi Purdila
      Author

      That’s weird. Can you give us a link so we can have a look?

      • http://www.facebook.com/skids89 Nate Martin

        signup.goministries.net
        I can’t get any image tags to load images. Right now the fix was to use background-image on divs (obviously hacky but I needed to show something) I don’t know how to get the images to load the path to the files. i left the logo and last two images of the header as they are (stripped of file paths).

        Weird (i think it was an upload bug) I logged into the back end and fixed the code in the cpanel editor and now it works. As many times as I uploaded my files (created in sublime text) with the correct php template_directory tag it didn’t seem to work. I have fixed it now and the site appears to be working

  • Stan Tausan

    Hi Adi, great series. The best I’ve seen for WordPress theme development. I am having some trouble though. WordPress does not want to load ‘bootstrap.css’ using the @import feature you showed in your screencast. It does load ‘master.css’ just fine though. Is there a way to fix this? Has anyone else had this problem? I’m using WordPress 3.5.1. Thanks!

    • Adi Purdila
      Author

      Hmm, weird. Is bootstrap.css in the right place?

      • Stan Tausan

        Hi Adi, Thanks for the quick reply. I was able to fix the issue. After some further research, I cut & pasted the the @import for ‘bootstrap.css’ & ‘master.css’ to the very top of ‘style.css’. Before the comments too. I tested again & they both worked fine. So that is fixed.

        However, once I was able to get the stylesheets to work, I noticed that WordPress adds an additional 21px in height to the top of both .top-menu-navigation & .main-menu-navigation. This appears only when there are active menus via the ‘Menus’ in WordPress. WordPress inserts an additional div with the class of .menu. They do display correctly in the original index.html.

        All my work is done in the current version of Chrome on a Windows 7 system.