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. Early Morning Child Theme
3. Add “Featured Posts” to your Thematic child theme

Get’em while they’re hot!

No related posts.

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. Green anyone? Try Commune – Thematic Child Theme!
2. Street WordPress Theme
3. Charisma, Free Genesis Child Theme

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. Street WordPress Theme
2. Exclude posts from WordPress Navigation in Thematic
3. Installing WordPress Child Themes and Customizing the Byty 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. Add “Featured Posts” to your Thematic child theme
2. Installing WordPress Child Themes and Customizing the Byty 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');

If everything is working properly when you reload your WordPress installation the entire menu would have disappear! Now we can create our own menu WITH the search box on the right of it! Add this code at the end of your functions.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. Green anyone? Try Commune – Thematic Child Theme!
3. Byty the Free Child Theme – Built on Thematic

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. Installing WordPress Child Themes and Customizing the Byty Theme
2. Commune Child Theme – Update
3. Early Morning Child 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:

#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');

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. Add a search box to the thematic menu

There comes a time when you might want to use the Thematic Theme for other things then just a blog, like a magazine or a portal and it might be best suited to have the categories of your blog on top instead of your static pages. After all, you’ll probably have two static pages (about and contact) and several categories and subcategories.

I’ve seen this request twice in the forums over at ThemeShaper and I’ll now try and answer it.

I’ve created a the CatDrop Child Theme that dose just that: transforms Thematic’s menu into a magazine style category based one!

        

Assuming you’ve already downloaded the latest version ofThematic (at the time of the writing it was version 0.7) and uploaded it inside your wp-content/themes directory, we can start the tutorial.

We won’t modify Thematic directly, instead we’ll create a Child theme and add this functionality to it. To do just that create a directory named catdrop inside your themes folder and two files: functions.php and style.css.

We’ll start by telling WordPress that our theme is a ChildTheme of thematic add this code into style.css.

/*
Theme Name: CatDrop
Theme URI: http://cozmoslabs.com/
Description: Built on Thematic Theme</a>
Author: Cristi Antohe
Author URI: http://cozmoslabs.com/
Template: thematic
Version: 0.1
.
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.
*/

/* 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 */
@import url('../thematic/library/styles/default.css');

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

/************************************************ Style for drop-down menu */
#header{
	z-index:99; /* IE7 z-index bug */
}
#access{
	overflow:visible;
	position:static;
	float:none;
	height:37px;
}
#menu{
	position:static;
	width: 940px;
	margin-top: 0pt;
	margin-right: auto;
	margin-bottom: 0pt;
	margin-left: auto;

	padding-top: 7px;
	padding-right: 0pt;
	padding-bottom: 8px;
	padding-left: 0pt;
	overflow-x: visible;
	overflow-y: visible;
	overflow:visible;
}
#menu ul{
	padding:0;
	margin:0;
}
#menu ul li ul{

}
#menu li{
	margin:0;
	padding:0;
}
#menu li a{
	text-align:center;
	margin:0 0px 0 0;
	width:11em;
	padding:5px;
	border-left:1px solid #6DA5D6;
}
#menu li li li a{
	background:#B5D1EA;
}
#main{
	clear:both;
}

I’ve added some stilling to the #access and #menu divs or the theme would look odd.

Next we need to create our functions.php file. Add the following code to it:

<?php
/* Create unordered lists with our categories */
function categ_menu() {
?>
<div id="menu">
<ul class="sf-menu">
	<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
 	<?php wp_list_categories('orderby=name&amp;amp;exlude=181&amp;amp;title_li=');
 	$this_category = get_category($cat);
 	if (get_category_children($this_category->cat_ID) != "") {
 		echo "<ul>";
			wp_list_categories('orderby=id&amp;amp;show_count=0&amp;amp;title_li=&amp;amp;use_desc_for_title=1&amp;amp;child_of='.$this_category->cat_ID);
 		echo "</ul>";
 	}
	?>
</ul>
</div>
<?php
}
/* Add the needed style and javascript for the dropdown */
function add_to_head(){
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/superfish/superfish.css" media="screen">
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/superfish/hoverIntent.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/superfish/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
	jQuery(function(){
		jQuery('ul.sf-menu').superfish({
            delay:       300,                            // one second delay on mouseout
            speed:       'fast',                         // faster animation speed
            autoArrows:  false,                          // disable generation of arrow mark-up
            dropShadows: true                            // disable drop shadows
		});
	});
</script>
<?php
}
add_action('wp_head', 'add_to_head');
add_action('wp_page_menu', 'categ_menu');
?>

The categ_menu function is the one that generates the list of categories and the add_to_head one is adding the needed css and javascript files to out Child Theme.(you can get the files from the Child theme download). This could be easily modified to support drop-down pages for the menu but that one some other time!

And this is the way you make Thematic similar to a magazine style WordPress theme!

Related posts:

1. Use WordPress as a CMS with Thematic Theme- Part1
2. Add “Featured Posts” to your Thematic child theme
3. Quickly add a Category DropDown to Thematic 0.9

Source byty.ro

Since I’ve launched by first WordPress Child Theme based on Thematic I thought writing about how you can make small changes to the theme and put your own graphical logo, add css for other plugins, basically create a customized version of it.

This post is divided in 4 different parts, particularly:

1. Installing WordPress Child Themes
2. Adding your Own Logo
3. Adding a standard top ad banner to your page
4. Creating css to style plugins that do not display perfectly on your theme

1. Installing WordPress Child Themes

WordPress Child Themes are a new concept introduced not a long time ago that allow you to inherit all of the functionality of a parent theme and overwrite the css style, change the images and some parts of the html through the use of functions.php file. We won’t go in a lot of detail on how to create a Child Theme here, but if you are interested and want to find out more please have a look here, here and here.

To get started you need to Download the Thematic Theme (this is the parent theme), then Download the Byty Child Theme.

Once this is out of the way you have to upload both of the themes to your server in the /themes folder, just like you would do with any other theme. After the parent and child theme have been uploaded you can now activate the child theme (you don’t have to setup anything for the parent theme).

This is it! Now you know how to install a WordPress Child Theme. Easy isn’t it!

2. Adding your own logo

I’ve designed the Byty Child Theme to be easy to customize. With this in mind you can add your own logo in no time through the use of CSS.

First thing you need to do is to make sure that your logo is 205px by 60px or something similar. You need to upload the logo into the wp-content/themes/byty/images folder.

Next open wp-content/themes/byty/styles.css file and find the #blog-title and #blog-title a declarations.

In the #blog-title declaration remove the comments (/* this is a css comment */ ) from background:url(images/logo.gif) 0px 63px no-repeat; and replace logo.gif with your own personal logo.

In the #blog-title a declaration remove the comments from filter:alpha(opacity=0); -moz-opacity: 0; opacity:0;. This will make the title of your blog transparent, basically hiding it and letting the logo to be displayed in the back. This is good from an accessibility point of view since if you disable the CSS you can still see the text from your Blog Title.

In the end this is how that particular piece of css should look like:

#blog-title{
background:url(images/my_personal_logo.gif) 0px 63px no-repeat;
width:205px;
height:84px;
text-indent:0px;
padding:0px;
padding-top:60px;
border:none;
}
#blog-title a{
display:block;
height:60px;
font-size:60px;
color:#2772b3;
font-family:"Trebuchet MS";
font-weight:normal;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity:0;
}

If everything is in order, once you reload your page you should see the logo displayed on top of the Child Theme.

3. Adding a standard top ad banner to your page

For this we’ll use the functions.php file that comes with the Byty Child Theme.

Once you open that file you’ll see the flowing code:

<?php
/* Register Top Add Wiget */
function add_top_ad() {
?>
<div id="top_ad">

<!-- Please add a 728px by 90px Standard Banner -->

</div>
<?php
}
add_action('thematic_belowheader', 'add_top_ad');
?>

In place of < ! -- Please add a 728px by 90px Standard Banner -- > you can add your own Google Adsense ad or leave it unchanged if you don’t what Ads on your site. You can add more ads to your site in the sidebars or in the content of your site through the use of text widgets.

4. Creating css to style plugins that do not display perfectly on your theme

If you have a plugin that isn’t displaying perfectly with the Byty Child Theme I recommend you open wp-content/themes/byty/extra.css and add any other css that you might need in there. This way you have separated files for the theme and your plugins.

As you can see there isn’t that much to say about this and I hope I’ve been clear with my explications.

If you’ve customized or used the Byty Child Theme please let me know! I’m interested to see for what you are using it!

Related posts:

1. Byty the Free Child Theme – Built on Thematic
2. Green anyone? Try Commune – Thematic Child Theme!
3. Use WordPress as a CMS with Thematic Theme- Part1