MediaElements

MP4 Video

Fancy Slide Transitions with Nivo Slider

There’s a great jQuery plugin called Nivo Slider. You can purchase the WordPress plugin from dev7studios.com or implement the free jQuery version in your custom WordPress theme.

Instructions for implementing the free jQuery version can be found here. Make sure that the “max-width” is set to “none” in your style sheet.

If necessary, add something like #slider img { max-width: none } to your css.

Add Rich Snippets to Your Website

Below is an example of some markup without rich snippets:

<h1>Welcome to Team Momentum</h1>

<p>We're your marketing strategist, based in Cary, NC, specializing in low-cost websites and electronic promotional solutions. We offer:</p>

<ul><li>Professional Looking Websites from $399</li>
<li>WordPress Setup and Training</li>
<li>Search Engine Optimization (SEO)</li>
<li>Social Media Marketing</li>
<li>Brand Consultation &amp; Logo Development</li>
<li>Affordable Custom Printing</li></ul>

<p>To the left you'll see a few pics of my family. I'm John Sam, the one next to Jack. Hope you're having as much fun as I am. Have a great day!</p>

This is the same text with Rich Snippets:

<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1>Welcome to <span itemprop="name">Team Momentum</span></h1>
<p>We're your marketing strategist, based in <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="addressLocality">Cary</span> <span itemprop="addressRegion">NC</span></span>, specializing in low-cost websites and electronic promotional solutions. We offer:</p>
<ul><li><div itemprop="makesoffer" itemscope itemtype="http://www.schema.org/Offer"><span itemprop="name">Professional Looking Websites from $399</span></div></li>
<li><div itemprop="makesoffer" itemscope itemtype="http://www.schema.org/Offer"><span itemprop="name">WordPress Setup and Training</span></div></li>
<li><div itemprop="makesoffer" itemscope itemtype="http://www.schema.org/Offer"><span itemprop="name">Search Engine Optimization (SEO)</span></div></li>
<li><div itemprop="makesoffer" itemscope itemtype="http://www.schema.org/Offer"><span itemprop="name">Social Media Marketing</span></div></li>
<li><div itemprop="makesoffer" itemscope itemtype="http://www.schema.org/Offer"><span itemprop="name">Brand Consultation &amp; Logo Development</span></div></li>
<li><div itemprop="makesoffer" itemscope itemtype="http://www.schema.org/Offer"><span itemprop="name">Affordable Custom Printing</span></div></li></ul>
<p>To the left you'll see a few pics of my family. I'm John Sam, the one next to Jack. Hope you're having as much fun as I am. Have a great day!</div></p>

Scrolling Content

If you want to add scrolling content to a window in WordPress, you can create use the jQuery marquee plugin. Implementation is pretty straightforward.

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Display BuddyPress Profile Fields Anywhere

If you want to echo BuddyPress’s extended profile fields outside the loop, you need to add the $bp->loggedin_user->id parameter.

Here’s the code using a Genesis hook (substitute a hook for your theme):

function show_extra_profile_fields() {
global $bp;
$myfield = xprofile_get_field_data( 'Field Name', $bp->loggedin_user->id );
echo $myfield;
}
add_action( 'genesis_before_loop', 'show_extra_profile_fields' );

Add html tags to the echo statement and you’re in business.

Blessings.

Iframes in WordPress Without a Plugin

You can use iframes in WordPress without a plugin. Just use standard html markup. For example:

<iframe width="560" height="349" src="http://www.youtube.com/embed/PD6eQY7yCfw" frameborder="0" allowfullscreen></iframe>

Here’s the result: The “Dude Perfect” Guys

Panning and Zooming Slideshows without Flash

CrossSlide is a great jQuery plugin that adds a Ken Burns Effect (panning and zooming) to slideshows without Flash, ready for viewing on an iPad. Implementation in WordPress is a bit tricky because of a potential confict with WordPress’s dynamic image handling. Yet with a bit of CSS magic, we can pull it off. Check it out.

Loading…