0

I`m trying to make a shortcode that output the a div containing content from Custom Post type . I'm able to output the content but content does not output within div . the shortcode output the div and content separately . I'm new to Wordpress . Please help. Here is my code:

<?php

function service_shortcode() {
$service = new WP_Query(array(

'orderby' => 'rand', 
'post_type' => 'our_service' , 
'posts_per_page' => 1,

));

if ($service->have_posts()) :
  while ($service->have_posts()) : $service->the_post();
     $return_string =   '<div class="row">
                        <div class="col-md-3 col-sm-6">
                        <div class="content">
                        <h2>'.the_title().'</h2>
                        <p>'.the_content('').'</p>
                        </div>
                        </div>
                        </div>';
  endwhile;
  endif;
  wp_reset_query();
  return $return_string;
  }

function register_shortcodes(){
add_shortcode('service-shortcode', 'service_shortcode');
}

add_action( 'init', 'register_shortcodes');

?>

Thanks in advance...

  • You are completely doing it wrong unfortunately. You are echoing the template tags, where as it should be returned. Use the get_* versions. Registering your shortcode in init won't work, it is way to early. Please see the shortcode API on how to properly construct a shortcode – Pieter Goosen Mar 3 '15 at 13:05
  • Hi Pieter, Thanks for the answer but can u please explain a little more. Thnkx. – Hussy571 Mar 3 '15 at 13:14
  • I'm leaving work now, if you haven't got any concrete answer, I will be happy to post an answer. In the mean time, being a new user, feel free to visit How to Ask and help center and also take a tour to build up knowledge on how the site works and how to get the most out of it. And more importantly, welcome to WPSE :-) – Pieter Goosen Mar 3 '15 at 13:18
  • Yeah sure . Waiting for the answer to get what I want . Thankx.. – Hussy571 Mar 3 '15 at 13:23
0

You have two big issues here are a few minor ones and some room for improvement. Lets look at your major mistakes first

  • What you have done well is to add your output to a variable and then returning the variable in the end. Shortcodes should always return their output, not echo it. What you have done wrong here is to use the wrong template tags. The the_* prefix means that the template tag is echoing its output, not returning it. You should be using the template tags with the get_* prefix which return its output

  • You should not hook your shortcode, specially not to init. init runs way to early for most functionalities, by then they are not registered yet. That is why your shortcode does not output anything

Some of the smaller mistakes:

  • You should be using wp_reset_postdata(), not wp_reset_query(). The latter is used with query_posts which you must never ever use

  • wp_reset_postdata() should be used right after you close your while statemnet and before closing your if statement. This will prevent resetting something that does not exist if you don't have any posts

  • You should define your variable before using it before the loop. If you don't, and you do not have posts, this will lead to an undefined variable notice, which is bug, and we don't want bugs

Now, lets look at the nitty-gritty stuff. This does not improve performance and can be omitted. This is just tips to make your code more readable and easier to debug

  • Although it is valid php, don't use : and endwhile and endif. The major reason is debugging and readability. Most (and I would tend to say no) code editors does not support this syntax, making it a nightmare to debug. Ask me how frustrating it is debugging a lot while and if statements using this syntax. I prefer the old curlies (braces), it is supported by all code editors AFAIK, and make debugging a breeze

  • Properly indent your code, it does help a lot with readability and debugging

  • Always add your action before you declare your function. With the introduction of closures in php, it just makes much more sense to do it this way

  • Don't concatenate 10 lines of code to one variable on line one, one tend to get lost down the line. Properly concatenate each line separately

You can try the following:

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

function service_shortcode() 
{
    $return_string = '';

    $service = new WP_Query(array(
        'orderby' => 'rand', 
        'post_type' => 'our_service' , 
        'posts_per_page' => 1,
    ));

    if ($service->have_posts()) {
        while ($service->have_posts()) { 
            $service->the_post();

            $return_string .= '<div class="row">';
            $return_string .= '<div class="col-md-3 col-sm-6">';
            $return_string .= '<div class="content">';
            $return_string .= '<h2>'.get_the_title().'</h2>';
            $return_string .= '<p>'.get_the_content('').'</p>';
            $return_string .= '</div>';
            $return_string .= '</div>';
            $return_string .= '</div>';
        }
        wp_reset_postdata();
    }
    return $return_string;
}
  • Thanks Pieter Goosen very well explained very well.. Thank u very much.. The only problem I'm having is shortcode outputting content with vertical scroll :( .. but now i understand very well thanks again.. – Hussy571 Mar 3 '15 at 17:03
  • My pleasure, glad I could help. I hope you get your other problem sorted. If you don't, you should consider asking a new question on SO as it will most probably be closed as off topic here as it seems to be CSS related. Enjoy :-) – Pieter Goosen Mar 3 '15 at 17:08

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.