Themes in the Work

The last two months have been really productive. So I thought I’d share with you two of the works in progress. While still far from ready to be released, they are ready to be shown.

Both will be child themes, but with a twist. This is as much as I can tell you at this point, but I’ll post more details by the end of the month.

Charisma Teaser

TypeLog Teaser

Related posts:

1. Smarter Wordpress Theme
2. Early Morning Child Theme
3. Green anyone? Try Commune – Thematic Child Theme!

Here is how to remove Google Buzz from Gmail in three easy steps.

Hide Google Buzz from the Gmail interface

Turn off Google Buzz completely

Related posts:

1. Themes in Gmail

Now, you’re probably also want to make some changes to the single post navigation, and make it so that single posts in your special category won’t get posts from any other category in their navigation links. And also, chances are you’ll want to exclude posts from your special category from the navigation links of posts in all other categories.

In other words, in the navigation links of single posts from your special category you’ll only get posts from that category, and in the navigation links of posts from all other categories, you’ll get posts from all categories except your special category. Two separate navigations.

For all of this, all you need to do is use the following two Thematic filters: thematic_previous_post_link_args and thematic_next_post_link_args. If you’re interested to look into the code, you can find the filters being applied in thematic/library/extensions/content-extensions.php

And here’s the code snippet to include in your child-theme’s functions.php:

function custom_previous_post_link_args($args){
	if(in_category(3)){
		$args['in_same_cat'] = TRUE;
	}
	else{
		$args['excluded_categories'] = 3;
	}
	return $args;
}
add_filter('thematic_previous_post_link_args', 'custom_previous_post_link_args');
 
function custom_next_post_link_args($args){
	if(in_category(3)){
		$args['in_same_cat'] = TRUE;
	}
	else{
		$args['excluded_categories'] = 3;
	}
	return $args;
}
add_filter('thematic_next_post_link_args', 'custom_next_post_link_args');

Related posts:

1. Add “Featured Posts” to your Thematic child theme
2. WP Greet Box, my Design and Thematic – The Good, the Bad and the Ugly
3. Add a search box to the thematic menu

Multiple filters in the posts management screen.

Now you can filter your posts in all imaginable ways, even by custom taxonomies! Download it via the official WordPress plugins repository.

Filter the admin post listing by:

• authors
• tags
• custom taxonomies that you have declared

No related posts.

After looking into tons of solutions for a WordPress photo slideshow, most of them being flash applets, I’m confident that I’ve found the very best one. And it’s not even Flash, it’s just JavaScript.

Are you familiar with the NextGEN Gallery plugin? Well, you must be, since it’s probably the most downloaded photo gallery plugin. Well, we’ve found a little addon plugin that integrates NextGEN with GalleryView, an excellent jQuery gallery plugin. What more could we want?

So, here’s how everything works. You upload and activate the NextGEN Gallery plugin, then you create a gallery and put some nice pictures there, right? Then you upload and activate the little addon plugin I mentioned earlier.

In order to output your slideshow to a post or a page, simply add a code like this

[nggallery id=1 template=galleryview images=0]

The only minor downside is that in order to customize your slideshow you need to take a dip into the treacherous waters of coding. Inside the nggGalleryview directory you will find a view directory, and in there, you will find a file called gallery-galleryview.php

Editing the plugin

Open it and you’ll see a bit of JavaScript code with a set of configuration options for your slideshow, on line 37.

<script type="text/javascript" defer="defer">
	jQuery("document").ready(function(){
		jQuery('#<?php echo $gallery->anchor ?>').galleryView({
			panel_width: 450,
			panel_height: 400,
			frame_width: 40,
			frame_height: 40,
			transition_interval: 0,
			overlay_color: '#222',
			overlay_text_color: 'white',
			caption_text_color: '#222',
			background_color: 'transparent',
			border: 'none',
			nav_theme: 'dark',
			easing: 'easeInOutQuad'
		});
	});
</script>

These are the default settings. You will need to modify panel_width and panel_height to have a different sized slideshow.

Now we also have to modify the css a bit. By default the images also get a css width and height.

Open up galleryview.css. On line 57 we have:

.galleryview .panel img { width: 450px; height: 400px;}

Modify these with the same width and height as in the javascript code above. Now you can have a slideshow exactly the width you need.

This will work for most people. However there are a few bugs that need ironing out inside the original css. By default it works ok, however I want to make some slight changes.

1. On line 61 inside the galleryview.css change from overflow hidden to visible. This will fix the last thumbnail to be 10px smaller in width then the rest of the thumbnails.

   .strip_wrapper{ overflow:visible !important; }

2. Now we need to move the right arrow over to the right 10px.

   .galleryview img.nav-prev { padding-left:20px !important; }

