0

I've created a custom shortcode which takes category slug and number of posts as parameters and creates a loop with WP_Query and outputs the posts from db. But I'm unable to use it more than one time the category slugs are different and also I've mapped the shortcode into visual composer plugin but inside at the frontend the shortcode output is outside visual composer column div.

Here is my shortcode code:

$postBox_1_attr = shortcode_atts(array(
        'kategoria' => 'lajme',
        'nr_postimeve' => 5,
    ),$atts);

    $kategoria = $postBox_1_attr[ 'kategoria' ];
    $nrPostimeve = $postBox_1_attr[ 'nr_postimeve' ];

    $sql = new WP_Query( array( 
        'category_name' => $kategoria,
        'posts_per_page' => 1,
        'post_status' => 'publish'
        ) );


     if ( $sql->have_posts() ) : ?>

    <div class="vc_col-sm-8">
     <div class="box-1">

     <?php while ( $sql->have_posts() ) : $sql->the_post(); ?>
        <div class="headline">
            <?php the_post_thumbnail() ?>

            <a href="<?php the_permalink() ?>">
                <h4> <?php the_title() ?></h4>
                <p> <?php the_excerpt() ?> </p>
            </a>



            <?php
            endwhile;
            wp_reset_postdata();
            endif;
            ?>

        </div> <!-- end featured post -->

        <div class="recentPosts">
        <?php 
            $secondSql = new WP_Query( array( 
            'category_name' => $kategoria,
            'posts_per_page' => $nrPostimeve,
            'post_status' => 'publish',
            'offset' => 1
            ) );

            if ( $secondSql->have_posts() ) : 
            while ( $secondSql->have_posts() ) : $secondSql->the_post(); 
        ?>

            <div class="small-items">

                <div class="thumb">
                    <?php the_post_thumbnail() ?>
                </div>

                <div class="title">
                    <a href="<?php the_permalink() ?>">
                        <h4> <?php the_title() ?></h4>
                    </a>
                </div>

            </div> <!-- end single item -->

    <?php 
         endwhile; 
         wp_reset_postdata();
         endif;
     ?>
          </div> <!-- endSidePosts --> 
     </div> <!-- end BoxLayout -->
     </div>

UPDATE:

I forgot to include at the question that I was loading the shortcode code from a separate .php file

This is the code and function for the shortcode creation at themes functions.php file

function postBoxes_1( $atts ){
    include('post-layouts/post-box-1.php'); /* earlier I had include_once and that was the problem */
}

add_shortcode('postBox1','postBoxes_1');

Now the only problem is that when I use as mapped visual composer shortcode it doesn't output the shortcode inside the column div. With raw shortocode it works perfectly, but I was thinking to make it easier for the website moderators to play with the values from a GUI interface.

  • Does this work as expected if you use the shortcode without visual composer? – Tom J Nowell Apr 7 '16 at 17:54
  • now I tried the shortocode inside text block module and now outputs it inside the visual composer column div but still cannot re-use the same shortcode with different parameters inside the same page – albpower Apr 7 '16 at 22:29
  • 1
    Possible duplicate of short code output too early – Milo Apr 7 '16 at 22:51
  • 2
    the answer I linked explains why that happens- shortcodes must return their content. – Milo Apr 7 '16 at 23:12
  • 1
    Ok, I've solved it too I'll the answer as answer for people having same problem – albpower Apr 7 '16 at 23:36
0

Okay here are the solutions for my problems here for the people having the same problem.

1 - First problem was I was unable to get the shortcode to work in multiple instances and that was because I used include_once at the shortcode function instead of include to include the separate php template.

2 - The second problem was that when I mapped my shortcode inside Visual Composer plugin at output the content generated from my shortcode was outside of the column div.

The solution to this is adding this part of code at the shortcode function.

function postBoxes_1( $atts ){
    ob_start();
    include('post-layouts/post-box-1.php');

    return ob_get_clean();
}

add_shortcode('postBox1','postBoxes_1');

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.