title: WordPress - adding pagination - visual composer
body: <p>I have a WordPress theme that uses visual composer built in plugin. The blog and porfolio are inside a function that is then expressed as shortcode on a page. Whenever I try to add some pagination function it doesnt work. The pagination works on other "normal" pages like archives, or search. Any clues?</p>
  
  <pre><code>&lt;?php function hsv_blog( $atts, $content = '', $id = '' ) {
  
  extract( shortcode_atts( array(
      'id'              =&gt; '',
      'class'           =&gt; '',
      'cats'            =&gt; '',
      'limit'           =&gt; '',
      'page_name'       =&gt; '',
      ), $atts ) );
  
  $args = array(
      'post_type' =&gt; 'post',
      'posts_per_page'    =&gt;  $limit,
      'tax_query'     =&gt; array(
          array(
              'taxonomy'  =&gt; 'category',
              'field'     =&gt; 'ids',
              'terms'     =&gt; explode(',', $cats),
              ),
          )
      );
  
  ob_start();
  
  $q = new WP_Query( $args );
  
  if ( $q-&gt;have_posts() ) while ( $q-&gt;have_posts() ) : $q-&gt;the_post();
  $post_format = (get_post_format() == true) ? get_post_format():'standard';
  
  switch ($post_format) {
      case 'aside':
      case 'quote':
      $class = ' grey';
      break;
  
      default:
      $class = '';
      break;
  }
  
  global $hsv_opt;
  // general settings
  $type_website = $hsv_opt['general-type-website'];
  $pg_class = ( $type_website == 2 ) ? ' home' : ''; ?&gt;
  &lt;div id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class('element clearfix col1-3 blog auto bi'.$class.$pg_class); ?&gt;&gt;
      &lt;?php get_template_part('post-formats/content', $post_format ); ?&gt; &lt;/div&gt; &lt;?php endwhile; ?&gt; &lt;?php wp_reset_query(); ?&gt; &lt;?php return ob_get_clean(); } add_shortcode( 'hsv_blog', 'hsv_blog' ); ?&gt;
  </code></pre>
  
  <p>pagination in the functions file:</p>
  
  <pre><code>function wpbeginner_numeric_posts_nav() {
  
  if( is_singular() )
      return;
  
  global $wp_query;
  
  /** Stop execution if there's only 1 page */
  if( $wp_query-&gt;max_num_pages &lt;= 1 )
      return;
  
  $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
  $max   = intval( $wp_query-&gt;max_num_pages );
  
  /** Add current page to the array */
  if ( $paged &gt;= 1 )
      $links[] = $paged;
  
  /** Add the pages around the current page to the array */
  if ( $paged &gt;= 3 ) {
      $links[] = $paged - 1;
      $links[] = $paged - 2;
  }
  
  if ( ( $paged + 2 ) &lt;= $max ) {
      $links[] = $paged + 2;
      $links[] = $paged + 1;
  }
  
  echo '&lt;div class="navigation"&gt;&lt;ul&gt;' . "\n";
  
  /** Previous Post Link */
  if ( get_previous_posts_link() )
      printf( '&lt;li&gt;%s&lt;/li&gt;' . "\n", get_previous_posts_link() );
  
  /** Link to first page, plus ellipses if necessary */
  if ( ! in_array( 1, $links ) ) {
      $class = 1 == $paged ? ' class="active"' : '';
  
      printf( '&lt;li%s&gt;&lt;a href="%s"&gt;%s&lt;/a&gt;&lt;/li&gt;' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
  
      if ( ! in_array( 2, $links ) )
          echo '&lt;li&gt;…&lt;/li&gt;';
  }
  
  /** Link to current page, plus 2 pages in either direction if necessary */
  sort( $links );
  foreach ( (array) $links as $link ) {
      $class = $paged == $link ? ' class="active"' : '';
      printf( '&lt;li%s&gt;&lt;a href="%s"&gt;%s&lt;/a&gt;&lt;/li&gt;' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
  }
  
  /** Link to last page, plus ellipses if necessary */
  if ( ! in_array( $max, $links ) ) {
      if ( ! in_array( $max - 1, $links ) )
          echo '&lt;li&gt;…&lt;/li&gt;' . "\n";
  
      $class = $paged == $max ? ' class="active"' : '';
      printf( '&lt;li%s&gt;&lt;a href="%s"&gt;%s&lt;/a&gt;&lt;/li&gt;' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
  }
  
  /** Next Post Link */
  if ( get_next_posts_link() )
      printf( '&lt;li&gt;%s&lt;/li&gt;' . "\n", get_next_posts_link() );
  
  echo '&lt;/ul&gt;&lt;/div&gt;' . "\n";}
  </code></pre>