if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Widgetized Area',
'id' => 'widgetized-area',
'description' => 'This is a widgetized area.',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
}
This is all that is needed for the first step. Once this widgetizing code is placed in your functions.php file, proceed to Step 2. The remainder of this section is explanation.
This code checks to make sure that the current version of WordPress supports widgets, and then declares an array of values that will be used to create the widgetized area in your theme. Here are the different values:
* name – the name of the widgetized area as displayed in the WP Admin
* id – a unique identifier for your widgetized area
* description – description of the widgetized area
* before_widget – the markup generated before any user-added widgets
* after_widget – the markup generated after any user-added widgets
* before_title – the markup generated before the title of any user-added widgets
* after_title – the markup generated after the title of any user-added widgets
So, given these parameters, our widgetizing code would result in the following output, say, if the built-in Search widget were added to our widgetized area:
<div id="search-3" class="widget widget_search">
<h4>Search</h4>
<form role="search" method="get" id="searchform" action="http://localhost/283/" >
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</div>
Note the markup created for the opening
, which gets its attribute information based on the wild-card matching specified in our widgetizing array. To see this more clearly, examine the following side-by-side comparison of the sprintf directives and the resulting (X)HTML source code:
'before_widget' => '<div id="%1$s" class="widget %2$s">',
<div id="search-3" class="widget widget_search">
Hopefully the relationship is clear. This is a powerful way to ensure that all widgets have a similar class names and unique IDs, which are important for easy CSS styles.
Widgetize Your WordPress Theme: Step 2
Finally, add the following code to the location in your theme’s template file(s) where you would like the widgetized area to appear:
<div id="widgetized-area">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('widgetized-area')) : else : ?>
<div class="pre-widget">
<p><strong>Widgetized Area</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>
<?php endif; ?>
</div>
Jay Kwong
9:48 am on February 17, 2010
Permalink
|
Tags: search, Wordpress
In an attempt to make your WordPress search even more user friendly, you can highlight the search terms in the results. We did this for one of our clients, so we thought it would be useful for other users. In this article we will show you how you can highlight search terms in the results in WordPress.
First open your search.php and look for the following code:
<?php the_title(); ?>
Replace the above code with:
<?php echo $title; ?>
Make sure that you paste this line above the title code:
<?php $title = get_the_title(); $keys= explode(" ",$s); $title = preg_replace('/('.implode('|', $keys) .')/iu', '<strong class="search-excerpt">\0</strong>', $title); ?>
Now open your CSS file and add the styling for the class search-excerpt, and it will highlight the term. Currently the code is making the search terms bold.
First, note that this code use TimThumb to resize pictures. This recipe explain how to install TimThumb on your WordPress blog.
Let’s start by creating the shortcode. Just paste the code below into your functions.php file.
function imageresizer( $atts, $content = null ) {
return '<img src="/timthumb/timthumb.php?src='.$content.'&w=590" alt="" />';
}
add_shortcode('img', 'imageresizer');
Then, you can use the following syntax to add an automatically resized image to your blog post:
[img]http://www.yoursite.com/yourimage.jpg[/img]
Jay Kwong
6:57 am on January 19, 2010
Permalink
|
Tags: attachments, post (3), Wordpress
To achieve this recipe, just paste the following code anywhere in your post.php file and attachments will be displayed.
$args = array(
'post_type' => 'attachment',
'numberposts' => null,
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
echo apply_filters('the_title', $attachment->post_title);
the_attachment_link($attachment->ID, false);
}
}
This code is poweful but definitely easy to implement. Just paste it on your functions.php file and it will automatically output your post content in columns.
Your post content will be splitted on tags.
functions.php
function my_multi_col($content){
$columns = explode('</h2>
<h2>', $content);
$i = 0;
foreach ($columns as $column){
if (($i % 2) == 0){
$return .= '
<div class="content_left">' . "\n";
if ($i > 1){
$return .= "
<h2>";
} else{
$return .= '
<div class="content_right">
' . "\n
<h2>";
}
$return .= $column;
$return .= '</h2>
</div>
';
$i++;
}
if(isset($columns[1])){
$content = wpautop($return);
}else{
$content = wpautop($content);
}
echo $content;
}
}
add_filter('the_content', 'my_multi_col');</h2>
</div></h2>
CSS
.content_right, .content_left{ float:left; width:45%; }
.content_left{ padding-right:5%; }
http://www.wprecipes.com/