Skeleton to WordPress: Getting up and Running
videos

Skeleton to WordPress: Getting up and Running

on Aug 1st 2012 with 40 comments
Tutorial Details
  • Topic: WordPress
  • Difficulty: Beginner
  • Screencast duration: 57 mins
Download Source Files
This entry is part 7 of 8 in the series Building a Responsive Layout With Skeleton

Building a Responsive Layout With Skeleton

During previous parts of this series we’ve covered a lot. We took a Photoshop layout, built it into an adaptive web page using the Skeleton framework, explored aspects of CSS3, implemented various jQuery plugins and considered our options for wide screen layouts. One thing remains..

Be under no illusions; developing a bullet-proof WordPress theme takes a lot of time and effort. During the following tutorials we’re going to get our Magazine theme working, but only in its most basic form. WordPress is a big platform and is capable of almost anything you can throw at it – when you’re finished with these screencasts there’ll be plenty more for you to do!

Starting Out

Assuming you’ve installed WordPress somewhere and you’ve downloaded the source files to kick things off, let’s now see about packaging things up as a WordPress theme. There are some requisite files we need, plus a thumnail image, then it’s a question of correcting some paths and organizing our project files.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

WordPress’ Menu and Widgets

Having gotten our theme up and running, let’s now hook up the menu and widget areas of the layout. We’ll need to add a new file to our project (functions.php) which is going to handle some of this basic functionality.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Additional Resources

I made reference to quite a few bits and pieces during these screencasts, so here are the various links to help you out.

I also made use of a few WordPress plugins, which you can find and use in your own installation:

