WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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:

[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]

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 id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.

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(
      '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!

share|improve this question

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'].'" />';
share|improve this answer
Gembel, IT WORKED LIKE A CHARM! Thank you very much!! :) – BeatLaG Jun 22 '12 at 10:24
Glad it help ;) – Gembel Intelek Jun 22 '12 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 Jun 22 '12 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 Jun 22 '12 at 15:24

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

share|improve this answer
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 Jun 22 '12 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 Jun 22 '12 at 3:43
brasofilo: thanks for suggestions. – HungryCoder Jun 22 '12 at 3:52
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 – HungryCoder Jun 22 '12 at 3:59

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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