In this article we are going to take a look at creating and displaying different side columns in different locations of your WordPress blog. This will be a lot like Creating Multiple Header Files, but we will be modifying the functions file so that we can use widgets in our side column.

Why do we want to do this ?

The benefits of creating different side columns can be seen right away. You can easily give each “section” of your blog a completely fresh and unique look … especially if you use Category Templates. You may also want to run a thinner or wider side column on certain pages in your blog. For example, a 300 wide column may be unfeasible on a WordPress page that contains a forum plugin. For that page you may need extra room for the forum, so cutting the side column down to around 150 may make more sense.

You will notice that the side column on the index page of this blog ( here ) is quite a bit different then the side column on this page. Not only is the width about 1/2 the size of the column on this page, but it also displays different widgets.

There are a couple of different ways to accomplish this feat, I am just going to focus on the method that I used for this blog.

Before we begin, please note that we are creating a SECOND sidebar. We are not replacing the first sidebar, so do not delete any of the code for your first, original sidebar. (unless, of course, that is your desire)

Step 1. Modifying The Functions File

You do not necessarily need to start with this, but since most of us probably do not modify the functions.php file very often I figure that we will get the “hard” stuff out of the way first.

When viewing your functions.php file ( in your current templates folder ) you should notice …. function_exists(’register_sidebar’) … . That little batch of code registers your CURRENT side bar and allows it to show-up in your appearance > widgets section of admin. What we need to do is throw-in a new little piece of code to register our new side column. The code I used for this blog is …

if ( function_exists(’register_sidebar’) )
register_sidebar(array(’name’=>’frontsidebar’,
‘before_widget’ => ‘<div class=”widget-front”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<div class=”widget-title-front”><h2 >’,
‘after_title’ => ‘</h2></div>’,
));

Basically this little piece of code is a copy-and-paste duplicate of MY original sidebar code. I just pasted it directly below the code for the first sidebar in my functions.php. It is suggested that you do the same … copy your original code and then paste it.

From that point I just changed the name of the sidebar (frontsidebar) and changed the div classes (widget-front). Note that you will also need go into your stylesheet (style.css) and create your new div classes shown above.

Ok … now swing over to Appearance > Widgets in your WordPress admin. On the right hand side your new “mainsidebar” should appear. You will be able to add widgets to it later.

Step 2. Creating frontsidebar.php

In this step we are going to create the actual sidebar file. One of the simplest ways to do this is to make an exact copy of your current sidebar file (probably named sidebar.php), save it under the new name “frontsidebar.php”, and make the changes noted below. Make sure to NOT delete your original sidebar file.

The basic elements of a sidebar file look like:

<div id=”sidebar-main”>
<?
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }

?>
<div id=”mini-left”>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar(frontsidebar) ) : ?>
<?php endif; ?>
</div>
</div>


Obviously your div classes may have different names then mine. Make sure your names are unique and then go into stylesheet and create those classes. This is where you will want to create the look of your side column. Probably make it look different then your main sidebar.

The important thing here is the name of your dynamic sidebar. Make sure to change that name to the exact name that you used to create your new sidebar in your functions file (above). That is the one key element that must be done.

Step 3. Call Your New Side Column

Step 3 is definitely the easiest … place the code to call your new sidebar.

<?php include (TEMPLATEPATH . “/frontsidebar.php”); ?>

Make sure the sidebar name that appears in your call matches the name of the PHP file that you created directly above. Note that it does not need to match the name you used in the functions file. If you want to use your new side column IN PLACE OF your original side column then just replace the call for the original column. If you want to use BOTH side columns on the same page then, obviously, leave the call for the first side column and just add the new call in the location you would like it to appear.

Step 4. Add Widgets & Div Classes

The final step is kind of a no-brainer. First, you can now go into Appearance > Widgets in your WordPress admin and add any widgets you would like to your new side column.

Lastly … just another reminder … make sure to go into your stylesheet and add all of your new div classes. Obviously, if you want your side column to look exactly like your first one, then you can just use all of the same classes. But, if you want your new column to look differently, then mess around adding new classes and settings to give it a unique look.

