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.


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

The code for theme-functions.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' ); ?>
<?php }
	else {
			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 '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);

// 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; 

// 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:


 * 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_blogtitle', 3);
		add_action('thematic_header','childtheme_logo', 3);

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>
 * 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" />
   	<?php }



 * 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">' .
                    return $img_preview;
    return $img_preview;
  else {


About Devin

I'm a WordPress developer based in Austin, Texas. I work with the fantastic crew at 10up and also run a little theme shop called DevPress. Find me on twitter @devinsays.

10 thoughts on “Theming Process

  1. so do you jump right into wordpress or do you first code a static html/css?
    nice use of the new 2.9 features, I’d like to see a post about that


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

    1. If I’m not working with a designer I’ll adapt an existing theme to work for their site. I think this is the most efficient way to work. If there’s no theme that really works, I’ll mock up the site in Photoshop first.

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

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


Leave a Reply

Your email address will not be published. Required fields are marked *

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=""> <s> <strike> <strong>