Complex Slider Shortcode Help

I have a PHP-Code for Slider which I found. Now I want to transform it into a WordPress shortcode.

Here’s the Code:

Read More
<!-- Slider -->     
        <div class="big-slider-wrapper block-full block-h-3">
            <div class="big-slider" id="big-slider"<?php echo ($timeout?' data-timeout="'.$timeout.'"':'')?>>
                <div class="big-slider-inner">
                    <div class="big-slider-uber-inner">

                    <?php
                        $i=1;
                        $checkerboard=get_option('homepage_slider_checkerboard');
                        foreach($slider as $slide) {
                            if($checkerboard == 'true')
                                $flip=!($i%2);
                            else
                                $flip=false;

                            if(@$slide['link'])
                                echo '<a href="'.$slide['link'].'" class="big-slider-slide block-3 bg-color-slider'.($flip?' flip':'').(@$slide['video_embed']?' video-slide':'').'">';
                            else
                                echo '<div class="big-slider-slide block-3 bg-color-slider'.($flip?' flip':'').(@$slide['video_embed']?' video-slide':'').'">';

                            $pic='<span class="pic block-h-2 no-mar">';
                                if(@$slide['video_embed'])
                                    $pic.='<span class="video">'.$slide['video_embed'].'</span>';
                                elseif($slide['bgimage'])
                                    $pic.='<img src="'.$slide['bgimage'].'" alt="'.htmlspecialchars($slide['title']).'" /><span class="pic-after"></span>';
                            $pic.='</span>';

                            $text='
                                <span class="text-wrapper">
                                    <span class="text block-h-1">
                                        <span class="text-inner">
                                            <span class="title">'.$slide['title'].'</span>
                                            <span class="text-text">'.$slide['description'].'</span>
                                        </span>
                                    </span>
                                </span>
                            ';

                            if($flip)
                                echo $text.$pic;
                            else
                                echo $pic.$text;

                            if(@$slide['link'])
                                echo '</a>';
                            else
                                echo '</div>';

                            $i++;
                        }
                    ?>
                    </div>
                </div>
            </div>
        </div>

        <div class="clear anti-mar">&nbsp;</div>

        <div class="big-slider-control block-full block-h-half bg-color-slider" id="big-slider-control">
            <a href="#" class="control-left"></a>
            <div class="control-seek">
                <div class="control-seek-box"><div class="control-seek-box-inner"></div></div>
            </div>
            <a href="#" class="control-right"></a>
            <div class="clear"></div>
        </div>
        <!-- /Slider -->

I already started with, first I’ve created the container which looks like this:

function shortcode_slider($atts, $content = null) {
$str = '';
$str .= '<div class="big-slider-wrapper block-full block-h-3">';
$str .= '<div class="big-slider" id="big-slider">';
$str .= '<div class="big-slider-inner">';
$str .= '<div class="big-slider-uber-inner">';
$str .= do_shortcode($content);
$str .= '</div>';
$str .= '</div>';
$str .= '</div>';
$str .= '</div>';
$str .= '<div class="big-slider-control block-full block-h-half bg-color-slider" id="big-slider-control">';
$str .= '<a href="#" class="control-left"></a>';
$str .= '<div class="control-seek">';
$str .= '<div class="control-seek-box"><div class="control-seek-box-inner"></div></div>';
$str .= '</div>';
$str .= '<a href="#" class="control-right"></a>';
$str .= '<div class="clear"></div>';
$str .= '</div>';

return $str;

}

add_shortcode('slider', 'shortcode_slider');

But now I am hanging with the nested shortcode to create, since I am not experienced PHP or WordPress coder.

Related posts

Leave a Reply