Create Custom Posts Layout in Home Page (Thematic Child Theme)

As I said before in the last post, there two ways to do this, First is using page template, the other one is using Thematic hooks & filter.


pic by Everything and the rest

What I want to describe here is using the theme filter & actions. if you’re lazy like me to read articles, download a couple of thematic child themes, see examples of filters and see the core of thematic and learning by doing.

After viewing the core, I notice that there are two or three files that I needed to see in adding filter for post layout. First, because I want to change the post layout in the home page so I checked function.php and search for the post or content filters. In there I was leaded to content-extensions.php (see the comment “Load custom content filters”). then I looked for thematic index loop (line 22 comment).

For this example i want to try to create two column of posts that will appear like this in home page, note that i’ll be using thematicsamplechildtheme (inside thematic folder) from Ian Stewart

screenshot

here are the code for basic index posts lay-out, if you want to copy paste it, put it in your child theme function.php, I will explain more after the code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
function snippet_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
            <?php $counter++; ?>    
            <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
                <div class="clear-fix">
                    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                        <?php thematic_postheader(); ?>
                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                            <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                        </div>
                            <?php thematic_postfooter(); ?>
                    </div><!-- .post -->
                </div><!-- .clear-fix -->
            </div><!-- .column -->
 
                    <?php comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
 
 
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'snippet_index_loop');
 
?>

And for the styling, you could use this

1
2
3
4
5
.column{width:250px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}
.one{margin-right:40px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

Lets elaborate the code first

1
2
3
4
5
6
<?php
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
?>

The first thing that we need to create is adding the remove function for the default thematic index loop. The default (as seen in the content-extensions.php) is thematic_index_loop.

then we add an action to replace the loop that we move, lets called it custom_index_loop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
function custom_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
            <?php $counter++; ?>    
            <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
                <div class="clear-fix">
                    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                        <?php thematic_postheader(); ?>
                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                            <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                        </div>
                            <?php thematic_postfooter(); ?>
                    </div><!-- .post -->
                </div><!-- .clear-fix -->
            </div><!-- .column -->
 
                    <?php comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
 
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'custom_index_loop');
?>

the code

1
2
<?php $counter++; ?>    
    <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">

add the two column, if you want three column, just add another elseif and change the $counter then adjust the styling, but for now i will only give the styling for two column.

also i use the excerpt for the content

1
2
3
4
5
6
<?php
<div class="entry-content">
   <?php the_excerpt(); ?>
   <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
</div>
?>

i’m not using the default loop for thematic index (thematic_content), because it will be strange to see full content in small width column.

and the last one is

1
2
3
<?php
add_action('thematic_indexloop', 'custom_index_loop');
?>

to insert the action.

for the styling of the column

1
2
.column{width:250px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}

overflow hidden makes every one happy :)

1
2
3
.one{margin-right:40px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

this styling is for more whitespace in the column.

by all means I’m still a noob, any and all feedback you can give would be helpful to me. please do leave a comments below.

Update:
This is an old article :) i may forgot a couple of things, but if you want to make three column using the function above, you add an else if in the code, the final code will look like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
function snippet_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
            <?php $counter++; $clear=''; ?>    
			<div class="column <?php if ($counter == 1) { echo 'one'; } elseif ($counter == 2) { echo 'two'; }  else { echo 'three'; $counter = 0; $clear='<div style="clear:both;height:0px;"></div>';} ?>">
			    <div class="clear-fix">
                    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                        <?php thematic_postheader(); ?>
                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                            <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                        </div>
                            <?php thematic_postfooter(); ?>
                    </div><!-- .post -->
                </div><!-- .clear-fix -->
            </div><!-- .column -->
 
                    <?php comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
 
		echo $clear;
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'snippet_index_loop');

and the styling will be like this in the style.css

1
2
3
4
5
.column{width:160px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}
.two{margin:0 20px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

u may also like this :

17 thoughts on “Create Custom Posts Layout in Home Page (Thematic Child Theme)”

  1. The amount of code make it look really complex but it’s actually simple, i just re-use(copy paste) the index loop from the thematic lib and add a counter to echo column one and two, and adjust the css with two lines of code… and add 3 line more for aesthetics :)

  2. Hi,
    Im trying to convert my current wordpress theme to thematic child theme the problem is how do i get two sidebars in index.php and one in single.php

    can u please help?

  3. i think there are two easy ways to do it, i haven’t test it yet.

    first you could use conditional if in the header to load layout library is_home or is_front_page with two sidebar and is_single with 1 sidebar.
    so u dont use @import rule in your style.css but use link stylesheet in the header for the layout (use add filter in function php).

    another easy way to do it, is by css, you could use two conditional css for the layout, like,
    .home .primary and .single .primary

    check for the the body class to view the different with home & single

  4. Hi I wanted to use more than 2 columns and tried adding an elseif, but it broke my theme giving this message:

    Parse error: syntax error, unexpected T_ELSEIF in /home/content/r/o/b/roburdick/html/mysite/wp-content/themes/robertburdick.com/functions.php on line 76

    I will probably just use css to change the layout on my hompegae but if you know why it’s not working for me, I wuld love to know how to do what I want with columns. Here is my modified line of code for columns:

    <div class="column “>

  5. I tweaked your css as i was finding longer/shorter excerpts were messing up where the divs were… and (maybe it was b/c I was using the thematic 2col left template, but titles and such were getting lost since the columns are 250px with hidden overflow, but the .hentry class was 600 something pixels.


    .column{width:250px; display:inline;float:left; overflow:hidden;}
    .clear-fix{display:box;}
    .one{margin-right:40px; clear: left;}
    .two{clear: right;}
    .hentry{padding:0;}
    .column .entry-content{width:245px;}
    .column .hentry { width: 100%;}

    i think i am going to try to tweak it further so that the first post is above all the others and spans both columns.

    thanks for the snippet!!

  6. This is working beautifully! Is it possible to apply this to a second loop?
    On my front page (where this tutorial is aimed at) i want the loop to act as default, but at my second loop i want it to be in columns.

    Any ideas?

  7. How can i do exactly this but only for specified category page? i dont know where to insert the conditional tag

Leave a Reply

Your email address will not be published. Required fields are marked *