how I made a wordpress Child theme with thematic (1)

Under: Wordpress 12 comments

Development • featured • Thematic • Wordpress
Follow responses leave a responseTrackback

Thematic is a WordPress Theme Framework that makes theme developing much easier. As WordPress gets more features, the theme release check list is getting longer too. Its getting harder to rewrite 13 php files (sometimes even more) for every theme. This post shows how I made a child theme based on thematic. If you have developed your own theme before you will find this is easy to understand, if you haven’t I suggest you read a few wordpress theme development tutorials before reading this one. For those who still don’t know Thematic I suggest you go to their web site to have a brief look first.

Lately I got a free theme “audry” from PSDthemes. They let me develop it first before it is available for downloading to the public. They are so awesome! As I starting to develop the theme, I found myself coping and pasting from my old theme all the time which is tedious so I decided to give Thematic a try. At the beginning it did not give me a very good impression. When I started reading previous theme’s code, I see ‘thematic’ everywhere. Do I really have to type ‘thematic ‘ a million times to get a theme done? the answer is NO. This is how a million thematic appeared

<?php previous_posts_link(__('Newer posts <span class="meta-nav">&raquo;</span>', 'thematic')) ?>

__('string') is used to prepare code for translation. So the normal code we learned from wordpress.org will work just fine.

Now I am going to show you how thematic simplified my job.

You can have a look at the finished theme on the Demo Site

Things to ignore

As I did this theme under thematic, there are some files I do not need to do at all.

header.php
sidebar.php

The normal ‘While’ loop

I read a couple of posts on Themeshaper website and found out that when doing a child theme in Wordpress, there is not much difference in php coding. What we used and learned from developing a normal theme works the same way as I did the child theme. It only made my code shorter.

Here is a comparison.

a full loop

 <?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
  <div class="post">
    <div class="post-title">
      <div class="post-cat">
        <?php the_category('') ?>
      </div>
      <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
        <?php the_title(); ?>
        </a></h1>
      <span class="post-author"> written by
      <?php the_author(); ?>
      </span> <span class="post-time">
      <?php the_time('F jS, Y') ?>
      </span> <span class="post-comments">
      <?php comments_number('no comment','1 comment','% comments'); ?>
      </span> <span class="post-edit">
        <?php edit_post_link('edit','',''); ?>
        </span></div>
    <div class="entry">
     <?php the_content()?>
      <p class="postmeta  metadata"> <span class="post-tag">
        <?php the_tags('Tagged with: ',' &bull; ','<br />'); ?>
        </span> <span class="post-twitter"> <a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></span> <span class="post-followresponses"> <a href="<?php comments_rss_link('RSS 2.0'); ?>" title="Comment RSS" target="_blank"> Follow responses</a></span>
        <?php
if (('open' == $post->comment_status) && ('open' == $post->ping_status)) {
// Both Comments and Pings are open
?>
        <span class="post-leaverespond"> <a href="#respond" title="To comment form" target="_blank">leave a response</a></span><span class="post-trackback"><a href="<?php trackback_url(display); ?>" title="Trackback" target="_blank">Trackback</a> </span>
        <?php 
} elseif (!('open' == $post->comment_status) && ('open' == $post->ping_status)) {
// Only Pings are Open 
?>
        Responses are currently closed, but you can <a href="<?php trackback_url(display); ?> ">Trackback</a> from your own site.
        <?php
} elseif (('open' == $post->comment_status) && !('open' == $post->ping_status)) { 
// Comments are open, Pings are not 
?>
        You can skip to the end and leave a response. Pinging is currently not allowed.
        <?php
} elseif (!('open' == $post->comment_status) && !('open' == $post->ping_status)) { 
// Neither Comments, nor Pings are open 
?>
        Both comments and pings are currently closed.
        <?php 
} 
edit_post_link('Edit','',''); ?>
      </p>
    </div>
  </div>
  <?php endwhile; ?>
  <div class="navigation"> <span class="previous-entries">
    <?php next_posts_link('Older Entries') ?>
    </span> <span class="next-entries">
    <?php previous_posts_link('Newer Entries') ?>
    </span> </div>
  <?php else : ?>
  <h2>Not Found</h2>
  <p>Sorry, but you are looking for something that isn't here.</p>
  <?php endif; ?>

Thematic Child theme loop

 <?php while (have_posts()) : the_post(); ?>
      <?php thematic_postheader(); ?>
      <?php the_content(); ?>
    <?php endwhile; ?>
 <div class="navigation clear"> <span class="nav-next">
      <?php next_posts_link('older posts') ?>
      </span> <span class="nav-previous">
      <?php previous_posts_link('newer posts') ?>
      </span>  </div>