Through the use of your classes … float right, float left, padding, margin … you can do a lot of different things with your 2 (or more) different side columns.

• You can run a different side column in a different location … ie: my home page compared to the rest of my site.
• You can run 2 side columns on the same page right next to each other.
• You can run a left side column and a right side column.
• You can run a left side column and 2 right side columns.
• And so on ….

Think about this … if you decorate your blog by the seasons or change the look occationally … then how easy would it be to create 4 different sidebar columns. Just change the call in step #3 to a different sidebar to change the look instantly !

I actually have 3 different side columns on this blog, but I only currently have 2 in use.


Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here

In this article we will be creating mini photo albums on our WordPress post pages in the photography category. These photo albums will replace our standard “Related Posts” link lists on these pages and create a very nice graphic display of related photographs. Hopefully this will make it easier for your blog visitors to find related photographs and entice additional page visits.

In my TimThumb thumbnail article I talked about the wonderful flexibility that timthumb.php offers. I also stated that my next project with this program would be to create mini photo albums on the post pages in my Art and Photography Category. Well, I am happy to announce that I have actually completed that project A LOT quicker then I thought I would.

Before reading this article, it is suggested that you take a look at the following previous articles. By reading these articles first you will have a much better understanding of the procedure to create the photo albums :
1. Beautiful and Easy Thumbnails with TimThumb
2. How To Display Subcategories & WordPress Category Templates
3. WordPress Loop Inside Of A Loop


You can see an example of the mini photo albums on my Clover Flowers post. The photo album appears below my signature in the “Related Posts” section.


STEP 1.
You must have timthumb.php installed on your WordPress blog or this code will not work. If you need to install timthumb.php, please visit the Timthumb Page for details.


STEP 2.
The first step is to create a custom field on your “Add New Posts” page in WP admin. Click on “add new” in the custom field section of the page and add a new field named photoalbum. You can obviously change the field name to anything you would like.


STEP 3.
Add the following code to your “single.php” page. (this page displays your individual posts)

<B><h3>Related Posts:</h3></B>
<?php $photoalbumlink = get_post_meta($post->ID, ‘photoalbum’, true);
if ($photoalbumlink) {
?>
Below are more photographs from the same photo album. You can visit the main photo album page if you would like to see all of the photographs from this album.
<BR>
<?php $my_queryphoto = new WP_Query(’cat=’.$photoalbumlink.’&showposts=10′); ?> <?php while ($my_queryphoto->have_posts()) : $my_queryphoto->the_post(); ?>

<?php } else { ?>
<?php similar_posts(); ?>
<?php } ?>

<?php rewind_posts(); the_post(); ?> <--- your MIGHT need this snippet


CODE BREAKDOWN: Here is a breakdown of the above code …

First … in my example, when you want to display the mini photo album on the post page you should enter the cat id (number) of the category you want displayed as the photo album. Enter this number as the value for your photoalbum custom field when you are adding a new post. This is especially useful if you post photos to more then one category.


<?php $photoalbumlink = get_post_meta($post->ID, ‘photoalbum’, true);
if ($photoalbumlink) {
?>
This segment of the code checks to see if your post has the “photoalbum” custom field specified. If the photoalbum field has been filled out when you wrote your post (true statement) then it is renamed to photoalbumlink. If the photoalbum field was not filled out, then we jump down to the else statement further down the page.


<?php $my_queryphoto = new WP_Query(’cat=’.$photoalbumlink.’&showposts=10′); ?> <?php while ($my_queryphoto->have_posts()) : $my_queryphoto->the_post(); ?>
We need to create another loop to pull-in the photo thumbnails for the photo album. Since I am already running 2 other loops on the post page (gallery at top of page and the loop to pull the post info in) I needed to pick a unique term for this loop – “queryphoto”. See the article link above for “Loop inside of a Loop” for more information on this. In the query I am specifying which category/subcategory to pull the thumbs from using cat=.$photoalbumlink. with the photoalbumlink being the cat id number that we specified in our custom field when we created the post. I am also requesting that only 10 post thumbnails be shown.


<?php
$thumbnail = get_post_custom();
…….. THROUGH …….
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo $imagpath; ?>” alt=”<?php the_title(); ?>” /></a>
All of this code is from timthumb.php. There is really no sense to go through all of it again in this article. If you are unfamiliar with any part of this code, please take a look at my article: Beautiful and Easy Thumbnails with TimThumb.


<BR> See more photos in the album: <?php wp_list_categories(’include=’.$photoalbumlink.’&style=html&title_li=’); ?>

<?php } else { ?>
<?php similar_posts(); ?>
<?php } ?>
There are 2 important parts to this code segment.

