I have been trying to learn how to make my own custom WordPress sidebar widgets because every theme uses their own custom layout and I prefer a specific layout which I can only acomplish by manually editing the WordPress theme sidebar PHP file. In this post I will show you how to make your own custom sidebar widget style entry with my “Recent Updates” widget as an example.
First you need to navigate to your themes sidebar.php file which is located in the admin section under Appearance/Editor.
Find the sidebar.php file and select it for editing. In the main window you should see each chunk of code which will represent each section on your sidebar menu. Every theme is different and the way people choose to write their code is different as we have gone over in the past so its up to you to make minor adjustments to make this work.
Once you find a good spot for your new widget we will need to paste in this chunk of code.
<div>
<h2>Recent Updates</h2>
<ul>
<?php $recent = new WP_Query("cat=1&showposts=10"); while($recent->have_posts()) : $recent->the_post();?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</div>
This is my widget which shows 10 of the most recent posts from a specific category which I call Recent Updates since they are pulled from my Site Updates category. At this point you may run into an issue like I did where your post titles are too long for a menu and give a nasty word wrap effect. There is a solution and it is creating a custom function and then editing 1 line of code in the chunk of code above. What this will accomplish is limiting the post title to “x” characters.
First save your work and then find the them function.php file and select it for editing. Once selected you will need to add the following chunk of code to the file.
<?php function the_titlesmall($before = '', $after = '', $echo = true, $length = false) { $title = get_the_title();
if ( $length && is_numeric($length) ) {
$title = substr( $title, 0, $length );
}
if ( strlen($title)> 0 ) {
$title = apply_filters('the_titlesmall', $before . $title . $after, $before, $after);
if ( $echo )
echo $title;
else
return $title;
}
}
?>
Now navigate back to the sidebar.php file and find the following line from within the chunk of code that we pasted earlier
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
replace with
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_titlesmall('', '...', true, '25') ?></a></li>
Save your work again and view your home page. The “…” represents what will append to the end of the post title and the number 25 represents the amount of characters returned before the post title is cut off. This can be adjusted to your liking but this is how I have it set so it is how I am showing it here. Here is a simple before and after showing with and without the post title character title limit.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
