It’s a warm design that makes you feel comfortable.

Cozy Child Theme for Thematic Framework

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (Cozy and Thematic) to your server in the themes folder AND THEN ACTIVATE the Cozy Theme.

The end of a good run

This will probably be the last free child theme I’ll release for Thematic. The last couple of years have been filed with experiences I never thought possible and I’ve learned so much. However it’s time to move forward, leave Thematic behind and try a more sensible approach to theme development. I’m talking about creating Parent Themes and on top of them Child Themes and not try to solve every problem using Thematic (this is better explained by Justin Tadlock)

This doesn’t mean I’ll stop releasing themes. On the contrary I look forward adding a couple new free designs that can be used by the community.

Related posts:

1. Early Morning Child Theme
2. Byty the Free Child Theme – Built on Thematic
3. Installing WordPress Child Themes and Customizing the Byty Theme

Early Morning, Street and Byty now make use of the WordPress 3.0 menu system, while Commune now makes use of the Featured thumbnail image that comes with WordPress (no more category images that weren’t working anyway) and we updated the menu to work with wp_nav_menu just like the rest of the themes.

We have plans for some new Child Themes in the near future so please stay tuned.

Related posts:

1. Installing WordPress Child Themes and Customizing the Byty Theme
2. wp_nav_menu shortcode
3. Byty the Free Child Theme – Built on Thematic

Tabbed widget areas for Thematic

There are two classic ways of implementing the tabbed widgets.

• Creating a hard coded widget and using the jQuery Cycle plugin. This means you can’t easily modify the content of the tabs unless you open the widget file.
• Using a tabbed widget plugin. While this is ok for some users it just ads a lot extra code that doesn’t justify the end.

Luckily there is a optimized way of doing things. Write a bit of javascript that converts any default thematic widget area into a tabbed widget area. The title of the widgets placed in you widget area will automatically become the widget tabs.

The jQuery Tabbed Widgets Plugin

This piece of code comes from a friend of mine, David Turton. It was initially written for a different html structure, so that means the code I’ll post here will be easily modified to support any WordPress widget areas and transform them into a tabbed widget area.

(function($) {
 
	$.fn.dttabs = function(options) {
 
		var options = $.extend({
			widgetid : '#secondary',
			fade : null,
			tabTitleReference : null,
			interval : null,
			startTab : 1,
			tabContainerName : 'tab-items'
		}, options);
 
		return this.each(function() {			
 
			var $this = $(this),
				divCount = $this.children('li').length,
				tabContainer = '<ul id="' + options.tabContainerName + '">';
 
				$this
					.children('li:not(:nth-child(' + options.startTab + '))')
					.hide()
					.end()
					.hover(function() {
						$this.addClass('hovered');
					}, function() {
						$this.removeClass('hovered');
					});						
 
				for (var i = 1; i <= divCount; i++) {
					if( options.tabTitleReference ) {
						var heading = $this
										.children('li:nth-child(' + i + ')')
										.find(options.tabTitleReference)
										.filter(':first')
										.text();
 
						if( heading !== '' ) tabContainer += '<li><a href="#" class="tab' + i + '" rel="' + i + '">' + heading + '</a></li>';
						else tabContainer += '<li><a href="#" class="tab' + i + '" rel="' + i + '">' + i + '</a></li>';
					}
					else tabContainer += '<li><a href="#" class="tab' + i + '" rel="' + i + '">' + i + '</a></li>';
				};
				tabContainer += '</ul>';
				$(options.widgetid).prepend(tabContainer);
 
				var $container = $('#' + options.tabContainerName);
 
				$container
					.find('li:nth-child(' + options.startTab + ')')
						.addClass('tab-selected')
					.end()
					.find('a')
						.click(function() {
							var $a = $(this);
 
							var num = $a.attr('rel');
							if( $this
									.children('li')
									.eq(num - 1)
									.is(':visible')
							) return false; // user is already on selected tab
 
							$container
								.find('li.tab-selected')
								.removeClass('tab-selected');
 
							$a.parent().addClass('tab-selected');
 
							if( options.fade ) {
								$this
									.children('li')
									.hide()
									.eq(num - 1)
									.fadeIn(options.fade);
							}
 
							else { 
								$this
									.children('li')
									.hide()
									.eq(num -1)
									.show();
							}
 
							return false;
						});	
 
				// auto change tabs				
				if( options.interval ) {
					var i = options.startTab;
 
					setInterval(function() {
 
						if( !$this.hasClass('hovered') ) {
							$container
								.find('a')
								.eq(i)
								.trigger('click');
							i++;
							if( i === divCount ) i = 0;
						}
 
					}, options.interval);
 				}			
 
		}); // end each
 
	}
 
})(jQuery);

