Jason G. Designs

Widgetizing the Sidebars

7. Most modern WordPress themes have a sidebar or more than one that is widgetized. If you’re in the Admin panel and click Appearance in the left panel, you will see a section called Widgets. If your sidebars or any section of your site is “widget friendly”, you would see a section to drag and drop other components (such as a Calendar and Tag Cloud) into the sidebar, replacing what is currently there. Our theme isn’t widget ready. Luckily, in that section of the Admin panel, we are provided a link: Widgetizing Themes

• I copied and pasted the code needed for this part from the Widgetizing Themes page. I will give that here in bold:

*I changed the code in this section after seeing that if you drag a widget to the sidebar, the login information dissappears!

• <ul><!-- opens sidebar ul -->
  <?php if ( !function_exists('dynamic_sidebar')
  || !dynamic_sidebar() ) : ?>
  <?php wp_list_pages...
  ...
  </li>
  <?php endif; ?>
  <li class="log-in-out"><h2 class="widget-title">My Account</h2>
  <ul>
  <?php if(is_user_logged_in()){
  echo "<li><span class=\"login-message\">Welcome registered user:</span></li>"; wp_register('<li>',' (Edit Site)</li>');} ?>
  <li>
  <a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>
  </ul><!-- closes sidebar ul -->
  <li>
  <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Logout</a>
  </li>

• Now, for the Admin panel to recognize the widget friendly sidebar, we need to register it via a functions.php page. Create a new file named functions.php and save it in the blue-green-blast folder. Type the following into functions.php:

• <?php
  if ( function_exists('register_sidebar') )
  register_sidebar();
  ?>

• I went ahead and placed a widget in the sidebar, clearing what was previously there. Checking the code by viewing the source code, I saw that the class name next to the auto generated h2 tags is “widgettitle”, but to match with our theme, we need to name the class “widget-title”. This is handled by modifying our functions.php code:

• <?php
  if ( function_exists('register_sidebar') )
  register_sidebar(array(
  'before_widget' => '<li>',
  'after_widget' => '</li>',
  'before_title' => '<h2 class="widget-title">',
  'after_title' => '</h2>',
  ));
  ?>

• We’re not done yet. We need to widgetize our second sidebar in the header:

• <!-- opens sidebar-2 div -->
  <div id="sidebar-2">
  <?php if ( !function_exists('dynamic_sidebar')
  || !dynamic_sidebar(2) ) : ?>
  <form...
  ...
  </form>
  <?php endif; ?>
  </div>
  <!-- closes sidebar-2 div -->

Notice the number 2 inside the !dynamic_sidebar() part for the second sidebar. We also need to modify our functions file once more to recognize two sidebars:

• <?php
  if ( function_exists('register_sidebar') )
  register_sidebars(2, array(
  'before_widget' => '<li>',
  'after_widget' => '</li>',
  'before_title' => '<h2 class="widget-title">',
  'after_title' => '</h2>',
  ));
  ?>

• We had to add li tags before and after each new widget so it will fit in with our existing ul structure in the main sidebar. The problem is that now our sidebar-2 produces invalid code. The li tag has no corresponding ul tag. So, we will add that to sidebar 2 (and hide it with CSS later):

• <!-- opens sidebar-2 div -->
  <div id="sidebar-2">
  <ul>
  <?php if ( !function_exists('dynamic_sidebar')
  || !dynamic_sidebar(2) ) : ?>
  <li><form...
  ...
  </form></li>
  </ul>
  <?php endif; ?>
  </div>
  <!-- closes sidebar-2 div -->

The Footer

This is the final section in which we will use WordPress PHP codes. We will replace the code we have with a copyright symbol and code that displays the name of our blog. As well, we will put a designer link that links back to my Portfolio site ;). (This is optional).

• Change the footer as shown below:

• <div id="footer">
  <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
  <p class="author-link">Theme: Blue Green Blast,
  designed by <a href="http://www.jgpws.com/portfolio/">Jason Gonzalez</a></p>
  </div>

Instead of using php the_date, the WordPress tag, I used the general php tag php echo date(‘Y’) to specify the year. For some reason, WordPress’s code shows the year of the last post.

Tags for this post: Blue Green Blast, Firefox, Internet Explorer 7, Themes, WordPress

Page: 1 2 3 4 5 6 7