Sometimes Ironic
I was about to post yesterday about BrowseHappy. I had been meaning to for sometime, then yesterday I had the urge to post about it. Then, for whatever reason, I didn’t. So what about that is ironic?
It seems that yesterday, an announcement was made by the Web Standards Project (another fabulous site, by the way) with the headline
Appearently, WaSP felt that BrowseHappy compromised its position by infering a lack of neutrality toward various browsers. That makes sense to me, since BrowseHappy really promotes Mozilla browsers (and specifically, IMO, Firefox). So…
to make a long story short WordPress.org will be taking Browse Happy under its wing by continuing hosting the site and keeping it current with the latest trends and information.
My First WordPress Theme – LimeLite
OK. Here is my first WordPress Theme for WP 1.5. This was tested on 1.5.0 and 1.5.1. The theme is called LimeLite and this is the first beta release.
It is HEAVILY based on Kubrick. In fact, it is Kubrick with a modified header and modified font colors. So the it’s basically a Kubrick mod.
To install, download the theme, extract, and load to /wp-content/themes/. This should give you a /limelite/ folder in /themes/. There is no additional support available for this release.
Need help with search engine optimization?‚ Check out our new list of articles here.
WordPress Sidebar Images Hack
In my current theme (a mod of a mod of Kubrick which is becoming less of a mod and taking on a life of its 0wn), I wanted to change the headers in the sidebar to images. This was because I wanted to make use of a typewriter font so the headers would look like this:
I wanted these headers to be specific only to this theme so that I could still easily and fully switch themes. In doing this, I ran into a couple of small, but interesting “snags” that caused me to have to do a little bit of a hack to the theme. Once I got it working, I was pretty excited so I thought I would share the experience. I will actually discuss the examples on an unmodified version of Kubrick, which is the default theme for WordPress 1.5. This theme is located at /wp-content/themes/default/. I would suggest making a backup of this theme before you dig in to the hack, just in case you want to revert back for some reason.
First, I made the images for the headers I wanted using a font from: Free Typewriter Fonts. For the example, I used Teletype Regular. The headers I needed were:
- Pages
- Archives
- Categories
- Blogroll
- Meta
The Archives, Categories, and Meta were easy. I created the image, loaded it into the /images/ folder for my theme, then made some changes to sidebar.php (located in /wp-content/themes/default/. Backup the original file if you want to be able to back out of this.) for the theme.
In sidebar.php, go to line 42 and change it from this:
< ?php _e('Archives'); ?>
to this:
; ?/>/images/sbh_archives.gif)
This is what you are going to do for most of these. Basically what you are doing is changing from just writing the word “Archives” putting an image from your themes directory in its place. To be nice, we still go ahead and write “Archives” as the alternate text if the image doesn’t load.
Next, we will finish the easy ones. Change line 48 from:
< ?php _e('Categories'); ?>
to this:
; ?/>/images/sbh_categories.gif)
And line 57 from this:
< ?php _e('Meta'); ?>
to this:
; ?/>/images/sbh_meta.gif)
Alright, easy ones out of the way. You’ve only really changed sidebar.php here and by so doing, you are able to switch to another theme and not affect the sidebar headers in that theme. Now for the tricky part.
To get the “Pages” and “Blogroll”, WordPress uses a function that is part of WordPress and not isolated in the theme. So what we are going to do is copy these functions to sidebar.php and rename them. That way, the original functions are intanct for WordPress to use when you are using some other theme, but when you use your modified theme, you can use the isolated function to load your header images.
I know that some of you are saying you don’t know php or how to code. It’s ok, this is going to be easy, and when you are done, you’ll feel quite accomplished!
First, in sidebar.php, line 40, change it from this:
< ?php wp_list_pages('title_li=
' . __('Pages') . '' ); ?>
to this:
< ?php wp_list_pages_mytheme('title_li=
' . __('Pages') . '' ); ?>
Go to the folder /wp-includes/ and find a file called template-functions-post.php. If you have an unmodified version of WordPress 1.5.1, you should find this fuction at line 309. It begins with "function wp_list_pages($args = '') { " and ends at line 365 with } (just below $output;). Copy all of this.
Now go back to your sidebar.php and above
enter some blank lines. At the very top blank line (don’t leave any extra blank lines or you could cause a header error), put a < ?php and then enter some blank lines and put a ?> In between these tags, paste the function that we just copied.
Go to the top of the function where is says “wp_list_pages” and change it to “wp_list_pages_mytheme“. You’ve just recreated this function so you can use it only in this theme and modify it without effecting how WordPress will work with other themes.
Go down about 16 lines in the function to where is says $output .= '
';
and change this to:
$imagedir = get_stylesheet_directory_uri();
$headerimg = '
';
$output .= '
';
You’re almost home! Now just the Blogroll header is left.
Now I am realizing I should have given you one little change early on so we could do it by line number, but you probably have the hang of this by now, so look for the line that says:
< ?php get_links_list(); ?>
(After I added all those other functions and edits, I found it at line 118. Depending on how many empty lines you added above, you should find it about the same place.)
Change this to be:
< ?php get_links_list_mytheme(); ?>
Now guess what we are going to do? Oh, you are catching on. We have to go get the original function and add it to this page, then rename it. This function is found in: /wp-includes/links.php lines 516 – 567. Add this to the top of your new sidebar.php page just below the < ?php but before the function wp_list_pages_mytheme. Now change the following:
function get_links_list
change to:
function get_links_list_mytheme
About line 37 you will see a line that says: \n\t
\n\t
echo '
' . $cat['cat_name'] . "
\n";
Change it to:
echo '
\n";
![.$cat['cat_name'].]('.get_stylesheet_directory_uri().'/images/sbh_' . $cat['cat_name'] . )
That’s it! You are done. (I’ll add the images and the sidebar.php as a zip later for the lazy folks that would rather just “plug-n-play”.) Thanks for reading through my first published WordPress hack. I hope you could follow along and that you found it useful.
WordPress Themes
The abundance of site themes is another reason for the continued popularity of WordPress. If you are design impaired, there are freely downloadable themes available that you can easily manage through the WordPress admin. (In English, for the not so technically inclined: You can change the entire look and feel of your blog with a single click.)
Good places full of free themes:
- Alex King’s Site – This is the mother of all theme sites. Alex runs a contest for themes and posts them on his site. He also has equipped it with the theme switcher plugin (see plugins) so you can browse through the themes easily.
- Blogging Pro Themes
- How To Blog Comprehensive List
Also, Urban Girhaffe has a good set of tutorials for working on your own theme. He begins by dissecting “Kubrick”, a popular WordPress theme that ships with the default WordPress installation, stripping it of its style and using that as a framework to build your own theme.
Google Search for WordPress Themes
WordPress Plugins
One of the great things about WordPress is the plethora of plugins available. This is a benefit of working with open source software that has a big following.
Here are some good places to get started looking for plugins.
- WordPress Wiki
- The WordPress Plugin Repository
- WordPress Plugin Database
- WordPress Plugin Competition Blog
- Blogging Pro Plugins List
Google Search for WordPress Plugins
There are some prettey cool plugins out there. Good luck and happy blogging.
![[Valid RSS]](/wp-images/valid-rss.png "Validate my RSS feed")
