Widgets (entry valid for WordPress v2.2.2) – In this version are already integrated Widgets for the sidebar, we will look more closely at how to use them and we will describe how to correctly styles using CSS. The theme directory you have a file functions.php to open it, right from the start is the definition of what will happen before and after the widget, the widget title.
if ( function_exists('register_sidebar') ) register_sidebar(array('before_widget' => '<li id="%1$s" class="widget %2$s">','after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>',
1) If you are ok with the fact that all elements of the sidebar will be styling a single definition, adjust the following settings and enter the definition of the class .bar to file style.css.
.bar { padding: 5px 5px 5px 5px;
background: url('images/bar.jpg') no-repeat;
color: White;
}
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div class="bar">',
'after_widget' => '</div>', 'before_title' => '<h2>',
'after_title' => '</h2>',
));
Now check out folder /wp-includes/ and open file widgets.php and put above changes here too:
$defaults = array(
'name' => sprintf(__('Sidebar %d'), $i ),
'id' => "sidebar-$i",
'before_widget' => '<div class="bar">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
);
2) If you need some elements sidebar stylish different definitions, we have to reflect how these settings in the file widgets.php as individual files of the widget plugins. The following is an example of the various functions of the file widgets.php directly modify, add CSS class .bar
function wp_widget_meta($args) {
extract($args);
$options = get_option('widget_meta');
$title = empty($options['title']) ? __('Meta') : $options['title'];
?>
<?php echo $before_widget; ?>
<div class="bar"><?php echo $before_title . $title . $after_title; ?>
<ul><?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php echo attribute_escape(__('Syndicate this site using RSS 2.0')); ?>"><?php _e('Entries <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php echo attribute_escape(__('The latest comments to all posts in RSS')); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="http://wordpress.org/" title="<?php echo attribute_escape(__('Powered by WordPress, state-of-the-art semantic personal publishing platform.')); ?>">WordPress.org</a></li>
<?php wp_meta(); ?>
</ul>
</div>
<?php echo $after_widget; ?>
<?php
}>
Similarly we do with external widgets, the only way we will be able, for example, Event Calendar to use a different class.
/** Event Calendar widget. */
function ec3_widget_cal($args)
{ extract($args);
$options = get_option('ec3_widget_cal');
echo '<div class="otherbar">';
echo $before_widget . $before_title;
echo ec3_default_string($options['title'],'Kalendář');
echo $after_title;
ec3_get_calendar();
echo '</div>';
echo $after_widget;
}
0 Comments