Upload Thematic

Download the Thematic Theme Framework (current release) from wordpress.org or a stable development release from thematic4you.com and extract the zip file. Take the /thematic/ folder and upload it to your /wp-content/themes/ directory through FTP. Make sure that you upload the whole directory structure of the /thematic/ folder including all subdirectories and files.

Upload the Child Theme

The next step is to find a child theme that is designed to be installed over the parent theme you chose. In this case, I’ll be using our new BT Extended child theme for Thematic. Please be aware, that you need the stable development release of Thematic for this child theme.
Similar to the previous step, you extract the /BTExtended_Thematic/ folder and upload it to the /wp-content/themes/ directory via your FTP client. Make sure that you upload the whole directory structure of the /BTExtended_Thematic/ folder including all subdirectories and files.

Activate the Child Theme

Now that you have both the parent theme and child theme uploaded, the final step is to activate the child theme. In your WordPress admin panel, simply navigate to the Appearance -> Themes menu, and select the child theme you selected. You don’t need to activate the parent theme. All that it needs to do is sit in the theme directory.

Credits:

Thanks a lot to Leland for his original post.

First of all we need to tell your Child Theme, that it supports the new functionality:

// This theme uses wp_nav_menu()
add_theme_support( 'nav-menus' );

Next step will be to remove the old menu from Thematic and add the new one:

// Remove standard menu
function remove_menu() {
	remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'remove_menu');

// Create wp_nav_menu
function new_access() { ?>
	<div id="access">
		<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
			<?php wp_nav_menu( array( 'menu' => 'primary-menu', 'container_class' => 'menu', 'menu_class' => '', 'fallback_cb' => '' ) ); ?>
	</div><!-- #access -->
<?php
}
add_action('thematic_header','new_access',9);

And finally we need to add the needed UL class to support Superfish:

// Add the UL class to support Superfish
function wp_nav_menu_add_menuclass($ulclass) {
	return preg_replace('/<ul>/', '<ul class="sf-menu">', $ulclass, 1);
}
add_filter('wp_nav_menu','wp_nav_menu_add_menuclass');

Please keep in mind that WordPress 3.0 is still not final. This code might break at any time. Don’t rely on it!

You could go to the Widgets section in WP Admin and assign at least one widget to the 13 widget areas. I’m too lazy for this. So I spend some time to create something that eases my life.

Go to WP Admin / Appearance / Thematic Options and hit the ‘Reset Widgets’ button. Then add the following code to your child theme’s functions.php:

function widget_args()
{
	return array (
	'before_widget' => thematic_before_widget(),
	'after_widget'  => thematic_after_widget(),
	'before_title'  => thematic_before_title(),
	'after_title'   => thematic_after_title()
	);
}

