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="https://wordpress.stackexchange.com/questions/56135/image-path.jpg" data-thumb="https://wordpress.stackexchange.com/questions/56135/image-path.jpg" alt="text"/>
    <img src="image-path.jpg.jpg" data-thumb="https://wordpress.stackexchange.com/questions/56135/image-path.jpg" alt="text"/>
    <img src="https://wordpress.stackexchange.com/questions/56135/image-path.jpg" data-thumb="https://wordpress.stackexchange.com/questions/56135/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

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'].'" />';
}

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *