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.
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:
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <?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 © %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:
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <?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; ?>&w=600&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; ?>&w=940&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 . '&w=300&zc=1" alt="Thumbnail Preview">' . '</div>'; return $img_preview; return $img_preview; } else { return; } } ?> |
7 Comments
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
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.
Hi Devin. Thank you for this post. These are some nice ideas i will definitely use in my next project. WordPress and thematic rock.
Thankyou for this site which provides a lot of information not easily found elsewhere!
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.
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.
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.