Try Tuts+ Premium, Get Cash Back!
Skeleton to WordPress: Finishing Off
videos

Skeleton to WordPress: Finishing Off

on Aug 6th 2012 with 44 comments
Tutorial Details
  • Topic: WordPress
  • Difficulty: Beginner
  • Screencast duration: 34 mins
Download Source Files
This entry is part 8 of 8 in the series Building a Responsive Layout With Skeleton

Building a Responsive Layout With Skeleton

It’s been quite a journey, but our final destination is in sight! Today we’re going to wrap up our Skeleton Magazine WordPress theme by looking at a FlexSlider plugin, the loop, plus we’ll take a quick glimpse at preparing themes for translation.

FlexSlider Plugin From Wptuts+

Whilst building our static HTML page we relied on the brilliant jQuery FlexSlider to power our adaptive slideshow. Migrating FlexSlider into WordPress can be intimidating for beginners, but luckily Wptuts+ have done the hard work for us with a helpful tutorial and accompanying plugin.

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

The Loop

All that remains is to actually output our blog content to the page! Let’s now take a look at the loop, featured images, plus a bit about internationalization.

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

Note: As pointed out to me by Jonathan Beech (thanks Jonathan) where we call the thumbnail in index.php we should have put the size attribute full within quotation marks like so: $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

Additional Resources

If you’d like more detailed instructions regarding anything that we covered, here are some very useful resources:

