Grid Focus Demo


Demo site for WordPress themes developed and released by Derek Punsalan – 5ThirtyOne

Add support for 2.7 "sticky" posts

In order to make use of the new sticky post feature found in WordPress 2.7, you’ll need to modify your index.php, page.php, and single.php to make use of the new post_class() function.

Previous themes would use the following within the loop to identify posts:

<div id="post-<?php the_ID(); ?>" class="post">

Adding support for sticky posts requires dynamic classes using this function:

<?php post_class(); ?>

If there is a specific class that you would like the function to include, you can add it as a parameter: post_class(‘customClass’).

Sorry for not including this feature out of the box by default. These releases are meant to be backwards compatible for WP 2.6 users as well.

Category: Tutorial, WordPress

Tagged: , , ,

24 Responses

  1. jack says:

    Awesome theme..

    but i have a problem with my ie7, categories text not show when click BROWSE

    FF and ie6 work fine.

    • Derek says:

      Thanks for the heads up. Apparently IE7 has an issue with jQuery’s slideToggle (pushes content to the far left. I’ve updated function.js for hte download with the fix:

      $(‘.toggleCategories’).animate({ height: ‘toggle’, opacity: ’100′}, 100);

  2. Daus says:

    I’m using Firefox and the sidebar looks misaligned. The third column is missing.

  3. Derek,

    Thanks for the update. The new look is interesting. I’m going to be updating my blog with the new WP 2.7 compatible theme.

    Cheers mate!

  4. ikoko says:

    what is the plugin you use for “reply” by author at the comment section ?

    • Derek says:

      The reply button is part of the new WordPress 2.7 features – threaded comments. You’ll need to enable the feature in your Discussion settings to see the functionality on your site.

  5. Vinjo says:

    Hi Derek

    I am working on your theme right now to adapt it for my personal needs and I am struggling to align an image and a text like I can do it here for instance:
    If I use the css class “alignleft” I would be able to write only a single line next to the image.
    If you have any idea to fix this problem it would be really kind of you to share it with me.
    Thx very much in advance.

    • Derek says:

      Open style.css and look near line 520. You’ll see two selectors – floatleft & floatright. That is essentially the same as the alignleft class that you are using. Add your existing class to the stylesheet like so:

      .floatleft, .alignleft {
      float: left;
      margin: 3px 7px 0 0;
      .floatright, .alignright {
      float: right;
      margin: 3px 0 0 7px;

  6. Dan says:

    Derek, great theme and I am currently working on customizing it to my liking. I am using the Theme Test Plugin so I can work on it live and not have it affect what my readers see.

    I have a question:

    How do you increase the size of the avatars on the comments without them being blurry? I increased the size to 60 x 60 in the CSS but they were all blurry. Thanks for any help you could offer.

    • Derek says:

      You can increase the size of the gravatar by removing the CSS rule which makes it 16px, then opening comments.php and adding a new parameter to wp_list_comments():

      <?php wp_list_comments(array('avatar_size'=>60, )); ?>

  7. Dan says:

    Alright, well I got the avatar to be at least 32 x 32 since I got rid of the CSS rule, the added php didn’t change anything, but now the comment-meta has moved down and is not directly under the commenter’s name and “says:”

    How can I fix that? I’ve increased the padding to 35px so it’s left-aligned with the commenter’s name, but it won’t snug up right under it.

  8. Dan says:

    Derek, here is a screenshot of how it looks, and I have played with float: left but can’t get it to move.

  9. chad says:

    Hi Derek,

    When a user clicks on a post’s permalink URL, Firefox shows two headers and dead gray space. IE shows the post, but also two headers. I’ve tried disabling all plugins and widgets, deleted and re-uploaded the theme, to no avail. What’s odd is that if I’m logged in to WordPress, it displays just fine.

    Here’s a link:

    Firefox screenshot:

    IE screenshot:

    Thanks in advance!

  10. Patrick Burnett says:

    Fantastic theme! Just one question – how do you remove the blackbox with 5 in it in the header?

    I’m happy with the Grid Focus by Derek Punsalan credit on the website, but the black box logo looks really out of place in the header. Help?

  11. Patrick Burnett says:

    Thanks a million Derek, for the help and a very cool theme.

  12. Robin says:

    Hey Derek,

    Instead of ‘Browse by category’(for top navigation strip), I would like it to browse my pages. I have only 5 pages on site. How would I do this?

    • Derek says:

      You can edit the navigation links to change the wordage on the tab. Then, replace the function which lists categories with wp_list_pages();. More on the function here:

      The function will generate a list of all your pages unless you pass some parameters through it. Make sure that you place the code between the existing unordered list tags.

      • Pete says:

        Hi Derek.

        As everyone else has said already, thanks loads for the great template!

        I’m completely new to wordpress, css etc… However I have managed to set up and modify a Grid Focus WordPress site on locally on my Mac. I’m now trying to change the headings in the navigation strip (in the same way as this site has done). I can get as far as changing the name, but cannot do the following two things –

        1. Drop down menu to automatically close and re-open when another heading is clicked.

        2. Add sub-headings/ categories within the drop down menu

        Also, I have managed to remove the very top margin of the page, but cannot see where to remove the bottom margin in the CSS style sheet.

        Any help would be hugely appreciated!

        thanks again.

  13. moritz says:

    hi derek.
    thank you for the great grid focus theme.
    i have one question about the customization which i can’t figure out.
    the “browse categories” function in the nav bar works well, except that the content (the categories) are completly misaligned. there seems to be random spacing in between.

    i am using wordpress 2.9.2 and grid focus 1.1. with firefox 3.5.9.
    do you have any idea how to fix this problem?

    thank you for you help !!

Leave a Reply to Derek × Cancel reply


This is the demo site for As existing themes are re-released, updated versions of code will be made available for demo.