Theming Process

I just finished building a WordPress website for a local artist in Portland. Instead of just adding another screenshot to my portfolio, I thought I’d make a video showing my process and how the site will actually be used by the client.

YouTube Preview Image

The framework I used to build this site was Thematic, using my child theme with the options panel. The Slickr Gallery plug-in was used for flickr integration, cForms for the contact form, and Page Excerpts to create editable areas on the home page.

Code

Since I’ve posted this screencast, some people have asked about the code. Here it is.

The code for theme-functions.php:

<?php

function childtheme_favicon() { ?>
<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico" />
<?php }

add_action('wp_head', 'childtheme_favicon');


/* Defining Widget Areas */

function remove_widget_areas($content) {
	unset($content['Secondary Aside']);
	unset($content['1st Subsidiary Aside']);
	unset($content['2nd Subsidiary Aside']);
	unset($content['3rd Subsidiary Aside']);
	unset($content['Index Top']);
	unset($content['Index Insert']);
	unset($content['Single Top']);
	unset($content['Single Insert']);
	unset($content['Single Bottom']);
	unset($content['Page Top']);
	unset($content['Page Bottom']);
	return $content;
}
add_filter('thematic_widgetized_areas', 'remove_widget_areas');

function rename_widgetized_areas($content) {
	$content['Primary Aside']['args']['name'] = 'Posts Sidebar';
	$content['Index Bottom']['args']['name'] = 'Home Content';
	return $content;
}
add_filter('thematic_widgetized_areas', 'rename_widgetized_areas');

//  Make the Primary Aside Widget Area Only Appear on Pages

function childtheme_primary_aside() {
	if (!is_front_page() && !is_home() && !is_page('view-art')) {
		if (is_sidebar_active('primary-aside')) {
			echo thematic_before_widget_area('primary-aside');
	if ( has_post_thumbnail()) { ?>
<div class="page-thumbnail">
  <?php the_post_thumbnail( 'medium' ); ?>
</div>
<?php }
	else {
		dynamic_sidebar('primary-aside');
		}
			echo thematic_after_widget_area('primary-aside');
		}
	}
}

// Change Primary Aside Function

function change_primary_aside($content) {
	$content['Primary Aside']['function'] = 'childtheme_primary_aside';
	return $content;
}
add_filter('thematic_widgetized_areas','change_primary_aside');

// Add 'Home' Menu Item
 
function childtheme_menu_args($args) {
    $args = array(
        'show_home' => 'Home',
        'menu_class' => 'menu',
        'echo' => true
    );
	return $args;
}
add_filter('wp_page_menu_args', 'childtheme_menu_args');

// Remove Navigation Above

function remove_thematic_actions() {
	remove_action('thematic_navigation_above', 'thematic_nav_above', 2);
}
add_action('init','remove_thematic_actions');

// Change the post meta

function childtheme_postmeta() {
 
 global $authordata;

    $postmeta = '<div class="entry-meta">';
    $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">' . thematic_postheader_posteditlink() . '</span>';
    }               
    $postmeta .= "</div><!-- .entry-meta -->\n";
    return $postmeta; 
 
}
add_filter('thematic_postheader_postmeta','childtheme_postmeta');

// Generate footer code
 
function childtheme_footer($thm_footertext) {
     $date = date('Y');
     $blog_name = get_bloginfo('name');
	 $blog_desc = get_bloginfo('description');
 
     $thm_footertext = sprintf(
     '<p>All Content and Images &copy; %s %s | %s | Portland, Or</p>',
     $date, $blog_name, $blog_desc);
 
     return $thm_footertext;
     }
 
add_filter('thematic_footertext', 'childtheme_footer');


?>

The code for the admin-panel-functions.php:

<?php

/*
 * Switch CSS Style
 */

function childtheme_pick_stylesheet($content) {
  global $my_shortname;
  
  $content .= "\t";
  $content .= '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/styles/' . get_option($my_shortname . '_alt_stylesheet') . '" />';
  $content .= "\n\n";
  
  return $content;
}