This is the jQuery plugin and now all we need to do is to initiate our tabbed widget.

<script type='text/javascript'>
jQuery(document).ready(function() {
 
	jQuery('#secondary>.xoxo').dttabs({
		widgetid : '#secondary',
		fade : 1000,
		tabTitleReference : '.widgettitle',
		interval : null,
		startTab : 1,
		tabContainerName : 'tab-items'
	});
 
});
</script>

If we change #secondary with #primary then the Primary Aside widget will be transformed into a tabbed widget area.

Integrating the tabbed widget javascript code with Thematic

Next we need to add these two javascript pieces of code to our child theme. Add the following code to functions.php of your child theme for Thematic.

function add_js_to_header(){
	?>
<script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/dttabs.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function() {
 
	jQuery('#secondary>.xoxo').dttabs({
		widgetid : '#secondary',
		fade : 1000,
		tabTitleReference : '.widgettitle',
		interval : null,
		startTab : 1,
		tabContainerName : 'tab-items',
	});
 
});
</script>
 
	<?php
}
add_action('wp_head', 'add_js_to_header');

Adding a bit of style

The basic functionality is there. However we still need to add a bit of css to the mix or we’ll have a bad looking tabbed widget .

This css code goes inside style.css of your child theme.

/*
	Tabed Widget Area #secondary
*/
 
#secondary .widgettitle{
	display:none; /* The title will be in the tabs. We don't need this anymore. */
}
#secondary  #tab-items{
	border-bottom:1px solid #cccccc;
	margin:0;
	padding:0;
}
#secondary  #tab-items li{
	display:inline;
}
#secondary  #tab-items li a{
	font-weight:bold;
	text-decoration:none;
	padding:3px 10px;
	display:inline-block;
	margin-bottom:-1px;
}
#secondary  #tab-items li.tab-selected a{
	background:#fff;
	border:1px solid #ccc;
	border-bottom:none;
}
#secondary .xoxo{
	padding:10px;
	border:1px solid #ccc;
	border-top:none;
}
#secondary .xoxo .xoxo{
	padding:0;
	border:none;
}

And now we have a tabbed widget for Thematic!

Related posts:

1. Green anyone? Try Commune – Thematic Child Theme!
2. Add a header image to Thematic – the easy way
3. Early Morning Child Theme

Get’em while they’re hot!

Related posts:

1. Byty the Free Child Theme – Built on Thematic
2. Street WordPress Theme
3. Replacing the Thematic Menu with a DropDown List of Categories

This theme doesn’t scream at you, instead it takes a step back and lets the user read. Please don’t spoil it by putting ads on it!

Early Morning - A refreshing child theme for Thematic

You also have some nifty options:

• You can upload your own logo
• It comes with it’s own custom designed Twitter widget, so your visitors can see what you’re doing from your blog
• If green isn’t your style, it comes with 5 background options that you can select from the Early Morning Theme Options (Green, Turquoise, Brick Red, Gray and Black)
• Has a one column page template and archive template
• It’s been tested and works on Firefox 3.5, Safari 4, Opera 9, Chrome, IE7, IE8

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (Early Morning and Thematic) to your server in the themes folder AND THEN ACTIVATE the Early Morning Theme.

Related posts:

1. All Child Themes got updated
2. Cozy Child Theme
3. Byty the Free Child Theme – Built on Thematic

Featured Posts for Thematic

Featured posts are common in WordPress magazine themes. They let you promote hot topics and bring your best articles right in front of your users.

First thing we need to do is create a thematic child theme. This way we won’t make direct changes to Thematic.

The featured posts will be inserted on the home page before the rest of the articles. We’ll display the latest 3 posts which are tagged ‘featured’.

We now have to add the code inside of functions.php file of your child theme (don’t forget the <?php opening tag and the ?> ending tag).

