Welcome to my town!

You are here: Home » Web Boulevard » Taking my Blog to the Next Level (Part 2): Widgetizing & Thumbnailing


Following up on the previous post, this is where I share the details and steps I went through to:

First bring this blog to the 21st century by widgetizing it (adding dynamic sidebars), second enhance the layout by leveraging wordpress version 2.9.2 latest feature of native thumbnail support.

Widgetizing

Widgetizing was straightforward, for it was more CSS (stylesheet) work than PHP.

All I did was create a functions.php file (my theme didn’t have one) then add this line to declare that the theme supports dynamic sidebars to enable me to add widgets:

 <?php
 if ( function_exists( 'register_sidebar' ) ) {
 register_sidebar( );
 }
 ?>
 

If you have a functions.php already, you just need to add that line to it.

Once done, I edited my sidebar.php to initiate the dynamic sidebar.

This bit needs attention, you may proceed depending on the format your sidebar was done. There is different ways to do it depending on if it was done as an unordered list (using ul tags)or as divs (using div tags).

Mine was a mess. It was basically a combination of  unordered lists and divs – natural result of 3 years of updates; I had to literally rewrite it from scratch.

This is what I used:


<div>
<ul>
 <?php if ( !function_exists('dynamic_sidebar')
 || !dynamic_sidebar(1) ) : ?>
 <?php endif; ?>
 </ul>
 </div>

Once this is done you can start dragging and dropping them widgets and edit them on the run from “widgets” under “appearance” in your wordpress menu. High convenience.

I was actually so happy with the result that I decided to add more dynamic sidebars to the theme :) The footer area was empty, the sidebar was getting crammed, so why not utilize that space?

A simple edit was needed to the functions.php file:

 <?php
 if ( function_exists( 'register_sidebar' ) ) {
 register_sidebars(4 );
 }
 ?>

Then I added styling for the new widgets. Here is what I used for my CSS file (two identical widgets and one different):

#footer-sidebar {
background-color:#1C1C1C;
height:400px;
}

#footer-sidebar1 {
float: left;
width: 280px;
margin-left:20px;
margin-right:20px;
}

#footer-sidebar2 {
float: left;
width: 280px;
margin-right:20px;
}

#footer-sidebar3 {
float: left;
width: 260px;
}

That was it really. Straightforward. I now have a dynamic sidebar on the right, and 3 dynamic sidebars at the bottom.

I could have created more sidebar files (like sidebar2.php etc) but not needed really.

On this blog you can find a nice tutorial which guides you on how you should edit sidebar.php based on how your current sidebar is done – unordered list (healthy) or divs (alright).

Thumbnailing

Adding thumbnails was very interesting. The new functionality is cool yet still buggy. It took me lots of trial and error to get it working properly. I hope this entry saves you some of that.

I had to revisit functions.php file to declare that I want to use this functionality (a bit strange I know you would think it is natively supported). This is what I added:

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}

Note that I haven’t passed dimensions as function variables. That is because when I tried, it didn’t work properly. Instead I defined those dimensions in “Media” under “Settings” menu in WordPress; I set dimensions for thumbnail, medium, and large. I also set the thumbnail size to be exactly cropped because proportional wasn’t working properly.

Now that the system knows that I want to use this function AND my sizes are defined, I needed to edit my theme templates to display the results. I edited my index, category, and archive templates to show the small thumbnail size (listing pages). I added this in the position in the template where I want the thumbnail to show (after the “while have posts” function):

<?php the_post_thumbnail( 'thumbnail' ); ?>

I then wrapped it in a div tag with class “thumb” to be able to style that bit through CSS.

Note how I passed “‘thumbnail” as the variable; wordpress knows what to do because that dimension is defined in “Media” settings.

For my post template, this is what I added:

 <?php the_post_thumbnail( 'large' ); ?>
 

That’s it, done.

To manage this, when you create a new post, you will find a new widget at the bottom right called “post thumbnail”, if your post has an image assigned already you will see it there, otherwise, you can click on “set thumbnail”. That will bring up the media uploader dialogue so you can upload the image or select it from your media library. Once you select an image, you will see a new link called “use as thumbnail”, click it and you’re done, thumbnail image assigned.

A note to keep in mind is that this new function only works for newly uploaded images. You will have to assign images for all your posts even if you had some before. The advantage (in a way) that I had was I never had any images, so I had to upload images to all my posts. No editing or cleaning up required.

This is as far as part 2 goes. I hope it was helpful.

Part 3 I will write about optimizing & caching and changing structure.

WordPress is cool isn’t it?




Related Articles:

One Comment to “Taking my Blog to the Next Level (Part 2): Widgetizing & Thumbnailing”

  1. How To Speed Up Your WordPress Websites Loading Times - Says:

    [...] from part 1 (falling in love with your blog again), part 2 (widgetizing & thumbnailing) and part 3 (search engine optimization), in this part I share the steps I’ve taken to enhance [...]

Have your Say: