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
    CommentedMar 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
    CommentedMar 14, 2015 at 20:45
  • so... there is no loop? so.. what the problem? using the same code for different part pf code?
    – Sagive
    CommentedMar 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
    CommentedMar 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
    CommentedMar 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
    CommentedMar 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
    CommentedMar 16, 2015 at 14:05
  • Here is the jsfiddle (jsfiddle.net/a07btqs6/3)
    – Hussy571
    CommentedMar 16, 2015 at 14:44
  • Oops, just saw where my problem is. Standby for answer revision.
    – user12479
    CommentedMar 16, 2015 at 15:04

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.