WordPressGarage.com

Create drop-down menus with WordPress plugins and themes

Drop-down menus are a great way to improve the usability of your site. They allow you to offer more information without taking up too much real estate, as well as organize your content in a useful way for your readers.

But coding a drop-down menu can be a bit of a PITA (no, not the bread that holds the falafel). Lucky for us, some of our fellow web-geeks have created easy ways for us to add drop-down menus to our websites and WordPress blogs.

WordPress Drop-down menu plugins

1. The Linux and Web Development Blog has a WordPress plugin that adds a drop-down menu to your navigation bar on your WordPress blog. In order to activate this plugin, you need to upload it, activate it, and add the following code snippet to your header file:

<?php
if (function_exists(’get_menu’))
get_menu(’topmenu’);
?>

Once you have done this, log in to your site, and customize the menu on the CSS Menu option page.

2. Ryan Hellyer has developed a super-duper plugin/generator combo that allows you to create and heavily customize a drop-down menu in your WordPress blog. Features:

• Easy to customize styles with his handy Suckerfish Dropdowns Generator
• W3C valid HTML and CSS
• Only uses Javascript for annoying browsers like IE6
• If you want your visitors to be able to access your menu with their keyboard, Ryan offers the “Suckerfish Javascript for keyboard accessibility” code for including in your site.
• Compatible with every existing browser (almost) and their uncles.

You can’t say Ryan’s not thorough! See the drop-down menu in action on the Suckerfish Dropdowns Generator page.

To use his Suckerfish WordPress plugin:

1. Download the plugin from his site and activate it.
2. Go over to his Suckerfish Dropdowns Generator and customize at will. You can change pretty much every style used for the drop-down: colors, background image, font sizes, families, weight, opacity, padding, etc. Ryan has also prepared 10 ready-made styles for drop-down menus that you can use instead of fiddling around with your own styles.
3. Once you are ready, click Submit Query and the generator will produce some CSS code.
4. Coyp and paste the code into your WordPress admin (under Options). The generated styles will only work with unordered lists with an ID of #suckerfishnav. In addition, this whole plugin/generator thing may not play nice with our least-favorite browser (IE6), so Ryan recommends using his handy Suckerfish Javascript for Internet Explorer code with your site.

3. Dtabs (Dynamic Tabs) wordpress plugin by David Burton allows themes to include an optional user controlled dynamically tabbed navigation system with the possibility of drop down menus. This plugin only works with dTab enabled themes, of which there is currently one: Kubrick Tabs. However, the author provides instructions on how to dTab enable a theme on the plugin page. You can see a working example on the author’s site. The plugin is also available on the WordPress.org plugins directory.

4. A few more drop-down menu plugins:

• wp_jquery_dropdownmenu plugin
• Wordpress CSS Drop-down Menu

WordPress Themes with drop-down menus

1. The Jillij theme is a one-column theme based on Kubrick that has transformed the vertical sidebar into a horizontal drop-down navigation bar that appears under the header image. The drop-down menu is based on Widgets, so you can modify what appears on the nav bar by changing the widgets.

2. Ryan Hellyer has also created a theme that has his Suckerfish menu built-in: Aqua Vaccinium WordPress theme. I have to admit that I don’t love the look of the theme (sorry Ryan!), but the built-in Suckerfish menu can be useful for people who prefer not to use a plugin.

(Ryan does have a theme which I really like, which he uses on his blog: Hellish Simplicity.)

Posted in Plugins, Themes | 12 Comments »

Audio Player WordPress plugin automatically adds audio player to posts

Amazingly, I have never had to deal with podcast or audio files before in a WordPress blog or site. But a recent client needed a way to easily and attractively add mp3 files to her posts.

At first I tried the Podcasting plugin, but I didn’t have much luck. Then I tried the Audio Player Wordpress plugin, which worked great - it’s easy to activate and configure, and isn’t complicated for the blog owner to use.

There are various ways to use it, but here’s the way that I like best:

1. Upload and activate the plugin.
2. Go to Options > Audio Player.
3. Under where it says “How do you want to use the audio player?” select the second option: Enclosure integration (for podcasters). This option detects if there is a link to an MP3 file in your post, and automatically adds a player for that file to the end of the post.

There are a few advantages to this format:

1. You don’t have to set up a special folder for the audio files. You don’t really have to for the other options either, but if you don’t you make the user’s life a bit more difficult.
2. The user doesn’t have to remember to use any types of brackets or code
3. The post can include a flash player and a download link, so that people have the choice to listen the file online or offline. The other options that the plugin offers take the link and create a flash player from them, which means there isn’t a link to download the podcast.