function featured_posts(){
 
		$my_query = new WP_Query('tag=featured&showposts=3');
 
		echo '<ul id="featured-posts">';
		$feat_class = array();
 
		while ($my_query->have_posts()) : $my_query->the_post();
				$feat_class = array();
				// Category for the post queried
				foreach ( (array) get_the_category() as $cat )
					$feat_class[] = 'category-' . $cat->slug;
					$feat_class = join(" ", $feat_class);
				?>
				<li id="featured-<?php the_ID(); ?>" class="<?php echo $feat_class; ?>">
					<?php 
						$posttitle = '<h4><a href="';
						$posttitle .= get_permalink();
						$posttitle .= '" title="';
						$posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
						$posttitle .= '" rel="bookmark">';
						$posttitle .= get_the_title();   
						$posttitle .= "</a></h4>\n";
						echo $posttitle;
 
						the_excerpt();
					?>
 
				</li><!-- .post -->
		<?php
		endwhile;
		echo '</ul>';
}
add_action('thematic_above_indexloop','featured_posts');

The first line $my_query = new WP_Query(‘tag=featured&showposts=3′); defines the name of the tag that targets your posts (you can have any tag name there) and the number of featured articles (three in this case).

Right now it’s just a list of posts so a bit of css styling is in order to make it look attractive to your visitors. Add this css to your style.css file inside the Child Theme.

ul#featured-posts {
    float: left;
    margin: 0;
    padding: 0 0 15px 0;
    list-style: none;
    color: #111;
    font-size: 11px;
    line-height:14px;
    font-family: Helvetica, Arial, sans-serif;
}
#featured-posts li {
    float: left;
    width: 135px;
    padding: 12px 10px 10px 10px;
    margin-right: 15px;
    min-height: 260px;
    background:#f1f1f1;
    border:3px double #ccc;
}
 
#featured-posts li p {
    margin: 0;
    padding: 0;
}
 
#featured-posts li:hover {
    background:#fff;
}
#featured-posts li h4 a {
    font-family:Georgia, Times, sans-serif;
    font-size: 12px;
    line-height: 13px;
    display: block;
    padding: 5px 1px;
    color: #111;
    font-weight: bold;
}

I hope you find it useful and don’t hesitate to post in the comments were you’ve used this.

Related posts:

1. Exclude posts from WordPress Navigation in Thematic
2. Green anyone? Try Commune – Thematic Child Theme!
3. Cozy Child Theme

It uses the beautiful Vegur Free Font for the headings and main menu, implemented by Cufon (text replacement technique). I’ve spent a great deal of time searching for the perfect free font for this theme, but I think I found the right combination.

While this child theme is just a skin for Thematic, because this exact reason is also functional. You have access to all 13 Widget Areas Thematic uses, the semantically correct HTML that is great for SEO, can use a page template that spans the entire width of the page without the sidebars and even you can upload your own logo or header image from the “Street Theme Options”.

An elegant Child Theme for Thematic

I hope you’ll enjoy using this theme as much I enjoyed creating it!

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (Street and Thematic) to your server in the themes folder AND THEN ACTIVATE the Street theme.

Related posts:

1. Cozy Child Theme
2. Early Morning Child Theme
3. Byty the Free Child Theme – Built on Thematic

First thing we need to do is create a thematic child theme. This way we won’t make direct changes to Thematic.

The search box will be displayed on the right of the menu, inside of the #access div. The way Thematic hooks and actions were constructed will first need to remove the thematic_access() action from the thematic_header() hook. If all this sounds a bit difficult fear not. All you have to do is add this code inside of functions.php file of your child theme (don’t forget the <?php opening tag and the ?> ending tag).

// Remove default Thematic actions
function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');
</php>
 
If everything is working properly when you reload your Wordpress installation the entire menu would have disappear! <strong>Now we can create our own menu WITH the search box on the right of it! </strong>Add this code at the end of your <em>functions.php</em>:
 
<pre lang="php">
// Create a custom access div with the menu and search box
function search_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_page_menu('sort_column=menu_order') ?>
 
			<div id="access-search">
				<form id="searchform" method="get" action="<?php bloginfo('home') ?>">
					<div>
						<input id="s" name="s" type="text" value="<?php echo wp_specialchars(stripslashes($_GET['s']), true) ?>" size="20" tabindex="1" />
						<input id="searchsubmit" name="searchsubmit" type="submit" value="<?php _e('Search', 'thematic') ?>" tabindex="2" />
					</div>
				</form>
			</div>
 
        </div><!-- #access -->
