Menu Search
Jump to the content X

Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko


In this post we are glad to present to you yet another freebie: a responsive WordPress theme Yoko which was designed by talented designers Ellen and Manuel from Elmastudio1 and released for the Web design community. Of course, the theme is absolutely free to use in private as well as commercial projects.

Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.


Download the Theme for Free! Link

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.


Features Link

The theme requires WordPress 3.1+ to run. It has following features:

  • Cross-browser compatible (tested in Chrome, Firefox, Safari, Internet Explorer 8+)
  • HTML5 (with fallback for IE < 9) and CSS3
  • Responsive layout (CSS3 media queries, not supported in IE < 9, but you can use libraries like Respond.js10 by Scott Jehl or CSS3-Mediaqueries-js11 by Wouter van der Graaf to make it work in older versions of IE.)
  • WordPress post formats (aside, gallery, image, video, link and quote)
  • Theme options page, custom background, custom header image
  • Optional sub menu
  • A custom social links widget to promote your RSS-Feed, Facebook, Twitter, Flickr, Vimeo, LinkedIn or Delicious profile
  • Full-width page template
  • Google Web fonts in use (Droid Sans and Droid Serif)
  • Threaded comments with Gravatar support
  • Shortcodes for multiple columns, info boxes in three colors and highlighted text
  • Currently available in English, German and French.

Screenshots Link




Comments area.

Custom Header.

Post Format Gallery.

Theme Options.

Behind the Design Link

As always, here are some insights from the designers:

“Since the mobile Web is getting more and more popular every day, we think that it’s also time for WordPress themes to become more flexible and adapt to different devices and screen sizes. While designing the Yoko theme, our goal was to create a minimalistic design with focus on content and good readability on various devices. Also we wanted the theme to be easy to use and customizable for everybody, so we kept the theme options simple while still including the most important options to add a personal style to the theme.

The main problem to solve during the design and development process was to make sure that all the different contents and plugins that people will use still work in the responsive layout. Of course the responsive design approach is still in development but we think it’s a lot of fun to explore new possibilities and as doing so make Web design and WordPress themes more powerful and flexible to use.”