3. Finally, if you’re using the Thematic Theme Framework for Wordpress we need to add a small css fix. The problem is that both the plugin and Thematic share a common css class, named nav-prev. Because of this your right arrow will be stretched to 50% of the post width . This is what we need to add to the end of the plugin’s css:

   .galleryview img.nav-prev { padding-left:20px !important; }

Going a bit further with our resolve.

For this plugin to be really useful we’ll probably need to be able to include it inside out theme files. By default it doesn’t have a function that will print out the gallery. To go around this we’ll use the do_shortcode() Wordpress function.

<?php echo do_shortcode("[nggallery id=1 template=galleryview images=0]"); ?>

Our gallery demo. It’s now 600px wide and 400 tall.

people in the sun

voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

a lady

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

some flowers

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut

an autumn road

laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

a lake

labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

fields

laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

a misty road

labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Loch Morlich sunset

View west across a frozen Loch Morlich towards the setting sun. Taken in the Cairngorms National Park at Glenmore near Aviemore.

a stream

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut

• 
• 
• 
• 
• 
• 
• 
• 
• 

Conclusions

I’ve actually searched quite a lot after an out of the box Wordpress image slideshow plugin. While GalleryView dose offer a lot, it also falls short in many areas.

• It hard to modify by non-technical users.
• There is no way to have two different sized slideshows.
• It’s recommended that the images are fixed sized when you upload them. Otherwise there is a chance they will look squashed.

On the other had, in the hands of a developer or a power user it will be able to cover a large range of problems from normal in-page slideshow to an automated slider for a site’s leaf pages.

So with this in mind I would recommend you play around with GalleryView plugin for NextGen next time you need an image slideshow!

Related posts:

1. Use Wordpress as a CMS with Thematic – Part2
2. Use Wordpress as a CMS with Thematic Theme- Part1

A Smart Wordpress Theme

It gives your blog a personal look, with easy customization, without getting lost into too much options.
Its friendly interface and design work together giving your readers a pleasant experience every time they visit your site. Besides, you can get the most out of it’s SEO friendly structure by using the all in one seo pack plugin.

Pricing

For 25$ you can purchase Smarter, which includes the psd files.
Smarter is released under GPL license and that means you can use it on an unlimited number of websites.

Smarter theme options include:

• multiple theme layout
• optional use of breadcrumbs
• logo or header image upload
• customizable text areas (home page description, footer site info)
• featured slider pages
• different page templates (blog, news, login, register)
• menu management, exclude pages from navigation

They are all meant to allow you to improve and customize your website without having to touch a single line of code.

If you want to learn more about Smarter’s functionality check out the short video below, and experience the smarter way to start your online presence.

Support