<?php }
add_action('thematic_header','search_access',9);

Reload your page and the search box will be there, but not where you expected it to be! We’ll need to add a bit of css styling to it.

Go ahead and open the style.css and at the end of it add this css code:

#access-search{
	position:absolute;
	left:50%;
	width:260px;
	margin-left:170px;
	height:29px;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	padding:2px 0 0 4px;
}

This is it! You now have successfully added a search box to the right of your thematic main menu!

Related posts:

1. Replacing the Thematic Menu with a DropDown List of Categories
2. Drop Down Menu for Thematic
3. Quickly add a Category DropDown to Thematic 0.9

Update 11.17.2010

The category image was removed and all thumbnails are now created using the Featured Image default functionality. If no Featured Image is added a default image appears in place.

Simply put I have been lazy lately. I know this isn’t the best way to sell my self but a little bit of honesty hasn’t hurt anyone (or has it? ). So without further ado I here by present you Commune Child Theme based on Thematic!

As far as I know it’s the first magazine like Thematic child theme released for free!

     

A small guide

There are basically three things to explain: adding your own logo, the Tabbed Widget and adding images to posts!

Adding your own logo

Commune features an Options page that allows you to upload your own logo or banner image. You need to go to the WordPress admin panel and under “Apperance -> Child Theme Options”.

This is how the interface looks like:

Child Theme Options Page - You now have the posibility to upload your header image from WordPress

The Tabbed Widget – update: it currently doesn’t work with WordPress 2.8

To use the functionality of the Tabbed Widget Plugin you first need to download and install it!

Once that’s out of the way select Appearance –> Tabbed Widgets. The interface gives you the possibility to create 8 Tabbed Widget areas, but in out case we’ll use just one. In Tabbed Widget No. 1 select the widgets you want displayed. For the demo of the child theme Commune I used:

• Recent Posts
• Recent Comments
• Tag Clouds
• Search

Make sure you give a title to each individual widget or your users will only see 4 tabs.

Other settings you need to take into consideration are:

• deselect show title (it’s deselected by default)
• select Style as: tabs

I’ve also uploaded an image with the settings for the Tabbed Widget Nr.1.

The next and last step is to head over to Appearance -> Widgets. Select the Primary Aside Widget, click Show and add Tabbed Widget 1 to it and save changes. After this you should have your Tabbed Widget displayed on the front-end of your blog in all it’s glory!

Category and post images

Another key element of this theme is the way pictures are used and displayed. For this the Easy Peasy Images code by Andrew Rickmann was integrated into the theme code.

What this does is to get a list of all the images attached to a post. It then finds the first image with a sort order of 0 and displays it. By default all images have a sort order of zero unless you choose to reorder them. If you don’t make any changes then it will find the first image. If you reorder them using drag and drop the first image in the list will have an order of 1 and you would need to change it to 0.

Default images by category

The theme will add a list of categories to the Media -> Library so that you can assign images to one or more categories. If the function doesn’t find a post attachment with a sort order of 0 then it will default to the image attached to the category the post is in. Note: it will use the first category image it finds.

For more information on the usage you can see a video-tutorial over at Andrew Rickmann’s web-site, www.wp-fun.co.uk

As always if you have any questions or if you find bugs please let me know! I appreciate every input!

Related posts:

1. Byty the Free Child Theme – Built on Thematic
2. Early Morning Child Theme
3. Installing WordPress Child Themes and Customizing the Byty Theme

Although I’ve done in the past a similar tutorial that one isn’t working anymore with the latest Thematic version so here is a quick and easy way to add a Category DropDown.

First create a ChildTheme.
Second create and then open the functions.php file that should be found in your new ChildTheme.
Third add this code to the functions.php file:

[sourcecode language="php"]

#Add a drop down category menu
function childtheme_category_menu() { ?>
<div id="category-menu" class="menu">
<ul id="category-nav" class="sf-menu">
<?php wp_list_categories(‘title_li=’); ?>
</ul>
</div>
<?php }
add_action(‘wp_page_menu’,'childtheme_category_menu’);

[/sourcecode]

Save and test. You should now have a drop-down from your categories!

Related posts:

1. Replacing the Thematic Menu with a DropDown List of Categories
2. Drop Down Menu for Thematic
3. Exclude posts from WordPress Navigation in Thematic