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.
Old Habits Die Hard
I have been a web developer for some time now, long enough to say that web developers currently entering the job market were probably entering junior high when I began working with web technologies. So most of you are either too young or too new to the Internet to recall anything other than IE as a browser. Hey, I recall back in the day we were all excited about Cello so we could browse on our PCs instead of Unix. Then came Netscape. And I was one of those die hards that didn’t switch to IE for quite some time. But, reluctantly, towards the end of the 90s, I caved in. I have been using IE pretty exclusively ever since (gasp!).
Sure, I have copies of everything else out there. As a developer, I have to. I have to know how my stuff works in other browsers. But for quite some time, cross browser testing took a back seat to other priorities because there just was very little need. I mean, hey, when 99.9% of your users come to you in IE and the rest in various other flavors, is it cost effective to test in every browser under the sun?
And then… a quiet revolution began. Firefox. A better browser. Great features. Integrated tools. Extensible plugins and themes. AND proper CSS! Well, could there be anything better? Well, actually yes. Something better would be for people to develop sites that used valid CSS and XHTML that looked better in Firefox than IE. And for quite sometime, they didn’t.
But now, with exponentially more sites coming online thanks to the blogosphere, we have more use of CSS, and more users preferring Firefox. The quiet revolution is taking hold.
Then there was me. I knew I should make the switch. But it was so easy to keep going back to the interface I was familiar with. I kept using IE. Why? I don’t know. Just a habit.
I’m kicking the habit. It’s been tough. But I’m doing it. I’m going to stick with Firefox. And you should too. If you don’t have it, get it. It’s free. Why would you want to use anything else?
And by the way, if you aren’t familiar with some of the browsers I mentioned early on (Mosaic, Cello, Opera, etc), check out the Web History of Browsers, you might learn something. When I say to my grandchildren, “I used to browse the Internet with Cello” it will be to them the equivalent of my grandparents learning to drive in a Model T or listening to an old Victrola.
Google Maps Again
Something new that was added to Google Maps that is pretty slick – satellite images. If you’ve used the Google Maps and have not seen this, it is a choice on the upper right side of the maps. You can choose either “maps” or “satellite”. Some areas (like Chicago) you can zoom in all the way and get a pretty good view.
Try mapping to your home address, then select “satellite”. It’s pretty cool.
Or, try Googling for your phone number, then select “Google Maps”, then “satellite”.
Wikipedia
A pretty interesting tool for the web researcher is the Wikipedia. Set up as a comprehensive (and then some) encyclopedia in wiki format, you can find information on just about any topic, encyclopedic or otherwise. However, since it is a wiki, accuracy is not guaranteed. (If you’ve never heard of a wiki, that’s ok, not a lot of people have. A wiki is a web document (or series of documents) that are editable by the users at large.)
Also as part of the Wikipedia project, there are some other useful tools, including Wiktionary, Wikibooks and Wikinews. However, because of its open nature, vandalism and inaccuracy are problems in Wikipedia. You may also wish to read with an open mind, as there is no guarantee that a particular author will have the same political, religious, or philosophical slant as you.
MRFF 2005
With MRFF 2005 (Midwest Regional Fun Fly) fast approaching (Father’s Day Weekend), I think back to last year’s launch. Last year brought out the whole family: wife, kids, grandparents. This year will be much different as I will be without the family. Advantage: I can do both days for the weekend without the kids complaining that they’re bored or tired. Disadvantage: I plan to do my Level 1 Certification and no one will be there to see it.
Last year, we flew “Barbie’s Dream Rocket”. Here is an excerpt of some of what I posted over at The Rocketry Forum about the rocket:
A couple of years ago my oldest daughter, who was almost three at the time, came across a rocket kit in a toy store. She was intrigued to say the least, and I thought that, despite her young age, it might be fun to do together. She is now four and we have been building and flying rockets together since.
She is a big fan of Barbie and the color pink. Last year, she decided that she wanted a Barbie rocket. I had recently picked up several Estes kits on clearance at Meijer so I thought we could kitbash something together. She kept asking me and asking me, “when can we build the Barbie rocket?” So one night I think we opened up one of the kits to get started. I handed her the body tube. She looked at it, looked at me, wrinked her nose and said, “It’s too small!” I asked what she had in mind. She said, “I want it to be as big as me.”
So, that weekend we trundled off to Al’s Hobby Shop in Elmhurst to look for a kit. I showed her on the wall what kits we could pick from. She took about 15 minutes or so holding all the bags up to determine if the finished product would be taller than she was. She finally settled on a LOC Forte.
I spent last winter working on this thing. The only thing I wish I’d done different was build a baffle. It came out pretty stunning, I must say. I used a combination of paint – Krylon Pink for the body, the nose cone and fin can are metal flake automotive (which I would’ve used for the body too, but I couldn’t find any pink, the crucial color). The entire rocket was then finished in a metal flake clear gloss.
The decals were a lucky find. I was shopping at Menard’s one night and happened across these giant sticker sets for kids’ rooms. One set was Barbie. What luck. You can see the giant Barbie in the picture. The rest is covered in Barbie hearts and flowers.
Last month at what was supposed to be MRFF 2004 (but turned out to be non-MRFF 2004, I don’t know why… also, that’s Midwest Regional Fun Fly for you non Midwesterners.) on Father’s Day was our most recent flight. (The maiden voyage was at an NIRA club launch in May, but I didn’t get any pictures, just some video my wife was ashamed to lay claim to.)
Anyway, I may have to post some pictures of my Level 1 project that will fly at MRFF 2005 (if it’s finished in time).
![[Valid RSS]](/wp-images/valid-rss.png "Validate my RSS feed")