function wa_primary_aside()
{
	echo thematic_before_widget_area('primary-aside');
	the_widget('WP_Widget_Text', array('title' => 'Primary Aside', 'text' => 'This is the Primary Aside', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('primary-aside');
}

function wa_secondary_aside()
{
	echo thematic_before_widget_area('secondary-aside');
	the_widget('WP_Widget_Text', array('title' => 'Secondary Aside', 'text' => 'This is the Secondary Aside', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('secondary-aside');
}

function wa_subsidiary_open()
{
	echo '<div id="subsidiary">';
} 

function wa_1st_subsidiary()
{
	echo thematic_before_widget_area('1st-subsidiary-aside');
	the_widget('WP_Widget_Text', array('title' => '1st Subsidiary Aside', 'text' => 'This is the 1st Subsidiary Aside', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('1st-subsidiary-aside');
}

function wa_2nd_subsidiary()
{
	echo thematic_before_widget_area('2nd-subsidiary-aside');
	the_widget('WP_Widget_Text', array('title' => '2nd Subsidiary Aside', 'text' => 'This is the 2nd Subsidiary Aside', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('2nd-subsidiary-aside');
}

function wa_3rd_subsidiary()
{
	echo thematic_before_widget_area('3rd-subsidiary-aside');
	the_widget('WP_Widget_Text', array('title' => '3rd Subsidiary Aside', 'text' => 'This is the 3rd Subsidiary Aside', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('3rd-subsidiary-aside');
}

function wa_subsidiary_close()
{
	echo '</div>';
} 

function wa_index_top()
{
	echo thematic_before_widget_area('index-top');
	the_widget('WP_Widget_Text', array('title' => 'Index Top', 'text' => 'This is the Index Top', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('index-top');
	}

function wa_index_insert()
{
	echo thematic_before_widget_area('index-insert');
	the_widget('WP_Widget_Text', array('title' => 'Index Insert', 'text' => 'This is the Index Insert', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('index-insert');
}

function wa_index_bottom()
{
	echo thematic_before_widget_area('index-bottom');
	the_widget('WP_Widget_Text', array('title' => 'Index Bottom', 'text' => 'This is the Index Bottom', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('index-bottom');
}

function wa_single_top()
{
	echo thematic_before_widget_area('single-top');
	the_widget('WP_Widget_Text', array('title' => 'Single Top', 'text' => 'This is the Single Top', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('single-top');
}

function wa_single_insert()
{
	echo thematic_before_widget_area('single-insert');
	the_widget('WP_Widget_Text', array('title' => 'Single Insert', 'text' => 'This is the Single Insert', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('single-insert');
}

function wa_single_bottom()
{
	echo thematic_before_widget_area('single-bottom');
	the_widget('WP_Widget_Text', array('title' => 'Single Bottom', 'text' => 'This is the Single Bottom', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('single-bottom');
}

function wa_page_top()
{
	echo thematic_before_widget_area('page-top');
	the_widget('WP_Widget_Text', array('title' => 'Page Top', 'text' => 'This is the Page Top', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('page-top');
}

function wa_page_bottom()
{
	echo thematic_before_widget_area('page-bottom');
	the_widget('WP_Widget_Text', array('title' => 'Page Bottom', 'text' => 'This is the Page Bottom', 'filter' => ''), widget_args());
	echo thematic_after_widget_area('page-bottom');
}

add_action('widget_area_primary_aside', 'wa_primary_aside', 10);
add_action('widget_area_secondary_aside', 'wa_secondary_aside', 10);
add_action('widget_area_subsidiaries', 'wa_subsidiary_open', 10);
add_action('widget_area_subsidiaries', 'wa_1st_subsidiary', 30);
add_action('widget_area_subsidiaries', 'wa_2nd_subsidiary', 50);
add_action('widget_area_subsidiaries', 'wa_3rd_subsidiary', 70);
add_action('widget_area_subsidiaries', 'wa_subsidiary_close', 90);
add_action('widget_area_index_top', 'wa_index_top', 10);
add_action('widget_area_index_insert', 'wa_index_insert', 10);
add_action('widget_area_index_bottom', 'wa_index_bottom', 10);
add_action('widget_area_single_top', 'wa_single_top', 10);
add_action('widget_area_single_insert', 'wa_single_insert', 10);
add_action('widget_area_single_bottom', 'wa_single_bottom', 10);
add_action('widget_area_page_top', 'wa_page_top', 10);
add_action('widget_area_page_bottom', 'wa_page_bottom', 10);

This code will not assign any widget to the widget areas. So it’s nothing to test any logic behind the widgets or widget areas. It’ll simulate the process using the_widget().

The link id and the class are not working properly. I could make both items static and fix this issue, but I left this part as it is, if you want to filter thematic_before_widget(), thematic_after_widget(), thematic_before_title() and thematic_after_title.

This should be good enough to get a feeling for the locations of the several widget areas and to test the design / layout of your child theme.

Just copy the following code into your child theme’s functions.php:

function remove_widgetized_area($content) {
	unset($content['Secondary Aside']);
	return $content;
}
add_filter('thematic_widgetized_areas', 'remove_widgetized_area');

Here’s a list of the default widget areas:

• 'Primary Aside'
• 'Secondary Aside'
• '1st Subsidiary Aside'
• '2nd Subsidiary Aside'
• '3rd Subsidiary Aside'
• 'Index Top'
• 'Index Insert'
• 'Index Bottom'
• 'Single Top'
• 'Single Insert'
• 'Single Bottom'
• 'Page Top'
• 'Page Bottom'

Please use the ThemeShaper Forums for any further questions.

In my example for this task, I’m going to remove the sidebar from my page ‘Forum’.

The major requirement for this and all other code snippets: You have to use a child theme!

We start with the child theme’s functions.php and add the following code:

// filter thematic_sidebar() .. no display for the page 'Forum', keep it for the rest
function remove_sidebar() {
 // We test if we are on the page 'Forum'
 if (is_page('forum')) {
 // Yes, we are .. now we switch off the sidebar
 return FALSE;
 } else {
 // we are not .. we leave the switch on
 return TRUE;
 }
}
// Connect the filter to thematic_sidebar()
add_filter('thematic_sidebar', 'remove_sidebar');

Now that we’re able to switch off the sidebar for the page ‘Forum’, we need to make the gained space available for our content.

We open the child theme’s style.css and add the following code:

body.slug-forum #container {
 width: 960px;
}

body.slug-forum #content {
 width: 940px;
}

Please note that this modification is related to the 2c-r-fixed layout. You might want to change the width settings according to your own design.

You can modify the conditions in remove_sidebar() to your needs … more details about <a title=”WordPress – Conditional Tags” href=”http://codex.wordpress.org/Conditional_Tags” target=”_self”>Conditional Tags</a>.

Tested with<a title=”Thematic, A WordPress Theme Framework” href=”http://themeshaper.com/thematic/”> Thematic 0.9</a> and a basic child theme.

Please use the <a title=”ThemeShaper Forums” href=”http://themeshaper.com/forums/”>ThemeShaper Forums</a> for any further questions.

The major requirement for this and all other code snippets: You have to use a child theme!

We start with our style.css, responsible for the 2c-r-fixed layout. It should contain the following code:

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

Please make sure that you don’t import the original thematic/style.css.

Now we need to create your style-home.css. Copy style.css to style-home.css. Once the file is created you need to change the line responsible for the layout. Change it from 2c-r-fixed to 3c-fixed. Your style-home.css should now contain the following code:

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/3c-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

Now that we have defined two different layouts, we need to define where the different styles should be used. For this we edit the functions.php in your child theme’s directory and add the following code:

// filter thematic_create_stylesheet to implement your own stylesheets
function my_stylesheet($content) {
	// We test if we're on home or on your frontpage
  if (is_home() || is_front_page()) {
  	// yes, we are .. now let's load the 3c-fixed layout
		$content = "\t";
		$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
		$content .= get_bloginfo('stylesheet_directory') . "/style-home.css";
		$content .= "\" />";
		$content .= "\n\n";
  } else {
  	// we are not .. let's load the 2c-r-fixed layout
		$content = "\t";
		$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
		$content .= get_bloginfo('stylesheet_directory') . "/style.css";
		$content .= "\" />";
		$content .= "\n\n";
	}
		// $content will be handed back to thematic_create_stylesheet
    return $content;
}
// connect the filter to thematic_create_stylesheet
add_filter ('thematic_create_stylesheet', 'my_stylesheet');

That’s it. Now your blog is using two different layouts.

One last note about further modifications of your stylesheets. Modifications that are related to the 2c-r-fixed layout or the 3c-fixed layout need to be done either in style.css or style-home.css. Do not modify the original files in the Thematic directory. Modifications that are related to both layouts need to be done in style.css and in style-home.css.

You can modify the conditions in my_stylesheet() to your needs … more details about Conditional Tags.

Tested with Thematic 0.9 and a basic child theme.

Please use the ThemeShaper Forums for any further questions.