Thematic 320 and up Update A Responsive WordPress Child Theme

Over the weekend I’ve worked a bit to update my Thematic 320 and up child theme. It now includes most of the style that the Thematic Frame Work comes with and incorporates 4 different screen size media queries. (Check it out and resize you browser, or go to it on your phone and tablet.)

UPDATE
Feb. 7, 2013

  • Only compatible with WordPress 3.4 and up.
  • Registering and enqueuing scripts properly now. Except IE conditional scripts that are not supported by WordPress at this time.
  • Removed header.php and footer.php files to avoid future conflicts with Thematic updates. Wrapping header and footer in header/footer tags.
  • Updated and rebuild all HTML5 loops to newest Thematic version.
  • Added support for header and background images. Places header image in the header rather then adding it to the background like the default Thematic child theme does.
  • Combined all style sheets to style.css
  • Combined all Thematic javascript to 2 files (plugins.js and scripts.js).
  • Updated all javascript files.
  • Commented out 1382px mediaquery. I don’t think most sites need this extra width, but if you like it you can uncomment it out.
  • Other CSS changes.
  • TODO LIST
    // Clean up style sheets
    // Better menu style on smaller and largest screen
    // Better drop down styles
    // Add Less CSS in separate style sheets
    // Rethink mediaquery break points
    // Add option to turn on/off HTML5 markup???
    // Rethink Navigation
    // Rebuild header and footer to avoid unnecessary tags?
    // Move to Github
    // Test in I.E.
    // Change the name to something that doesn’t include “Thematic” in the title?? Any suggestions?

UPDATE
June 5, 2012. Rebuilt the index loop.
UPDATE
May 30, 2012. Thematic got an update! Yay, but If you’re using this theme and update Thematic without updating this theme your site will break. So update it now! If you’ve made a lot of custom changes to thematic320, don’t worry, the only file that really needs to be updated is the header.php file in the thematic320 folder. If you have any questions let me know in the comments. Download the Update here.
UPDATE
August 29, 2011. The theme is pretty much ported entirely to HTML5. I’m sure there are improvements that can be made, but I wouldn’t hesitate to use this theme in a production environment as long as you test and fix in I.E.. I’m currently redesigning this site with this theme as a basis. Download it now and let me know if you have any improvements. Download the Thematic 320 and up theme here.
Thematic320 Update Feb. 23 2012

What’s been updated?
The conditional classes have been updated to the latest version of 320 and up.
Modernizr.js has been updated to version 2.5.3. You may want to create your own build to fit your need.
Respond.js has been updated to the latest version.
I’ve added an additional style sheet for 600px devices like the Kindle Fire. I encourage you to use it in your projects.

Thematic 320 and up still needs a lot of work. Like I said before I’d like to see Thematic give us an HTML/XHTML option, but until then we can use child themes to create HTML5 pages. I’ll continue to work on changing things over to HTML5 and updating as I go.

What’s changed from my original post?

  • The basic look and style of Thematic has been added. I’ve combined most of Thematic’s style sheets into the main style sheet (style.css). I did this because I don’t like overriding styles unnecessarily.
  • Almost everything has been converted to ems. Seems like I’m going backwards here, I quit designing in ems a couple years ago, but I think this is the way forward.
  • I’ve rebuilt the navigation (in functions.php) to use the nav tag. There might be a better way to do this and if you have a better way I’d love to hear it. I’m still including the “skip to content” link, but if I rebuild everything in HTML5 this will most likely go away.

What still needs work?

  • More of the theme needs to be converted to HTML5. I’m also still including id and class, but this will most likely change to role as I move forward, no need to add unnecessary markup.
  • I haven’t decided on the look of the navigation. I think on smaller screens the nav needs to change to a vertical look. Otherwise if you have more than 4-5 pages the nav will look a bit strange.
  • I haven’t decided what to do about the dropdown navigation. I’m not sure how to handle it on smaller screens. I’d love to hear your thoughts.
  • Line height still needs some work.
  • I haven’t tested things like the calendar in asides.
  • I haven’t tested at all in Internet Explorer. The theme is set up to easily correct problems in I.E. without adding I.E. specific style sheets.

You can check out my original post here.

Check out the Thematic 320 and up demo here (Make sure you re-size your browser).

Download the Thematic 320 and up theme here.

