Home > Software Development > How I Customized My WordPress Blog

How I Customized My WordPress Blog

February 1st, 2011 Leave a comment Go to comments

At the beginning of this year, I changed the theme of my WordPress based blog. Upon checking the site, several folks said it looked familiar and like facebook.com. In fact, when I searched for a new theme, I did use facebook as a keyword because I like the clean and simple look and feel. As you can check at the bottom of the blog, the new theme is called Crybook by Themetation and Crynobone, which you can hardly link the name with facebook except the word “book.”

The issues

Lost VMs or Containers? Too Many Consoles? Too Slow GUI? Time to learn how to "Google" and manage your VMware and clouds in a fast and secure HTML5 App.

After switching to Crybook, I really liked it but also found several minor issues with the theme. First of all, the “read more” link is not placed right in the overview of an article. Instead, it’s placed at its bottom. As a result, a reader may be confused where to read next. Secondly, it puts a line at the bottom at an article overview, and two links below the line. At a first impression, the two links seem more related to the next article than to the current one. Thirdly, it does not have the tags explicitly listed with the article as I expected. Tags are important to navigate through articles.

So I decided to customize the theme for my own preference which I hope leads to better reader experience.

To get started

Before we get onto the real part, I would like to point out that I didn’t read any formal document on how to customize a wordpress theme. What I did was to search the Internet and tried to make sense of the files of Crybook theme and my old theme.

Because of that, this post is actually more a note to myself for future changes than as a guide for others. If you find it helpful, that’s great too. I don’t claim I fully understand all I did, but definitely it worked for my purpose. My 6th sense as a software engineer helped a lot.

Now, let’s get started. To simplify the description, I ignore all the trials I did while I was learning.

The first thing is of course to log in the WordPress console which is normally your blog URL plus /wp-admin as suffix. From the console, look for the Appearance section on the left side, and click on the Editor link. Then the files related to a theme (you can switch using the drop-down list at the top right) is listed on the right side pane within either Templates or Styles section.

Change the read more link

From the right side pane, click on the index.php and open the content in the middle editor. Search for the line:

<?php the_content(__('')); ?>

And, replace it with:

<?php the_content(__('Read more &raquo;')); ?>

Then, you will have “Read more” right in the article. It’s not done yet. You also want to do the same for archives.php and search.php.

One more thing, there is still a read more on the bottom line. Let’s remove it next together with others.

Change the bottom line

Open the same file index.php and search for the following (I changed the indentation a little bit for easy read):

<div class="meta-footer">
<ul>
<li><a href="<?php the_permalink() ?>">Read More</a></li>
<li><a href="<?php the_permalink() ?>#comment"><?php comments_number(); ?></a></li>
<?php edit_post_link(__('Edit'), '<li>', '</li>'); ?>
</ul>
<div class="clear-left"></div>
</div>

Replace it with

<div class="meta-footer">
<ul>
Tags: <?php the_tags('') ?>
<?php edit_post_link(__('Edit'), '<li>', '</li>'); ?>
</ul>
<div class="clear-left"></div>
</div>

You then see all the tags on a post. Notice that “Edit” link – it’s used by logged in authors. A typical reader won’t see it at all.

For sure, I’ve overdone something which is to have removed the comments. It’s time to get it back.

Add comment link to the subtitle

Like the above step, open the index.php and search for the following:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p class="meta-header"><?php _e("Posted on the"); ?> <?php the_time('F jS, Y') ?> under <?php the_category(',') ?> by <?php the_author_posts_link(); ?> <?php edit_post_link(__('<span class="edit">Edit</a>')); ?></p>

Replace it with:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p class="meta-header"><?php the_time('F jS, Y') ?> under <?php the_category(',') ?> by <?php the_author_posts_link(); ?> <?php edit_post_link(__('<span class="edit">Edit</a>')); ?> with <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?> </p>

Add back WP-PageNavi plugin

The WP-PageNavi plugin by Lester Chan is a great plugin that display Google like pagination at the bottom of a blog site. Somehow after switching to Crybook, it disappeared. It’s probably that the Crybook author didn’t anticipate the navigation plug-in.

Anyway, I got a hint by searching the Web. Just open the index.php file and search for the following:

<div class="pagination">
<div class="prev-page"><?php next_posts_link('Older Entries') ?></div>
<div class="next-page"><?php previous_posts_link('Newer Entries') ?></div>

Replace it with this simpler one:

</div>
<div class="pagination">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</div>

It’s almost done. But don’t forget one thing: claim credit for the customization. Just open the footer.php and add whatever makes sense to you there. It’s as simple as changing a HTML, so I won’t list the sample here. Equally important is that you don’t remove credit of others. J

What’s next?

After the customization, I think it’s in a pretty good shape. I will probably come back and do some more customization when I have time. I may read formal documents but I don’t think I will become a good theme designer any time soon.

The tasks I can think of include: change the two column bar to one column because I find the latest post titles wrap into two lines and not very easy to read; remove the one line RSS subscription; add a translation button so everyone can read my blog with your preferred language.

Please let me know if you have any comments.

Update[02/06/11]: Because links at the sidebar starts a newline, I changed the following display:block to display:inline in style.css.

#sidebar .col ul li a, #sidebar .col2 ul li a { display: block; padding: 2px 10px; }

  1. No comments yet.
  1. No trackbacks yet.