Cozmoslabs » Thematic http://www.cozmoslabs.com Web design and development experiment. Thu, 01 Jul 2010 09:26:25 +0000 en hourly 1 WordPress user registration template and custom user profile fields http://www.cozmoslabs.com/2010/05/31/wordpress-user-registration-template-and-custom-user-profile-fields/ http://www.cozmoslabs.com/2010/05/31/wordpress-user-registration-template-and-custom-user-profile-fields/#comments Mon, 31 May 2010 12:14:19 +0000 Cristian http://www.cozmoslabs.com/?p=1012
  • 10 design tips for your custom wordpress theme built with thematic
  • WordPress as a social platform
  • Early Morning Child Theme
    • ]]>

    I’ve been playing a lot lately with the user registration template (I’ve used it as a great starting point) from Justin Tadlock’s ThemeHybrid and extended it to support custom user profiles.

    Unfortunately, user management in WordPress isn’t the sharpest tool in the shed. You have a lot of functionality for the users in the backend, but if you want to do extend that functionality to the front-end you’re in for a rough time.

    There are some really nice tutorials that can help you add custom user profile fields in the backend, but if you try to do it to the frontend through a custom page template you’ll find your self validating a lot of fields and there’s even a twist to the entire process that makes things interesting.

    previewDownload Thematic Frontend Profile Version 1.0

    Yet Another Thematic Childtheme

    For the purpose of this tutorial will create a new Thematic child theme. Most of the code will go into the functions.php file and the individual template pages. If you’re new to this just use the child theme that comes with Thematic.

    So let us have a look at what we’re building.

    WordPress Extra Profile Fields

    First of all, we want some extra profile fields in the back-end. We do this by simply adding input fields to the following two hooks: show_user_profile and edit_user_profile. We need both hooks because we want the users to be able to edit their own extra profile fields and we also want the admin to be able to edit other user’s extra profile fields.

    add_action( 'show_user_profile', 'show_extra_profile_fields', 10 );
add_action( 'edit_user_profile', 'show_extra_profile_fields', 10 );
 
function show_extra_profile_fields( $user ) { ?>
	<input type="text" name="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" />
<?php }

    In addition to this, we also need to save our data. This is done by hooking to personal_options_update and edit_user_profile_update. Both hooks are needed for the same reason two hooks were needed when adding the extra input fields.

    add_action( 'personal_options_update', 'save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_profile_fields' );
 
function save_extra_profile_fields( $user_id ) {
	if ( !current_user_can( 'edit_user', $user_id ) )
		return false;
	update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
}

    This is what your entire functions.php file should contain:

    <?php
 
//
//  Custom Child Theme Functions
//
 
 
add_action( 'show_user_profile', 'show_extra_profile_fields', 10 );
add_action( 'edit_user_profile', 'show_extra_profile_fields', 10 );
 
