Issues with Wordpress Loop from sitepoint book 'build your own wicked wordpress theme

[NickAdie]

Hello, I am very much a newbie to Wordpress and am trying to learn more. At the moment trying to build a child theme for Thematic.

I am working out of Sitepoint book 'build your own wicked wordpress themes' and am having an issue with the setting up a styled index loop for the home page.
In chapter 5.6 the Query_post pulls through 4 posts, one is meant to be styled as a full width feature with thumbnail, the other three styled underneath in box format.

The function pulls through 4 posts fine. But it does not style the image as it should (not floating left), it also creates 2 featured posts, rather than one and it does not pull through the 'read more' function from the parent theme (built on thematic).

If I increase the number of posts being pulled through to 5 then the layout seems OK apart from the extra feature and the thumbnail styling. So I don't think it is simple the CSS that is wrong.

This is the code directly from the support files that come with the book, so you may see why it is particularly frustrating for me as someone trying to learn. I am wondering if the thematic parent theme has been updated since the code was originally written?

The code is:

Function:

// Add support for thumbnails
add_theme_support('post-thumbnails');
set_post_thumbnail_size(540, 300, true);
add_image_size('homepage-thumbnail', 300, 200, true);

// custom homepage loop
function wicked_indexloop() {
query_posts("posts_per_page=4");
$counter = 1;
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
<?php thematic_postheader();
if ($counter == 1 && has_post_thumbnail() && !is_paged()) {
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>
</div><!-- .post -->
<?php endwhile; else: ?>
<h2>Eek</h2>
<p>There are no posts to show!</p>
<?php endif;
wp_reset_query();
}

Home page:

<?php

// calling the header.php
get_header();

// action hook for placing content above #container
thematic_abovecontainer();

?>

<div id="container">

<?php thematic_abovecontent(); ?>

<div id="content">

<?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();

// a custom homepage loop
wicked_indexloop();

// 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();

?>

</div><!-- #content -->

<?php thematic_belowcontent(); ?>

</div><!-- #container -->

<?php

// action hook for placing content below #container
thematic_belowcontainer();

// calling the standard sidebar
// thematic_sidebar();

// calling footer.php
get_footer('homepage');

?>

CSS:

body.home div.p1 {
font-size: 120%;
}

body.home div.p1 img {
float: left;
margin-right: 30px;
}

body.home div.p2 {
clear: left;
}

body.home div.p2,
body.home div.p3,
body.home div.p4 {
width: 270px;
float: left;
margin-top: 22px;
}

body.home div.p3 {
margin-left: 30px;
margin-right: 30px;
}


I can't seem to find any support forum for the book or anyone else who has had this issue???

Please help, thanks

[Parmenion]

I ran into the same problem today and found your post on Google whilst trying to find a solution.

I've found adjusting the CSS styling fixes the layout problem. The posts start from 0, not 1, so you need to change the body.home div.p1 to body.home div.p and decrease the other values by 1, too.

So, it should read like this:

body.home div.p {
font-size: 120%;
}

body.home div.p img {
float: left;
margin-right: 30px;
}

body.home div.p1 {
clear: left;
}

body.home div.p1,
body.home div.p2,
body.home div.p3 {
width: 270px;
float: left;
margin-top: 22px;
}

body.home div.p3 {
margin-left: 30px;
margin-right: 30px;
}

You may have fixed it now but perhaps others might find that information useful.

I'm trying to figure out how to get the 'Read More' text showing now.

[NickAdie]

Fantastic, I will give that a go. thank you for taking the time to answer as I had not found the answer!

[Parmenion]

more_text is a deprecated function by the looks of it (thematic/library/legacy/deprecated.php).

I'm using the following for now:

function new_excerpt_more($more) {
global $post;
return ' <a href="'. get_permalink($post->ID) . '">Read More...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

I've removed the line <a href="<?php the_permalink(); ?>" class="more"><?php echo more_text() ?></a> as it's not needed now.

An alternative could be to keep the line but change it to <a href="<?php the_permalink(); ?>" class="more">Read More...</a> and add the following function:

function new_excerpt_more( $more ) {
return '';
}
add_filter('excerpt_more', 'new_excerpt_more');

That way it puts 'Read More...' on a new line but removes the [...].

I found out about the functions here: http://codex.wordpress.org/Template_Tags/the_excerpt.

I'm new to wordpress so just experimenting myself.