1

I have created homepage with sidebar area filled with different widgets. Each widget fetch and display posts from different categories.

Now I need to create a numbered pagination in homepage which will show older posts from all categories. I tried creating the pagination using code provided by WordPress but that didn't worked out.

I tried creating pagination using the function provided by kriesi. The code generates HTML and links but they points to no where i.e. opens the same page.

// Kresi Pagination
function kriesi_pagination($pages = '', $range = 2)
{  
     $showitems = ($range * 2)+1;  

     global $paged;
     if(empty($paged)) $paged = 1;

     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   

     if(1 != $pages)
     {
         echo "<div class='pagination'>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'><span class='arrows'>&laquo;</span> First</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'><span class='arrows'>&lsaquo;</span> Previous</a>";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
             }
         }

         if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>Next <span class='arrows'>&rsaquo;</span></a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last <span class='arrows'>&raquo;</span></a>";
         echo "</div>\n";
     }
}

This is the file which gets included from index.php. So basically the whole file would be like this.

<?php get_header(); ?>
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Magazine')): 
endif;
?>
<?php get_sidebar(); ?>

Here Magazine is the sidebar area I created.

    <?php
add_action('widgets_init', 'wy_breaking_magazine_load_widgets');

function wy_breaking_magazine_load_widgets()
{
    register_widget('wy_breaking_magazine_Widget');
}

class wy_breaking_magazine_Widget extends WP_Widget {

    function wy_breaking_magazine_Widget()
    {
        $widget_ops = array('classname' => 'wy_breaking_magazine', 'description' => 'Breaking News magazine recent posts widget for magazine widget.');

        $control_ops = array('id_base' => 'wy_breaking_magazine-widget');

        $this->WP_Widget('wy_breaking_magazine-widget', 'FrontLineNepal : Breaking News Magazine', $widget_ops, $control_ops);
    }

    function widget($args, $instance)
    {
        extract($args);

        $title = $instance['title'];
        $post_type = 'all';
        $categories = $instance['categories'];
        $posts = $instance['posts'];
        $show_image = isset($instance['show_image']) ? 'true' : 'false';
        echo $before_widget;
        ?>

        <?php
        $post_types = get_post_types();
        unset($post_types['page'],$post_types['reviews'], $post_types['attachment'], $post_types['revision'], $post_types['nav_menu_item']);

        if($post_type == 'all') {
            $post_type_array = $post_types;
        } else {
            $post_type_array = $post_type;
        }
        ?>

        <div class="widget-magazine">
            <?php
            if($title) {
                echo $before_title.$title.$after_title;
            }
            ?>
            <?php
            $recent_posts = new WP_Query(array(
                'showposts' => $posts,
                'post_type' => $post_type_array,
                'cat' => $categories,
            ));
            ?>
            <?php
            $big_count = round($posts / 5);
            if(!$big_count) { $big_count = 1; }
            ?>
            <?php
            $counter = 1; 
            while($recent_posts->have_posts()): $recent_posts->the_post(); 
            if(has_post_format('video')) 
            {
                $format_icon = 'class="video-format-icon"';
                $format_icon_small = ' (Video)';
            }
            else if (has_post_format('audio'))
            {
                $format_icon = 'class="audio-format-icon"';
                $format_icon_small = ' (Audio)';
            }
            else if (has_post_format('gallery'))
            {
                $format_icon = 'class="gallery-format-icon"';
                $format_icon_small = ' (Gallery)';
            }
            else {
                $format_icon = 'class="standard-format-icon"';
                $format_icon_small = '';
            }
            ?>
            <?php if($counter <= $big_count): ?>
            <?php if($counter == $big_count) { $last = 'block-big-last'; } else { $last = ''; }?>

            <div class="block-big <?php echo $last; ?>">
                <?php if(has_post_thumbnail()): ?>
                <!-- adding title to the top -->
                <div class="big-title"><h3><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><?php the_title(); ?></a></h3></div>
                <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'big-post-thumb'); ?>
                <div class="magz-image"><a <?php echo $format_icon; ?> href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img class="fadeover" src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width='960' height='400' /></a>
                </div>
                <?php else: ?>
                <!-- adding title to the top -->
                <div class="big-title"><h3><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><?php the_title(); ?></a></h3></div>
                <div class="magz-image"><a <?php echo $format_icon; ?> href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img class="fadeover" src="<?php echo get_template_directory_uri(); ?>/timthumb.php?src=<?php echo get_template_directory_uri(); ?>/images/thumbnail.png&w=960&h=400" alt="<?php the_title(); ?>" width='960' height='400' /></a>
                </div>
                <?php endif; ?>
                <div class="big-desc">
                <p><?php echo string_limit_words(get_the_excerpt(), 150); ?><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>' class="readmore">Read More</a></p>
                <div class="magz-meta">Posted On <?php the_time('F j, Y'); ?>  |  <?php comments_popup_link(); ?></div>

