I created a short code to display a list of Projects, which they are in a custom post type "Projects". The short code is simply displaying the projects and I want to include the pagination within the short code. Everything is working well, except that the pagination is showing BEFORE the list of projects, it should output after the list.
Everything will work if it's built-in in a custom page template. But of I use the short code, it won't output the way it should.
Here is the short code PHP code :
if (!function_exists('shortcode_projects_list')) {
function shortcode_projects_list($atts, $content = null) {
global $wp_query;
global $options;
$args = array(
"type" => "standard",
"order_by" => "date",
"order" => "DESC",
"number" => "-1",
"category" => "",
"selected_projects" => ""
);
extract(shortcode_atts($args, $atts));
$html = "";
$_type_class = '';
$_portfolio_space_class = '';
if ($type == "standard"){
$_type_class = " standard";
$_portfolio_space_class = "portfolio_with_space";
} elseif ($type == "standard_no_space"){
$_type_class = " standard_no_space";
$_portfolio_space_class = "portfolio_no_space";
}
if($type != 'standard_no_space') {
$html .= "<div class='block-grid $_portfolio_space_class cf'>\n";
if (get_query_var('paged')) {
$paged = get_query_var('paged');
} elseif (get_query_var('page')) {
$paged = get_query_var('page');
} else {
$paged = 1;
}
if ($category == "") {
$args = array(
'post_type' => 'projects',
'orderby' => $order_by,
'order' => $order,
'posts_per_page' => $number,
'paged' => $paged
);
} else {
$args = array(
'post_type' => 'projects',
'projects_cat' => $category,
'orderby' => $order_by,
'order' => $order,
'posts_per_page' => $number,
'paged' => $paged
);
}
$project_ids = null;
if ($selected_projects != "") {
$project_ids = explode(",", $selected_projects);
$args['post__in'] = $project_ids;
}
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post();
$terms = wp_get_post_terms(get_the_ID(), 'projects_cat');
$project_bg_color = get_post_meta(get_the_ID(), 'sbwp_project_bg_color', true);
$project_text_color = get_post_meta(get_the_ID(), 'sbwp_project_text_color', true);
$html .= "<article class='block-item third-width third-height cf";
foreach ($terms as $term) {
$html .= " portfolio_category_$term->term_id";
}
$title = get_the_title();
$excerpt = get_the_excerpt();
$post_featured_image = get_post_thumbnail_id(get_the_ID());
if ($post_featured_image) {
$project_thumbnail = wp_get_attachment_image_src( $post_featured_image, 'full', false);
if ($project_thumbnail) (string)$project_thumbnail = $project_thumbnail[0];
}
$custom_portfolio_link = get_post_meta(get_the_ID(), 'qode_portfolio-external-link', true);
$portfolio_link = $custom_portfolio_link != "" ? $custom_portfolio_link : get_permalink();
$target = $custom_portfolio_link != "" ? '_blank' : '_self';
$html .="' style='background-color: ".$project_bg_color."'>";
$html .= "<a href='".$portfolio_link."' rel='bookmark' title='".$title."'>";
$html .= "<div class='image' style='background-image: url(".$project_thumbnail.");'></div>";
$html .= "<div class='text ".$project_text_color."'>";
$html .= "<p>".$excerpt."</p>";
$html .= "<span class='line ".$project_text_color."'></span>";
$html .= "<h1>".$title."</h1>";
$html .= "</div>";
$html .= "</a>";
$html .= "</article>\n";
endwhile;
$html .= "</div>";
$html .= "<div class='m-all t-all d-all last_col cf'>";
$html .= bones_page_navi();
$html .= "</div>";
else:
?>
<p><?php _e('Sorry, no posts matched your criteria.', 'sbwp'); ?></p>
<?php
endif;
$html .= "</div>";
wp_reset_query();
}
return $html;
}
}
Here is the bones_page_navi() function :
function bones_page_navi() {
global $wp_query;
$bignum = 999999999;
if ( $wp_query->max_num_pages <= 1 )
return;
echo '<nav class="pagination">';
echo paginate_links( array(
'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
'format' => '',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'prev_text' => '←',
'next_text' => '→',
'type' => 'list',
'end_size' => 3,
'mid_size' => 3
) );
echo '</nav>';
} /* end page navi */
The HTML output when using the short code can been seen here.
The pagination links (nav) should output within the div under the div with the block-grid class.
Thanks in advance !
