Theming Process

Posted

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;
  }
}
?>

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

10 thoughts on “Theming Process

  1. paul wrote:

    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

    paul

    • Devin wrote:

      Hi Paul. I generally go straight from mocks to WordPress, unless it’s a really tricky layout. I would do a post about 2.9 thumbnail features, but Justin Tadlock has already done it.

  2. Stan wrote:

    Hi Devin. Thank you for this post. These are some nice ideas i will definitely use in my next project. WordPress and thematic rock.

  3. Marion wrote:

    Thankyou for this site which provides a lot of information not easily found elsewhere!

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

    • Devin wrote:

      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.

  5. nepharius wrote:

    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.

  6. Jinendra wrote:

    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

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