Learning Thematic

At the moment i was designing a new themes for my wife, but it is still not finished yet because i’m not click with the final result, i want to change it again if i still felt awry with the design. So i wont give screen shot of the site in this post.

Pic by papadont

What i want to tell u in the process is, i was amaze this couple of week, i learn a lot. In the process of re-designing the site I use Thematic Theme Framework from Ian Stewart for the based framework, using child themes to create new themes, same as i did with my site. I was amaze how easy it is to create child themes with thematic, i use Thematic before on this site a couple of month a go but didn’t quite grasp yet the full feature of Thematic, i was really lazy back then :) boy do i miss a lot of things because of this laziness.

The first thing that help me the most in the process is Thematic provide me with 960 grid system background template (12 column 18px height) to help me change layout, using it as the background on the body (just un-comment it) i could easily move within the grid system. But the template that was provided is the 12 column, i prefer the 16 columns, so i create a new background template with 16 column with 18 pixel high based on the 960 Grid System, here’s the template if u want to use it.

Other things that help me also are guide on adding and customizing page template on child themes in Ian’s blog. The forum also filled with helpful people, just be sure to post there politely :)

Oh yeah in case u want to add Home link to the navigation bar, just add this code to your functions.php in your child themes folder, this is the first thing i look in the forum, the newbie code to add home in your nav bar :P

function nav_menu() {
	$menu = '<div id="menu"><ul>';
	$menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('include=24,27,28&title_li=&sort_column=menu_order&echo=0') );
	$menu .= "</ul></div>n";
	echo $menu;
add_filter( 'wp_page_menu', 'nav_menu' );

There are others beside home that i want to add in the navigational bar, one of them are rss icon, feed by email and search bar. The current code below is one of the way to add all of them and adding favicon before the head tag and also adding google analitycs code before the close of body tag

function childtheme_favicon() { ?>
    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico">
<?php }
add_action('wp_head', 'childtheme_favicon');
function home_menu() {
    $menu = '<div class="menu"><ul>';
    if ( is_home() ) {
        $menu .= '<li class="current_page_item"><a href="';
    else {
         $menu .= '<li><a href="';
    $menu .= get_option('home') . '/" title="Home">Home</li>';
    $menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('title_li=&sort_column=menu_order&echo=0') );
    $menu .= 	'<li><div class="clear" id="rss-feed"> 
					<a href="http://feeds.feedburner.com/XXXX" class="rss">RSS</a>
					<a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=XXXX&amp;loc=en_US" class="email">Email Updates</a>
    $menu .= '<li><form action="'.get_option('home').'" method="get" id="searchform">
					<div class="">
						<input type="text" tabindex="1" size="20" value="" name="s" id="s"/>
						<input type="submit" tabindex="2" value="Search" name="searchsubmit" id="searchsubmit"/>
	$menu .= "</ul></div>n";
    echo $menu;
add_filter('wp_page_menu', 'home_menu' );
function analitycs_footer() { ?>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("XXXXXXX");
} catch(err) {}</script>
<?php }
add_filter('wp_footer', 'analitycs_footer' );

Don’t forget to customize the css to make the rss button, rss feed by mail and the search bar more pretty :)

u may also like this :