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” alt=”< ?php _e('Archives'); ?>“></h2>
</li>
<p></code></p>
<p>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.</p>
<p>Next, we will finish the easy ones. Change <strong>line 48</strong> from:<br />
<code>
<li>
<h2>< ?php _e('Categories'); ?></h2>
</li>
<p></code><br />
to this:<br />
<code>
<li>
<h2><img src=)
/images/sbh_categories.gif” alt=”< ?php _e('Categories'); ?>“>
And line 57 from this:
< ?php _e('Meta'); ?>
to this:
; ?/>/images/sbh_meta.gif” alt=”< ?php _e('Meta'); ?>“></h2>
</li>
<p></code></p>
<p>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.</p>
<p>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 <strong>sidebar.php</strong> 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.</p>
<p>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!</p>
<p>First, in <strong>sidebar.php, line 40</strong>, change it from this:<br />
<code>< ?php wp_list_pages('title_li=<br />
<h2>‘ . __(’Pages’) . ” ); ?></code><br />
to this:<br />
<code>< ?php wp_list_pages_mytheme('title_li=<br />
<h2>‘ . __(’Pages’) . ” ); ?></code></p>
<p>Go to the folder <strong>/wp-includes/</strong> and find a file called <strong>template-functions-post.php</strong>. If you have an unmodified version of WordPress 1.5.1, you should find this fuction at <strong>line 309</strong>. It begins with <code>)
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.
Comments
One Response to “Wordpress Sidebar Images Hack”
Leave a Reply
![[Valid RSS]](/wp-images/valid-rss.png "Validate my RSS feed")
[...] but it goes…any suggestion to make it work better? Good resources on the same topic here.
[...]