Custom sidebar blues finally dispelled
For close to 3 months, I’ve been agonizing about creating custom sidebars for specific pages on the Diliman Prep website.
After long hours of searching for similar situations, diverted attention to the inspiring design pages of Smashing Magazine, passing through the learning curve of self-taught on-the-job training for basic php coding, too many sleepless nights and several dreams of solutions, I finally did it.
All the blogs and documents I was able to refer to tackled my concern in portions, perhaps because they too were writing only about their own concerns. Fact is, all of them were IT developers, while I have been introduced to php only when I decided to change certain portions of the wordpress themes I was using for my websites. I wish I can link to those sites that helped me understand the process, and will do so when I run across them again.
I desperately need to document the process that lead to the solution, if only so I could easily refer to this blog again whenever I wish to create custom sidebars to this blog site (which obviously needs the work) and to the other sites I will be creating.
Now if a reader finds this record useful for the php novice, that will be an exceptional bonus.
Creating Custom Sidebars in WordPress
Objective: Create custom right sidebars for different departments and concerns featured on the website. The left sidebar and the horizontal menu on top will be retained for overall site navigation.
Rationale: The same sidebar for all pages will eventually make the eye go blind on the items, notices, lists, that are on that sidebar, so that even if the items are quite important for the school to share, the reader will not consider it as such. He becomes blind to the item, unless it’s a list that need to be referred to every so often, like a category list or a topic list. But fixed images, and ads tend to be disregarded by the eye.
Also, the school also has myriad details that could be useful to the reader of certain pages, but these information would otherwise be hidden under and behind other material on the side. For example, readers interested in the Athletics Department would more likely be interested on who the coaches are and how to contact them directly. If this information was on the custom sidebar, the site is able to immediate meet the need of the reader.
Step 1: REGISTER new widgetizable sidebars in the functions.php file of the theme
Since my theme already has two functioning sidebars, the functions.php file has already been automatically created by WordPress. Here’s how my functions.php file looked like without the additional custom sidebars.
<?php
if(function_exists(‘register_sidebar’)) {
register_sidebar(array(
‘name’ => __(‘Left Sidebar‘),
‘before_widget’ => ‘<div id=”%1$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’
));
register_sidebar(array(
‘name’ => __(‘Right Sidebar‘),
‘before_widget’ => ‘<div id=”%1$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’
));
} ?>
I then registered an additional sidebar that I indent to use for the pages on the Athletics Department. The number 3 in the ‘Athletics 3′ is my reference to the actual number of the sidebar, which I will need later. I actually have a total of 15 custom sidebars. (The left sidebar is number 1. The main right sidebar is number 2.)
register_sidebar(array(
‘name’ => __(‘Athletics 3‘),
‘before_widget’ => ‘<div id=”%1$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’
));
On the Appearance Widgets menu, I can now see the third sidebar named Athletics 3.
Step 2: Create a duplicate copy of the right_sidebar.php and a designate name that can easily be associated with the new sidebar.
I named my new custom sidebar right_sidebar-athletics.php and made sure that the call to the sidebar would refer to the custom sidebar for Athletics that I just made. Here is where the number 3 in the sidebar name becomes convenient.
<?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(3)) { } ?>
[I was able to make the file copies using my freely downloaded copy of FileZilla, by selecting a file on my live server, right click Open/Edit. I changed the sidebar number to (3) and saved it with a new filename as above.]
Step 3: Edit the call for the new sidebar in the appropriate theme template file.
In my case, I opened the page.php file because I wanted to reflect custom sidebars on specific pages, to give the instruction to use the right_sidebar-athletics.php file in place of the standard right sidebar whenever the the active page is that of Athletics. The page ID for the Athletics page is 513, so I entered that in the call code.
<?php
if (is_page(’513′)) {
include(TEMPLATEPATH . ‘/right_sidebar-athletics.php‘);
} else {
get_sidebar();
}
?>
Step 4: Add content to the custom sidebar.
Finally, on the Appearance Widgets menu, I opened the new sidebar that I named Athletics 3, and added my own html text and widgets (could be anything you want).
Then I shifted back to the window/tab of the website and clicked on the link to the Athletics page. YES, FINALLY, IT’S DONE. I had the new custom right sidebar up for the Athletics pagee, and retained the original right bar for all the other pages.
Within 15 minutes, I had gone through the whole process for 14 other website sections with pages that would benefit from custom sidebars.
But though I had finally solved the mystery of the custom right sidebar, the same did not work for the subpages.
Step 5: Generate a new conditional tag to check for subpages and apply the appropriate custom right sidebar.
I had seen the instructions for this the first time I searched the net, but could not make them work because the first 4 steps above were not yet in place. Now was the time to do so. The solution turned out to be quite easy after the months of understanding php on my own.
I added a new function in the functions.php file to enable WordPress to check and identify the subpages.
function is_tree($pid) { // $pid = The ID of the parent page
global $post; // load details about this page
$anc = get_post_ancestors( $post->ID );
foreach($anc as $ancestor) {
if(is_page() && $ancestor == $pid) {
return true;
}
}
if(is_page()&&(is_page($pid)))
return true; // we’re at the page or its subpage
else
return false; // we’re elsewhere
};
“Add Snippet 4 to your functions.php file, and call is_tree('id') to see if the current page is the page, or is a sub page of the page. In Snippet 3, is_tree('2') would replace “is_page('about') || $post->post_parent == '2'” inside the first if tag.” Refer to Snippet 4 in WordPress Codex on Conditional Tags.
And I replaced the conditional tag
<?php
if (is_page(’513′)) {
include(TEMPLATEPATH . ‘/right_sidebar-athletics.php’);
} else {
get_sidebar();
}
?>
to this call in the pages.php file
<?php
if (is_tree(’513′)) {
include(TEMPLATEPATH . ‘/right_sidebar-athletics.php’);
} else {
get_sidebar();
}
?>
After confirming that the codes resulted in the effect I wanted, I adjusted all the calls for the custom sidebars for the other web sections.
P.S.
I could actually have solved this problem much earlier, if only I had changed some of my work habits. I finally realized that I had spent the worst hours of my day–when I was practically tired and ready to sleep– to study the possible solutions to custom sidebars. I had not given it the due attention during my more productive hours, thinking that I could extend my prime time to the hilt.
Sometime, the other night, I resolved to attend to the task at last 3 hours earlier than usual. Within an hour-and-a-half, I had solve the problem. Twas an exhilarating eureka-moment with the attendant heart-pounding and raised-arms as I refreshed the page and saw the new sidebar.
My next project: Using thumbnails of my posts photo in the excerpt on the Home page.
Lesson learned: Never overestimate my mental acuity when fatigue and sleepiness start to creep in. Sleep is necessary to revitalize the body and produce the new brain cells, that will enable me to challenge myself for the next project. Good night y’all.
