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

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

2 Answers 2

Reset to default
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]
Improve this answer
2
  • 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
    Commented Mar 15, 2015 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
    Commented Mar 15, 2015 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]
Improve this answer
4
  • 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
    Commented Mar 15, 2015 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
    Commented Mar 16, 2015 at 14:05
  • Here is the jsfiddle (jsfiddle.net/a07btqs6/3)
    – Hussy571
    Commented Mar 16, 2015 at 14:44
  • Oops, just saw where my problem is. Standby for answer revision.
    – user12479
    Commented Mar 16, 2015 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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