0

I'm making shortcode and I'm stuck here. Here is code:

add_shortcode('service-shortcode', 'service_shortcode');

function service_shortcode($atts) 
{
extract( shortcode_atts( array(

   'title' => 'Service One',
   'icon' => 'fa-briefcase'

    ), $atts ));
$return_string = '';

$return_string .= '<div class="service">';
    $return_string .= '<div class="container">';
        $return_string .= '<div class="row">';
            $return_string .= '<div class="col-md-3 col-sm-6">';
                $return_string .= '<div class="service-icon wow animated fadeInDown" data-wow-delay="300ms">';
                    $return_string .= '<i class="fa '.$icon.'"></i>';
                $return_string .= '</div>';
                $return_string .= '<div class="text wow animated fadeInUp" data-wow-delay="300ms">';
                    $return_string .= '<p>'.$title.'</p>';
                $return_string .= '</div>';
            $return_string .= '</div>';
        $return_string .= '</div>';
    $return_string .= '</div>';
$return_string .= '</div>';

return $return_string;
}

Now when ever I put the shortcode it outputs the complete shortcode. What I want is for the first time it outputs complete shortcode and then just output from (div class="col-md-3 col-sm-6") to its closing tag. So the all services will come in a row.. Is there any way to achieve it. Thanks in advance..

Note: I don't want to make custom post type that store each service and call with wp_query ...

  • but where is wordpress query / loop? Please paste the full code – Sagive SEO Mar 14 '15 at 20:39
  • I don't have any wp_query in the shortcode. This is the full shortcode. Hope u got my question :/ – Hussy571 Mar 14 '15 at 20:45
  • so... there is no loop? so.. what the problem? using the same code for different part pf code? – Sagive SEO Mar 14 '15 at 21:46
0

Ok mate - i got you...
you should really break into 2 shortcodes. One as a wrapper (which is really short) and the other for the content...

Example:

add_shortcode('servicewrap', 'service_wrapsc');
function service_wrapsc($atts, $content = null) {
    return '<div class="service"><div class="container"><div class="row">'.do_shortcode($content).'</div></div></div>';
}


add_shortcode('servicesingle', 'service_singlesc');
function service_singlesc($atts, $content = null) {

    extract(shortcode_atts(array(
        'icon'  => 'fa-briefcase'
    ), $atts));


    return '
    <div class="col-md-3 col-sm-6">';
        <div class="service-icon wow animated fadeInDown" data-wow-delay="300ms"><i class="fa '.$icon.'"></i></div>
        <div class="text wow animated fadeInUp" data-wow-delay="300ms">
            <p>'.do_shortcode($content).'</p>
        </div>
    </div>';
}

Than... You can do something like

[servicewrap]
    [servicesingle icon=""]Your title here[/servicesingle]
    [servicesingle icon=""]Your title here[/servicesingle]
    [servicesingle icon=""]Your title here[/servicesingle]
[/servicewrap]
  • Hi, Sagive You explained it very well . Learned new things. but I'm integrating my shortcodes into the tinyMCE button so I'm bit confused on clicking the button it will execute the shortcode which is [servicewrap] [servicesingle icon=""]Your title here[/servicesingle] [/servicewrap] But for the next time how it will just execute servicesingle shortcode inside servicewrap shortcode. Thanks for your answer.. – Hussy571 Mar 15 '15 at 6:47
  • hmm.. well, i use chained dropdowns (2 selects) as my shortcodes helper so i dont have that issuse. i guess you can make it one button and just copy the inside container. i dont see any other way that would offer flexibility - you can also make 2 buttons but i think thats overkill for such a simple shortcode. – Sagive SEO Mar 15 '15 at 23:43
0

EDITED 2015 March 16:

A quick solution would be to use wrapping shortcodes.

function service_shortcode_start() {
    $return_string .= '<div class="service">';
        $return_string .= '<div class="container">';
            $return_string .= '<div class="row">';
                 $return_string .= '<div class="col-md-3 col-sm-6">';

    return $return_string;
}

function service_shortcode_end() {
    $return_string .= '</div>';
        $return_string .= '</div>';
            $return_string .= '</div>';
                 $return_string .= '</div>';

    return $return_string;
}

function service_shortcode( $atts ) 
{
    extract( shortcode_atts( array(
       'title' => 'Service One',
       'icon' => 'fa-briefcase'
        ), $atts ));
    $return_string = '';

    $return_string .= '<div class="service-icon wow animated fadeInDown" data-wow-delay="300ms">';
    $return_string .= '<i class="fa '.$icon.'"></i>';
    $return_string .= '</div>';
    $return_string .= '<div class="text wow animated fadeInUp" data-wow-delay="300ms">';
    $return_string .= '<p>'.$title.'</p>';
    $return_string .= '</div>';

    return $return_string;
}

add_shortcode( 'service-shortcode', 'service_shortcode' );
add_shortcode( 'service-shortcode-start', 'service_shortcode_start' );
add_shortcode( 'service-shortcode-end', 'service_shortcode_end' );

Example:

[service-shortcode-start][service-shortcode title="1" icon="fa-briefcase"][service-shortcode title="2" icon="fa-phone"][service-shortcode title="3" icon="fa-banana"][service-shortcode-end]
  • Hi Doug, Thanks for your answer again. I implemented your example we are nearly there. What its doing now it is outputting (div class="col-md-3 col-sm-6") out side the service>container>row. I want it to output inside this right after the after first (div class="col-md-3 col-sm-6") close. Thanks for answer. I'm waiting for your answer :P thanks again... – Hussy571 Mar 15 '15 at 6:42
  • I've edited the code to do what I think you said you want; that is, to move the row div up to the start block for your code. If that isn't what you are after, you need to make a jsfiddle that shows the HTML structure you are after. – user12479 Mar 16 '15 at 14:05
  • Here is the jsfiddle (jsfiddle.net/a07btqs6/3) – Hussy571 Mar 16 '15 at 14:44
  • Oops, just saw where my problem is. Standby for answer revision. – user12479 Mar 16 '15 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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