Skip to main content

Ivan Teoh

Something personal yet public

We had been improving this WordPress theme since the site is hosted. This theme has change a lots. More changes to come. For now, it is time for us to look back the code and verify it with this checklist. This checklist covered almost everything major things in WordPress theme. Although this checklist is more suitable for those themes that are going to distribute to public for ensure the theme quality, amateur developer also need to have a good quality theme as personal used.

For example, we realize that our JavaScript was not CDATA encoded after going through the checklist. It is just one of them. More yet to discover. It is a good practice for theme developer. We committed ourself that we must go through the checklist even though it is a pretty long list.

Finally the shape of the circle inside the canvas looks correct. Size of the canvas should stated inside setup() function in JavaScript and not Cascading Style Sheets. We guess, if we did not mention the size of the canvas inside the setup() function, the default size, width is 200px and height is 200px, will be set. When it comes to Cascading Style Sheets after finish running the setup() JavaScript function, it tend to stretch to the size that mention in Cascading Style Sheets.

We decided to change the archives template to be different from main index template. Archives means to be summary of a category, tag or date. The major different between these two template is using template tag, the_excerpt(), in archives template, as shown as below:

98-index-before.php (Source)

<?php
/**
 * @package WordPress
 * @subpackage Your_Theme
 */
?>
<?php get_header(); ?>
<div id="container">
<div id="content">
<!-- archive -->
<?php if ( have_posts() ) : ?>
    <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
    <?php /* If this is a category archive */ if (is_category()) { ?>
    <h2><?php _e('Archive for the &#8216;') ?><?php single_cat_title(); ?>
      <?php _e('&#8217; Category') ?></h2>
    <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
    <h2><?php _e('Posts Tagged &#8216;') ?><?php single_tag_title(); ?>
      <?php _e('&#8217;') ?></h2>
    <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
    <h2><?php _e('Archive for') ?> <?php the_time('F jS, Y'); ?></h2>
    <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
    <h2><?php _e('Archive for') ?> <?php the_time('F, Y'); ?></h2>
    <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
    <h2><?php _e('Archive for') ?> <?php the_time('Y'); ?></h2>
    <?php /* If this is an author archive */ } elseif (is_author()) { ?>
    <h2><?php _e('Author Archive') ?></h2>
    <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) &&
      !empty($_GET['paged'])) { ?>
    <h2><?php _e('Blog Archives') ?></h2>
    <?php } ?>
    <?php while (have_posts()) : ?>
        <?php the_post(); ?>
        <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <div class="entry-title">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php
          printf( __('Permalink Link to %s'), the_title_attribute('echo=0') );
          ?>"><?php the_title(); ?></a></h2>
        </div><!-- .entry-title -->
        <div class="entry-content">
        <?php the_excerpt(); ?>
        <p><?php wp_link_pages(); ?></p>
        </div><!-- .entry-content -->
        <div class="entry-meta">
        <p><?php _e('Posted by'); ?> <?php the_author(); ?> @ <?php
          the_time('F jS, Y'); ?> <?php _e('in'); ?> <?php the_category(',');
          ?> <?php the_tags(__('with '), ', '); ?></p>
        <p><?php comments_popup_link(__('No Comments &#187;'),
          __('1 Comment &#187;'), __('% Comments &#187;')); ?> <?php
          edit_post_link(__('Edit This'), '&#8212;'); ?></p>
        </div><!-- .entry-meta -->
        </div>
        <?php comments_template(); ?>
    <?php endwhile; ?>
    <p><?php next_posts_link(__('&laquo; Older Posts')); ?></p>
    <p><?php previous_posts_link(__('Newer Posts &raquo;')); ?></p>
<?php else : ?>
<h2><?php _e('Not Found'); ?></h2>
<p><?php _e('Sorry, but you are looking for something that isn&#39;t here.');
  ?></p>
<?php endif; // END: if ( have_posts() ) ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

But the default, using this template tag, the_excerpt(), will be showing first 55 words of the post's content. I do felt it is a bit long for me. I need to customized it. But how? Arron showed us how to customize this template tag, the_excerpt(). We need to add customized excerpt function to replace the default excerpt function, wp_trim_excerpt in theme functions file, functions.php as shown at below. Currently the only changes that different from default is at line 57. Changed the "55" to "8".

98-index-after.php (Source)

<?php
/**
 * Customized function for wp_trim_excerpt
 */
