How I Customized My WordPress Blog

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

This entry was posted in Software Development and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. 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>

  • NEED HELP?


    My company has created products like vSearch ("Super vCenter"), vijavaNG APIs, EAM APIs, ICE tool. We also help clients with virtualization and cloud computing on customized development, training. Should you, or someone you know, need these products and services, please feel free to contact me: steve __AT__ doublecloud.org.

    Me: Steve Jin, VMware vExpert who authored the VMware VI and vSphere SDK by Prentice Hall, and created the de factor open source vSphere Java API while working at VMware engineering. Companies like Cisco, EMC, NetApp, HP, Dell, VMware, are among the users of the API and other tools I developed for their products, internal IT orchestration, and test automation.