As you can see, it is significantly shorter. This is why:

thematic_postheader=title+author+time+…
thematic_postfooter=tag+comments+…

Also, I can choose what is in the post footer and post header. By default, time and author are in post header while comments number, categories and tags are in the post footer.

thematic

The secret is in the functions.php

To have customized look,I have to apply a few filters. You can go to WordPress filter reference and thematic filter hooks page for references. Of course, if your desired theme look is very close to the default thematic look, you don’t have to change anything apart from CSS,but my theme is graphically a lot richer than default thematic theme, so I had to make a few changes.

Anyway, what is a filter.? Let’s forget about thematic for now. Filter is widely used in Wordpress theming.

Here is an example:

function my_excerpt($text)
{
   return str_replace('[...]', '<a class="readmore" href="'. get_permalink($post->ID) . '">' . 'Read More' . '</a>', $text);
}
add_filter('the_excerpt', 'my_excerpt');

WordPress passes required content to filter before echoing it out. I just passed all exerpt to this filter and filtered out the stupid[...] with ‘Read More’.

Now back to thematic, here are some examples for changing the post footer:
This will give you an empty post footer.

function my_postfooter() {
}
add_filter('thematic_postfooter','my_postfooter');

This will display all the tags of the post.

function my_postfooter() {
	echo the_tags('');
}
add_filter('thematic_postfooter','my_postfooter');

Then I tried to stylize it:

function my_postfooter() {
 
	echo '<big class="tags">'.'Tagged with: ';
	$posttag.= the_tags('');
	echo '</big>';
 
}
add_filter('thematic_postfooter','my_postfooter');

Now I can make the desired loop by filtering unwanted content. When this is done, 80% of my work is finished

Add the head foot and sidebar

Before get_header, I copied and pasted this piece of code to my theme. It is associated with thematic theme option and controls the number of widgets and footer notes. No point to change it.

Then I simply put get_header, get_sidebar, the skinny loop, get_footer, and this piece of navigation code in the index.php file

 <div class="navigation clear"> <span class="nav-next">
      <?php next_posts_link('older posts') ?>
      </span> <span class="nav-previous">
      <?php previous_posts_link('newer posts') ?>
      </span>  </div>

Then I put a few more wigetized area as they are features in Thematic.
This sits before the first post on a page:

<?php get_sidebar('index-top') ?>

how I made a wordpress Child theme with thematic
This sits before endwhile:

    <?php if ($count==$thm_insert_position) { ?><?php get_sidebar('index-insert') ?><?php } ?>
<?php $count = $count + 1; ?>

how I made a wordpress Child theme with thematic
This is after endwhile:

    <?php get_sidebar('index-bottom') ?>

picture-62

CSS

For CSS, the only different thing I did was add ‘Template: thematic’. The post on themeshaper.com also suggests to import other thematic reset css files, but I m happy with the reset file I m using.

/*
Theme Name: audry
Author: Alexandra tong and PSDthemes.com
Template: thematic
Version: 0.1
*/

Reset default files

After getting index.php done I duplicated them and rename it as category.php,tag.php,author.php,date.php otherwise the default file in the parent theme will be used. The Child theme like commune used default parent files, but my theme structure is very different from the default.

Final note

In the next post I will show you how I changed page.php and single.php. If you think php filter is not very easy to understand I suggest you go to w3c’s online tutorial. The Audry theme will be available for downloading soon.

ADD TO

If this helps, why not tell your friends?

Kawsar Ali says:

May 17, 2009 at 3:16 pm

Wow, I love the layout! It so refreshing. The bottom coffee cup is so cool. Keep up the good work

Kawsar Ali’s last blog post..Yet Another 55 High Res Textures to Satisfy Your Design Need

[Reply]

Donna says:

May 23, 2009 at 11:10 pm

Great explanation of the Wordpress filters! The way you’ve explained it here, it’s so easy to ‘get it’. Other explanations make it too complicated. Well done, and thanks!

Donna’s last blog post..How to See What Your Site Looks Like In Different Versions of Internet Explorer

Raymond Selda says:

May 25, 2009 at 2:12 am

Thank you for sharing your thoughts. I’m also creating my own base theme and your article gave me some ideas on how someone would approach a theme framework such as Thematic. You really did a nice job explaining filters. Thanks and keep it up.

Raymond Selda’s last blog post..Importance of HTML Headings for Accessibility