Complete Websites

Skeleton to WordPress: Finishing Off


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!

Related Posts
  • Web Design
    Adding a Twitter Timeline to a Tumblr ThemeTumblr 28 retina
    Welcome to this, the first of three bonus videos in our series Tumblr Theming 101. During this lesson we'll look at incorporating a simplified Twitter timeline into our theme; a slightly more complex process since Twitter updated their API to v1.1.Read More…
  • Web Design
    Improving Our Tumblr Theme Navigation and Post NotesTumblr 27 retina
    We've reached the end of our Tumblr theming series! In this video we're going to add some styling to our post notes and the tag page. We'll also be adding some extra CSS which will make navigating the site a little easier.Read More…
  • Web Design
    Tumblr Appearance Options: Boolean OptionsTumblr 23 retina
    In this episode of Tumblr Theming 101 we'll add some Boolean Appearance Options to our theme. This will allow users, through checkboxes, to enable or disable certain features.Read More…
  • Web Design
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    Creating the Tumblr Post Footer and Notes Tumblr 12 retina
    Let's kick off this tutorial by reviewing the Tumblr theme markup we've built already. Once that's done, we can continue by sorting out the footer and "Post Notes".Read More…
  • Code
    Theme Development
    Adaptive Blog Theme: Beginning Theme DevelopmentAdaptive wordpress thumb 01a
    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.Read More…