Small Program Blog

When I was trying to post some PHP coding, I found it is not easy to decorate it.. for example, you want the code to be aligned, so that it is user friendly (easy to read). Then you need to handle space for each line. Also, you may want to highlight some keywords. There will be a lot of work, and some programming languages look really similar, but if you want to decorate them, you may have to do it one by one, and it could suck out most of your time.

Fortunately, WordPress has a plugin that helps you to do all the works for you. It is called Highlight, and you can download it and use it as WordPress plugin or just code it within your HTML file. You only need to assign some CSS style such as color for keywords. This is very nice because usually I like to program everything myself, but this really saves me a lot of time. (On the other hand, many things on the web are really useful).

For example,

<?php
if (is_home()) {
	echo bloginfo('name');
} elseif (is_404()) {
	echo '404 Not Found';
} else {
	echo wp_title('');
}
?>

and my CSS Style (which applies the highlight for the code above and below for showcase):

code {
	color: #000099;
	font: normal "Courier New", Courier, monospace;
	white-space: nowrap;
	padding: 0 2px;
}
pre code {
	display: block;
	clear: both;
	background: #FDF;
	color: #333;
	border: solid 1px #ccc;
	overflow: auto;
	line-height: 140%;
	white-space: pre;
	width: 470px;
	text-align:left;
}
code .comment {
	color: #888;
}
code .class, code .rules {
	color: #ff00ff;
	font-size: 100%;
}
code .value,  code .title, code .string {
	color: #0000FF;
}
code .tag {
	color: #000099;
}
code .keyword {
	color: #000099;
}
.html .attribute {
	color: #006600;
}

All I have done is just put all my code within <pre><code></code></pre> and it will decorate my code with my CSS style. Isn’t it really easy? yea, you can compare my old posts which I just use <p> and style it, and which still doesn’t look good.

One more thing, if you do not want to use it as plugin, you can just put these two lines of code on your web page (The WordPress plugin will automatically add these two lines to your WordPress blog) :

<script type="text/javascript" src="highlight.pack.js"></script>
    <script type="text/javascript">
      hljs.initHighlightingOnLoad();
    </script>

It is pretty easy, right?

For more information about Highlight, you can visit this Link:
http://softwaremaniacs.org/soft/highlight/en/

I actually found a very nice tutorial site for designing the WordPress Theme. I will say compare to this site, my blog for designing the WordPress Theme is a mess… haha..

ok, anyway, here you go: http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/

It has many tricks too. Good for anyone wants to do some graphic and web design (same as me )

In WordPress, there are widgets such as calender that may appear on your theme based on your appearance setting. Usually they will appear on sidebar when you add the widgets in the theme. If there is no widget adding to the sidebar, a function dynamic_sidebar() will return a FALSE value. This function is useful if you are designing a theme template because you may want to create something if there is no widget on the sidebar. For example, you may want to include your own widget to the sidebar if user has not included any widget in the theme appearance setting.

Further, if you want to add widget at the appearance setting, you will need to register the sidebar to WordPress in the file function.php. The function register_sidebar() will tell the plugin that your theme will need exactly one sidebar and your admin inteface should have Sidebar Widgets in the Presentation menu. register_sidebar() also allows you to decorate the widget by adding a parameter to it. For example,

<?php
if (function_exists(’register_sidebar’) )
register_sidebar(array(’before_widget’=>’ ‘,
‘after_widget’ => ‘ ‘,
‘before_title’ => ‘<div class=”title”>’,
‘after_title’=>’</div>’));
?>

before_widget and after_widget means that something that you want to decorate the widget.. you may think it can be a warper and you will warp your widgets. In this example, we put nothing, so there is no decoration for this widget warper. Then before_title and after_title, will decorate the wiget title with <div lass=”title”> and </div>. The output will look like this:

<div lass=”title”> Widgets Title </div>

What if you want to include more than one sidebar? Then instead of using register_sidebar(), you will use register_sidebars(n) where n is the number of sidebars. (starting with 1)

For more information, you may check out this page to see how to widgetizing themes with sidebar.
http://codex.wordpress.org/Widgetizing_Themes