WordPressGarage.com

Easily add unwidgetized WordPress plugins to widgetized sidebar with Custom Function Widgets plugin

One of the reasons I hesitated to use widgets is because there are many useful plugins that aren’t widgets and demand that you add a snippet of code to your sidebar, something you can’t really do with widgets.

Well, now you can widgetize your sidebar and add both widgets and non-widget plugins to it with the Custom Functions Widgets plugin.

When activated, this plugin creates 20 empty widgets. To use one of them for a non-widget plugin, you drag one onto the sidebar, and then edit the widget’s options as follows:

1. Give it a title.
2. Name the function you want to call.
3. Enter the arguments to pass.
4. HTML to display before the output of the function
5. HTML to display after the output of the function
6. Option to hide the title of the widget (which you specified as Widget title) during the output
7. Option to remove the default wrapper of the widget (as defined in template.php of your theme’s folder, for each sidebar)
8. Close the widget options pop-up and click ‘Save Changes’

Now your sidebar can handle all types of plugins and widgets!

WordPress Plugin: Custom Function Widgets

Posted in Plugins | Tags: sidebar, widgets | No Comments »

How to add a tabbed interface to your WordPress blog

Headsetoptions has a great review of the types of tabbed interfaces available, and a tutorial on how to add one to your WordPress blog.

A tabbed interface is one of those boxes that you often see in the sidebar of a lot of premium themes where you click on tabs at the top, and it shows you different types of information in the same space. The main benefit of tabbed interfaces is that it helps save real estate on your blog, which can be pretty limited. Here’s an example from Solostream’s Premium WordPress Magazine Theme:

Solostream also has a tabbed interface for the feature article section in some of his other premium themes.

Basically, there are three tabbed interfaces available: DOMtab, Tabber, and Tabs. The main difference between the tabbed interfaces are ease of use, and whether you can use them for commercial purposes.

Update Jan. 26, 2007: Another tabbing method that wasn’t mentioned on Headsetoptions is Yahoo! UI Library: TabView.

Check out the full post for the whole shebang: Anatomy of a Magazine Style Premium WordPress Theme - Part 2: DOMTab, Tabber, more

Posted in Tips | Tags: navigation, sidebar | 1 Comment »

Display recent posts in WordPress sidebar

Here’s a bit of code to put in your sidebar to display the most recent posts on your blog:

<?php $myposts = get_posts('numberposts=10&offset=1');
foreach($myposts as $post) :?>
<li><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li>
<?php endforeach; ?>

You can set the number of recent posts to appear on the first line of code where it says numberposts=10 - change the 10 to the number of posts you want to appear. You can choose to offset the recent posts by any number; for example, if you select offset=1, as we did above, it won’t display the most recent post, but will start the list from the second-most recent post.

Posted in Code Snippets | Tags: posts, sidebar | 25 Comments »

Display a selected number of posts from one category in the sidebar

<?php$postlist = get_posts('category=6&numberposts=5');
foreach ($postlist as $post) :?><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?>

Use this in the sidebar to display a defined number of posts from a specified category. Where it says “category=6″ replace the 6 with the relevant category ID number, and where it says “numberposts=5″ replace the 5 with the number of posts that you want to appear.

Update Nov. 7, 2007:

The above code snippet can also be used to display a page in the sidebar. This is is handy if you want to create an editable chunk of text in the sidebar without using widgets. So, for example, if you want to show an excerpt of your About page in your sidebar, use the following code:

<?php$postlist = get_posts('id=54');
foreach ($postlist as $post) :?><?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>">read more</a>

Where it says id=54, replace 54 with the id number of the page you want to display.

Posted in Code Snippets | Tags: categories, sidebar | 15 Comments »

Embed Finetune in your blog

Some of you may have noticed that I added a Finetune player in the right-most sidebar. Why? Only because I LOVE Finetune. As opposed to the other online music services, it actually lets you choose the songs you want to hear, as opposed to guessing what songs you like based on songs or artists you choose. I put together a playlist of my favorite songs on Finetune, and I love listening to it. You know how fun it is when your favorite song comes on the radio? Well, with Finetune you only hear your favorite songs.

I put the player on this blog for fun. It may not be there for long, since it really has nothing to do with this blog except the fact that the player can be embedded on it. But if you love music, and you have very specific taste, take a look at Finetune and put together a playlist - it’s a lot of fun.

Posted in Tips | Tags: multimedia, sidebar | No Comments »

Inserting editable text in the sidebar - part II: Widgets

In an earlier post, I wrote about my quest to find a way to easily allow users to modify text in the sidebar of a site I was creating. After trying a few different options, I happily settled on the Improved Include Page plugin.

Then I started trying to add all sorts of social stuff to the blog part of the site, such as the Sociable icons for bookmarking, and the option to email a post to a friend, or print a printer-friendly version. The problem is that if you select to have the sociable bookmarks appear on Pages, and you insert the PHP code for the print and email functions on Pages, it conflicts with the bit in the sidebar which is also, in essence, a Page.