Here’s an example: I really like this song by Yael Naim, an Israeli singer, which was used in the new Macbook Air commercial. You can download the link by right-clicking on Yael’s name above, or enjoy the song here in my snazzy new audio player (I hope).

Posted in Plugins | 16 Comments »

Use WP-Sticky WordPress plugin to easily create feature or "sticky" posts

The WP-Sticky WordPress plugin allows you to easily choose to “stick” certain posts at the top of your blog. This can also be done via code, as I explained in a post a few months ago where I wrote about some code that you can add to your index.php template file that will keep the latest post in your feature category at the top of your homepage. However, both the plugin and the code have advantages and disadvantages.

The coding method has the following advantages:

1. By putting all your best posts in one category, you can easily highlight these posts in a number of places, like in the sidebar or on its own category page, and of course as a feature article.
2. You can give the feature post its own styling, like a different background color, which helps it stand out even more.
3. You don’t need a plugin.

However, this method also has the following disadvantages:

1. You need to create a unique category for your feature posts. Sometimes you just want to highlight certain posts without putting them in their own category. Also, your features posts will end up needing two instead of one: “Feature,” and another category that really describes the type of article.
2. With the code I gave, the feature post will appear at the top of every main page on your blog. What I mean is that if you click on “previous entries” or something like that at the bottom of the first page of your blog, the feature post will still appear at the top on the second page. This can be confusing to readers who will wonder if they have actually browsed to a new page.
3. You need to hack your template file, which isn’t for everybody.

So I decided to try out another option, and settled on WP-Sticky by Lester Chan. The explanation on the plugin page and in the readme file is not clear, but I eventually came across a better explanation here.

After installing the plugin, it creates an additional box on the Write Post page at the bottom of the right-hand sidebar called Post Sticky Status. There, you have three options: Announcement, Sticky, and Normal.

If you select Announcement, that post will stay at the top of your blog forever, or at least until you define another post as an Announcement or change the post’s status to Normal. If you select Sticky, the post will stay at the top of your blog for the duration of the day on which you posted it, after which it will return to its place in the chronological order. This is good if you post multiple posts on one day, but want to highlight one of them by sticking it to the top of your blog.

Update February 20, 2008: Announcements can be styled! Here’s how:

You can style your feature posts as follows:

1. Find the line in your index.php file that says the following:
   <div class="post">
   Note that it may say something a bit different, like it may have a different class name. Basically, it’s the code that appears before all the content related template tags in the loop, somewhere around line 13.
2. Replace that line with the following:
   <div class="post"<?php if (is_announcement()) {echo " id=\"announcement\"";} ?>>
   That code tells WordPress that if the post is an Announcement post, it should have a class of “post” and an id of “announcement.” This way the post keeps the styling of “post” and gets additional styling of “announcement.
3. Add the following style to your style.css file:
   #announcement {}
   Put in the squiggly brackets whatever styles you want. Make the title a different size, color, give it a different background color, even add images like a “Feature” badge.

The disadvantages to the WP-Sticky WordPress plugin are:

1. You cannot give Announcement or Sticky posts their own styling.
2. You need to use a plugin.

WP-Sticky Plugin

Posted in Plugins | 5 Comments »

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 | No Comments »

Socialize Me! WordPress Plugin helps your blog interact with leading social networks

With the proliferation of social media networks, blogs have become only one tool in creating our online identity. The question is: how do we integrate all of the facets of our online identity so that we can actually have a life too? blah blah tech’s Socialize Me WordPress plugin is another step in this direction.

The Socialize Me WordPress plugin gives you another way to interact with visitors to your site who have come via other social networks:

Imagine one of your articles has been submitted to StumbleUpon. You’re getting a steady stream of visitors to your ‘blog. You could really connect with some of these guys — if you knew who they were.

Well here’s the thing, with Socialize Me! those visitors to your ‘blog will see a simple message when they arrive: “Hi, thanks for the visit! [I'm] on StumbleUpon, too!” with a link to your profile.

With the Socialize Me! Plugin for WordPress you can connect with people on services like: StumbleUpon, Facebook, Digg, Delicious, Pownce, Twitter, Bebo, MySpace and many, many more.

StumbleUpon is a great example of how the plugin can be used, since StumbleUpon can be a pretty good source of traffic, but the visitors are always unknown, and seem to just pass on through. This plugin can hopefully create a stronger connection with them and get them to stick around.

WordPress Plugin: Socialize Me!

Posted in Plugins | 1 Comment »