1. The “See more …” segment of the code creates a link to to the rest of the pictures in this photo album (category). The “include” requirement is telling WordPress to link ONLY to the category specified in our custom field. This is the same category that was used in our query posts above.

2. Everything after the “ELSE” statement is displayed if you DID NOT specify a cat id in your photoalbum custom field of the “add new post” page. In other words, if you leave it blank the following will display. You will need this so WordPress will know what to display on post pages that are NOT in the photography category. In my case above, I am using a “similar posts” plugin to display text links to similar posts. If you look below in the “related posts” section on this page you will notice that NO photo album appears, just the related posts links.


<?php rewind_posts(); the_post(); ?>
You will need this little piece of code IF you need to return to the original post query. You will need this for your comments box IF you place this photo album above it. You may also need it if you have social networking submission links below the photo album. I am not 100% comfortable with this little code piece, but as far as I can tell is that it is telling WordPress to re-populate the “query” with the original query post information. For example, the permalink and the title from the post that displays on your page.


WHY AM I DOING IT THIS WAY

When you look at all the above code, you may notice that there may be slightly easier ways to accomplish this task. Maybe you have seen a “related posts” program that would accomplish this. Maybe a gallery program would. But I can pretty much guarantee that those will not offer you the type of flexibility that this does. The above method offers post-by-post flexibility. I would like to see a standard plug-in offer that.

This method is very useful for me because I post my photographs in up to three categories. For a photo of the ocean I may display it in the “ocean” category, the “scenic” category, and the “Patrick’s Point” category. For my post page mini photo albums I would like to display related pictures based upon the LOCATION (Patrick’s Point) so I would select that cat id for my custom field.

As a side note, my Patrick’s Point Category is a sub-sub-category. It is semi-hidden under my “Photos By Location” subcategory under the photography category. This, I suppose, will be yet another article in the near future.

The flexibility of this method is endless. For example, I could display a photo album of flowers on the bottom of this post if I so desired, just by entering the cat id in my custom field. I think you probably get the picture …


Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here

If you couldn’t tell I completely hate the term “linky love” so, yes, I am making fun of it in the title of this post. Even though I hate that term, I do like handing out links … which you will receive if you leave a comment on this blog.

The “Recent Comments” section in the side column is our newest addition. Now, every time you leave a comment on this blog it will be displayed not only on the post page, but also in the side column. This also includes links to your web site or blog.

You will also notice a “Top Commentators” section in the side column that highlights the people who have left the most comments over the last 3 months … with “do-follow” links to your web site or blog. Constant commentators can easily stay in the top spot and receive a do-follow link for all 3 months !

You spent the time to type up a thoughtful comment so the least we could do is give you a little “somethin’-somethin’”.

So read through the posts on this blog and leave me some comments ! (demanding, huh ?) I really do like to hear different opinions and different ways to do things … so you don’t always have to agree with me. ….. and I try to reply to most …..

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here

A few articles back I mentioned that I would do a post about the thumbnail program that this blog uses … TimThumb. Without further ado let’s take a peek at this small php program.


What This Program Does
Timthumb.php will crop, zoom, and resize any and all images and photos on your website. This program will work with .jpg, .png, and .gif images.


Why Do We Want This Program
I like this program because of one thing … simplicity. Timthumb came with this theme originally and I have since learned to love it. There are probably thousands of different WordPress gallery plugins, programs, and thumbnail programs. Some plugins, by their nature, may be easier to install, but they are not as flexible.