Thank you, Ellen and Manuel! We sincerely appreciate your work and your good intentions!

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    looks awesome! thanks

  2. 2

    Very nice looking theme!

  3. 3

    thanks a lot for this inspiration and giveaway :)

  4. 4

    Suddenly inspired!

    June 7, 2011 2:32 am

    I think I just died and went to heaven ;-)

  5. 5

    The smartphone/iphone layout does not work well. The logo and image takes up too much space and the “categories”-links does not work (as well as taking too much screen space). Clicking on a category link loads “the same page” (it does change the articles listed below, but the user will only see the same page with the category links again and it does not seem to have changed).

    • 6

      Hi Pixelpusher,

      I actually think its quite common on mobile devices that you have to scroll down the page a bit to see all the content. But since the header image and the sub menu both are optional you can just not use them and have a very small header instead. In my opinion this solution is working good especially for a theme that has to hold so many different contents :-)

      • 7

        Manoj Kumar Sharma

        June 8, 2011 4:32 am


        Excellent Theme. Looks really good, especially in the small screen versions.

        However, as already pointed out, if you were to switch to the phone view, the sub-categories in the menu never appear. On has to scroll all the way down to view the CATEGORY section to identify the sub-category names. And then, the sub-category names do not appear identifiable as sub-categories to the selected category.

        Thanks for sharing this.

  6. 8

    Very nice clean theme! well done.

  7. 9

    Aweseome Theme – use it on both blogs!

  8. 10

    Very clean and fresh looking theme. Will certianly use this somehwere :) Thanks

  9. 11

    Amazingly awesome theme, thanks for sharing and a nice clean theme too.

  10. 12

    nice, but what about IE? 7-8?

    • 13

      What about them? If you want or need to make it responsive for them too you can use respond.js or CSS3-Mediaqueries-js as they said in the article.

    • 14

      @franszo, I think this is your first time hearing about html5 and css3.

  11. 15

    Ohh, very clean and fresh. Love the vivid green header picture. Many thanks.

  12. 16

    Anterpreet Singh

    June 7, 2011 3:40 am

    Great theme. Simple and perfect :)

  13. 17

    Thanks for this great high tech theme! Love the concept, so I’ve tried it out immediately. After having uploaded a new header image, I opened my blog on my iPad. It shows the default header image instead of the freshly uploaded one. On my desktop everything looks the way it should! Any idea why this is?

    • 18

      Thanks for your feedback, Michael. I am not sure, but you might have to clear the cache one more time. Do you use a chache plugin for your WordPress blog?

  14. 19

    Great looking theme, and I’m definitely going to put it to use somewhere.

    Running through the W3 Validator results in 21 errors however. Do you suppose this is more related to WordPress 3.1 rather than the theme itself?

    Thanks again for all your hard work!

    • 20

      Hi Shad,

      thanks a lot for your feedback :-) Yes, you’re right about the validation errors. The theme didn’t have this validation errors just a couple days ago. I believe its the “rel” attributes that the W3C validation doesn’t accept, but I will check it for sure again :-)

  15. 21

    Very fine work – thank you. Clear design and good readability.

  16. 22

    i love this. but i am not sure if the media-query thingy is a really good solution …

  17. 23

    I could be horribly wrong but this looks like fluid percentages rather than media queries, at least the way I have seen them implemented.

    • 24

      Hi Jason,

      its a mix of both (media queries and % width sizes). With this solution the theme can adapt to as many different screen sizes as possible :-)

  18. 25


  19. 26

    Thanks for the lovely theme!

  20. 27

    Very nice clean theme! Thanks for sharing.

  21. 28

    Really nice to see these auto resize templates. If you are looking for a free framework that will yield similar results, try lessframework.

  22. 29

    Extraordinary designer. Congratulations to Elmastudio!

  23. 30

    awesome… thanks..

    in smaller screens, sub pages menu is not visible. it would be better if the fix is available.

    • 31

      Hi Sriramajeyam,
      we’re happy that you like the theme :-) Since the space on the smartphone version is very limited, we decided to hide the sub menus in the smallest mobile theme size for better readability.

      So the mobile version will only show the most important navigation menus. To still provide a link to all your categories you could maybe activate the category widget in the sidebar :-)

  24. 32

    The “live demo” link leads to a site that is blocked by my works Barracuda firewall. =(

  25. 33

    Not impressed. Big picture is just waste of space, especially when opening some category… acitve links? kinda not userfrendly… sorry 4 being honest. But still like resizing part :)

    • 34

      Hi Darko Škulj,
      the header image is optional. You can just remove the it with one click if you go to Appereance / Header in your admin panel :-)

  26. 35


    it’s a very nice clean WordPress Theme. But if I saw that it’s all about HTML5 and checked it via W3C validator I got 21 Errors and one 1 warning(s).

    I noticed that almost every WordPress Theme what was valid some days ago, are now invalid.

    Anyone have a answer why this happend?

    • 36

      Hi Erni,

      Yoko was also valide HTML5 code until just a few days ago. I still have to check again but I think something changed about the rel-attribute (this is the same code like in the standard WordPress theme). I will try to find out more maybe on the WordPress developer site and let you know :-)

      • 37

        This would be really cool, if you could do that. Maybe they already know it and working on some fix on the standard WordPress Theme.

    • 38

      Hi Erni

      You are right. This happens couse the rel attribute will accept only defined arguments/values. Some new of then in HTML5 are archives, author, bookmark, external, first, index, last, license, nofollow, noreferrer, pingback, search, sidebar, tag, up.
      You can also use alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag.
      These values was removed since HTML5 appendix, chapter, contents, copyright, glossary, index, section, start, subsection.

      So we need just to change the rel values in the Template.

      But there are also 4 real misstakes. There are 4 inline elements with closing tag /> and these is not allowed in HTML5.

      • 39

        Thanks for the explanation, but if I go through the Templates and try to change the rel values, I’ve sometimes no idea which value I should choose and if I change some rel values, I’ve the fear that some things does not work. Because of some new unknown rel values.

      • 40

        Hi Thorsten,

        thank your for your reply and your tips for the the theme files. I will look into the validation errors you mentioned and fix them in the next theme update :-)

  27. 41

    Looks realy awesome!
    Great and cleen design!!!
    I love it.

    Only the technical html coding could be much better.
    There is too much code retundanter. I rewrite some parts already with less code.

  28. 42

    You guys are awesome.

    I love your giveaways like this!

  29. 43


    i love your theme. But i have one question: Why is the site-title not linked with home when i have choosen the custom logo an not the h1-sitetitle?

    Thanks for reply!

    • 44

      Hi Micha,

      right now this it’s not possible for the logo image to be a link, a resizable image and not have a fixed image size all at the same time. So for now the logo image will not be a link to the homepage. I know this not ideal yet and we’ll work on a solution in a future theme update :-)

  30. 45

    Until order a subject worthy of note. Very well produced with ccs3 html5. Approved.

  31. 46

    i just can’t describe how thankful i m to smashing magazine

  32. 47

    Awesome.. Thanks SM :)

  33. 48

    Sumon @ Sumon Seleem's Blog

    June 8, 2011 2:40 am

    Looks like a great theme. Going to try this for my blog… Love the simple design and it has all latest features of WordPress :)

  34. 49

    awesome..will try for our blog, Gracias!!!

  35. 50

    very nice looking theme, will give it a try and use it as a framework for child theme dev.

  36. 51

    Florescu Adrian

    June 8, 2011 8:59 am

    Thank you very much! I will use this theme on my blog for sure!

  37. 52

    Christian Lilik Henry

    June 8, 2011 6:09 pm

    wow.. this is awesome, nice looking and clean design. Great job, thanks for sharing

  38. 53

    Awesome work! Well done! Me like :)

  39. 54

    Wow, looks great, and both design and function!

  40. 55

    Really appreciate the time and effort put into this theme. Thanks!

  41. 56

    Create theme ;-)) i like this for translate to spanish.


  42. 57

    Absolutely amazing use of media queries. Great job!

  43. 58

    Great post! :)

  44. 59

    Thank you so much for this theme! I updated my blog ( with it today, and it is wonderful! I love the flexibility, that it looks as great on my DROID X2 as it does on my 19″ laptop in Chrome.

  45. 60

    Nice theme! Going to have to give this a test drive.

  46. 61

    Hi. Thank you for the theme! My question: Is there a simple way to change the site title font and color?

  47. 62

    Would it be possible, to have the header acting as a simple slider.

  48. 63

    but if I put the icon? how do I change it

  49. 64
  50. 65

    One design multiple layouts, signs of how things will be done….Squirt Squirt…


↑ Back to top