If you have any question or concerns, visit the Cozmoslabs forums for help (http://cozmoslabs.com/forums/).

Related posts:

1. Smarter Theme Teaser
2. Theme Teasers
3. 10 design tips for your custom wordpress theme built with thematic

The idea behind Smarter Theme is to quickly build a presentation website for small and medium size companies without the need to touch a single line of code.

We’ve put together a screencast with a quick walk-through of the theme and it’s features. I hope you find it interesting and let me know what you think so far!

Related posts:

1. Smarter Wordpress Theme
2. Theme Teasers
3. Green anyone? Try Commune – Thematic Child Theme!

Besides support for the themes I hope to discuss any issues you might have with the code snippets found on the site.

So without further ado I here by present you the Cozmoslabs Forums.

No related posts.

Since version 2.0 Aptana stopped supporting their own fork of the Eclipse PDT I’ve been searching for another editor. I got feed up with how slow it is, all the bloatware, installing the PDT was made me loose an entire day and I honestly believed there had to exist a better editor for Windows.

I must have lost several days searching and testing different editors!

What I want from a Code Editor:

• Really good and easy to use FTP manager
• Code completion for css (it saves me a ton of time). It has to be automatic. When I write it should start showing suggestions.
• Good code coloring
• Fast and good looking.

Sounds simple enough right? Well… not really. Out of all of the Code Editors out there for Windows (including the ones you have to pay for – except Dreamweaver that is just to expensive to be taken seriously) there is just a handful of editors that fit the bill: Notepadd++ (however the FTP is full of bugs and sometimes just refuses to work), UltraEdit (it flickers when you’re using auto-completion – I think it redraws the screen every time I press a key) and jEdit.

jEdit to the rescue

Why didn’t I try jEdit before? I always thought it was a Java only editor. But boy I was wrong. It appears it just requires Java JRE.

So why use jEdit? Because everything works (at least for what I need it for), good FTP, good code completion, fast and it looks good. Oh! Did I mention that is FREE, GPL and supports plugins?

I honestly hope my search for a Code Editor stops here, if not I’m going to start writing my own .

No related posts.

By default, Thematic comes with a simple and useful representation for the Author Archives template. While this might be enough for the majority of users, there are times when we need more detailed information about the author.

This is particularly useful on multi-author blogs, where readers might want to read more posts from a particular writer!

The scope of this tutorial is composed of two parts:

1. Listing the author’s name, biographical info, gravatar picture and website inside the post body. ( Single Post Demo )
2. Creating an author archive page with the same info as above, plus we’ll list the author’s posts in a different way (Thematic already has this functionality implemented, but we’ll do some changes to the styling and the way the posts are displayed). (Author Archives Demo)

Part 1: “About the author” area

To do this we’ll have to filter the default thematic_postheader().

The code is basically the default postfooter code with some modification, mainly to the //Display author info area. Note the fact that we’re only displaying the author name, description, image and url inside the single post. On the homepage we’re still displaying the default thematic post header.

So copy this inside your functions.php file (check out for the opening and closing php tags) and reload the page. You should see on the post page the author area.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<?php
function postheader_and_author_info(){
 
    global $id, $post, $authordata;
 
    // Create $posteditlink    
    $posteditlink .= '<a href="' . get_bloginfo('wpurl') . '/wp-admin/post.php?action=edit&amp;post=' . $id;
    $posteditlink .= '" title="' . __('Edit post', 'thematic') .'">';
    $posteditlink .= __('Edit', 'thematic') . '</a>';
 
 
    if (is_single() || is_page()) {
        $posttitle = '<h1 class="entry-title">' . get_the_title() . "</h1>n";
    } elseif (is_404()) {    
        $posttitle = '<h1 class="entry-title">' . __('Not Found', 'thematic') . "</h1>n";
    } else {
        $posttitle = '<h2 class="entry-title"><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></h2>n";
    }
 
    $postmeta = '<div class="entry-meta">';
    $postmeta .= '<span class="meta-prep meta-prep-author">' . __('By ', 'thematic') . '</span>';
    $postmeta .= '<span class="author vcard">'. '<a class="url fn n" href="';
    $postmeta .= get_author_link(false, $authordata->ID, $authordata->user_nicename);
    $postmeta .= '" title="' . __('View all posts by ', 'thematic') . get_the_author() . '">';
    $postmeta .= get_the_author();
    $postmeta .= '</a></span><span class="meta-sep meta-sep-entry-date"> | </span>';
    $postmeta .= '<span class="meta-prep meta-prep-entry-date">' . __('Published: ', 'thematic') . '</span>';
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';
    // Display edit link
    if (current_user_can('edit_posts')) {
        $postmeta .= ' <span class="meta-sep meta-sep-edit">|</span> ' . '<span class="edit">' . $posteditlink . '</span>';
    }               
    $postmeta .= "</div><!-- .entry-meta -->n";
 
 
    $postmeta_issingle = '<div class="entry-meta">';
    $postmeta_issingle .= '<span class="meta-prep meta-prep-entry-date">' . __('Published: ', 'thematic') . '</span>';
    $postmeta_issingle .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta_issingle .= get_the_time(thematic_time_title()) . '">';
    $postmeta_issingle .= get_the_time(thematic_time_display());
    $postmeta_issingle .= '</abbr></span>';
    // Display edit link
    if (current_user_can('edit_posts')) {
        $postmeta_issingle .= ' <span class="meta-sep meta-sep-edit">|</span> ' . '<span class="edit">' . $posteditlink . '</span>';
    }               
    $postmeta_issingle .= "</div><!-- .entry-meta -->n";
 
 
	//Display author info area
	$postauthor .='<div id="author-info" class="vcard">';
	$postauthor .= '<h2 class="entry-title"><span class="meta-prep meta-prep-author">' . __('By ', 'thematic') . '</span>';	
	$postauthor .= '<span class="author vcard">'. '<a class="url fn n" href="';
    $postauthor .= get_author_link(false, $authordata->ID, $authordata->user_nicename);
    $postauthor .= '" title="' . __('View all posts by ', 'thematic') . get_the_author() . '">';
    $postauthor .= get_the_author();
    $postauthor .= '</a></span></h2>';
	$email = get_the_author_email();
	$postauthor .= str_replace( "class='avatar", "class='photo avatar", get_avatar("$email"));
	$postauthor .= '<div class="author-bio note"><p>' . get_the_author_description() . '</p></div>';
	$postauthor .= '<div class="author-url"><a href="' . get_the_author_url() . '">Website</a></div>';
	$postauthor .= '</div>';
 
 
 
    if ($post->post_type == 'page' || is_404()) {
        $postheader = $posttitle;        
    } else {
        $postheader = $posttitle . $postmeta;    
    }
	if (is_single()){
		$postheader = $posttitle . $postmeta_issingle . $postauthor;   
	}
 
    echo $postheader;
}
add_filter('thematic_postheader', 'postheader_and_author_info');
?>

Next we need to style it. Add this css to the style.cssof your child theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#content, #main{
	overflow:visible;
}
/* Author Area Styling */
#author-info{
	padding:18px;
	background:#ffffcc;
	border:1px dashed #e8e89b;
	border-left:20px solid #e8e89b;
	padding:10px 40px 10px 20px;
	margin:18px 0px 18px -40px;
	font-size:13px;
}
.author #author-info{
	margin-top:0;
	margin-bottom:0;
}
#author-info .entry-title{
	font-size:14px;
	text-transform:uppercase;
	font-weight:normal;
	color:#111;
}
#author-info .meta-prep-author{
	text-transform:lowercase;
}
#author-info .author-bio p{
	margin-bottom:5px;
	line-height:19px;
}
#author-info .avatar{
	width:70px;
	height:70px;
	border:4px solid #fff;
	box-shadow: 1px 1px 1px #cbcbcb;
	-moz-box-shadow:1px 1px 1px #cbcbcb;
	-webkit-box-shadow:1px 1px 1px #cbcbcb;
}

