ThemeShaper Forums » Thematic

[closed]

Using Thematic with 960.gs Grid System

(9 posts)
  • Started 7 years ago by proto
  • Latest reply from proto
  • This topic is not resolved
  1. proto
    Member

    Hello All,

    I wondered if any of you kind folks could help me. I think I'm nearly there. After looking at the 960.gs grid system I thought this could be a great way to build a well structured magazine style homepage with my Thematic Child Theme.

    I'm having a little problem with getting it to appear correctly.

    1: Within my loop I've added what I thought were the correct DIV classes to call on the 960.gs system, my loop is a custom function along the lines of :

    function unique_indexloop() {
    
        query_posts('category_name=featured&posts_per_page=5'); ?>
    
    <?php if (have_posts()) : ?>
    
     <div class="grid_8">
    <div id="slider">
    
        <div id="sliderContent">
    
            <?php while (have_posts()) : the_post(); ?>
    
                <div class="sliderImage">
                    <a href="<?php the_permalink(); ?>" class="sliderLink"><?php the_post_thumbnail(('slider_image'), array('title' => '')); ?></a>
                    <span class="cap-right">
                        <span class="slideshowtitle"><?php the_title(); ?></span>
                        <span class="slideshowblurb"><?php the_excerpt(); ?></span>
                    </span><!-- cap-right -->
             </div><!-- sliderImage -->    
    
            <?php endwhile; ?>
            </div><!-- sliderContent -->
     </div><!-- slider -->
     </div><!-- end of grid 8 -->
            <div class="clear sliderImage"></div>
    
    <?php endif; wp_reset_query(); ?>
    
    <?php query_posts("category_name=latestnews&posts_per_page=1");
    $counter = 5;
      if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="grid_4">
        <div id="post-<?php the_ID() ?>">
          <?php thematic_postheader();
          if ($counter == 5 && has_post_thumbnail()) {
            the_post_thumbnail('homepage-thumbnail');
          } ?>
          <div class="entry-content">
    
    		<?php the_excerpt(); ?>
    
            <a href="<?php the_permalink(); ?>" class="more"><?php echo more_text() ?></a>
            <?php $counter++; ?>
    
        </div><!-- entry-content -->
        </div><!-- grid_4 -->
    
      <?php endwhile; else: ?>
        <h2>Eek</h2>
        <p>There are no posts to show!</p>
        </div><!-- end of grid 4 -->
      <?php endif;
      wp_reset_query();}

    In my home.php (I only want to style the homepage in this way) I've put the content in a master "container_12" div class, life follows:

    <?php
    
        // calling the header.php
        get_header();
    
        // action hook for placing content above #container
        thematic_abovecontainer();
    
    ?>
    
    		<div class="container_12">
    
    			<?php thematic_abovecontent(); ?>
    
    				<?php 
    
                	// create the navigation above the content
                	thematic_navigation_above();
    
                	// calling the widget area 'index-top'
                	get_sidebar('index-top');
    
                	// action hook for placing content above the index loop
                	thematic_above_indexloop();
    
                	/*/ action hook creating the index loop
                	thematic_indexloop();*/
    
    				// custom homepge loop here
    				pixelwoo_indexloop();
    
    				 //Removing the Sidebar from the Homepage
        			thematic_sidebar();
    
                	// action hook for placing content below the index loop
                	thematic_below_indexloop();
    
                	// calling the widget area 'index-bottom'
                	get_sidebar('index-bottom');
    
                	/*// create the navigation below the content
                	thematic_navigation_below();*/
    
                	?>
    
    			<?php thematic_belowcontent(); ?> 
    
    		</div><!-- #container -->
    
    <?php 
    
        // action hook for placing content below #container
        thematic_belowcontainer();
    
        // calling footer.php
        get_footer();
    
    ?>

    When you view my website you can see that the div's are the right size (I think) but they are not floating next to each other but displaying block like:

    http://www.universalonewebdesign.com/bespoke-design-four/

    Is this a CSS conflict, I think I'm calling the correct X3 css files in header to get the 960.gs files? I then checked the source code for any div's that might be causing mischief (I could be wrong but couldn't see anything!)

    Any help would be greatly appreciated and hopefully help future people who are wanting to use thematic with 960.gs!

    :)

    Posted 7 years ago #
  2. thematic is technically already on a 960 grid, though the container, grid_6, etc classes aren't used. try investigating w/ http://getfirebug.com or chrome's built-in dev tools to see what the CSS issue might be.

    Posted 7 years ago #
  3. You are missing a closing div. <div id="post-<?php the_ID() ?>"> is not closed. So every one of those grids is being put inside the other, hence the reason it isn't sitting right.

    Posted 7 years ago #
  4. proto
    Member

    ScottNix & Helgatheviking!

    You are both so very kind, thank you for contributing, it truly is appreciated and hopefully will help those who come after me thinking of using the amazing power of Thematic and 960.gs, thanks again for taking the time to help me! :)

    I wondered if you kind folks could help me with one other problem I'm having, I want to use multiple loops to display a magazine style homepage (pulling various categories into display) but I want to also include the thematic_sidebar on this homepage.

    I have been trying all day (and running out of theories as to what it is I need to do, I've been swimming around the Codex on the loop and get_sidebar as well as using google, I'm reluctantly but hopefully back here)!

    The two problems I have are:

    1: I want to do multiple loops (I've read Middlemeister's posts on the loop, but still couldn't quite get there, probably brain fry!! So after my second loop (latestnews_category loop) I want to display more loops with more categories. If you could show me the code I need for this that will work with the code below (or indeed if my code is just taking the long/wrong route) happy for direction!

    2: I am currently calling the Sidebar to display in my home.php file where thematic_sidebar() is called after my unique_indexloop, I think this means that I'll always have the sidebar pushed below my loops until I can display the thematic_sidebar as part of my loops. Could you let me know how I might do this, please!? I tried get_sidebar but it broke my code!

    The updated loop I have is:

    function unique_indexloop() {
    
        $featured_query = new WP_Query ('category_name=featured&posts_per_page=5'); ?>
    
    <?php if (have_posts()) : ?>
    
     <div class="grid_8">
    <div id="slider">
    
        <div id="sliderContent">
    
            <?php while (have_posts()) : the_post(); ?>
    
                <div class="sliderImage">
                    <a href="<?php the_permalink(); ?>" class="sliderLink"><?php the_post_thumbnail(('slider_image'), array('title' => '')); ?></a>
                    <span class="cap-right">
                        <span class="slideshowtitle"><?php the_title(); ?></span>
                        <span class="slideshowblurb"><?php the_excerpt(); ?></span>
                    </span><!-- cap-right -->
             </div><!-- sliderImage -->    
    
            <?php endwhile; ?>
            </div><!-- sliderContent -->
     </div><!-- slider -->
     </div><!-- end of grid 8 -->
    
    <?php endif; wp_reset_query(); ?>
    
    <?php query_posts("category_name=latestnews&posts_per_page=5");
    $counter = 5;
      if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="grid_4">
        <div id="post-<?php the_ID() ?>">
          <?php thematic_postheader();
          if ($counter == 5 && has_post_thumbnail()) {
            the_post_thumbnail('homepage-thumbnail');
          } ?>
          <div class="entry-content">
    
    		<?php the_excerpt(); ?>
    
            <a href="<?php the_permalink(); ?>" class="more"><?php echo more_text() ?></a>
            <?php $counter++; ?>
    	</div><!-- post ID -->
        </div><!-- entry-content -->
         </div><!-- grid_4 -->
    
      <?php endwhile; else: ?>
        <h2>Eek</h2>
        <p>There are no posts to show!</p>
    
      <?php endif;
      wp_reset_query();}

    Here's where I call the sidebar after my loop

    // custom homepge loop here
    				pixelwoo_indexloop();
    
    				 //Removing the Sidebar from the Homepage
    				thematic_sidebar();

    So if you can show me how to add more loops and have my sidebar sit and stay on the right hand-side I would be most grateful, you can see it's currently pushed down by my loops: http://www.universalonewebdesign.com/bespoke-design-four/

    What I want to display is something akin to this:

    http://www.universalonewebdesign.com/bespoke-design-four/wp-content/themes/Bespoke%20Drinks%20Media/images/finaldesiredlayout.jpg

    Your help is really greatly appreciated, thank you!

    Posted 7 years ago #
  5. Kathy would probably be much better at helping in this area than I would be.

    Currently you are pulling 5 posts, shouldn't you just be doing 3? If you did 3 the sidebar will sit correctly in the desired spot.

    As far as adding more loops, literally copy and paste what you used for the first query below and modify the html a bit (since it will have a different style) and change the WP_query to the appropriate category, http://codex.wordpress.org/Class_Reference/WP_Query#Category_Parameters

    You are super close, it is all really easy. I "think" you are trying to make one giant loop, when you can just have 3 separate ones. I don't know if any of this violates best practice, but that is what I do. ;P

    Posted 7 years ago #
  6. i'd probably put the slider and the Post 9 in a full width div and add it to thematic_abovecontainer() then the default layout will have #container and the sidebar floated next to on another.

    unless the Post #9 is part of the same loop? i can't tell just from the markup, but from your above code it seems that way. in that case, you'll need to wrap all the remaining posts (so the remaining 4) in a wrapper div and giv it CSS that will imitate the default #container. or i guess in your case a class of "grid_8"

    Posted 7 years ago #
  7. proto
    Member

    Thanks so much ScottNix & Helgatheviking,

    Your help is much appreciated!

    ScottNix - I've gone with your kind suggestion and done a few loops. I'm still not quite there but working on it!

    Helga - How would I add them the thematic_abovecontainer, is it as simple as changing the order in which things are called in my home.php? Any chance you could share what the PHP might look like or a friendly steer on it! :)

    Out of pure curiosity is it possible to call the sidebar in a loop? (Just thinking in case I create a custom homepage sidebar that's different to the thematic_sidebar? If it is could you let me know how, I've tried get_sidebar in the loop but it didn't like that so much! As ScottNix mentioned you were well versed in loop matters did you think my many loops are ok (will this impact performance?

    Thanks again guys, hopefully this is helping others who come after me down this same path too thanks to you both!

    Posted 7 years ago #
  8. proto
    Member

    It's outputting more posts than I'm requesting (I've asked it to output two in my last loop and it outputs nearly 7 upwards, I'm not sure why!?

    http://www.universalonewebdesign.com/bespoke-design-four/

    Here's my code:

    function pixelwoo_indexloop() {
    
        $featured_query = new WP_Query ('category_name=featured&posts_per_page=3'); ?>
    
    <?php if (have_posts()) : ?>
    
     <div class="grid_8">
    <div id="slider">
    
        <div id="sliderContent">
    
            <?php while (have_posts()) : the_post(); ?>
    
                <div class="sliderImage">
                    <a href="<?php the_permalink(); ?>" class="sliderLink"><?php the_post_thumbnail(('slider_image'), array('title' => '')); ?></a>
                    <span class="cap-right">
                        <span class="slideshowtitle"><?php the_title(); ?></span>
                        <span class="slideshowblurb"><?php the_excerpt(); ?></span>
                    </span><!-- cap-right -->
             </div><!-- sliderImage -->    
    
            <?php endwhile; ?>
            </div><!-- sliderContent -->
     </div><!-- slider -->
     </div><!-- end of grid 8 -->
    
    <?php endif; wp_reset_query(); ?>
    
    <?php query_posts("category_name=latestnews&posts_per_page=3");
    $counter = 3;
      if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="grid_4">
        <div id="post-<?php the_ID() ?>">
          <?php thematic_postheader();
          if ($counter == 5 && has_post_thumbnail()) {
            the_post_thumbnail('homepage-thumbnail');
          } ?>
          <div class="entry-content">
    
    		<?php the_excerpt(); ?>
    
            <a href="<?php the_permalink(); ?>" class="more"><?php echo more_text() ?></a>
            <?php $counter++; ?>
    	</div><!-- post ID -->
        </div><!-- entry-content -->
         </div><!-- grid_4 -->
    
       <?php endwhile; else: ?>
        <h2>Eek</h2>
        There are no posts to show!
    
      <?php endif;
      wp_reset_query();}
    
    function pixelwoo_contentloop_one() {
    	 $featured_query = new WP_Query ('category_name=featured&posts_per_page=2');
    $counter = 2;
      if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="grid_4">
        <div id="post-<?php the_ID() ?>">
          <?php thematic_postheader();
          if ($counter == 5 && has_post_thumbnail()) {
            the_post_thumbnail('homepage-thumbnail');
          } ?>
          <div class="entry-content">
    
    		<?php the_excerpt(); ?>
    
            <a href="<?php the_permalink(); ?>" class="more"><?php echo more_text() ?></a>
            <?php $counter++; ?>
    	</div><!-- post ID -->
        </div><!-- entry-content -->
         </div><!-- grid_4 -->

    Any ideas why!? Also if you could kindly help with the questions from the above post, reposted her for convenience:

    1: Helga - How would I add them the thematic_abovecontainer, is it as simple as changing the order in which things are called in my home.php? Any chance you could share what the PHP might look like or a friendly steer on it! :)

    2: Out of pure curiosity is it possible to call the sidebar in a loop? (Just thinking in case I create a custom homepage sidebar that's different to the thematic_sidebar? If it is could you let me know how, I've tried get_sidebar in the loop but it didn't like that so much! As ScottNix mentioned you were well versed in loop matters did you think my many loops are ok (will this impact performance?

    Posted 7 years ago #
  9. proto
    Member


    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.