After playing around with it for a bit, I realized I needed a different solution to the editable text in the sidebar, and decided to try to go with widgets.

The Need: I needed to be able to insert a text widget so that users could easily edit the text within it, but I needed to keep the rest of the information that appears in the sidebar, such as the posts from a certain category, since as far as I know there are no widgets that allow you to display posts from one category only. I also needed the text in the widget to appear with the same styles as the rest of the sidebar.

The Solution:

First I made the site widget-ready. This is very easy, and involves only a few steps:

1. Download the widgets plugin. Upload the entire widgets folder to your plugins directory. Activate.
2. Create a file called functions.php. Put the following code in the file and upload (make sure there are no spaces before or after the code - that can be deadly!):
   <?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>
3. Since I wanted most of the sidebar text to remain as is, I modified my sidebar as follows:
   <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>”>
<input type=”text” name=”s” id=”s” value=”search and press enter…”/></form>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
<?php endif; ?><h2>News</h2>
<ul>
…
   This kept my search bar at the top, inserted a place for the widgets, and then after that the rest of the sidebar appears as is.
4. The widgets plugin that was installed in step 1 creates a menu under Presentation>Sidebar Widgets. I went there, and dragged a text widget onto the Sidebar. I then clicked on the box on the right, and entered the title in the title field, and the text in the text box with HTML tags.
5. Everything looked good, but next to the title was an annoying bullet that obviously emanated from an unwanted <li> list tag that had been added. The question was - where did it come from? I scoured the web looking for an answer, and found a hint on this page under the section called “My sidebar isn’t a list. What do I do?” It explained that it styles the widget with <li> tags. I opened widgets.php in the widgets folder under plugins, and changed lines 52 and 53 as follows:
   'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => "</div>\n",
   I changed the places where it said li to div. It worked like a charm.

Now I had easily editable text in the sidebar, plus I could freely use the Sociable, e-mail and print plugins as I pleased.

Posted in Plugins | Tags: Pages, sidebar, widgets | 5 Comments »

Inserting editable text in the sidebar

Update: since I wrote this post, I discovered some problems with this solution. I ended up using a different solution, which you can see in Inserting editable text in the sidebar - part II: Widgets.

I created a site for a client based on WordPress that needed some dynamic editable text in the sidebar aside from the usual blog-type stuff like archives and categories. They had a section they needed to be able to update frequently and easily from the backend.

First I tried to use Kaf’s Get-a-Post plugin. I put the required code in the sidebar, and the owners of the site could edit the specified post and the updated content would appear on the site. But the plugin did weird stuff to the text that appeared under that part on the sidebar. It was creating links where there shouldn’t be links, and was changing the formatting of the h2’s.

Next I tried Kaf’s Welcome Visitor plugin. This creates a new link under Options in the backend, and on that page you can enter text in what is very similar to the regular WordPress Write Post or Write Pages format. On this Welcome page you can enter a title and text, and after putting the correct code on the sidebar (or wherever you want it to appear), that text and changes you make to it appear there. But this plugin had even more quirks: the Welcome link under Options only appeared to users with administrative privileges, and not to anyone else; and it disappeared on the front end to any users that are logged in to the site. So I ruled this one out too.

And then I found the answer: Improved Include Page plugin. I created a page with the name that should appear as the header on the sidebar. I made sure to code the header so that this page wouldn’t appear on the navigation bar by entering the following code where the navigation bar should appear:

<?php wp_list_pages('exclude=12&sort_column=menu_order&title_li='); ?>

12 is the page ID, and the “exclude” code tells the page not to display that particular page name in the navigation bar.

Then I put the following code in the sidebar where I wanted the text on that page to appear:

<?php if(function_exists('iinclude_page')) iinclude_page(12,'displayTitle=true&titleBefore=<h2>'); ?>

Now this code tells the page to display the Page with ID of 12. Title=true means it will display the title of the page, and titleBefore=<h2> means that the title will be styled with h2 tags.

And it worked! You can see the results here: www.kayema.com. Look at the top text on the sidebar, where it says “KSI Quote” - that header plus the numbers and date underneath are editable in the backend on the page called “KSI quote.”

Improved Include Page>>

Posted in Plugins, WordPress as CMS | Tags: Pages, sidebar | 6 Comments »

Showing different sidebar on different pages

To show a different sidebar on different pages, replace the standard call for the sidebar:

<?php get_sidebar(); ?>

with the following code:

<?php include ('sidebar2.php'); ?>

The same can be done to call different headers, i.e. instead of <?php get_header(); ?> use <?php include ('header2.php'); ?>For more information, see Different Sidebars Anyone? on the WordPress codex.

Posted in Code Snippets, Tips | Tags: sidebar, template tags | 1 Comment »