When I started designing Charisma I had in mind an elegant, simple, well structured theme which highlights the content and gives the user a pleasurable reading experience.

Charisma, Free Genesis Child Theme

The home page has a beautiful slider, and below it lists the most recent post titles. I created a new widget area that appears only on the homepage and you can add the default featured articles widget or featured page widget from Genesis Theme Framework.

So why Genesis you might ask? To be honest I wanted to experiment with frameworks other then Thematic to see how they work. I’ve used bits from Hybrid in the past and this is how I’ve tested Genesis, by building a child theme for it.

To be honest I was pleasantly surprised. The code is really easy to understand, there are plenty of tutorials on the support forums, the css is straight forward and the html really let’s you create any layout without any problems. I’ve also liked the widgets Genesis comes with by default. They speed up things quite a lot.

Charisma was built on top of the Genesis framework, so it inherits all it’s functionality. In order to install it you have to buy the Genesis Theme (this is an affiliate link), upload both themes (Charisma and Genesis) to your server in the themes folder AND THEN ACTIVATE the Charisma theme.

Support

If you have any question regarding this theme you can always visit the Cozmoslabs forums for help (www.cozmoslabs.com/forums/forum/charisma).

However, for questions regarding the Genesis Theme Framework please make use of the excellent support StudioPress provides.

Related posts:

1. Byty the Free Child Theme – Built on Thematic
2. Green anyone? Try Commune – Thematic Child Theme!
3. Early Morning Child Theme

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. Quickly add a Category DropDown to Thematic 0.9

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

Until now you had to either change the header.php file in Thematic (something not really recommended) or use rather ugly CSS tricks to hide the existing content and use your logo or banner as a background for the #header or #branding div.

The end result will be a Child Theme Options page that will allow us to select if we want to use the default header or upload a header image:

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

We’ll start by creating a Child Theme. If you are already using one of the Thematic Child Themes then you can move to the next step, modifying the functions.php file.

The code for this tutorial was created by my colleague Gabriel. He always helps me with custom programing for WordPress !

This functions.php file will consist of two parts: adding the Child Theme Options page to WordPress and replacing the default header with your own logo or banner image.

Open functions.php and add the following code:

<?php
// ---------- "Child Theme Options" menu STARTS HERE

add_action('admin_menu' , 'childtheme_add_admin');

function childtheme_add_admin() {
	add_submenu_page('themes.php', 'Child Theme Options', 'Child Theme Options', 'edit_themes', basename(__FILE__), 'childtheme_admin');
}

function childtheme_admin() {

	$child_theme_image = get_option('child_theme_image');
	$enabled = get_option('child_theme_logo_enabled');

	if ($_POST['options-submit']){
		$enabled = htmlspecialchars($_POST['enabled']);
		update_option('child_theme_logo_enabled', $enabled);

		$file_name = $_FILES['logo_image']['name'];
		$temp_file = $_FILES['logo_image']['tmp_name'];
		$file_type = $_FILES['logo_image']['type'];

		if($file_type=="image/gif" || $file_type=="image/jpeg" || $file_type=="image/pjpeg" || $file_type=="image/png"){
			$fd = fopen($temp_file,’rb’);
			$file_content=file_get_contents($temp_file);
			fclose($fd);

			$wud = wp_upload_dir();

			if (file_exists($wud[path].'/'.strtolower($file_name))){
				unlink ($wud[path].'/'.strtolower($file_name));
			}

			$upload = wp_upload_bits( $file_name, '', $file_content);
		//	echo $upload['error'];

			$child_theme_image = $wud[url].'/'.strtolower($file_name);
			update_option('child_theme_image', $child_theme_image);
		}

		?>
			<div class="updated"><p>Your new options have been successfully saved.</p></div>
		<?php

	}

	if($enabled) $checked='checked="checked"';

	?>
		<div class="wrap">
			<div id="icon-themes" class="icon32"></div>
			<h2>Child Theme Options</h2>
			<form name="theform" method="post" enctype="multipart/form-data" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']);?>">
				<table class="form-table">
					<tr>
						<td width="200">Use logo image instead of blog title and description:</td>
						<td><input type="checkbox" name="enabled" value="1" <?php echo $checked; ?>/></td>
					</tr>
					<tr>
						<td>Current image:</td>
						<td><img src="<?php echo $child_theme_image; ?>" /></td>
					</tr>
					<tr>
						<td>Logo image to use (gif/jpeg/png):</td>
						<td><input type="file" name="logo_image"><br />(you must have writing permissions for your uploads directory)</td>
					</tr>
				</table>
				<input type="hidden" name="options-submit" value="1" />
				<p class="submit"><input type="submit" name="submit" value="Save Options" /></p>
			</form>
		</div>
	<?php
}

// ---------- "Child Theme Options" menu ENDS HERE

// ---------- Adding the logo image to the header STARTS HERE

if(get_option('child_theme_logo_enabled')){
	function remove_thematic_blogtitle() {
	 remove_action('thematic_header','thematic_blogtitle',3);
	}
	add_action('init','remove_thematic_blogtitle');

	function remove_thematic_blogdescription() {
	 remove_action('thematic_header','thematic_blogdescription',5);
	}
	add_action('init','remove_thematic_blogdescription');

	function thematic_logo_image() {
		echo '<div id="logo-image"><a href="'.get_option('home').'"><img src="'.get_option('child_theme_image').'" /></a></div>';
	}
	add_action('thematic_header','thematic_logo_image',4);
}
// ---------- Adding the logo image to the header ENDS HERE
?>

This source code works on all Thematic 0.9 Child Themes. If you’re using an older version of Thematic, chances are this won’t work.

Save and go into your WordPress admin panel under “Appearance -> Child Theme Options”. If every thing worked out ok you should have a similar admin panel as the one in the picture on top of the page.

As a side note there’s already in the works a plugin for WordPress that will make modifying Thematic a breeze so keep an eye out for great new things coming your way!

Related posts:

1. Add a search box to the thematic menu
2. Add “Featured Posts” to your Thematic child theme
3. Thematic Tabbed Widgets

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

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

This is my first Free to Download Child Theme. It was built for a friend of mine and we decided to release it for free in hope of some extra publicity .

To make matters short here is a screen shot:

Over the next week I’ll post small tips and tutorials about how to customize this theme in order to remove/change the top ad, style plugins that are not normally supported, etc.

If you have questions don’t hesitate to ask!

Related posts:

1. Installing WordPress Child Themes and Customizing the Byty Theme
2. Charisma, Free Genesis Child Theme
3. Green anyone? Try Commune – Thematic Child Theme!