$altstyle = get_option($my_shortname . '_alt_stylesheet');

if (!empty($altstyle)) {
add_filter('thematic_create_stylesheet', 'childtheme_pick_stylesheet');
}

/*
 * Replace Blog Title with Logo
 */
	
function add_childtheme_logo() {
	$logo = get_option('childtheme_logo');
	if (!empty($logo)) {
		remove_action('thematic_header','thematic_brandingopen',1);
		remove_action('thematic_header','thematic_blogtitle', 3);
		remove_action('thematic_header','thematic_blogdescription',5);
		remove_action('thematic_header','thematic_brandingopen',1);
		add_action('thematic_header','childtheme_logo', 3);
	}
}
add_action('init','add_childtheme_logo');

function childtheme_logo() {
	$logo = get_option('childtheme_logo');
	if (!empty($logo)) { ?>
		<div id="logo"><a href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home"><img src="<?php bloginfo('stylesheet_directory'); ?>/scripts/timthumb.php?src=<?php echo $logo; ?>&amp;w=600&amp;zc=1" alt="<?php bloginfo('name') ?>" /></a></div>
		<?php
		}
	}
	
/*
 * Add Banner to Front Page
 */

function childtheme_banner() {
	if (is_front_page() || is_home()) {
    	$banner = get_option('childtheme_banner');
        }
    else {
		$banner = get_option('childtheme_bannerinner');
	}
    
	if(!empty($banner)) { ?>
    		<div id="banner">
    		<img src="<?php bloginfo('stylesheet_directory'); ?>/scripts/timthumb.php?src=<?php echo $banner; ?>&amp;w=940&amp;zc=1" alt="Anna Magruder: Art and Illustration" />
            </div>
   	<?php }

}

add_action('thematic_belowheader','childtheme_banner',1);


/*
 * Add Google Analytics Code if Available
 */
 
function analytic_footer() {
	echo stripslashes(get_option('childtheme_googleanalytics'));
}
add_filter ('thematic_after', 'analytic_footer');


/*
 * Build upload field
 */
 
function get_upload_field($id, $std = '') {
  $data = get_option($id);
  
  $field = '<input id="' . $id . '" type="file" name="attachment_' . $id . '" />' .
           '<span class="submit"><input name="save" type="submit" value="Upload" class="button panel-upload-save" /></span>' .
           '<div><input class="regular-text" type="text" class="" name="' . $id . '" value="' . ($data ? $data : $std) . '" readonly="readonly" /></div>';

  return $field;
}

/*
 * Build image preview using timthumb.php
 */
function get_upload_image_preview($data = '') {
  if (!empty($data)) {
    $img_preview = '<div class="img_preview">' .
                  '<img src="' . get_bloginfo('stylesheet_directory') . '/scripts/timthumb.php?src=' . $data . '&amp;w=300&amp;zc=1" alt="Thumbnail Preview">' .
                  '</div>';
				  
                    return $img_preview;
                   
    return $img_preview;
  }
  else {
    return;
  }
}

?>

10 Responses

  1. Being new to WP and Thematic, I’m excited to find your pages. And now this video! Good stuff. A lot of good ideas and directions for me to explore. What I totally do not understand is how you go from the photoshop mockup to child-theme style.css modifications?? I guess I’m admitting I’m a CSS newbie. First of all, how do you get the fonts you want without creating images; I’ve heard of cufon… Also, in your video example, if the photoshop file wasn’t actually made for you, would you have gone through the trouble of putting one together? What does it buy you?

    Thanks for your help.

  2. Just letting you know the Page Excerpt link is linked to the slickr plugin. thanks for this by the way, it always helps to see how another designer works to see what I can borrow from you.

  3. Hello Devin,

    Thanks for your fantastic tutorial.

    But Can you explain how can one add these functions to theme?
    Or where we need to Put admin-panel-functions.php and theme-functions.php to make it activate.

    Thanks
    Jinendra

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>