I think I may have painted myself into a corner. I need to find a plugin, if such a thing exists, that will be a slider/text combo.

My client loves the way the pics on this page slide up to show some text:http://p3mma.com/. The sliders here look like they are a. all images and b. just some sort of javascript and not in WordPress.

He would like, when there is a mouseover the image, text about the special event in the picture appear in place of the image. He does not have resources to make new images, so that is out. He will be able to handle uploading a pic and adding some text.

To complicate matters, the rough I came up with had the image/rollover area with a kind of odd shape (Featured News Area on the top of the right column): http://blackbeltleadershipacademy.com/idea1and3-updated.jpg. I may, if I'm terribly clever, be able to figure out some css to do the shape (or close to it).

So, any ideas how I can this area an easily editable rollover with text and images? Yeah, me neither.

4 Answers 4


I don't know of a plugin, but you could do it yourself.

Structure :

  • Each slide is a post.
  • Each post contains text and one image (uploaded throught media uploader)
  • To target the proper post, you could use differents techniques, the simpleiet is to use a category i.e. : "slider".

Where you want to use the slider, I propose to use something like :

function display_sliders() {

    // get posts 
    $args = array (
        'category_name' => 'slider',
        'numberposts' => 3, // adapt the number to your needs
    // fectching data
    $posts_sliders = get_posts( $args );

    foreach ( $posts_sliders as $post_slider ) {

    // we will need a image associated to the post
    $args = array (
        'numberposts' => 1,
        'post_parent' => $post_slider->ID, //the way we have image child of the post
        'post_type'   => 'attachment',
        'post_mime_type' => 'image'

    $image_slide = get_post ( $args );

    // change ouput according to the requisite of plugin
    echo '<div class="slider-wrapper">';
    echo '<div class="slider-texte">';
    echo '<h2 class="slider-title">' . $post_slider->post_title . '</h2>';
    echo '<p class="slider-body">' . $post_slider->post_content . '</p>';
    echo '</div>';

    // Second div for image
    echo '<div class="slider-image">';
    echo wp_get_attachment_image( $image_slide->ID, 'medium'); // change size in media to fit the correct size
    echo '</div>'; 
    echo '</div>';



After that, you will need to find a jQuery plugin to does the trick, include it into your theme, and maybe adapt the output details, but this is a short bit of code to see if this logic could help you to start something.

I use this kind of fully customisable slider a lot and clients find is pretty easy to use.

  • Thanks for the answers both of you. Seems to be an error that won't let me login and rate right now. But I appreciate your help!
    – ERM
    Aug 8, 2012 at 18:29
  • Sorry about that. There is a typo right after 'post_mime_type' => 'image' that I corrected. Anyway, i didn't test the snippet live, you could use it as a logical base if it fits somehow what you need.
    – Simon
    Aug 8, 2012 at 22:08

This is kind of a tough one, but you should be able to do this using a good base plugin and some tricky imagery + CSS. First I recommend is Meteor Slides. If you look on the developer's site you'll see he has a good example of how to add a caption or content area. Give that a good read. You can also add support for the WYSIWYG editor to the actual slide, as it is just a Custom Post Type. Here is some example code you can add to functions to achieve this:

// Add editor to Meteor Slides
add_post_type_support('slide', 'editor');

Then just grab yourself a copy of the meteor-slideshow.php and meteor-slides.css from the plugins folder, edit those to your heart's content (including adding the_content() somewhere near the end of the .mslide div. Then edit that CSS file to allow the text room to breath (height and line-height might need tweaked).

As for the curved space, you could use an absolutely positioned image (like a stage) to mask out the space, or just make each image a .png cut to resemble that shape.

I have a fair working example of a slideshow where I have content inside the slideshow using Meteor Slides. I will PM you that link.


Found two good solutions for this in the end. I used the Smooth Slider plugin which tied in nicely with the Events Manager calendar system. Client decided they didn't want a tie-in so we switched to a scrollarama plugin which links to a post. Pics aren't 100% wonderful but it is very easy for the client to update.


One plugin that is very customisable would be WP Content Slideshow

  • Lone link is considered a poor answer since it is meaningless by itself and target resource is not guaranteed to be alive in the future. Please try to include at least summary of information you are linking to.
    – Rarst
    Oct 4, 2012 at 16:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.