Series Navigation<< Building a Responsive Layout With Skeleton: WidescreenSkeleton to WordPress: Finishing Off >>

 
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.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.wordpressweb.comp.rgu.ac.uk Chris

    Haven’t watched the full video yet, but have already converted my version over to the url above.

    Great video series.

  • Camila

    Link para download quebrado

    • http://www.snaptin.com Ian Yates
      Author

      Oops – wrong permissions.. Intentarlo otra vez :)

      • Jesus Bejarano

        Uhhh O.o hablas español?. Ay que bueno ya no tengo que usar google traductor para preguntar algo jejeje …..bromeo.

  • Marko

    Woooohoooo :)

  • http://www.opensafepro.com Ronald

    Nice,
    I really want to redo my blog

  • supprof

    thank you very mutch
    i waited for so long for something like this
    i hope that one day we will something like this in kind of partenership between wp.tutsplus or net.tutsplus and webdesign.tutsplus in full project theme from scratch
    thank you very mutch very usefull

  • Adel

    I wan’t a Skeleton to Drupal tutorial .

  • Techeese

    Thanks Ian just what I need! <3
    This should be added to wp.tutsplus as well :)

    • http://www.snaptin.com Ian Yates
      Author

      You’re welcome :)

      I actually thought about cross-posting it over on Wptuts+, but figured it was a bit basic for its readers.. Still, Japh and I (plus a star Webdesigntuts+ author) have something in the works which I’m sure you’ll all love!

      • samir

        i hope that will be from scratch and in sceeencast because wp.tutsplus don’t make screencast series
        i waited so long there for a screencast series like this but no hope!!!
        thank you Ian Yates
        you’re amazing

      • http://laranz.in Lawrence77

        That’s huge Ian ;)

      • http://lukewhitehouse.co.uk Luke Whitehouse

        I too am eagerly awaiting the finish off this series and your little top secret in the works project.

        Hope its a full wordpress screencast!

  • Dougieladd

    Thank you Ian – very well taught. Looking forward to tackling something with my newly polished skills, thanks to you – cheers :)

  • Guzz

    Muchas Gracias Ian for a awesome series of video tutorials, the best I seen….

  • http://responsivedesign.net.au Responsive Design

    Thanks Ian,

    I liked Twitter Bootstrap. Was really easy to start with. Skeleton on other hand seems to be worth learning too.

    I would really like to say big THANKS to your work Ian and hope your good works keep on coming.

  • http://www.solybarr.com Sol

    Excellent, thank you! this was what was missing from the series..and we didnt even know it! :)

  • http://www.mattfairbrass.com Matt Fairbrass

    Just out of interest Ian, why do you prefer to use MAMP on a Mac as opposed to the built in apache2 web server which ships with OSX? Thank you for the video though, very informative.

    • http://www.snaptin.com Ian Yates
      Author

      Good point Matt – I don’t prefer it, I’m just used to it! I’m one of these “If it ain’t broke, don’t fix it” types, which is probably my biggest flaw as a web designer. Sometimes I really have to force myself to change habits – which includes applications – and I always found MAMP so convenient with MySQL etc. packaged up and ready to go. Thanks for bringing that up :)

  • Steve

    Wonderful tutorial series Ian, quite a few people have been begging for the 3-stage process of PSD->HTML->Wordpress and it’s great to see you’re giving the people what they want. I will be tuning in for each part.

  • agung wiseso

    I have a html site that i built with 960.gs css framework. Can i use it to skeleton and wordpress?

    • http://www.snaptin.com Ian Yates
      Author

      You can convert any HTML site to run using WordPress – the 960.gs framework is a perfectly decent starting point. In our example, I use Skeleton as a basis framework (getskeleton.com) but you can certainly follow along and apply the same ideas to your site. Good luck!

  • Hamid

    once again, thank you Ian Yates, Skeleton with WP? wow that’s a nice idea!

  • ethel

    Great tutorials!

    I have one problem though. When my window is larger than 1280px (or I assume thats the limit when the change happens, since .page has a width of 1280px) the first footer, the one with the four columns in it, moves up. At the same time, the menu moves to the upper left corner. The footer positions itself directly below the menu.

    Is this the design for larger windows? How can I change it so that the design stays the same, regardless of windowsize?

    • http://www.snaptin.com Ian Yates
      Author

      That’s right, the design currently changes beyond 1280px in the way you’ve described, which we covered in Building a Responsive Layout With Skeleton: Widescreen. It’s optional of course, you just have to remove the final media query in skeleton.css (or check out the video for alternatives). Good luck :)

  • http://mlangella.com Manuela

    Just finished to watch ALL of your videos for this serie. What can I say? I love you, Ian. :)

  • Sammy

    Or instead of doing all this you could just download http://demos.simplethemes.com/skeleton/ for wordpress or if your just the macho type you could just code it all from scratch. Poorly done video btw. Doesn’t seem like you even planned what you were planning on saying during the videos. It seems like your just explaining what your thought process is. You should at least have an outline of what you plan on saying. This is very basic stuff anyways. If you can yourself a web designer and can’t figure out how to go from a PSD template to wordpress then you need to get out of the field and stop giving us real web designers a bad name. That is all thank you very much!

    • Jonathan Beech

      Ok so where is the link for your fantastic bullet proof videos on how to build a WordPress theme from scratch, some people would like to have a deeper understanding of how WordPress and the whole web design process works and i think Ian does it in a brilliant way? Themes can be used once that understanding has been reached.

      This isn’t constructive criticism that you’ve posted, its just trolling and by the way, sort your grammar out too. (if you can yourself a web designer??)

    • ianyates

      Thanks for that :)

      • Jonathan Beech

        They walk amongst us!

  • George

    Hi Ian! I just want to first say that this is amazing! I’m really excited about this tut from start to finish! Great Stuff!

    Question:
    Say you wanted to package the theme for a market place like Theme Forrest. Is there a way to have the widgets you’ve installed in this tut – especially “Responsive Select Menu” – automatically activate? Or do suggest coding elements like this directly into the css in such scenarios? Or is there a 3rd option I’m not aware of?

  • Pingback: NET+ Best of Tuts+ in August 2012 via buypappa.com | Buypappa blog

  • Pingback: Best of Tuts+ in August 2012 | DigitalMofo

  • Pingback: PSD+ Best of Tuts+ in August 2012 via buypappa.com | Buypappa blog

  • Pingback: Best of Tuts+ in August 2012 | SearchPsd Blog

  • Pingback: VEC+ Best of Tuts+ in August 2012 via buypappa.com | Buypappa blog

  • Pingback: My Stream | Best of Tuts+ in August 2012 | My Stream

  • Pingback: Building a Responsive Layout With Skeleton : Widescreen | JDesign's Blog

  • wantei

    The sub menu works fine but how can I implement a 2-layer sub menu (sub-sub menu)? Guys can you help me out.

  • MastaMark

    Gret tut Ian, however the admin bar isn’t showing…has anyone reported this bug? I Followed your tut the the “t” but can’t find the issue.

    • ianyates

      Hi MastaMark – have you made sure the <?php wp_head(); ?> and the <?php wp_footer(); ?> hooks are placed in the header.php and footer.php files respectively? Without these a great many plugins (and the admin bar) won’t show up..

    • dave

      The same thing happened to me, make sure that you are logged into your wordpress account.

      goto your localhost:8888/wordpress/wp-login

      by default it should be,
      username: admin
      password: admin

      then revisit your site

      make sure to change your login once its actually hosted

      • Dave

        sorry not login, password rather so it wouldn’t be name: pass: admin

  • xuamox

    Ian, first of all, this is THE BEST tutorial I have found on taking an html template all the way to a theme on wordpress. You trully have a gift for teaching and breaking a project down into understandable objectives. Keep up the fantastic work. I had a question regarding the display of a three level menu nav on wordpress. WordPress allows you to build a three level nav, but it’s displaying the third level with horizontal and vertical scroll bars. Any help is much appreciated.

  • xuamox

    I should have been more specific. I am trying to use your nav example and adapt it so that it works with a three level deep main (primary) navigation. Thanks.

    • ianyates

      Hi there, glad you’ve enjoyed the series :)

      Making sure subnavs are catered for isn’t too complicated, you’ll have to add a couple of lines of code, plus alter one or two existing rules. It’s been a while since I’ve looked at this source code, but hopefully the following will sort you out:

      Firstly, make sure that subnav lists are positioned correctly against their parents:


      nav.primary ul ul ul {
      top: 0;
      left: 100%;
      }

      Then make sure that the overflow value of those parents doesn’t activate the scrollbars. Find


      nav.primary ul li:hover ul

      and alter


      overflow: auto;

      to


      overflow: visible;

      Then, on that same rule, change the selector so that only the immediate submenu is revealed on hover, instead of *all* submenus. Change:


      nav.primary ul li:hover ul

      to


      nav.primary ul li:hover > ul

      That’s it! Now you should be able to use submenus, subsubmenus, subsubsubsubsubsubmenus………

    • ianyates

      I meant to attach this screenshot too..