HTML5 WordPress shell

by mimoYmima.com

a great starting point for quickly creating WordPress Themes using HTML5

About the Shell

read base plugin list

WordPress Features

  • Responsive: media queries added for major devices
  • Dynamic sidebar examples
  • Custom template example
  • Smart sidebar disable
  • 404 & 503 error pages

HTML5 Features

  • modernizr (html5 feature detection)
  • HTML5 reset stylesheet
  • A well thought out HTML5 document outline which is good for SEO and Accessibility
  • @font-face examples

and also…

  • The Bourbon mixin library is included in the SASS version
  • iphone detection
  • IE conditional stylesheets
  • Clearly commented code
  • ie6 upgrade message

Base Plugins

Whenever we start a site we upload a base set of plugins which include:

Why we’re making it public

The more people that use it the better it will be. As you use this to make your own sites please let us know what can be done to make it better and we’ll add your suggestions into the next version of the shell.

History

We’ve been working on the shell since 2009 and making sites in WordPress since before that…

Our two companies (mimoYmima and Condensed) use this template as a starting point for all our client work (we use WordPress whenever possible). So over the years tons of sites have used this as a base, we revise it nearly every time we make a site and try to make the code as intuitive as possible. We try to comment everything clearly, but let us know if anything can be improved or if something doesn’t make sense to you. Just leave a comment below.

Please Note that although the plain CSS version is stable, it is not being actively worked on. We use SASS for all our sites at the moment. If you’d like a change to the CSS version we’ll be happy to make it, but if you’re looking for the most up-to-date version of the shell, go with the SASS version.

To Do

  • change out the way we class the body
  • Add stylesheets with enque?
  • Keep working on commenting

make a request

License

The shell comes with ABSOLUTELY NO WARRANTY. This is free software, and you are welcome to redistribute it under certain conditions.

We’ve been working with the same shell in XHTML for years and have used it to create a boatload of sites, so it’s pretty solid, but keep in mind that this has recently been re-written from the ground up to take advantage of HTML5′s new tags, so bear with us and tell us about any bugs you find (or improvements we can make).

Latest Version:

If you’re not familiar with using GitHub that’s ok, just follow the links and then find the little button that says ‘zip’ to download a zip of the files (it’s the last option in the right sidebar).