function customized_trim_excerpt($text) {
    $raw_excerpt = $text;
    if ( '' == $text ) {
        $text = get_the_content('');

        $text = strip_shortcodes( $text );

        $text = apply_filters('the_content', $text);
        $text = str_replace(']]>', ']]&gt;', $text);
        $text = strip_tags($text);
        $excerpt_length = apply_filters('excerpt_length', 8);
        $words = explode(' ', $text, $excerpt_length + 1);
        if (count($words) > $excerpt_length) {
            array_pop($words);
            array_push($words, '[...]');
            $text = implode(' ', $words);
        }
    }
    return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}

remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'customized_trim_excerpt');
?>

No matter how, we still felt we need to have a different template for site pages. Page template should not have both the meta post data and comment info. We took the main index template and modified it. The final code is as below as reference.

97-index.php (Source)

<?php
/**
 * @package WordPress
 * @subpackage Your_Theme
 */
get_header(); ?>
<div id="container">
<div id="content">
<?php if (have_posts()) : ?>
    <?php while (have_posts()) : ?>
        <?php the_post(); ?>
        <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <div class="entry-title">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php
          printf( __('Permalink Link to %s'), the_title_attribute('echo=0') );
          ?>"><?php the_title(); ?></a></h2>
        </div><!-- .entry-title -->
        <div class="entry-content">
        <?php the_content(__('Read more...')); ?>
        <p><?php wp_link_pages(); ?></p>
        </div><!-- .entry-content -->
        <div class="entry-meta">
        <p><?php edit_post_link(__('Edit This')); ?></p>
        </div><!-- .entry-meta -->
        </div>
    <?php endwhile; ?>
<?php else : ?>
<h2><?php _e('Not Found'); ?></h2>
<p><?php _e('Sorry, but you are looking for something that isn&#39;t here.');
  ?></p>
<?php endif; ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Retweet is to forward a post or tweet that you are interested back to Twitter. I noticed some of the blogs have the retweet button on their post that allowing the visitor retweet their interested posts. I wonder where they got those button. At the end, I realize it is WordPress retweet button from TweetMeme. I also download it and give it a try at my site. It looks nice. Like others, we like the retweet button placed before the content of our post. We uncheck the setting on displaying the button on pages. Remember to change to your twitter username as your source in TweetMeme setting.

I believe hashtags were introduced by Twitter communities. Basically, hashtags are tags that starts with # in Twitter posts. These tags will be treated as topics / events / groups that you are tweeting. If others are interested with your topics / events / groups, they will just search your hashtags. Find out more on the references below.

I decided to split sidebar into two divisions. So that I can use the primary sidebar as widgets and secondary sidebar as customize lists. Here is the original sidebar.php.

94-sidebar.php (Source)

<!-- begin sidebar -->
<div id="sidebar">
<ul>
    <!-- sidebar lists -->
</ul>
</div><!-- #sidebar -->
<!-- end sidebar --></pre>
The new <code>sidebar.php</code> will look like this. We remove the sidebar id
and replace with primary-side and secondary-side ids. Both elements will have
sidebar class.
<pre lang="phtml" line="7"><!-- begin sidebar -->
<div id="primary-side" class="sidebar">
<ul>
    <!-- primary lists -->
</ul>
</div><!-- #primary-side .sidebar -->
<div id="secondary-side" class="sidebar">
<ul>
    <!-- secondary lists -->
</ul>
</div><!-- #secondary-side .sidebar -->
<!-- end sidebar -->

In order to activate the widget sidebar, we need to register both primary and secondary sidebar in theme functions file, functions.php, as below.

94-functions.php (Source)

if ( function_exists('register_sidebar') )
{
    // Primary Sidebar
    register_sidebar(array(
        'name' => 'Primary Sidebar',
        'id' => 'primary-sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '',
        'after_title' => '',
    ));

    // Secondary Sidebar
    register_sidebar(array(
        'name' => 'Secondary Sidebar',
        'id' => 'secondary-sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '',
        'after_title' => '',
    ));
}

Lastly, we need to change the WordPress theme layout, layout.css. Both sidebar elements are right floated. Secondary-side element is cleared to right. So that it can drop below right floated primary-side element.

94-layout.css (Source)

div.sidebar {
    float: right;
    width: 210px;
    margin-left: -250px;
    padding: 20px;
}

div#secondary-side {
    clear: right;
}

I was near by CCTV Beijing headquarters. It was blue sky plus I did bring my camera. Prefect timing to snap some shots of the awesome buildings, although part of the buildings was caught by fire recently.