2

I´m new with wordpress and I need to create a slider based on Nivo library. There I would like to create the shortcode using this syntax:

[slider]
[image]http: //www .domain.com/images/1.jpg[/image]
[image]http: //www .domain.com/images/2.jpg[/image]
[image]http: //www .domain.com/images/n.jpg[/image]
[/slider]

The output code would be like this:

<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
    <img src="image-path.jpg" data-thumb="image-path.jpg" alt="text"/>
    <img src="image-path.jpg.jpg" data-thumb="image-path.jpg" alt="text"/>
    <img src="image-path.jpg" data-thumb="image-path.jpg" alt="text"/>
  </div>
  <div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
  </div>
</div> 

I have not so much experience with php either and I tried to do something like this:

function nivo_slider_func($atts)
{
  extract(shortcode_atts(array('gallery_name' => ''), $atts));
  $output = "<div class='slider-wrapper theme-default'>";
  $output .= "<div id='slider' class='nivoSlider'>";
  $atts = shortcode_atts(
    array(
      'url' => '',
      'title' => ''
    ), $atts);

  foreach ($atts as $atts) {
    $src = $atts['url'];
    $title = $atts['title'];
    $output .= "<img src='" . $src . "' data-thumb='" . $src . "' alt='" . $title . "' />";
  }
  $output .= "</div></div>";
  return $output;
}

add_shortcode( 'slider', 'nivo_slider_func' );

But it does not work correctly. Could you help me with this, please?

Thanks in advance!

2 Answers 2

3

that's will be nested shortcodes, so you will need [slider] and [image] shortcode

add_shortcode( 'nivo_slider', 'nivo_slider_func' ); 
function nivo_slider_func( $atts, $content = null ) {
    $output  =  '<div class="slider-wrapper theme-default">';
    $output .=  '<div id="slider" class="nivoSlider">';
    $output .=  do_shortcode($content);
    $output .=  '</div></div>';
    return $output;
}

add_shortcode( 'image', 'nivo_image_shortcode' );
function nivo_image_shortcode( $atts, $content = null ) {
    extract( shortcode_atts( array(
    'title' => ''
    ), $atts )
    );
    return '<img src="'.$content.'"  data-thumb="'.$content.'" title="'.$atts['title'].'" alt="'.$atts['title'].'" />';
}
4
  • Gembel, IT WORKED LIKE A CHARM! Thank you very much!! :)
    – BeatLaG
    Commented Jun 22, 2012 at 10:24
  • Glad it help ;)
    – Dazilio
    Commented Jun 22, 2012 at 11:07
  • I´m sorry, I´m quite new on stackoverflow and I don´t know well best practices in order to follow correctly threads. My apologizes.
    – BeatLaG
    Commented Jun 22, 2012 at 15:23
  • A last question. The shortcode generates a paragraph element I need to remove, this is the output: <p><img src="path-to-image.jpg" data-thumb="path-to-image.jpg" title="" alt="" /></p> What should I do to remove that paragraph element from the markup? I tried using: remove_filter( 'the_content', 'wpautop' ); add_filter( 'the_content', 'wpautop' , 12); But it does not work, paragraphs are in my markup still. Thank you very much in advance for your help!
    – BeatLaG
    Commented Jun 22, 2012 at 15:24
1

at first glance i see, you registered nivo-slider as your shortcode but you've used [slider]. you need to register slider as your shortcode.

add_shortcode( 'slider', 'nivo_slider_func' );

or, if you want to use nivo-slider as your shortcode, you will need to update how you used it. in that case you don't need the above code.

[nivo-slider] [image]http: //www .domain.com/images/1.jpg[/image] [image]http: //www .domain.com/images/2.jpg[/image] [image]http: //www .domain.com/images/n.jpg[/image] [/nivo-slider]

but it's better if you do not use hyphen as it may cause problems occasionally: http://codex.wordpress.org/Shortcode_API#Hyphens

3
  • Off-topic : HungryCoder, when you edit a question, take a look if the title and the content can be upgraded too. A good title for this question would've been: "Creating a Slider Shortcode Based on Nivo Slider". And the two last sentences could've been removed: "Could you help..." and "Thanks...". Regards!
    – brasofilo
    Commented Jun 22, 2012 at 3:39
  • I have updated title and corrected the code. Initially the [slider] was just the example. What I need to do is get the [images] and pass them to the slider. How can I catch them?
    – BeatLaG
    Commented Jun 22, 2012 at 3:43
  • in that case your scenario explanation was wrong. however, for nested shortcode, you can follow what Gembel Intelek suggested. You can read here too: sitepoint.com/wordpress-nested-shortcodes Commented Jun 22, 2012 at 3:59

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.