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.

Awry
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

<?php
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>
				</div></li>';
    $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"/>
					</div>
				</form></li>';
	$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>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("XXXXXXX");
pageTracker._trackPageview();
} catch(err) {}</script>
<?php }
add_filter('wp_footer', 'analitycs_footer' );
?>
</php>

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 :

Bookmark
Permalink.
Post a comment Trackback:
Trackback URL

3 Comments

  1. Posted June 24, 2009 at 1:58 pm | Permalink

    Hi Dian
    Thank you very much all your post about Thematic. I just discover. That’s amazing. I really love more and more WordPress.
    Best !
    Grégoire

  2. Posted July 27, 2009 at 12:53 pm | Permalink

    Hi Great post thanks for the info. I’m designing a site using thematic but stuck with the if_page not working from functions.php :(

  3. Posted July 31, 2009 at 8:55 am | Permalink

    i’m sorry i never use the if_page before,
    u should check out the thematic forum,
    they have a very helpful environment there

One Trackback

  • By Using Thematic Child Themes on June 8, 2009 at 4:46 pm

    […] all of the functions here is almost the same as the last time i post about thematic. […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>