34 Comments

  1. RozaniGhani
    Posted May 28, 2011 at 6:07 am | Permalink

    thanks for the responsive theme.
    So far I see that thematic has many widget, I think they are not included in your design.
    I think the best way to the design the nav menu is follow the css design just like Yoko themes which available at wordpress.org.
    Your effort is great! Keep it up.

    • Posted May 28, 2011 at 2:28 pm | Permalink

      Thank, I’m glad you like it. I’ll add styles for the widget area soon.

  2. Posted May 29, 2011 at 6:29 am | Permalink

    This is excellent work! I hope that you continue to work on this and make it fully HTML5.

  3. Michael Qualben
    Posted September 1, 2011 at 12:07 am | Permalink

    I would suggest either adding a print.css file to this theme’s styles directory (even a blank print.css file), or not reference it in functions.php. The missing .css file breaks media queries in IE. Simple fix and then it seems to work fine in IE. Also, I modified your menu code to work with WordPress custom menus. Ping me unless you’ve already got that ready for next release. Good work, btw!

  4. Posted September 6, 2011 at 1:26 pm | Permalink

    This is exactly what I was looking for, I see it’s relatively new, I want to help. Are you putting this up on github?

    • Posted September 7, 2011 at 9:14 pm | Permalink

      I haven’t put it up on Github yet, maybe when I get some free time. You’re more than welcome to put it up if you’d like. Also any help would be appreciated. I’d really like to add in micro-formats next.

  5. Posted September 11, 2011 at 8:12 am | Permalink

    I’ve started using this template for a blog extension to a responsive site (based on 320 & up): hopefully there;s potential for them to work together seamlessly.

    I’m struggling with an issue, as I’m not confident with php / wp themes:

    I’m trying to change the link from separate style sheets for different sizes to the ‘styleAll.css’ file.

    Which file do I make this change in?

    Thanks!

    • Posted September 11, 2011 at 11:58 am | Permalink

      You can change it in the functions.php file. It’s already included you just need to un-comment it and delete the links to the separate style sheets.

      • Posted September 11, 2011 at 12:42 pm | Permalink

        That’s great! Thanks for getting back so soon!

        Also- my nav menu doesn’t show up- how do I change this?

  6. Posted September 20, 2011 at 3:07 pm | Permalink

    http://www.kennethbsmith.com/clients/wp03/ is a development site and wanted to test your 320.

    I downloaded and uploaded 320 next to Thematic (I have done child themes before) but when I preview 320, I get this error:

    Fatal error: Call to undefined function thematic_body() in /home5/kenneti7/public_html/clients/wp03/wp-content/themes/thematic320/header.php on line 53

    Any thoughts on what could be wrong?

  7. Posted September 20, 2011 at 3:25 pm | Permalink

    Seems I did not have the Thematic 9.7 installed. Tested on another site and all seems to be working. Will look it over now. Thanks.

  8. Upekshapriya
    Posted September 23, 2011 at 12:43 pm | Permalink

    I’ve just installed Thematic320 on a clean install of WordPress 3.2.1 (actually a subdomain in a multisite) and the drop-down menu isn’t appearing. If I switch to Thematic then it appears fine. The ‘Sample Page’ is listed in the Pages in the Sidebar. Thematic version is 0.9.7.7.

    Any ideas as to what could be going wrong?

    • Posted September 24, 2011 at 6:11 pm | Permalink

      I’m still working on the drop-down menus. I’ve got them working on a theme I’m building for my site, I just need to integrate them into this theme. Should be coming shortly.

      • Upekshapriya
        Posted September 26, 2011 at 4:29 am | Permalink

        I just compared the latest thematic functions (in library/header-extensions.php) and thematic320 and I found a difference in the way they both construct the menu.

        You do the following:


        'menu_order, post_title',
        'include' => '',
        'exclude' => '',
        'show_home' => false,
        'menu_class' => 'menu',
        'echo' => true,
        'link_before' => '',
        'link_after' => ''
        )) ?>

        whereas thematic does:

        I replaced your code with the new thematic code and hey presto the menu appeared!

        It also looks like you are replacing thematic access section in an old way by using your unhook_thematic_access function, whereras now it looks like all you need is a new function childtheme_override_access added to the child theme functions.php :-)

        • Upekshapriya
          Posted September 26, 2011 at 4:44 am | Permalink

          Seems the code got mangled.

          See screenshot for thematic32 code and latest thematic code

          • Posted September 26, 2011 at 8:14 pm | Permalink

            Thanks for the help. I’ll add that in. If you have any other suggestions I’d love to hear them. I really should put this on GitHub.

  9. BAC
    Posted September 27, 2011 at 6:51 pm | Permalink

    Hey, 320 is cool.

    Would love to see more involvement from the Thematic community on this project.

    I’ll pitch in and help implement MicroFormats / Schema.org if you like?

    If you get a chance, Modernizr 2?

    Cheers
    BAC

    • Posted September 27, 2011 at 8:13 pm | Permalink

      MicroFormats are definitely on the list of things to do. The help would be appreciated!

      • BAC
        Posted September 28, 2011 at 7:18 am | Permalink

        If you set up a GitHub repo i’ll do a fork.

  10. Upekshapriya
    Posted October 6, 2011 at 10:23 am | Permalink

    Are you aware that Andy Clarke has set up a GitHub repository for 320andup at https://github.com/malarkey/320andup with version 2 (alpha) available?

  11. Posted October 7, 2011 at 1:27 pm | Permalink

    Man, I am totatally downloading this now. Thanks so much for all your hard work. You should really have one of those ‘buy me a beer” links. hehe

  12. Tom
    Posted January 4, 2012 at 2:52 am | Permalink

    Hi,

    Cool starting theme to learn about WP theming. Thanks!
    I found a little mistake on line 72 in the 1382.css file:
    clear: leff;
    I guess that should be
    clear: leff;

  13. Tom
    Posted January 4, 2012 at 2:53 am | Permalink

    I meant ‘left’ of course. Stupid me. Can’t even use copy and paste the right way…

  14. Posted January 22, 2012 at 6:08 pm | Permalink

    This theme is awesome thank you for creating it. I will also check out git hub n c if I can help

  15. Posted May 10, 2012 at 12:44 pm | Permalink

    Hey Eric, any luck on getting this theme up on github? I’d strongly recommend it! Thanks for all you’ve done, it’s an awesome theme!

    • Posted May 30, 2012 at 9:15 pm | Permalink

      Not yet, feel free to if you’d like. Otherwise I will someday.

  16. Piro Dhima
    Posted June 5, 2012 at 3:09 pm | Permalink

    I set up a test site for Thematic 320, installed Thematic 1.0.1 and Thematic 320 and up, added a few posts and got this on the frontpage above the title of the first post:


    Warning: Invalid argument supplied for foreach() in /home/accountname/public_html/wp-content/themes/thematic320/library/extensions/newloops.php on line 154

    The line in question:

    foreach ($options as $value) {

    I figured that $options was not an array, so I added these lines before that:

    if (!is_array($options)) {
    $options = array($options);
    }

    and the error went away.

    I hadn’t set up any theme options, but IMHO no PHP warnings should happen just because of that. So above is my fix/workaround.

    • Posted June 5, 2012 at 7:59 pm | Permalink

      Thanks for the heads up. Looks like the index loop got rebuilt with the recent update to Thematic. I’ve rebuilt it in my child theme and it should be good now.

  17. Kumar
    Posted June 9, 2012 at 3:03 pm | Permalink

    Hello,

    Thanks for this theme. I have been playing with it to create a vertical menu but I am not able to get it to work. I have looked at the Thematic forums to no avail. I was wondering what it takes to make the menu vertical.

    Thanks.

  18. Lal
    Posted September 23, 2012 at 11:09 pm | Permalink

    Hi! How do I create a page template that will show a grid layout (3-4 columns) of posts thumbnails or featured images? Thanks.

  19. Posted November 8, 2012 at 1:28 am | Permalink

    Hey Eric, I am searching for some thematic three column theme for my quote collection website, can you suggest me any thematic theme except thematic powerblog theme or can you tell me how to make thematic three column. though i am not a programmer but somehow.

    • Posted November 15, 2012 at 8:42 pm | Permalink

      Hi Hemendra,
      Thematic comes with style for both two column and three column styles. You just have to make sure you include the correct style sheet in your child theme. Thematic 320 and up currently only supports a two column design.

5 Trackbacks

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>