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
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.
u may also like this :
- – Be Water My Friend… With Thematic
- – Using Thematic Child Themes
- – Learning Thematic
- – Create Thumbnail From Offsite Image Using Timthumb Beta
- – Puspaningrum Theme
6 Comments
Very helpful. I thought it would have involved less code to do something so common. You handled it nicely though. Nice work!
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 :)
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?
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
Could you explain where exactly to add the
else ifand change the counter for a 3 column post layout?I would like to know how to do this.
you put the functions into functions.php and the styling into style.css