I use Genesis for the WordPress themes I build. The good folks at StudioPress built a great slider plugin so it was a no-brainer to use that as my starting point. Rip out the javascript & replace that with jQuery Easy Accordion. Rename things so as not to conflict with Genesis Slider (should someone use both on their site). Build in new configuration options. Create the .pot file for translations. It’s a plugin!

You can download Genesis Accordion here.

Genesis Accordion requires you to be using the Genesis framework. Without that, this plugin won’t work.

You can set whether or not the accordion auto-starts. You can select which post type you want it to draw from, what category, etc. Each slide in the accordion has the slide title running vertically up the edge of the slide. By default, this is also the title of the Post / Page. Since these titles can run longer than the space on the edge of the slide allows, you can opt to either truncate the titles to a specific number of characters or you can create a custom field called Accordion Title & use that.

Download it & give it a shot. Leave a comment & let me know how it works, problems, conflicts, etc. It’s a relatively quick & dirt release, mostly a proof-of-concept. I make no guarantees with it, though I did test in on WP 3.3.1 with various other plugins enabled.

So I wrote two shortcodes to do this, one for Youtube and one for Vimeo.

Copy both of these into your functions.php:

// Vimeo Shortcode
add_shortcode('vimeo', 's25_vimeo_shortcode');
function s25_vimeo_shortcode($atts) {
extract(shortcode_atts(array( 'src' => '','width' => '','height' => ''), $atts));
if ($src) $show_src = esc_url(str_replace('http://vimeo.com/','http://player.vimeo.com/video/',$src), array('http'));
if ($width) $show_width = ' width="'.$width.'"';
if ($height) $show_height = ' height="'.$height.'"';

return '<iframe src="'.$show_src.'?title=0&amp;byline=0&amp;portrait=0" '.$show_width.$show_height.' frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>';
}

// Youtube Shortcode
add_shortcode('youtube', 's25_youtube_shortcode');
function s25_youtube_shortcode($atts) {
extract(shortcode_atts(array( 'src' => '','width' => '','height' => ''), $atts));
if ($src) $show_src = esc_url(str_replace('watch?v=','embed/',$src), array('http'));

if ($width) $show_width = ' width="'.$width.'"';
if ($height) $show_height = ' height="'.$height.'"';
return '<iframe '.$show_width.$show_height.' src="'.$show_src.'" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>';
}

Youtube shortcode

Start with the address (URL) of a Youtube video. For instance, say you’re watching this Youtube video: http://www.youtube.com/watch?v=aBnGbFjlhM0&feature=grec_index. You would copy everything from the left up to the ampersand (this-> &): http://www.youtube.com/watch?v=3s4Czla6tXc. 

This becomes the src attribute of your shortcode and you write this in your Post or Page:

[youtube src=http://www.youtube.com/watch?v=3s4Czla6tXc]

If you want to add a width and height attribute, you can add width and height like so:

[youtube src=http://www.youtube.com/watch?v=3s4Czla6tXc width=600 height=450]

Tip: If you click on the Share button underneath the Youtube video, then again on Embed, you’ll see, in the embed code, the width and height of the video you’re watching.

Vimeo shortcode

Vimeo URLs are easier to work with, so far. They look pretty much like this: http://vimeo.com/31082448. Copy the address and it becomes the src attribute of your shortcode. Write it in your Post or Page:

[vimeo src=http://vimeo.com/31082448]

If you want to specify a width and height, you can add those attributes like so:

[vimeo src=http://vimeo.com/31082448 width=640 height=360]

Tip: To get the width and height of a Vimeo video, click on the embed link on the right side of the video player (mouse over the video to see these). Then click on the Customize embed options. Enter a width value and press the Tab key on your keyboard (or click on the height field). Vimeo will automatically calculate the correct height value for you. Use those for your width and height attributes in your shortcode.

If you resize an image in the Visual Editor, a new width and height attribute get added to the image. WP Fluid Images loads a jQuery script that examines the .post, or .page divs for image tags. It calculate the image’s width as a percentage of the .post or .page div, removes the width and height attributes, and adds a style attribute with a width value set to the calculated percentage.

What is the concept of “Fluid Images”?

The idea behind fluid images is that instead of having images that size proportionally and smoothly as your web page’s width increases or decreases. Ethan Marcotte wrote an article on the idea at A List Apart:
You can also learn more at his site: Unstoppable Robot Ninjas. Fluid Images is an important consideration in responsive web design. Which segues to:

What is Responsive Web Design?

Responsive Web Design is the idea of having your site’s design be flexible enough to resize based on the width of the browser window. This allows you to create a single, adjustable design that works regardless of the size of the device. It’s a nice alternative to building separate designs for desktop browsing, tablets, mobile browsers, etc.

You can download WP Fluid Images here.

Foomark is a bookmarking site, in the vein of Delicious & Magnolia. Up to now, there wasn’t a way to integrate your foomarks with your blog or website – somthing I wanted to do. Now there is.

This plugin lets you share your foomarks in a widget. It takes the JSON feed from Foomark & outputs the title of each foomark, linked to that bookmarked site. At the bottom of the widget is a link to your Foomark page.

You can download the plugin here.

Notes

• The plugin reads Foomark’s JSON feed from api.foomark.com.
• There is a 3-second timeout on the connection. If api.foomark.com isn’t able to respond, an error message appears, rather than holding up the rendering of your site.
• The plugin is internationalized with Spanish (Mexican) and German translation files.

If you have any questions, please use the official support forums.

• OpenDocument Presentation (.odp) version
• PDF version of the slides

slash25 is the consultancy of Pat Ramsey, specializing in helping you use WordPress to power your site. Whether it’s questions on how you can take full advantage of your site, or you need a theme created from a design, or you need some WordPress training, I can help. I have years of experience working with WordPress – it’s a great, amazing piece of malleable software that you can mold and shape to do almost anything.

You want your website to be easy-to-use, secure, and well-designed. I can help you reach that goal.

Code that works,… beautifully