Timthumb.php runs the following special segments on this blog: handles all of the article image thumbnailing, runs the mini latest posts gallery at the top of the page (article here), and my current adventure of turning my photos category into a gallery. All of the design and layout is handled by your theme and it’s stylesheet so it makes it a lot easier to implement timthumb in many different areas of your blog.

Because only one PHP file is required to do all of that, I have decided to get rid on my photo gallery plugin ( YAPB ) in favor of using timthumb.php.

The flexibility of timthumb, along with the ease of having only 1 file to look at anywhere thumbnails or galleries are concerned, makes it a win-win for me.


Installing TimThumb
Grab your copy of timthumb for free on the TimThumb Google Project Page.


1. After you download your copy upload it to your server. It would probably make the most sense to place it in your current THEME folder like:
MY_WEBSITE/wp-content/themes/MY_THEME/timthumb.php

2. On your “Add Post” page in WordPress administration you will need to ad a custom field at the lower part of the page. Let’s name this custom field “thumbnail”. From now on you can add the URL of the image you want to use as a thumbnail in this field.

3. Add the following code to your theme pages wherever you would like the thumbnail to appear:


<?php
$thumbnail = get_post_custom();

$scrap = get_bloginfo(’wpurl’) . ‘/wp-content/themes/YOUR_THEME/timthumb.php?’;

if (empty($thumbnail['thumbnail'][0])) { $imagpath = $scrap . ’src=’ . get_bloginfo(’wpurl’) . ‘/wp-content/themes/YOUR_THEME/images/thumbnail.jpg’ . ‘&amp;w=140&amp;h=140&amp;zc=0&amp;q=90′;

} else {
$imagpath = $scrap . ’src=’ . $thumbnail['thumbnail'][0] . ‘&amp;w=140&amp;h=140&amp;zc=0&amp;q=90′;

}
?>



Now let’s look at the code piece by piece …

The $scrap line … this is the path to your installation of timthumb … you will need to change your theme name. If you installed the file in your theme folder then everything else on this line should be correct, but double check that this path is correct.

The if empty line tells timthumb what to do if you have not included a thumbnail with your post. Upload a generic thumbnail to your themes/images/ folder that timthumb can use. make sure the name of this image is ” thumbnail.jpg ” – OR – change the name in the code above.

The else line creates the thumbnail for your post if you have specified one.

The settings. In the above code you will need to change the settings …
“w” stands for the desired width of the thumbnail,
“h” stands for the desided height of the thumbnail,
“zc” stands for zoom crop (0 is no, 1 is yes),
and “q” stands for quality (75 to 100 … 75 is default).

Finally, you will probably want to wrap the above code in a div class/id so that you can influence the display. You can add your new class to your theme’s stylesheet.


As you can probably tell from the above code, there is a lot of flexibility here and that is what I like with using this program. You can run this code anywhere on your page and you can use it as many times as you would like. In addition, in each and every application of this code you can change the setting to anything you would like.

My next major project with this code will be developing photo albums to display below below photo posts. These will contain thumbs of other photos directly related to the original post by category or tag. I hope to use a new “Custom Field” which will allow me to specify which category, tag, or search term to use in gathering the thumbs … everything else will be automatic. This, though, is probably still a while away …


Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here

I consider the Executable PHP Widget plugin for WordPress a “must have” because, frankly, I cannot believe that WordPress doesn’t include this in the core installation.

This plugin is just like the standard text / HTML widget that comes with WordPress, but it will also allow you to run PHP script in the widget. For those of us that dabble in tweaking our themes, we know how valuable it can be to be able to place PHP hooks or entire mini-scripts in the side column of our blog.

On this blog I am using this plugin to run my “top commentators” section in the sidebar. It is easier and a little cleaner then having to hard-code the “top commentators” PHP hooks into the side column. I now use this widget exclusively instead of the text/HTML widget.

I would highly recommend that you consider installing the Executable PHP Widget plugin !

[ Plugin Site (download) ]
[ Plugin Author: Otto ]


Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here