I want to include the tutorial of “how to change, modify, and adding plugins for WordPress blog” in my TemplatePanic blog. I am not an expert in blogging, but I believe that this tutorial can help you who really need this information.

You can browse the live demo for the modified WordPress blog here.

The first time that you have to do is to find the basic template. I prefer Flickred 2.0.2 by Small Potato because it is simple both design and navigation, and has good looking even there is no image needed. Template that has no image will load faster.

Download and extract the .zip file, and upload it to folder /wp-content/themes/.

Then go to your browser, login to your WordPress blog, and activate the new template (PRESENTATION –> THEMES –> Flickred 2.0.2).

Next, go to PRESENTATION –> THEME EDITOR –> Stylesheet. For default, this file is unwritable. You will find “If this file were writable you could edit it.” in the bottom of the Theme Editor page.

To make this writable, go to FileZilla (or other FTP client that you use), find your template folder (/wp-content/themes/flickred-202/), and right click on style.css –> file attributes. Change the numeric value from 644 to 666. Click OK. Do the same thing with other file that you will modify.

Back to your browser, click refresh button. You will find “Update File” button in the right bottom.

MODIFYING THE TEMPLATE

Now we will change the style.css file. In this tutorial, you will make the template wider so it can fit with 1024×768 screen resolution.

Find this:

#container{
width: 800px; --> change to 900px

.description{
width: 760px; --> change to 860px

#top-menu{
width: 760px; --> change to 860px

#sidebar{
width: 200px; --> change to 300px

#footer{
width: 760px; --> change to 860px

Click Update File button. Now you need to see the preview of your blog. You can open the preview in new window (or new tab).

The basic template of Flickred 2.0.2 is good enough so I don’t need to change the other css.

MODIFYING THE NAVIGATION

Now we will focus to the navigation of the blog. Instead of placing the Pages in the right sidebar, I prefer to put it in the top, below the blog’s description.

Still in PRESENTATION, THEME EDITOR, go to Header file (make this file writable first). Find the “MAIN MENU’ section, and add the pages manually. Don’t forget to change the url of each page. Click Update File button.

OK, I already have Page navigation in the top of my blog page, now I need to delete the Page navigation from the right sidebar. Go to PRESENTATION, THEME EDITOR, Sidebar. Find this:

' . __('Pages') . '' ); ?>

Place < ! - - in the top, and - - > in the bottom. It will be like this:

< ! - -

' . __('Pages') . '' ); ?>

- - >

This will hide wp_list_pages from sidebar. Click Update File.

Wait, do you need Calendar for this blog? If yes, still in PRESENTATION, THEME EDITOR, Sidebar. Find php get_calendar, and remove

< ! - -    - - >;

placed around it.

ADDING RECENT ARTICLES

How to adding Recent Articles in sidebar.

Place this to your PRESENTATION –> THEME EDITOR –> Sidebar:

','
'); ?>

Click Update File button and refresh the preview of your blog.

MODIFYING THE CATEGORIES

I prefer the Categories also create the total numbers of articles in each category. Find this in PRESENTATION –> THEME EDITOR –> Sidebar:

Replace *ID* with *name*. This will sort the categories by name/alphabet, instead of by ID.

Replace *optioncount=0* with *optioncount=1*. This will create the total numbers of articles in each category.

ADDING VERSE OF THE DAY PLUGIN

Now is my favourite part: Verse of the Day plugin. Download the plugin, extract. Open FileZilla, upload the file to /wp-content/plugins/.

Go to your browser, PLUGINS –> Plugin Management, activate the Verse of the Day plugin. You can change the option of this plugin by go to OPTION –> Verse of the Day.

Now go to PRESENTATION –> THEME EDITOR –> Sidebar. Add this (I add this code before the calendar script):

Verse of the Day

ADDING WP-ONLINECOUNTER PLUGIN

The next plugin we will add here is WP-OnlineCounter. Download and extract, then go to FileZilla and upload the 2 files (wp-onlinecounter.php and widget_wpoc.php). to /wp-content/plugins/. Activate this plugins (WP-OnlineCounter and WP-OnlineCounter widget). Go to PRESENTATION –> THEME EDITOR –> Sidebar and add this code in the bottom of sidebar:

ADDING WP-PRINT PLUGIN

Next plugin is “WP-Print”:http://www.lesterchan.net/portfolio/programming.php by “GaMerZ”:http://www.lesterchan.net/, which will displays a printable version of your WordPress blog post. Download and extract, open your FileZilla, and upload the print folder to /wp-content/plugins/. Activate this plugin. You MAY Need To Re-Generate The Permalink. Go to OPTIONS -> Permalinks Options -> Update Permalink Structure.

Go to PRESENTATION –> THEME EDITOR –> Single Post and place this code:

I prefer to put this code before

because the “print” image will place follow the title of article.