Grid Focus first WordPress.com theme release of 2009

Grid Focus on WordPress.comGrid Focus was announced as the first new theme release for WordPress.com in 2009 via Almost Productive. Self-hosted WordPress users can continue to download the theme for modification and use from the official Grid Focus page.

If you have always wanted to try WordPress, but shied away from the thought of setting up your own site, sign-up for your free WordPress.com blog.

This may seem like a small achievement, but I feel warm and fuzzy inside seeing that Grid Focus is available for WordPress.com users.

Expect to see continued Grid Focus development with theme admin options, and possible stylesheet updates for paid WordPress.com users who have access to CSS editing.

Discuss - 136 Comments

  1. Kelsey says:

    Okay, now it’s showing, but it is *under* the lefthand sidebar.

    • Derek says:

      You increased the width of your main column without adjusting the width of the two floating sidebars. Because the sum of all three columns exceeds the width of the layout, the floating columns will "stack". Increase #wrapper to 1140px or adjust the column widths to fit within what you are currently using.

    • Kelsey says:

      Thanks! I miscalculated.

      Also – is there no way to have both sidebars on all views?

  2. Beer says:

    Nice theme. I tried using a sticky “Page” but it looks out of place with all the whitespace in the 2nd and 3rd column area. Is it limited so that the 1st column displays for a “page”, but the 2nd and 3rd columns are empty? Does this require editing a file like page.php first maybe?

  3. Preston says:

    Soooo nice, Derek.
    I’m currently building 2 sites using the old theme:
    http://bwrj.org/welcome
    and the new theme: http://cmdcschool.com/hello .
    I’ve been able to trick ’em out a little without much trouble.

    Thank you for this!

  4. naomi says:

    Derek, does the theme support current nav highlighting? Do you have an example of how to adjust the code to do this? I’ve been having trouble getting that to work, using the instructions at http://codex.wordpress.org/Dynamic_Menu_Highlighting

    I noticed that you’ve got it working on 5thirtyone.com, and am curious how you adjusted your header and css files to make this happen. Thanks for the great theme!

    • Derek says:

      Here’s some example code for a single li in an unordered list:

      <li<?php if ( is_single() || is_home() ) { echo ' class="current"'; } ?>><a href="<?php echo get_settings('home'); ?>/" title="Some title">Link title</a></li>

      You can pass parameters through the if statement specifying when the ‘current’ class should be applied to the li.

  5. naomi says:

    Derek, you’re a rockstar! Thank you for your prompt reply, and very helpful code. It’s just what I needed to save me from more hours of banging my head against the PHP wall.

  6. Moshe says:

    This is very nice I just have one small question and it may sound dumb given what all is written above but how do I add a custom header to the theme?
    Thanks

  7. ais says:

    Thank you. It is a great theme!
    I have noticed the “Browse” link in footer.strip.php is functioning as “Top” anchor. Maybe it is a typo.

  8. Soulculture says:

    Hi Derek,
    thanks again for this theme.
    Just having a few problems with aligning text and pictures on posts.
    Im trying to alight the pictures to the left or the right and have text next to it.
    but no matter what code i put in it never works..
    Don’t know if anyone else has encountered this.
    Also I removed one of the sidebars in the stylesheet.. but it keeps pushing the sidebar under the main section.. any ideas on how to solve this? thanks

  9. Rowland says:

    Hi Derek

    Thanks for the theme – I’m really pleased to be using it.

    Wondering if you could help me with a couple of problems.

    1. I’m not getting or giving pingbacks for some reason. Is that just me or have other people found that? I’ve tried http://www.untwistedvortex.com/2008/04/28/why-your-wordpress-blog-isnt-receiving-pings/ – is that the right thing to do?

    2. The sidebars don’t seem to show up when the view is just of a single post. Not crucial this, but would be better if they did I guess.

    Thanks – sorry to bother you

    R

  10. Moshe says:

    Derek
    I tried entering the code in mentioned above several times and I cannot get it to work. I did the the following in the style.css file and I added a “images” folder on the hosting server
    /* =———————————– header elements */
    #masthead {
    padding: 7px 0;
    height:52px;
    background-image: url(’images/header1.png’);
    background-position: 0% 0%;
    background-attachment: scroll;
    background-repeat: no-repeat;
    }
    #blogLead img {

    • Preston says:

      The images folder must be inside of your grid_focus theme folder.

      If that still doesn’t work, try using an absolute URL, i.e.
      background-image: url(’http://path to images/header1.png’)

      Since you’re using the code verbatim, I’ll assume you’ve named your image “header1” and that it is a png.

      Please post a link to the site.

  11. Preston says:

    Here is an example of it working: http://cmdcschool.com

    • ruz says:

      @preston If you could expand a bit on how to get the image above the nav bar, like on the site eg. you provided, that would save me many grey hairs.

      beautiful theme this and thanks

    • Kelsey says:

      I’m having the same problem – the image gets stuck below the nav bar.

  12. Preston says:

    Again…
    Open the style.css in the gridfocus folder and locate the #masthead line.
    Here’s my edit:

    #masthead {
    padding: 7px 0;
    height: 150px;
    background-image: url(‘myimages/header1.png’);
    background-position: 0% 0%;
    background-attachment: scroll;
    background-repeat: no-repeat;
    }
    I also opened the header.php file and removed the content from the blogLead div. I then added an “onclick” function to the entire masthead div as follows:

    If still unsuccessful, PLEASE POST SOME CODE OR A LINK TO THE SITE.

  13. Stephan says:

    Just wanted to let you know that there is a type in your website URL in the comments preceding the original sylesheet linked from the custom CSS page on WP.com.

    Otherwise great theme. Just trying to add a custom header through custom CSS. Do you know if there is any way I can customize the top nav?

    Moshe and Ruz, it works for me if I retype the ‘ that frame the URL. Copy-pasting must change the type of apostrophe and the result is that the img cannot be called.

    • Stephan says:

      For other CSS beginners: just figured out that adding hides an element. this way I could hide the #blogLead and #authorIntro

  14. Jan says:

    Dude you are totally right, that was the mistake 🙂

    thank you so much, and of cause thanks to darek for this wonderful theme!

  15. Jan says:

    uhm, i think nobody asked…where can you change the color of the two grey bars?

  16. ruz says:

    hey guys thanks for the response but I got frustrated and switched to a theme that is a bit easier,,,,,Atahualpa….which seems to be pretty good for someone like me who is on their L plates.

    thanks again

  17. Articles says:

    What a great theme Derek ! I’m definitely going to give it a try. The example site that Preston posted looks great.

  18. I love this theme. Is it possible to make it a two column theme, as you have there, without too much tweaking? (I have it hosted on WP, not on my servers, btw.)

  19. Yohann says:

    Hi,
    Your template is fantastic, been searching a long time for something that suits us. Thank you.
    Quick question, how can I create expandable post summaries for my site; i.e “read more”? I can’t seem to find the answer on this forum.
    Thanking you in advance for your help! Keep up the great work

  20. erietta says:

    Hi Derek

    Thank you for sharing this theme. I just spent some time of theme forest and grid focus still is my favourite. There are just a couple of things I want to change.

    Firstly, I would like to add a label “comments” after the comment counter at the top of the post. I would like this to be a link to the comment form. Secondly I would like the comment form to be persistent under the post.

    Any tips? I understand if replying is a bit of a life story.

    Now, all this being said why don’t you have an Amazon wish-list or contribute link? How can I properly $thank you for your efforts?

    Thanks again, Erietta