Be Sociable, Share!
    • http://www.davidmcdonald.org David McDonald

      Any reason why CForms is being used instead of Gravity Forms?

      • mimoYmima

        The main deciding factor for me was that cforms is free. I'm sure the Gravity Forms plugin is great, but cforms hasn't let me down yet, it can handle database tracking of form submissions, file uploads, and it's pretty easy to style the code it generates. My only complaint is with the plugin's UI which in general is not very intuitive and takes some getting used to.

        • http://kitokid.com/tag/%D8%A7%D9%84%D8%B9%D8%A7%D8%A8-250/ kitokid

          i agree

      • http://mimoymima.com mimoYmima

        Hey David, we've actually moved on from CForms to using Gravity Forms on all site, notice CForms isn't included in the core anymore, great suggestion. We can't distribute gravity forms because it's commercial but highly recommend it.

    • Brad

      Thanks for this, quick question, why are you not using wp_enque_style & wp_print_styles for the styles?

      • http://mimoymima.com mimoYmima

        cool, I didn't know you could use enque for stylesheets, we've only used it for javascript. I'll be adding this into the next release of the shell, thanks Brad!

    • http://webmastersintexas.com Jerry

      Nice, I like the plugins download, though I tend to use the Yoast SEO plugin, but that's cool. I would really like to figure out how to build my own plugin upload or better yet, default WordPress already loaded, and put it on GIT for easy access, just sayin!

      • http://mimoymima.com mimoYmima

        Yeah I need to figure out how to use git too, we use a lot of Yoast's plugins, but decided on AIOSEO after checking them both out, this was a while ago though, I'll check it out again.Sent from my iPhone

        • http://www.rachelbaker.me Rachel Baker

          +1 in request for adding to Github for easy access to updates

          • http://mimoymima.com mimoYmima

            promise to look into that soon, at the moment we're making a lot of changes to the shell to make it responsive, more on that soon.

            • http://mimoymima.com mimoYmima

              Responsive css has been added to the shell, we also moved on from AIOSEO to Yoast's WordPress SEO plugin, props to Jerry for the suggestion.

          • http://mimoymima.com mimoYmima

            Rachel – we're on github, feel free to contribute! — https://github.com/mimoYmima/html5-responsive-wor

      • http://mimoymima.com mimoYmima

        hey Jerry, we're on GitHub now: https://github.com/mimoYmima/html5-responsive-wor

    • http://www.prenotazionetraghetti.com/altro/comparazione-traghetti/ Traghetti

      Nice, but I prefer Yoast for SEO. Thanks for the public download

      • http://mimoymima.com mimoYmima

        The shell is using Yoast now for SEO, also recently added a cool feature where if you're logged into wordpress it tells you the template file being used on each page as you look at the site.

    • http://www.finaldesign.co.uk omar

      Great theme guys. Look forward to taking it for a test run. As a web consultant it really pleases me to see such great contributions to the web. Well done and keep up the great work! :)

    • john

      any chance that it will support microformats such as

      http://www.readability.com/publishers/guidelines

      any chance ?

      • http://mimoymima.com mimoYmima

        yeah a lot of this is in there already, we'll look over the other the other recommendations and work them in if they seem like a good idea… I've always wondered what the class of 'hentry' was… now I know, thanks for the link !

    • Richard_Downer

      Hi, I've just downloaded your theme, version 1.5.2 and was looking forward to designing a site around it. However I can't get it to work. I've unpacked the theme, unmodified, and selected it as my theme. When I browse to the home page of my website, I get this error, and none of my content:

      Parse error: syntax error, unexpected $end in {…}/www/wp-content/themes/html5-shell-mimoymima_1_5_2/index.php on line 66

      Is there a problem with my installation? I'm running WordPress 3.3.2. Thanks for any guidance you can give me!

      • http://mimoymima.com mimoYmima

        Hey Richard, I just downloaded the version off the site and activated it with a clean install of wordpress without any problems. Is it possible you inadvertantly added some whitespace after the last ?> — see this post: http://wordpress.org/support/topic/parse-error-sy

      • http://mimoymima.com mimoYmima

        another idea, this code at the end of index.php: <? endif; ?>

        try changing that for <?php endif; ?>

        some servers aren't configured to work right unless you specifically say what programming language you're using, so maybe it's not recognizing that last endif…? Let me know if that fixes it

        • Richard_Downer

          Yes, that's done the job! I changed <? to <?php and the page is rendering now. Thanks for your help!

          • http://mimoymima.com mimoYmima

            good to hear, if you see any other ways to make it better the shell is on github now so you could add changes in there or if you aren't familiar with git you could just make the suggestion in the comments here and we'll add it to the next version.

    • peter

      So umm….. excuse my noobness, but what do I do with this?

      • http://mimoymima.com mimoYmima

        hey peter, no prob, it's a good noob question :D — when you install wordpress you can download a theme that someone else has developed and activate it, or you can create your own from scratch. This 'theme framework' (shell) was developed to make it easier to make your own by collecting all the repetitive tasks you do when you first make a wordpress theme into one package. It's a good base for you to create just about any site. Hope that helps.

    • http://www.x10dtraining.com.au Jonathon

      Hi!

      Thank you for an amazing shell theme – I will be using it to develop my new site.

      As I was working through the site, I came across an issue. I was using your shell as a parent theme and creating a child theme under it so any upgrades you do wont affect my site. The issue was in loading the CSS file. Your code (in header.php) loads the template_url for the CSS sheet, and it needs to load the stylesheet_directory. It might work 99.9% of the time, but if someone decides to child theme someones shell distribution, it might cause issues.

      Cheers,

      Jonathon

      • Brent

        Hey Jonathan, our theme, like http://underscores.me/ and a few other 'starting point' themes is meant to be changed a lot. You can read more about why the shell shouldn't be a parent theme here: http://themeshaper.com/2012/02/13/introducing-the… – we don't want to run into those probs :)

        You should take the shell and turn it into your own theme which probably has lots of fundamental differences based on the needs of the site you're making.

        Hope this helps.

        • http://www.x10dtraining.com.au Jonathon

          Ah – that's fair enough. I was running into problems like those described as I go through and start editing. A much better idea to just use it as a shell rather than a parent. Thank you for the reply – greatly appreciated.

          Cheers.

          • Brent

            no prob, if you see any improvements that can be made to the shell in general to make it work better for theme creation please either let us know here or submit it to us on github !

            • http://www.x10dtraining.com.au Jonathon

              I am currently working to style the entire site using Bootstrap by Twitter, which is interesting. Might be something to investigate?

    • http://www.thewebservicescompany.co.uk Andy

      Looks good – be better with microformats! :0)

      • http://mimoymima.com Brent

        replied to you below, forgot to hit reply though so it's out of order

    • http://www.thewebservicescompany.co.uk Andy
    • http://mimoymima.com Brent

      we already have a microformatted address in the footer (it's commented out) https://github.com/mimoYmima/html5-responsive-wor… What other areas would you mark up with microformats? Feel free to send a pull request on github or suggest a spot for integration and we can work them in !

    • http://hybnost.com Vikas paul

      Neat and clean !
      that is what matters

    • Donna

      Hi – Thanks for such a great base!!
      For some reason my <?php wp_footer(); ?> calls to my page.php file. Any idea why?

      Thanks!!

      • http://mimoymima.com Brent

        I can help you out, I'm not sure I understand what you mean by calling page.php though can you send me a screenshot of what you are seeing to brent @ mimoymima.com (remove the spaces)

    • http://wpti.ps Piet

      So you basically rebuilt an entire shell from the ground up and you "forgot" internationalization??? Way to go… NOT!

      • http://mimoymima.com Brent Lagerman

        We haven’t “forgotten” about internationalization, we just haven’t had the need for it with the sites we’ve been making.

        This project is open source and on GitHub. Also you got it for free… so if you want to add language support you can send me a pull request and I’ll add it in for future users.

      • Ilir

        no need for shitty comments, friend. This is free software and your comment is not in the spirit of OSS. Take a chill pill and come back later!!NICER!!

    • http://scrapeboxvps.ca blackhat scrapebox vps

      Both these operating systems are among the most used and offer its users with distinct advantages.

      Instead, what this does is narrow things
      down to where it can confidently predict a future movement.

      Have an employment law attorney review any layoff plans before
      they are initiated.

      Feel free to visit my site :: blackhat scrapebox vps

    • http://www.monitive.com server monitor

      As I was operating through the website, I came across a problem. I was using your spend as a mother or father concept and developing a kid concept under it so any improvements you do will never impact my website. The problem was in running the CSS computer file.

    • http://borislancaster.edublogs.org/2013/06/07/earning-eve-online-isk/ eve cheats

      I have fun with, lead to I found exactly what I was having a look for.

      You have ended my 4 day long hunt! God Bless you man. Have a

      nice day. Bye

    • http://antarescp.es tiendas de informatica

      Very nice post. I just stumbled upon your blog and wanted to say that

      I have really enjoyed surfing around your blog

      posts. In any case I’ll be subscribing to your feed and I hope you write again very soon!

    • http://seoyandira.com/ Bajumurmer.com

      fantastick

    • http://myseotemplates.blogspot.com/ Blogger Template

      Awesome. Anyway I like your design.

    • http://tvonlinedelores3.webs.com/apps/blog/ Online Tv

      Online Tv
      Fine way of describing, and nice paragraph to obtain facts regarding
      my presentation focus, which i am going to convey in school.

    • http://www.monitive.com Timothy Black

      As I was operating through the website, I came across a problem. I was using your spend as a mother or father concept and developing a kid concept under it so any improvements you do will never impact my website.

    • http://wallinside.com/post-4162779-advice-for-arthritis-sufferers-to-go-by.html Teri

      If you are going for most excellent contents like myself,
      just go to see this website all the time because it presents quality contents, thanks

      Also visit my blog: fitness and dieting *Teri*

    • http://www.intimateweddings.com/blog/fresh-fruit-favors/ Stickers For Macbook Pro

      What’s up it’s me, I am also visiting this web site daily,
      this web page is genuinely fastidious and the people are truly sharing nice thoughts.

    • http://www.tutosytips.com johanso

      Very very Nice. Thanks for the public download

    • http://artetelas.com/book/ Anonymous

      I like to share understanding that I have accrued with the season
      to assist enhance group performance.

    • http://www.webradio-toplist.de/index.php?a=stats&u=prestonfjr sporing sporiparity sporiparous sporoblast sporocarp sporocarpia sporocarpium sporocyst sporocystic

      Good day! I simply wish to give an enormous thumbs

      up for the good info you might have here on this post.

      I will be coming back to your weblog for more soon.

    • http://duartex.com/10-reasons-why-ill-keep-using-and-loving-linux-in-2012 Neille Neils Neilson Neiman Neisa Nel Nela Nelan Nelda Nelia Nelie Nell Nella Nellda Nelle Nelli Nel

      I love to share understanding that I have accumulated

      with the 12 months to assist enhance group efficiency.

    • http://www.teapigs.co.uk/+toxic/+rubbish teapigs

      You are aware of so tremendously concerning this condition, generated my family many people feel believe it out of countless a number of aspects. It’s similar to both males and females usually are not captivated until eventually it is actually something to accomplish by using Lady gaga! Your own private stuffs terrific. Everyday ensure that is stays upwards!

    • http://the400club.org/2011/05/20/glee-%e2%80%93-a-very-glee-christmas-s02e10/sue-the-grinch-a-very-glee-christmas/ recelebrating recencies recency recension recent recenter recentest recently recentness recept recep

      Excellent willing synthetic eyesight to get fine detail and

      can anticipate issues prior to they happen.

    • Kieran N

      "If you’re not familiar with using GitHub that’s ok, just follow the links and then find the little button (near upper left of screen) that says ‘zip’ to download a zip of the files."

      Since GitHub's recent redesign the download zip has moved. It's now the last option in the right sidebar. Hands down the best starting point for building custom WordPress themes. Thank you for sharing!

      • http://mimoYmima.com/ Brent Lagerman

        thanks for the compliments Kieran :D — fixed the outdated comment about the github download link as well. As always, let me know if you see any improvements we can make.

    • http://mimoYmima.com/ Brent Lagerman

      IMPORTANT NOTE: I’m expiring the SASS branch in favor of having a separate repo for the SASS version. the correct links are on the site above.

    • Roy Hornsby

      I downloaded the zipped SASS version from github yesterday, but when I went to compile it I’m getting syntax errors, being new to SASS I’m not sure what I should do with this, any advice will be appreciated

      Syntax error: Invalid CSS after “…n compact($vars”: expected “)”, was “…) {”
      on line 3 of /Users/…/…/…/…/wp-content/themes/html5-responsive-wordpress-shell-SASS-master/styles/bourbon/functions/_compact.scss

      from line 11 of /Users/…/…/…/…/wp-content/themes/html5-responsive-wordpress-shell-SASS-master/styles/bourbon/_bourbon.scss

      from line 12 of /Users/…/…/…/…/wp-content/themes/html5-responsive-wordpress-shell-SASS-master/style.scss

      • brent@mimoymima.com

        Are you still getting errors Roy?

      • http://mimoYmima.com/ Brent Lagerman

        I haven’t seen the error and I’ve used the shell a few times since you posted this so I’m assuming it’s ok. If anyone else has issues let me know.

    Enable Javascript