                </div>
            </div>

            <?php else: ?>
            <?php if($show_image == 'true'): ?>
            <div class="block-small<?php if($counter%2 != 0) { echo " right"; } else { echo " left"; }?>">
                <?php if(has_post_thumbnail()): ?>
                    <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'small-post-thumb'); ?>
                    <div class="magz-image"><a <?php echo $format_icon; ?> href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img class="fadeover" src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width='75' height='60' /></a></div>
                    <?php else: ?>
                    <div class="magz-image"><a <?php echo $format_icon; ?> href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img class="fadeover" src="<?php echo get_template_directory_uri(); ?>/timthumb.php?src=<?php echo get_template_directory_uri(); ?>/images/thumbnail.png&w=75&h=60" alt="<?php the_title(); ?>"  width='75' height='60' /></a></div>
                <?php endif; ?>
                <div class="description">
                    <h3><a class="des-title" href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><?php the_title(); ?></a></h3>
                    <div class="magz-meta"><?php the_time('F j, Y'); ?>  |  <?php comments_popup_link(); ?></div>
                </div>
            </div>
            <?php endif; ?>
            <?php if($show_image == 'false'): ?>
            <div class="block-small-noimage<?php if($counter%2 != 0) { echo " right"; } else { echo " left"; }?>">
                <h3><a class="des-title" href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><?php the_title(); ?><?php echo $format_icon_small; ?></a></h3>
            </div>
            <?php endif; ?>
            <?php endif; ?>
            <?php $counter++; endwhile; ?>

        </div>
        <?php
        echo $after_widget;
    }

    function update($new_instance, $old_instance)
    {
        $instance = $old_instance;

        $instance['title'] = $new_instance['title'];
        $instance['post_type'] = 'all';
        $instance['categories'] = $new_instance['categories'];
        $instance['posts'] = $new_instance['posts'];
        $instance['show_image'] = $new_instance['show_image'];
        return $instance;
    }

    function form($instance)
    {
        $defaults = array('title' => 'Recent Posts', 'post_type' => 'all', 'categories' => 'all', 'posts' => 5, 'show_image'=>null );
        $instance = wp_parse_args((array) $instance, $defaults); ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">Title</label>
            <input class="widefat" style="width: 216px;" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('categories'); ?>">Filter by Category</label> 
            <select id="<?php echo $this->get_field_id('categories'); ?>" name="<?php echo $this->get_field_name('categories'); ?>" class="widefat categories" style="width:100%;">
                <option value='all' <?php if ('all' == $instance['categories']) echo 'selected="selected"'; ?>>all categories</option>
                <?php $categories = get_categories('hide_empty=0&depth=1&type=post'); ?>
                <?php foreach($categories as $category) { ?>
                <option value='<?php echo $category->term_id; ?>' <?php if ($category->term_id == $instance['categories']) echo 'selected="selected"'; ?>><?php echo $category->cat_name; ?></option>
                <?php } ?>
            </select>
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('posts'); ?>">Number of posts</label>
            <input class="widefat" style="width: 30px;" id="<?php echo $this->get_field_id('posts'); ?>" name="<?php echo $this->get_field_name('posts'); ?>" value="<?php echo $instance['posts']; ?>" />

        </p>
        <p>
            <input class="checkbox" type="checkbox" <?php checked($instance['show_image'], 'on'); ?> id="<?php echo $this->get_field_id('show_image'); ?>" name="<?php echo $this->get_field_name('show_image'); ?>" /> 
            <label for="<?php echo $this->get_field_id('show_image'); ?>">Show thumbnail image</label>
        </p>

    <?php }
}
?>

The widget which will fetch posts from specific categories would be entered inside the Magazine widget.

Hope this code helps to understand the question better.

  • How is your page implemented precisely? Please add relevant code of what works for you and what doesn't. – Rarst Jan 2 '15 at 16:34
  • @Rarst I added the function and other code which I am using. Please have a look. – Rajeeb Jan 2 '15 at 19:05
  • your $recent_posts query doesn't have any pagination arguments, you don't tell it to get anything but the first n number of posts. – Milo Jan 4 '15 at 16:27
  • This question relates to the modification of a premium theme and therefore should be asked on the theme Devs forums. – Brad Dalton Jan 5 '15 at 7:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.