function show_extra_profile_fields( $user ) { ?>
 
	<h3><?php _e('Extra Profile Information', 'frontendprofile'); ?></h3>
 
	<table class="form-table">
 
		<tr>
			<th><label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label></th>
 
			<td>
				<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description"><?php _e('Please enter your Twitter account.', 'frontendprofile'); ?></span>
			</td>
		</tr>
 
		<tr>
			<th><label for="birth"><?php _e('Year of birth', 'frontendprofile'); ?></label></th>
 
			<td>
				<?php
 
				for($i=1900; $i<=2000; $i++)
					$years[]=$i;
 
				echo '<select name="birth">';
					echo '<option value="">' . __("Select Year", 'frontendprofile' ) . '</option>';
					foreach($years as $year){
						$selected = '';
						if( $year == get_the_author_meta( 'birth', $user->ID ) )
							$selected = 'selected="slelected"';
						echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>';
					}
				echo '</select>';
				?>
				<span class="description"><?php _e('Please select the year of your birth.', 'frontendprofile'); ?></span>
			</td>
		</tr>
 
		<tr>
			<th><label for="hobbies"><?php _e('What are your hobbies?', 'frontendprofile'); ?></label></th>
			<td>
			<?php $hobbies = get_the_author_meta( 'hobbies', $user->ID ); ?>
				<ul>
					<li><input value="videogames"           name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("videogames",           $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Video Games',           'frontendprofile'); ?></li>
					<li><input value="sabotagingcapitalism" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("sabotagingcapitalism", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Sabotaging Capitalism', 'frontendprofile'); ?></li>
					<li><input value="watchingtv"           name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("watchingtv",           $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Watching TV',           'frontendprofile'); ?></li>
				</ul>
			</td>			
		</tr>
 
		<tr>
			<th><label for="agree"><?php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?></label></th>
			<td>
			<?php $agree = get_the_author_meta( 'agree', $user->ID ); ?>
				<ul>
					<li><input value="yes" name="agree" <?php if ($agree == 'yes' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('Yes', 'frontendprofile'); ?></li>
					<li><input value="no"  name="agree" <?php if ($agree == 'no'  ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('No',  'frontendprofile'); ?></li>
				</ul>
			</td>			
		</tr>
 
	</table>
<?php }
 
add_action( 'personal_options_update', 'save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_profile_fields' );
 
function save_extra_profile_fields( $user_id ) {
 
	if ( !current_user_can( 'edit_user', $user_id ) )
		return false;
 
	update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
	update_usermeta( $user_id, 'birth', $_POST['birth'] );
	update_usermeta( $user_id, 'hobbies', $_POST['hobbies'] );
	update_usermeta( $user_id, 'agree', $_POST['agree'] );
}

    The templates

    Edit Profile Template

    All right. With this out of the way, we can start working on our awesome templates. Let’s start with the Edit Profile Template. First of all, we need a form with all the input fields (both the default ones and our extra fields).

    <form method="post" action="<?php the_permalink(); ?>">
 
	<p class="form-twitter">
		<label for="twitter">Twitter</label>
		<input name="twitter" type="text" value="<?php the_author_meta( 'twitter', $current_user->id ); ?>" />
	</p><!-- .form-twitter -->
 
	<p class="form-submit">
		<input name="updateuser" type="submit" id="updateuser" class="submit button" value="Update" />
		<?php wp_nonce_field( 'update-user' ) ?>
		<input name="action" type="hidden" id="action" value="update-user" />
	</p><!-- .form-submit -->
 
</form>

    Then, we need to update the user meta-data accordingly when needed. All can be summed up to the following snippet:

    <?php
	/* Get user info. */
	global $current_user;
	get_currentuserinfo();
 
	/* Load the registration file. */
	require_once( ABSPATH . WPINC . '/registration.php' );
 
	/* If profile was saved, update profile. */
	if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) {
		update_usermeta( $current_user->id, 'twitter', esc_attr( $_POST['twitter'] ) );	
	}
?>

    Notice that loading the registration file found in wp-includes is an absolute must.

    Here is the entire edit profile page template for your Thematic Child Theme.

    <?php
/**
 * Template Name: Edit Profile Page
 *
 */
 
	/* Get user info. */
	global $current_user, $wp_roles;
	get_currentuserinfo();
 
	/* Load the registration file. */
	require_once( ABSPATH . WPINC . '/registration.php' );
	require_once( ABSPATH . 'wp-admin/includes' . '/template.php' ); // this is only for the selected() function
 
	/* If profile was saved, update profile. */
	if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) {
 
		/* Update user password. */
		if ( !empty($_POST['pass1'] ) && !empty( $_POST['pass2'] ) ) {
			if ( $_POST['pass1'] == $_POST['pass2'] )
				wp_update_user( array( 'ID' => $current_user->id, 'user_pass' => esc_attr( $_POST['pass1'] ) ) );
			else
				$error = __('The passwords you entered do not match.  Your password was not updated.', 'frontendprofile');
		}
 
		/* Update user information. */
 
		update_usermeta( $current_user->id, 'first_name', esc_attr( $_POST['first_name'] ) );
 
		update_usermeta( $current_user->id, 'last_name', esc_attr( $_POST['last_name'] ) );
 
		if ( !empty( $_POST['nickname'] ) )
			update_usermeta( $current_user->id, 'nickname', esc_attr( $_POST['nickname'] ) );
 
		update_usermeta( $current_user->id, 'display_name', esc_attr( $_POST['display_name'] ) );
 
		if ( !empty( $_POST['email'] ) )
			update_usermeta( $current_user->id, 'user_email', esc_attr( $_POST['email'] ) );
 
		if(strpos($_POST['website'], 'ttp://') || empty( $_POST['website'] ))
			update_usermeta( $current_user->id, 'user_url', esc_attr( $_POST['website'] ) );
		else
			update_usermeta( $current_user->id, 'user_url', 'http://' . esc_attr( $_POST['website'] ) );
 
		update_usermeta( $current_user->id, 'aim', esc_attr( $_POST['aim'] ) );
 
		update_usermeta( $current_user->id, 'yim', esc_attr( $_POST['yim'] ) );
 
		update_usermeta( $current_user->id, 'jabber', esc_attr( $_POST['jabber'] ) );
 
		update_usermeta( $current_user->id, 'description', esc_attr( $_POST['description'] ) );
 
		// Extra Profile Information
 
		update_usermeta( $current_user->id, 'twitter', esc_attr( $_POST['twitter'] ) );	
 
		update_usermeta( $current_user->id, 'birth', esc_attr( $_POST['birth'] ) );	
 
		update_usermeta( $current_user->id, 'hobbies', $_POST['hobbies'] );	
 
		update_usermeta( $current_user->id, 'agree', esc_attr( $_POST['agree'] ) );	
 
		/* Redirect so the page will show updated info. */
		if ( !$error ) {
			wp_redirect( get_permalink() );
			exit;
		}
	}
 
    // calling the header.php
    get_header();
 
    // action hook for placing content above #container
    thematic_abovecontainer();
 
?>
 
	<div id="container">
		<div id="content">
 
            <?php
 
            // calling the widget area 'page-top'
            get_sidebar('page-top');
 
            the_post();
 
            ?>
 
			<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>">
 
                <?php 
 
                // creating the post header
                thematic_postheader();
 
                ?>
 
				<div class="entry-content">
 
                    <?php
 
                    the_content();
 
                    wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number');
 
                    edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>
 
				</div>
			</div><!-- .post -->
 
<!-- EDIT PROFILE STARTS HERE -->
 
			<?php if ( !is_user_logged_in() ) : ?>
 
				<p class="warning">
					<?php _e('You must be logged in to edit your profile.', 'frontendprofile'); ?>
				</p><!-- .warning -->
 
			<?php else : ?>
 
				<?php if ( $error ) echo '<p class="error">' . $error . '</p>'; ?>
 
				<form method="post" id="edituser" class="user-forms" action="<?php the_permalink(); ?>">
 
				<strong>Name</strong>
 
				<p class="first_name">
					<label for="first_name"><?php _e('First Name', 'frontendprofile'); ?></label>
					<input class="text-input" name="first_name" type="text" id="first_name" value="<?php the_author_meta( 'first_name', $current_user->id ); ?>" />
				</p><!-- .first_name -->
 
				<p class="last_name">
					<label for="last_name"><?php _e('Last Name', 'frontendprofile'); ?></label>
					<input class="text-input" name="last_name" type="text" id="last_name" value="<?php the_author_meta( 'last_name', $current_user->id ); ?>" />
				</p><!-- .last_name -->
 
				<p class="nickname">
					<label for="nickname"><?php _e('Nickname (required)', 'frontendprofile'); ?></label>
					<input class="text-input" name="nickname" type="text" id="nickname" value="<?php the_author_meta( 'nickname', $current_user->id ); ?>" />
				</p><!-- .nickname -->
 
				<p class="display_name">
					<label for="display_name"><?php _e('Display Name', 'frontendprofile'); ?></label>
					<select name="display_name" id="display_name">
					<?php
						$public_display = array();
						$public_display['display_nickname']  = $current_user->nickname;
						$public_display['display_username']  = $current_user->user_login;
						if ( !empty($current_user->first_name) )
							$public_display['display_firstname'] = $current_user->first_name;
						if ( !empty($current_user->last_name) )
							$public_display['display_lastname'] = $current_user->last_name;
						if ( !empty($current_user->first_name) && !empty($current_user->last_name) ) {
							$public_display['display_firstlast'] = $current_user->first_name . ' ' . $current_user->last_name;
							$public_display['display_lastfirst'] = $current_user->last_name . ' ' . $current_user->first_name;
						}
						if ( !in_array( $current_user->display_name, $public_display ) )// Only add this if it isn't duplicated elsewhere
							$public_display = array( 'display_displayname' => $current_user->display_name ) + $public_display;
						$public_display = array_map( 'trim', $public_display );
						foreach ( $public_display as $id => $item ) {
					?>
						<option id="<?php echo $id; ?>" value="<?php echo esc_attr($item); ?>"<?php selected( $current_user->display_name, $item ); ?>><?php echo $item; ?></option>
					<?php
						}
					?>
					</select>
				</p><!-- .display_name -->
 
				<strong>Contact Info</strong>
 
				<p class="form-email">
					<label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label>
					<input class="text-input" name="email" type="text" id="email" value="<?php the_author_meta( 'user_email', $current_user->id ); ?>" />
				</p><!-- .form-email -->
 
				<p class="form-website">
					<label for="website"><?php _e('Website', 'frontendprofile'); ?></label>
					<input class="text-input" name="website" type="text" id="website" value="<?php the_author_meta( 'user_url', $current_user->id ); ?>" />
				</p><!-- .form-website -->
 
				<p class="form-aim">
					<label for="aim"><?php _e('AIM', 'frontendprofile'); ?></label>
					<input class="text-input" name="aim" type="text" id="aim" value="<?php the_author_meta( 'aim', $current_user->id ); ?>" />
				</p><!-- .form-aim -->
 
				<p class="form-yim">
					<label for="yim"><?php _e('Yahoo IM', 'frontendprofile'); ?></label>
					<input class="text-input" name="yim" type="text" id="yim" value="<?php the_author_meta( 'yim', $current_user->id ); ?>" />
				</p><!-- .form-yim -->
 
				<p class="form-jabber">
					<label for="jabber"><?php _e('Jabber / Google Talk', 'frontendprofile'); ?></label>
					<input class="text-input" name="jabber" type="text" id="jabber" value="<?php the_author_meta( 'jabber', $current_user->id ); ?>" />
				</p><!-- .form-jabber -->
 
				<strong>About Yourself</strong>
 
				<p class="form-description">
					<label for="description"><?php _e('Biographical Info', 'frontendprofile'); ?></label>
					<textarea class="text-input" name="description" id="description" rows="5" cols="30"><?php echo the_author_meta( 'description', $current_user->id ); ?></textarea>
				</p><!-- .form-description -->
 
				<p class="form-password">
					<label for="pass1"><?php _e('New Password', 'frontendprofile'); ?> </label>
					<input class="text-input" name="pass1" type="password" id="pass1" />
				</p><!-- .form-password -->
 
				<p class="form-password">
					<label for="pass2"><?php _e('Repeat Password', 'frontendprofile'); ?></label>
					<input class="text-input" name="pass2" type="password" id="pass2" />
				</p><!-- .form-password -->
 
				<strong>Extra Profile Information</strong>
 
				<p class="form-twitter">
					<label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label>
					<input class="text-input" name="twitter" type="text" id="twitter" value="<?php the_author_meta( 'twitter', $current_user->id ); ?>" />
				</p><!-- .form-twitter -->
 
				<p class="form-birth">
					<label for="birth"><?php _e('Year of birth', 'frontendprofile'); ?></label>
					<?php
						for($i=1900; $i<=2000; $i++)
							$years[]=$i;
 
						echo '<select name="birth">';
							echo '<option value="">' . __("Select Year", 'frontendprofile' ) . '</option>';
							foreach($years as $year){
								$the_year = get_the_author_meta( 'birth', $current_user->id );
								if($year == $the_year ) $selected = 'selected="slelected"';
								else $selected = '';
								echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>';
							}
						echo '</select>';
					?>
				</p><!-- .form-birth -->
 
				<p class="form-hobbies">
					<label for="hobbies"><?php _e('What are your hobbies?', 'frontendprofile'); ?></label>
					<?php
						$hobbies = get_the_author_meta( 'hobbies', $current_user->id );
					?>
					<ul class="hobbies-type-list">
						<li><input value="videogames"           name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("videogames",           $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Video Games',           'frontendprofile'); ?></li>
						<li><input value="sabotagingcapitalism" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("sabotagingcapitalism", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Sabotaging Capitalism', 'frontendprofile'); ?></li>
						<li><input value="watchingtv"           name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("watchingtv",           $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Watching TV',           'frontendprofile'); ?></li>
					</ul>
				</p><!-- .form-hobbies -->
 
				<p class="form-agree">
					<label for="agree"><?php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?></label>
					<?php $agree = get_the_author_meta( 'agree', $current_user->ID ); ?>
					<ul>
						<li><input value="yes" name="agree" <?php if ($agree == 'yes' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('Yes', 'frontendprofile'); ?></li>
						<li><input value="no"  name="agree" <?php if ($agree == 'no'  ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('No',  'frontendprofile'); ?></li>
					</ul>
				</p><!-- .form-agree -->
 
				<p class="form-submit">
					<?php echo $referer; ?>
					<input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('Update', 'frontendprofile'); ?>" />
					<?php wp_nonce_field( 'update-user' ) ?>
					<input name="action" type="hidden" id="action" value="update-user" />
				</p><!-- .form-submit -->
 
				</form><!-- #edituser -->

			<?php endif; ?>
 
<!-- EDIT PROFILE ENDS HERE -->
 
        <?php
 
        if ( get_post_custom_values('comments') ) 
            thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages!
 
        // calling the widget area 'page-bottom'
        get_sidebar('page-bottom');
 
        ?>
 
		</div><!-- #content -->
	</div><!-- #container -->

<?php 
 
    // action hook for placing content below #container
    thematic_belowcontainer();
 
    // calling the standard sidebar 
    thematic_sidebar();
 
    // calling footer.php
    get_footer();
 
?>

    User Registration Page Template

    Next, let’s take a look at the Register Template. Similar to the Edit Profile Template, we need a form with all our input fields.

    <?php if ( $error ) : ?>
	<p class="error">
		<?php echo $error; ?>
	</p><!-- .error -->
<?php endif; ?>
 
<form method="post" id="adduser" class="user-forms" action="http://<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
 
	<p class="form-username">
		<label for="user_name"><?php _e('Username (required)', 'frontendprofile'); ?></label>
		<input name="user_name" type="text" value="<?php if ( $error ) echo wp_specialchars( $_POST['user_name'], 1 ); ?>" />
	</p><!-- .form-username -->
 
	<p class="form-email">
		<label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label>
		<input name="email" type="text" value="<?php if ( $error ) echo wp_specialchars( $_POST['email'], 1 ); ?>" />
	</p><!-- .form-email -->
 
	<p class="form-twitter">
		<label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label>
		<input name="twitter" type="text" value="<?php if ( $error ) echo wp_specialchars( $_POST['twitter'], 1 ); ?>" />
	</p><!-- .form-twitter -->
 
	<p class="form-submit">
		<input name="adduser" type="submit" id="addusersub" class="submit button" value="<?php if ( current_user_can( 'create_users' ) ) _e('Add User', 'frontendprofile'); else _e('Register', 'frontendprofile'); ?>" />
		<?php wp_nonce_field( 'add-user' ) ?>
		<input name="action" type="hidden" id="action" value="adduser" />
	</p><!-- .form-submit -->
</form><!-- #adduser -->

    Then, when a registration actually occurs, we need to:

    • create a user with all the default fields of meta-data;
    • separately add the extra meta-data fields;
    • mail the password to the new user.

    Reduced to a bare minimum, this is how the code looks like:

    <?php
/* Load registration file. */
require_once( ABSPATH . WPINC . '/registration.php' );
 
/* If user registered, input info. */
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'adduser' ) {
	$user_pass = wp_generate_password();
	$userdata = array(
		'user_pass' => $user_pass,
		'user_login' => esc_attr( $_POST['user_name'] ),
		'user_email' => esc_attr( $_POST['email'] ),
	);
 
	if ( !$userdata['user_login'] )
		$error = __('A username is required for registration.', 'frontendprofile');
	elseif ( username_exists($userdata['user_login']) )
		$error = __('Sorry, that username already exists!', 'frontendprofile');
	elseif ( !is_email($userdata['user_email'], true) )
		$error = __('You must enter a valid email address.', 'frontendprofile');
	elseif ( email_exists($userdata['user_email']) )
		$error = __('Sorry, that email address is already used!', 'frontendprofile');
 
	else{
		$new_user = wp_insert_user( $userdata );
		update_usermeta( $new_user, 'twitter', esc_attr( $_POST['twitter']  ) );
		wp_new_user_notification($new_user, $user_pass);
	}
}
 
?>

    Notice the included error reporting features.

    Another thing that we should mention is the update_usermeta function. We need to call it because wp_insert_user function doesn’t take into account extra fields.

    Here is the entire registration page template for your Thematic Child Theme.

    <?php
/**
 * Template Name: Register Page
 *
 */
 
/* Load registration file. */
require_once( ABSPATH . WPINC . '/registration.php' );
 
/* Check if users can register. */
$registration = get_option( 'users_can_register' );
 
/* If user registered, input info. */
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'adduser' ) {
	$user_pass = wp_generate_password();
	$userdata = array(
		'user_pass' => $user_pass,
		'user_login' => esc_attr( $_POST['user_name'] ),
		'first_name' => esc_attr( $_POST['first_name'] ),
		'last_name' => esc_attr( $_POST['last_name'] ),
		'nickname' => esc_attr( $_POST['nickname'] ),
		'user_email' => esc_attr( $_POST['email'] ),
		'user_url' => esc_attr( $_POST['website'] ),
		'aim' => esc_attr( $_POST['aim'] ),
		'yim' => esc_attr( $_POST['yim'] ),
		'jabber' => esc_attr( $_POST['jabber'] ),
		'description' => esc_attr( $_POST['description'] ),
		'role' => get_option( 'default_role' ),
	);
 
	if ( !$userdata['user_login'] )
		$error = __('A username is required for registration.', 'frontendprofile');
	elseif ( username_exists($userdata['user_login']) )
		$error = __('Sorry, that username already exists!', 'frontendprofile');
 
	elseif ( !is_email($userdata['user_email'], true) )
		$error = __('You must enter a valid email address.', 'frontendprofile');
	elseif ( email_exists($userdata['user_email']) )
		$error = __('Sorry, that email address is already used!', 'frontendprofile');
 
	else{
		$new_user = wp_insert_user( $userdata );
		wp_new_user_notification($new_user, $user_pass);
 
		update_usermeta( $new_user, 'twitter', esc_attr( $_POST['twitter']  ) );
		update_usermeta( $new_user, 'birth',   esc_attr( $_POST['birth']    ) );
		update_usermeta( $new_user, 'hobbies',           $_POST['hobbies']    );
		update_usermeta( $new_user, 'agree',   esc_attr( $_POST['agree']    ) );
	}
 
}
 
 
 
    // calling the header.php
    get_header();
 
    // action hook for placing content above #container
    thematic_abovecontainer();
 
?>
 
	<div id="container">
		<div id="content">
 
            <?php
 
            // calling the widget area 'page-top'
            get_sidebar('page-top');
 
            the_post();
 
            ?>
 
			<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>">
 
                <?php 
 
                // creating the post header
                thematic_postheader();
 
                ?>
 
				<div class="entry-content">
 
                    <?php
 
                    the_content();
 
                    wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number');
 
                    edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>
 
				</div>
			</div><!-- .post -->
 
<!-- REGISTER FORM STARTS HERE -->
 
		<?php if ( is_user_logged_in() && !current_user_can( 'create_users' ) ) : ?>
 
			<p class="log-in-out alert">
			<?php printf( __('You are logged in as <a href="%1$s" title="%2$s">%2$s</a>.  You don\'t need another account.', 'frontendprofile'), get_author_posts_url( $curauth->ID ), $user_identity ); ?> <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="<?php _e('Log out of this account', 'frontendprofile'); ?>"><?php _e('Logout &raquo;', 'frontendprofile'); ?></a>
			</p><!-- .log-in-out .alert -->
 
		<?php elseif ( $new_user ) : ?>
 
			<p class="alert">
			<?php
				if ( current_user_can( 'create_users' ) )
					printf( __('A user account for %1$s has been created.', 'frontendprofile'), $_POST['user-name'] );
				else 
					printf( __('Thank you for registering, %1$s.', 'frontendprofile'), $_POST['user-name'] );
					printf( __('<br/>Please check your email address. That\'s where you\'ll recieve your login password.<br/> (It might go into your spam folder)', 'frontendprofile') );
			?>
			</p><!-- .alert -->
 
		<?php else : ?>
 
			<?php if ( $error ) : ?>
				<p class="error">
					<?php echo $error; ?>
				</p><!-- .error -->
			<?php endif; ?>
 
			<?php if ( current_user_can( 'create_users' ) && $registration ) : ?>
				<p class="alert">
					<?php _e('Users can register themselves or you can manually create users here.', 'frontendprofile'); ?>
				</p><!-- .alert -->
			<?php elseif ( current_user_can( 'create_users' ) ) : ?>
				<p class="alert">
					<?php _e('Users cannot currently register themselves, but you can manually create users here.', 'frontendprofile'); ?>
				</p><!-- .alert -->
			<?php endif; ?>
 
			<?php if ( $registration || current_user_can( 'create_users' ) ) : ?>
 
			<form method="post" id="adduser" class="user-forms" action="http://<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
 
 
				<strong>Name</strong>
 
				<p class="form-username">
					<label for="user_name"><?php _e('Username (required)', 'frontendprofile'); ?></label>
					<input class="text-input" name="user_name" type="text" id="user_name" value="<?php if ( $error ) echo wp_specialchars( $_POST['user_name'], 1 ); ?>" />
				</p><!-- .form-username -->
 
				<p class="first_name">
					<label for="first_name"><?php _e('First Name', 'frontendprofile'); ?></label>
					<input class="text-input" name="first_name" type="text" id="first_name" value="<?php if ( $error ) echo wp_specialchars( $_POST['first_name'], 1 ); ?>" />
				</p><!-- .first_name -->
 
				<p class="last_name">
					<label for="last_name"><?php _e('Last Name', 'frontendprofile'); ?></label>
					<input class="text-input" name="last_name" type="text" id="last_name" value="<?php if ( $error ) echo wp_specialchars( $_POST['last_name'], 1 ); ?>" />
				</p><!-- .last_name -->
 
				<p class="nickname">
					<label for="nickname"><?php _e('Nickname', 'frontendprofile'); ?></label>
					<input class="text-input" name="nickname" type="text" id="nickname" value="<?php if ( $error ) echo wp_specialchars( $_POST['nickname'], 1 ); ?>" />
				</p><!-- .nickname -->
 
				<strong>Contact Info</strong>
 
				<p class="form-email">
					<label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label>
					<input class="text-input" name="email" type="text" id="email" value="<?php if ( $error ) echo wp_specialchars( $_POST['email'], 1 ); ?>" />
				</p><!-- .form-email -->
 
				<p class="form-website">
					<label for="website"><?php _e('Website', 'frontendprofile'); ?></label>
					<input class="text-input" name="website" type="text" id="website" value="<?php if ( $error ) echo wp_specialchars( $_POST['website'], 1 ); ?>" />
				</p><!-- .form-website -->
 
				<p class="form-aim">
					<label for="aim"><?php _e('AIM', 'frontendprofile'); ?></label>
					<input class="text-input" name="aim" type="text" id="aim" value="<?php if ( $error ) echo wp_specialchars( $_POST['aim'], 1 ); ?>" />
				</p><!-- .form-aim -->
 
				<p class="form-yim">
					<label for="yim"><?php _e('Yahoo IM', 'frontendprofile'); ?></label>
					<input class="text-input" name="yim" type="text" id="yim" value="<?php if ( $error ) echo wp_specialchars( $_POST['yim'], 1 ); ?>" />
				</p><!-- .form-yim -->
 
				<p class="form-jabber">
					<label for="jabber"><?php _e('Jabber / Google Talk', 'frontendprofile'); ?></label>
					<input class="text-input" name="jabber" type="text" id="jabber" value="<?php if ( $error ) echo wp_specialchars( $_POST['jabber'], 1 ); ?>" />
				</p><!-- .form-jabber -->
 
				<strong>About Yourself</strong>
 
				<p class="form-description">
					<label for="description"><?php _e('Biographical Info', 'frontendprofile'); ?></label>
					<textarea class="text-input" name="description" id="description" rows="5" cols="30"><?php if ( $error ) echo wp_specialchars( $_POST['description'], 1 ); ?></textarea>
				</p><!-- .form-description -->
 
				<strong>Extra Profile Information</strong>
 
				<p class="form-twitter">
					<label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label>
					<input class="text-input" name="twitter" type="text" id="twitter" value="<?php if ( $error ) echo wp_specialchars( $_POST['twitter'], 1 ); ?>" />
				</p><!-- .form-twitter -->
 
				<p class="form-birth">
					<label for="birth"><?php _e('Year of birth', 'frontendprofile'); ?></label>
					<?php
						for($i=1900; $i<=2000; $i++)
							$years[]=$i;
 
						echo '<select name="birth">';
							echo '<option value="">' . __("Select Year", 'frontendprofile' ) . '</option>';
							foreach($years as $year){
								if ($error && $year==$_POST['birth']) $selected = 'selected="slelected"';
								else $selected = '';
								echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>';
							}
						echo '</select>';
					?>
				</p><!-- .form-birth -->
 
				<p class="form-hobbies">
					<label for="hobbies"><?php _e('What are your hobbies?', 'frontendprofile'); ?></label>
					<?php
						$hobbies = get_the_author_meta( 'hobbies', $current_user->id );
					?>
					<ul class="hobbies-type-list">
						<li><input value="videogames"           name="hobbies[]" <?php if (is_array($_POST['hobbies'])) { if ($error && in_array("videogames",           $_POST['hobbies'])) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Video Games',           'frontendprofile'); ?></li>
						<li><input value="sabotagingcapitalism" name="hobbies[]" <?php if (is_array($_POST['hobbies'])) { if ($error && in_array("sabotagingcapitalism", $_POST['hobbies'])) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Sabotaging Capitalism', 'frontendprofile'); ?></li>
						<li><input value="watchingtv"           name="hobbies[]" <?php if (is_array($_POST['hobbies'])) { if ($error && in_array("watchingtv",           $_POST['hobbies'])) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Watching TV',           'frontendprofile'); ?></li>
					</ul>
				</p><!-- .form-hobbies -->
 
				<p class="form-agree">
					<label for="agree"><?php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?></label>
					<?php $agree = get_the_author_meta( 'agree', $current_user->ID ); ?>
					<ul>
						<li><input value="yes" name="agree" <?php if ($_POST['agree'] == 'yes' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('Yes', 'frontendprofile'); ?></li>
						<li><input value="no"  name="agree" <?php if ($_POST['agree'] == 'no'  ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('No',  'frontendprofile'); ?></li>
					</ul>
				</p><!-- .form-agree -->
 
				<p class="form-submit">
					<?php echo $referer; ?>
					<input name="adduser" type="submit" id="addusersub" class="submit button" value="<?php if ( current_user_can( 'create_users' ) ) _e('Add User', 'frontendprofile'); else _e('Register', 'frontendprofile'); ?>" />
					<?php wp_nonce_field( 'add-user' ) ?>
					<input name="action" type="hidden" id="action" value="adduser" />
				</p><!-- .form-submit -->
 
			</form><!-- #adduser -->

			<?php endif; ?>
 
		<?php endif; ?>
 
<!-- REGISTER FORM ENDS HERE -->
 
        <?php
 
        if ( get_post_custom_values('comments') ) 
            thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages!
 
        // calling the widget area 'page-bottom'
        get_sidebar('page-bottom');
 
        ?>
 
		</div><!-- #content -->
	</div><!-- #container -->

<?php 
 
    // action hook for placing content below #container
    thematic_belowcontainer();
 
    // calling the standard sidebar 
    thematic_sidebar();
 
    // calling footer.php
    get_footer();

    User Log-In Page Template

    The third and last template is the Log-In Template. Much of it was inspired by Justin Tadlock’s work and it basically consists of the form with the username and password fields and the wp_signon() function at the top that actually does all the dirty work.

    <?php
/**
 * Template Name: Log In Page
 *
 */
 
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'log-in' ) :
 
	global $error;
	$login = wp_login( $_POST['user-name'], $_POST['password'] );
	$login = wp_signon( array( 'user_login' => $_POST['user-name'], 'user_password' => $_POST['password'], 'remember' => $_POST['remember-me'] ), false );
 
endif;
 
    // calling the header.php
    get_header();
 
    // action hook for placing content above #container
    thematic_abovecontainer();
 
?>
 
	<div id="container">
		<div id="content">
 
            <?php
 
            // calling the widget area 'page-top'
            get_sidebar('page-top');
 
            the_post();
 
            ?>
 
			<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>">
 
                <?php 
 
                // creating the post header
                thematic_postheader();
 
                ?>
 
				<div class="entry-content">
 
                    <?php
 
                    the_content();
 
                    wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number');
 
                    edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>
 
				</div>
			</div><!-- .post -->
 
<!-- LOGIN STARTS HERE -->
 
	<?php if ( is_user_logged_in() ) : // Already logged in ?>
 
		<?php global $user_ID; $login = get_userdata( $user_ID ); ?>
 
		<p class="alert">
			<?php printf( __('You are currently logged in as <a href="%1$s" title="%2$s">%2$s</a>.', 'frontendprofile'), get_author_posts_url( $login->ID ), $login->display_name ); ?> <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="<?php _e('Log out of this account', 'frontendprofile'); ?>"><?php _e('Log out &raquo;', 'frontendprofile'); ?></a>
		</p><!-- .alert -->
 
	<?php elseif ( $login->ID ) : // Successful login ?>
 
		<?php $login = get_userdata( $login->ID ); ?>
 
		<p class="alert">
 
				<?php printf( __('You have successfully logged in as <a href="%1$s" title="%2$s">%2$s</a>.', 'frontendprofile'), get_author_posts_url( $login->ID ), $login->display_name ); ?>
 
		</p><!-- .alert -->
 
	<?php else : // Not logged in ?>
 
		<?php if ( $error ) : ?>
			<p class="error">
				<?php echo $error; ?>
			</p><!-- .error -->
		<?php endif; ?>
 
		<form action="<?php the_permalink(); ?>" method="post" class="sign-in">
			<p class="login-form-username">
				<label for="user-name"><?php _e('Username', 'frontendprofile'); ?></label>
				<input type="text" name="user-name" id="user-name" class="text-input" value="<?php echo wp_specialchars( $_POST['user-name'], 1 ); ?>" />
			</p><!-- .form-username -->
 
			<p class="login-form-password">
				<label for="password"><?php _e('Password', 'frontendprofile'); ?></label>
				<input type="password" name="password" id="password" class="text-input" />
			</p><!-- .form-password -->
 
			<p class="login-form-submit">
				<input type="submit" name="submit" class="submit button" value="<?php _e('Log in', 'frontendprofile'); ?>" />
				<input class="remember-me checkbox" name="remember-me" id="remember-me" type="checkbox" checked="checked" value="forever" />
				<label for="remember-me"><?php _e('Remember me', 'frontendprofile'); ?></label>
				<input type="hidden" name="action" value="log-in" />
			</p><!-- .form-submit -->
 
			<p>
				<a href="<?php echo get_option('siteurl');  ?>/wp-login.php?action=lostpassword"><?php _e('Lost password?', 'frontendprofile'); ?></a>
			</p>
		</form><!-- .sign-in -->
 
	<?php endif; ?>
 
<!-- LOGIN ENDS HERE -->
 
        <?php
 
        if ( get_post_custom_values('comments') ) 
            thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages!
 
        // calling the widget area 'page-bottom'
        get_sidebar('page-bottom');
 
        ?>
 
		</div><!-- #content -->
	</div><!-- #container -->

<?php 
 
    // action hook for placing content below #container
    thematic_belowcontainer();
 
    // calling the standard sidebar 
    thematic_sidebar();
 
    // calling footer.php
    get_footer();

    Conclusions

    WordPress dose allow you to add any kind of fields to your user profile. It’s not very developer friendly and there’s a lot of validations that we need to do but it is possible and that’s all that matters if you ask me.

    We need an UI in the core of WordPress for this, but probably we won’t have anything like this for quite a while.

    The funny thing is that BuddyPress has a plugin that let’s you create extra user fields and displays them in the front end, but not in the backend. And we also have a plugin that is called Cimy User Extra Fields that creates the extra fields for the backend but it’s still more a developer’s tool and not that easy to use for the standard user. But there isn’t any real integration so that’s the bad thing.

    The way this should work in an ideal word would be for us to have an UI in the backend and page templates that come with the default WordPress theme so developers can build on top of that (similar to the comments form).

    Extra Struff

    You can follow the tutorial to create your Extra User Fields or you can just preview / download the child theme directly and then make it fit your needs.

    previewDownload Thematic Frontend Profile Version 1.0

    Credits

    http://dquinn.net
    http://blog.ftwr.co.uk
    http://rubenwoudsma.nl
    http://justintadlock.com

    Related posts:

    1. 10 design tips for your custom wordpress theme built with thematic
    2. WordPress as a social platform
    3. Early Morning Child Theme

    ]]>     http://www.cozmoslabs.com/2010/05/31/wordpress-user-registration-template-and-custom-user-profile-fields/feed/ 10     Thematic Tabbed Widgets http://www.cozmoslabs.com/2010/05/02/thematic-tabbed-widgets/ http://www.cozmoslabs.com/2010/05/02/thematic-tabbed-widgets/#comments Sun, 02 May 2010 19:19:26 +0000 Cristian http://www.cozmoslabs.com/?p=1014
  • Green anyone? Try Commune – Thematic Child Theme!
  • Early Morning Child Theme
  • Add “Featured Posts” to your Thematic child theme
    • ]]>

    Tabbed widget areas for Thematic


    Tabbed widgets for WordPress themes have been around since WordPress it self. They are a perfect way to save on vertical space and add a bit of interaction with the users.

    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!

    preview
    The javascript for this short tutorial was adapted from TutsPlus premium tutorials.

    Related posts:

    1. Green anyone? Try Commune – Thematic Child Theme!
    2. Early Morning Child Theme
    3. Add “Featured Posts” to your Thematic child theme

    ]]>     http://www.cozmoslabs.com/2010/05/02/thematic-tabbed-widgets/feed/ 14     Exclude posts from WordPress Navigation in Thematic http://www.cozmoslabs.com/2010/02/10/exclude-posts-from-wordpress-navigation-in-thematic/ http://www.cozmoslabs.com/2010/02/10/exclude-posts-from-wordpress-navigation-in-thematic/#comments Wed, 10 Feb 2010 11:01:45 +0000 Cristian http://www.cozmoslabs.com/?p=961
  • Add “Featured Posts” to your Thematic child theme
  • WP Greet Box, my Design and Thematic – The Good, the Bad and the Ugly
  • Quickly add a Category DropDown to Thematic 0.9
    • ]]>     Let’s say you have a certain category that you want to be displayed some place other than on your main blog page. No big deal, you just exclude your special category from the main index loop.

    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

    ]]>     http://www.cozmoslabs.com/2010/02/10/exclude-posts-from-wordpress-navigation-in-thematic/feed/ 6     Create an “About the author” area for Thematic http://www.cozmoslabs.com/2009/10/28/create-an-about-the-author-area-for-thematic/ http://www.cozmoslabs.com/2009/10/28/create-an-about-the-author-area-for-thematic/#comments Wed, 28 Oct 2009 20:57:14 +0000 Cristian http://www.cozmoslabs.com/?p=716
  • Add “Featured Posts” to your Thematic child theme
  • How To Create a WordPress Theme – a tutorial series by Ian Stewart
  • Replacing the Thematic Menu with a DropDown List of Categories
    • ]]>     author_page

    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 :) .

    info_on_author_page

    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.

    previewDownload Author Child Theme Version 1.0

    Related posts:

    1. Add “Featured Posts” to your Thematic child theme
    2. How To Create a WordPress Theme – a tutorial series by Ian Stewart
    3. Replacing the Thematic Menu with a DropDown List of Categories

    ]]>     http://www.cozmoslabs.com/2009/10/28/create-an-about-the-author-area-for-thematic/feed/ 6     Awesome Thematic Templates http://www.cozmoslabs.com/2009/07/31/awesome-thematic-templates/ http://www.cozmoslabs.com/2009/07/31/awesome-thematic-templates/#comments Fri, 31 Jul 2009 12:19:13 +0000 Cristian http://www.cozmoslabs.com/?p=650 Did you ever think about page templates for user registration and log in? Well, we have. Justin’s Hybrid has them, Thematic doesn’t. So we’ve taken the Hybrid templates, adapted them for Thematic, and guess what? They’re working like a charm. Just upload them to your child theme directory and enjoy.

    Get’em while they’re hot!

    Download Awesome Templates Version 0.1

    No related posts.

    ]]>     http://www.cozmoslabs.com/2009/07/31/awesome-thematic-templates/feed/ 3     Early Morning Child Theme http://www.cozmoslabs.com/2009/07/20/early-morning-child-theme/ http://www.cozmoslabs.com/2009/07/20/early-morning-child-theme/#comments Mon, 20 Jul 2009 10:54:25 +0000 Cristian http://www.cozmoslabs.com/?p=620
  • Green anyone? Try Commune – Thematic Child Theme!
  • Street WordPress Theme
  • Charisma, Free Genesis Child Theme
    • ]]>     This elegant WordPress theme was inspired by the colors of the early morning as I see them from my window. It’s light, elegant and pleasantly surprising.

    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

    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.

    previewDownload Early Morning Version 0.2
    Inspired by: Adrian Pelletier

    Related posts:

    1. Green anyone? Try Commune – Thematic Child Theme!
    2. Street WordPress Theme
    3. Charisma, Free Genesis Child Theme

    ]]>     http://www.cozmoslabs.com/2009/07/20/early-morning-child-theme/feed/ 109     Add “Featured Posts” to your Thematic child theme http://www.cozmoslabs.com/2009/06/26/thematic-featured-posts/ http://www.cozmoslabs.com/2009/06/26/thematic-featured-posts/#comments Fri, 26 Jun 2009 13:35:54 +0000 Cristian http://www.cozmoslabs.com/?p=557
  • Street WordPress Theme
  • Exclude posts from WordPress Navigation in Thematic
  • Installing WordPress Child Themes and Customizing the Byty Theme
    • ]]>     Featured Posts for 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’.

    preview thematic child theme

    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

    ]]>     http://www.cozmoslabs.com/2009/06/26/thematic-featured-posts/feed/ 24     Street WordPress Theme http://www.cozmoslabs.com/2009/06/02/street-wordpress-theme/ http://www.cozmoslabs.com/2009/06/02/street-wordpress-theme/#comments Tue, 02 Jun 2009 16:45:00 +0000 Cristian http://www.cozmoslabs.com/?p=500
  • Add “Featured Posts” to your Thematic child theme
  • Installing WordPress Child Themes and Customizing the Byty Theme
  • Byty the Free Child Theme – Built on Thematic
    • ]]>     Street is something that was created from a spark of inspiration, something that I felt should look like this. This wasn’t thought out nor planed.

    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”.

    preview thematic child theme Download Street Child Theme for Thematic Version 0.1

    street_theme

    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

    ]]>     http://www.cozmoslabs.com/2009/06/02/street-wordpress-theme/feed/ 77     Add a header image to Thematic – the easy way http://www.cozmoslabs.com/2009/05/28/add-a-header-image-to-thematic-the-easy-way/ http://www.cozmoslabs.com/2009/05/28/add-a-header-image-to-thematic-the-easy-way/#comments Thu, 28 May 2009 21:48:48 +0000 Cristian http://www.cozmoslabs.com/?p=471
  • Add a search box to the thematic menu
  • Add “Featured Posts” to your Thematic child theme
  • Thematic Tabbed Widgets
    • ]]>     With the various theme hooks and theme filters, now it’s easier then ever to change the Thematic header with your own logo or custom banner design.

    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

    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

    ]]>     http://www.cozmoslabs.com/2009/05/28/add-a-header-image-to-thematic-the-easy-way/feed/ 148     Commune Child Theme – Update http://www.cozmoslabs.com/2009/05/04/commune-child-theme-update/ http://www.cozmoslabs.com/2009/05/04/commune-child-theme-update/#comments Mon, 04 May 2009 13:30:43 +0000 Cristian http://www.cozmoslabs.com/?p=403
  • Green anyone? Try Commune – Thematic Child Theme!
  • Byty the Free Child Theme – Built on Thematic
  • Cozmoslabs forums
    • ]]>     I’ve updated Commune Child Theme to version 0.2. This is just a bug fix release, most of them css related.

    Thanks to everyone that submitted bugs through the comment form on the original Commune page.

    Related posts:

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

    ]]>     http://www.cozmoslabs.com/2009/05/04/commune-child-theme-update/feed/ 8