Creating a Slider Shortcode Based on Nivo Slider

1 Views

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:

Read More
<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!

Post Views: 1

Related posts

Leave a Reply

2 comments

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

  2. 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