Part 2: Author archives

By default Thematic doesn’t come with the author bio activated. If we go to Appearance->Thematic Options in the Wordpress backend, we can activate it there by clicking the unchecked check box .

However we want some elements from that page changed. More exactly we don’t want the email address to be shown publicly (although Thematic passes it through antispambot “fool” e-mail harvesters) and we also want to display the author’s website link similar to what we have on the single post page.

As a bonus we will display the author’s posts in a different way so it’s a lot easier to find what we’re interested in. The idea is that instead of listing all the posts in chronological order we’ll order them by category. You can see what I mean in the Author Archives Page.

This time we won’t make the changes to the functions.php file as we would normally do with any thematic child theme. Instead we’ll have to create a new author.php file and place it inside our child theme so we can overwrite the default Thematic functionality.

The reason we’re making the changes to the template file instead of inside functions.php is that there is no filter on the Author Info Area and instead the code is directly inside the template file. As a side note I think the author template and the search template are the only ones that still have actual code inside them. For anything else you can pretty much hook or filter your way inside functions.php.

So now to the authors.php code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<?php
global $options;
foreach ($options as $value) {
    if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; }
    else { $$value['id'] = get_option( $value['id'] ); }
    }
?>
<?php get_header() ?>
 
	<div id="container">
		<div id="content">
 
<?php the_post() ?>
 
            <?php //thematic_page_title() 
            	  //We've commented out the Thematic Page title since that info will be displayed in our Author area
            ?>		
 
<?php /* if display author bio is selected */ if($thm_authorinfo == 'true' & !is_paged()) { ?>
			<div id="author-info" class="vcard">
			    <h2 class="entry-title"><?php _e('Author Archives: ', 'thematic') ?><strong><?php echo $authordata->first_name; ?> <?php echo $authordata->last_name; ?></strong></h2> 
    			<?php thematic_author_info_avatar(); ?>
    			<div class="author-bio note">
                    <?php if ( !(''== $authordata->user_description) ) : echo apply_filters('archive_meta', $authordata->user_description); endif; ?>
                </div>  			
    			<div class="author-url"><a href="<?php the_author_url() ?>">Website</a></div>
			</div><!-- #author-info -->
<?php } ?>
<div class="entry-content">	
<?php //thematic_author_loop() - we won't use the default thematic author loop
	  //instead will list the post sorted by category		
			$categories = get_categories();
 
			foreach($categories as $category){
				$cat_id = $category->cat_ID;
				$cat_slug = $category->category_nicename;
				$cat_name = $category->cat_name;
 
 
				//The Query
				query_posts(array(
					'category__in'=>	$cat_id,
					'author' =>			$authordata->ID,
					'posts_per_page'=>	100
					));
 
				if(have_posts()){
					echo '<h2>' . $cat_name . '</h2>';
				}
 
				echo '<ul>';
				//The Loop
				while ( have_posts() ) : the_post() ;?>
 
				<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
 
				<?php endwhile;
				echo '</ul>';
 
				//Reset Query
				wp_reset_query();
			}
 ?>
</div>	
 
		</div><!-- #content -->
	</div><!-- #container -->

<?php thematic_sidebar() ?>
<?php get_footer() ?>

Conclusions

So we added an author area on our single post page, enabled and modified the author area on the author archives page and as a bonus modified the default loop to list all the posts of the author organized under categories.

If you don’t like to do a lot of copy paste you can just download the Author Child Theme. Enjoy!

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 (Author Template Child Theme and Thematic) to your server in the themes folder AND THEN ACTIVATE the Author Template Child Theme.

Related posts:

1. Add “Featured Posts” to your Thematic child theme
2. How To Create a WordPress Theme – a tutorial series by Ian Stewart