If you enjoyed this series and would like to refer back to the tutorials at any point, you can find all 16 videos featured as a playlist on YouTube. That’s just shy of six hours’ learning – enjoy!
Series Navigation<< Skeleton to WordPress: Getting up and Running

 
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
  • Jesus Bejarano

    Great a be right on in it by to day, thanks for this beutiful series..

  • said

    thank you ian yates for this awesome series
    and thank you for your carring about what we need
    i hope that we’ll see more complete project like this one
    thanks to you and other authors we’ll see for the first time a full project between wp.tutsplus and webdesign
    so thank you for making this real

  • Lloyd

    10/10 for the whole process from start to finish

    10/10 for presentations that are just easy to follow.

    Just awesome.

    • Jesus Bejarano

      Waaaahhh I wanna cry i can believe that this awesome pieace of education enlightment have come to it fateful end.Wahhhhhhhhh.

      Great job Ian 11/10 best “Beginners meet RWD WordPress” tutorial ever.

  • SMac

    This series really clarified this technology. The web is constantly evolving and articles like this make it easier for us all to move with it. Clear, concise, direct and complete instruction, you really cannot get much better.

    Thank You Ian…

  • http://www.freetemplatesonline.com/ Stacy Summers

    Stunning! Thank you a lot for this tutorial ) I’ve leaned a lot

  • http://www.lidoma.ir MD

    Thank you so much this series of tutorials.

    Ian I have a request for you. Please learn us how WordPress use pretty URL style for posts.
    I mean how we can write some PHP codes thats understand data in URL form and then use it like WordPress.

    I have write some code but I have problem between kind of servers (Linux and Windows).
    Thanks

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

      Hey MD, glad you enjoyed the series :)

      Sorting friendly urls in WordPress is all done for you via the admin panel (settings > permalinks) but what’s important is to note the .htaccess content which is generated.

      We actually have a tutorial on .htaccess files scheduled for the coming week, but you can also check out Dan Wellman’s .htaccess Files for the Rest of Us over on Nettuts+.

      Using RegEx (again check out Nettuts+) you can use the RewriteRule and select urls, effectively translating them into more familiar strings (with variables) for processing server side as normal.

      Perhaps there’s a specific tutorial we could commission here, but you should find what you’re looking for over on Nettuts+. Hope that helps!

  • szmarci

    I have been staring at skeleton for quite a while. I have site layouts designed with photoshop with the 960 grid with 24 columns. what do you think, would it be possible to adjust skeleton to 24 columns?
    I think by default it has 12.

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

      By default skeleton has sixteen columns, so direct conversion would be awkward. My best advice, if you’re keen to jump over to skeleton, would be to download the psd, transpose your original design, make alterations where necessary, then build from the ground up..

  • trkiwp

    Hi ! excellent tutorials for skeleton :) I saw all and today i started do things… but i have problem… when i started first thing what i tried was typography… i made a typical okay here some big text and when i added to example font size to 49px when i was resizing web the typography was still 49 and this is a problem for me… can i somehow fix it? because i really want to have smaller typography when i am resizing the window.

    Thx and again : great tuts! :)

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

      Well – for the benefit of everyone else who didn’t see my reply to your email :P the short answer is “stay tuned” – we have plenty of responsive typography content on the way!

      • trkiwp

        haha man :D gr8 tutorials and funny too… i like it :D

  • http://www.siluan.de Siluan

    Thank you very much for this instructive series!
    It helped me a lot

  • http://bowesales.com Jesse

    Hi Ian,

    Once again, great tutorial series! I really appreciate your patience and workflow the whole way through. I actually dove right into developing a responsive WordPres theme after watching the static ‘Magazine’ screencasts before these WP videos were released. Very awesome stuff but you shouldn’t stop here.

    Let’s see more on template pages like a full-width page, shortcodes for columns and buttons, custom post types, sticky posts, extra custom menu’s, theme options, prettyPhoto integration with a gallery page or shortcode and even dive a bit deeper into the functions.php file. The internationalization of this theme so far has been great but you could take this a bit further by including the .po files and explain how they get pulled into the theme.

    I’d love to see the Envato Flex Slider further customized by adding some options such as controlling the transitions and speed of the slides from within the dashboard – maybe not quite specific to this screencast, but a much needed addition to this themes development.

    Looking forward to learning more!

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

      Wow – keen?!

      You’re definitely right that there’s scope for developing this further, but Wptuts+ is really the place for these topics. I suggest you go and give Japh a shout – he’s always open to ideas! Until then though, rest assured that we’re working on something else to keep you happy :)

  • http://www.robertbrodziak.com Rob

    Once again, thanks for the whole series. It was a pleasure watching You work on this theme, and figuring out problems in a blink of an eye, like with pagination, or slider height. If I can suggest something for future tuts, it would be great to see similar series of developing psd to html to wp, but going one step further and making a site with news and portfolio section, so we can look into custom post types.

  • AntoxaGray

    Now I see it’s much easeier to make WordPress them then I initially thought.

    4/5 for tutorial however:

    - you haven’t show how you measure block dimensions, fonts, colors, you just copied all code from «ninja» file.

    - tutorial is webkit-biased, which is not realistic. Site not tested in Firefox, Opera, and feared Internet Exploder (7, 8 and 9).

  • http://igerli.com Stefano

    I love this videos you should continue them to the very very end.

  • http://www.mesotheliomaandme.com Manfred Jackson

    Thank you for the outstanding posts!

  • Anders

    Hi there!

    Great tutorial. One question, how do i add the latest flexislider properties to the Envato plugin?

    Best Regards /Anders

  • http://themeforest.net/user/JXI?ref=JXI Johnathan Miller

    Ian, I took the past 3 days to go through the entire series. By far, the best series I’ve found!

    Thanks a lot!

    By the way, do you have a donate button somewhere so I can get you a drink or two?!
    I feel you well deserve it for taking this series as far as you did.

    Hope to see more like this from you in the future!

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

      Very kind Johnathan! But really not necessary :) I’ll see about another in depth series at some point, feedback suggests people enjoy following this kind of thing.

      Thanks :)

  • Arthur

    Hello Ian,

    I downloaded the source files but I have a little problem with tabs and thumbnails:

    - Thumbnails have no border.
    - I can’t click on the Tabs, and they also have some css problems.

    Better than words, have a look at the next picture:

    http://www.savin-it.com/pm-0F1I.html

    I hope you will fix this.

    Anyway, thank you for your amazing job!

    Cheers From France!

  • Pingback: Design a Professional Blog Layout in Photoshop | JDesign's Blog

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

  • peter

    Hi, Ian. Great tutorial, good tutorials like this (PSD->HTML->Wordpress) are pretty rare.

    I have only question:

    When I downloaded the Source Files, the pagination in them isn’t working (WP3.4.2. here) – it’s giving error 404. Tried changing the settings in ‘Reading’ and ‘Permalinks’ and still no go..

    What is causing this?

  • Todd

    Hi Ian,

    Great tutorial! I am renovating my website to be responsive and I have been researching static responsive frameworks. I am trying to decide between the following frameworks: Skeleton, Amazium, Frameless & SimpleGrid. However, I fear that one or two of them may be outdated. Do you have a recommendation out of the 4 frameworks?

    Thanks!

  • http://www.etatvasoft.com/php-web-services/wordpress-development.php AliBarker

    I must say, I thought this was a pretty interesting read when it comes to this topic. Liked the material.

  • ImageOmega

    Ian,

    Thank you for taking the time to create this tutorial series. I found that you were very concise with your explanations and thorough with your step by step process. At no point in time was I ever lost or confused and I learned a great deal going from beginning to end. This series actually helped enlighten me on some of the other things I have been reading about regarding WordPress.

    I guess doing the actual steps always provides more clarity than just reading. Being able to follow along with you in video format was absolutely invaluable. I hope more authors offer tutorials in this manner.

    This is probably not a post you come back and check comments on, but again my sincere thanks!

  • http://www.facebook.com/geoffrey.barker.90 Geoffrey Barker

    Greetings Ian,

    I’ve got a problem that I’m a bit stumped by.

    I’ve got my theme imported into WordPress and all seems fantastic except that my flexslider images only scale on the x axis. My wife tells me this makes the photos of her quite unflattering on a smaller screen. :)

    I don’t recall any height settings in either the early FlexSlider tut, nor the FlexSlider plug-in tut. Have you got any clue as to what I might have messed up or where I might look to find the cause?
    Thanks again for a wonderful series. It has been more helpful than you could begin to imagine.
    Cheers,
    Geoffrey

    • ianyates

      Hi Geoffrey – there are a couple of things which could be causing this, but it sounds is if you have the image height set somewhere without realising it (perhaps on the image tag itself?)

      It’s difficult for me to help without seeing the problem in action – is it online anywhere? You can even send the source files my way webdesign[at]tutsplus[dot]com if you’d like me to take a look :)

      • http://www.facebook.com/geoffrey.barker.90 Geoffrey Barker

        Oi!

        This is what I get for allowing myself to get hung up on a
        specific step…

        At the very end of the tut series, you discovered that you
        had exactly the same problem. Seriously,
        the last 2 minutes of the last video.
        The problem was a missing ‘Height: auto’ in the Flex slider necessary styles.
        Problem solved.

    • http://sparrowinspace.com/ Nick Rutten

      I had the same problem, what worked for me was adding height: auto; to

      .flexslider .slides img {width: 100%; height: auto; display: block;}

      like so, in the flexslider.css or your layout.css depending on where you styled flexslider

  • Mari

    Thank you Ian for very enlightening tutorial series! Best series about the subject. WordPress Codex has always seemed a little taunting, but you helped getting the grasp of it too. I would not mind if you were to continue this series with custom post types / page templates.

    There is one problem with my Magazine demo. The index page Loop is partly missing it’s thumbnails. Thumbnails work if I add a Featured Image to the article, but the default thumb does not show. The weirdest thing is that the default thumb works with the wordpress default content article “Hello World!”.

    I have the

    in functions.php and this is the code I have in index.php

    <a href="">

    ID ) ) {

    $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), full );

    ?>

    <img src="" alt="" />

    <img src="/images/thumb_iceland.jpg" alt="iceland" />

    • Mari

      well that went all wrong….

      Thank you Ian for very enlightening tutorial series! Best series about the subject. WordPress Codex has always seemed a little taunting, but you helped getting the grasp of it too. I would not mind if you were to continue this series with custom post types / page templates.

      There is one problem with my Magazine demo. The index page Loop is partly missing it’s thumbnails. Thumbnails work if I add a Featured Image to the article, but the default thumb does not show. The weirdest thing is that the default thumb works with the wordpress default content article “Hello World!”.

      I have the

      in functions.php and this is the code I have in index.php

      <a href="">

      ID ) ) {

      $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), full );

      ?>

      <img src="" alt="" />

      <img src="/images/thumb_iceland.jpg" alt="iceland" />

    • Mari (again)

      That didn’t work out… well basically I ended up copy pasting the code from the source files you had prepared and the thumbs still do not work (except for the “Hello World” and featured image assigned. As well as watched the Loop tut several times…

      • ianyates

        Thanks for all those colossal comments! I might have to delete them :P

        So then… the thumbnails are coming up as missing images? Incorrect paths? Or are no image paths being output at all?

  • http://www.facebook.com/geoffrey.barker.90 Geoffrey Barker

    … And one last question…

    I’m not sure if this is a pagination question or a permalinks question but here goes:

    I have pagination setup in home.php (blog page) and layout.css as described in the tutorial. It looks right on the page but the URL being thrown by the page 2 pagination link shows as:

    localhost/wordpress/?page_id=33page/2 (before changing my permalinks per the tut).

    At this same point in the tutorial, your page 3 pagination link shows as:

    localhost:8888/wordpress/page/3.

    Also at this point in the tutorial you discover that pagination doesn’t work. You respond to this by changing your permalinks to custom with /%category%/%postname%/.

    I gamely followed along and it looks like my permalinks are changing correctly (the links from the home page now look like:

    localhost/wordpress/uncategorized/hello-world/

    the problem is that all my links now fail with a 404.

    Having typed that all out now, I’m clear that this is not a pagination issue but I’m not sure what it is…

    Any ideas where I grossly departed from the tutorial?

    Just in case, I should say that I did not import your wordpress data and I have not setup any categories.
    Thanks,

    • ianyates

      First stop; the .htaccess file. Where you setup the permalinks structure in WP Admin, is there any mention of there being a problem writing to the .htaccess file? That may be a stupid question, but let’s discount the obvious things first :)

      • http://www.facebook.com/geoffrey.barker.90 Geoffrey Barker

        …sorted.

        I’ll stop asking questions now as I seem to have sufficiently departed from the script.

        My main issue was the httpd.conf and .htaccess files. After that is was a conflict between query_posts in my home.php file. At the top of my loop, I had:

        query_posts('caller_get_posts=1'); // to force sticky posts to show in regular order

        But I didn’t know enough to issue a wp_reset_query() at the right spot. In fact, I’m still working on that but if I take the query_posts out, everything works to spec. Thus, beyond the scope of the tut.
        Sorry for the firedrill but thanks again!
        If you’re ever in Seattle, look me up and I’ll buy you a beer (or a Fanta if you like).
        G

        • ianyates

          Beer will be just fine – thanks :)

  • dq7133

    Hi Ian, thanks for the great tutorial! I just tried uploading the theme from your source files and I’m having some issues with the customize page. It looks like the styles are all missing. I’m running WP 3.5. Might that be the issue? I’ve attached a photo for reference.

    • dq7133

      Similar problem with the Pages tab.

  • DesignGoblin

    Great tutorial!
    I’m seeing a small space below images and I can’t seem to track down where it’s coming from. It must be in the skeleton.css or base.css files since I only added a background color as a test. It appears in all browsers.

    Any advice would be much appreciated.

    DG.

    • DesignGoblin

      Ian help me figue this one out. The base.css doc has a line-height: 1; on the body tag. I set mine to 0 in layout.css, and then reset to normal those styles that were affected. No more gap!. Thanks again Ian.