[英]Wordpress add pagination for custom loop that show subpages

I have one page (not an article) with n subpages. In the main page, I need to show max 3 titles of the subpages and insert a pagination for the other.


How can I do that?


This is my simple code now:


    $parent_id = 14; //main page id
    $pages = get_pages( array( 'sort_column' => 'menu_order', 'numberposts' => 3, 'child_of' => $parent_id ) );
    foreach ( $pages as $page ) : ?>
        <div class="item">
            <div class="item-title">
                <h2><a href="<?php echo get_permalink( $page->ID ); ?>"><?php echo $page->post_title; ?></a></h2>
    <?php endforeach; ?>



3 个解决方案



I solved by myself, the solution is to use wp_query() to create a new loop insted of using get_pages().


Here the new code for page title and contentwith pagination by Preeti Dua from Avigma Technology:

这里是来自Avigma Technology的Preeti Dua的页面标题和内容的新代码:


    // Pagination variable
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    // The Query
    $the_query = new WP_Query( array( 'post_parent' => 782, 'post_type' => 'page', 'paged' => $paged) );

    // The Loop
    if($the_query->have_posts()) : while($the_query->have_posts()) : $the_query->the_post();
    global $post;
    $thePostID = $post->ID; /* this variabled is used if you need to get custom fields of the subpage */
    <div id="side-post-title">
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

     <div id="side-post-excerpt">
               <?php the_excerpt(); ?>

             <a href="<?php echo get_permalink( $page->ID ); ?>"> <div id="read-more"> 
                       <img src="/wp-content/uploads/2012/10/read-more-btn.png"/></div> </a>                                                          

<?php endwhile; endif; ?>

<nav class="navigation">
   <div style="float:left;"> <?php next_posts_link('Show older', $the_query->max_num_pages) ?></div>
   <div style="float:right;"> <?php previous_posts_link('Show newer') ?></div>



not sure,


but try following plugin






If you'd like to add subPage title, description or even thumbnail in pagination button you can use the ACP free Wordpress plugin: http://wordpress.org/plugins/advanced-content-pagination/




Wordpress:具有分页的一页中的多个自定义循环 - Wordpress: Multiple Custom Loop in One Page with Pagination 自定义循环中的分页无法正常工作 - Pagination in custom loop not working Wordpress - 分页和自定义数据库查询 - Wordpress - Pagination and Custom Database Query wordpress自定义帖子类型不会显示在菜单页面中 - wordpress custom post type do not show up in menu page 将自定义css添加到wordpress中的页面模板 - Add custom css to a page template in wordpress wordpress为自定义帖子添加另一个自定义字段 - wordpress Add another custom field to custom posts 有没有办法在页面的Wordpress管理界面上显示特定的自定义字段,只有当他们选择特定的模板时? - Is there a way to make sepcific custom fields show on a page's Wordpress admin interface only if they choose a specific template? Wordpress:归档页面的自定义 - Wordpress: Custom <title> for archive pages</a> <a class="list-group-item" href="https://www.itdaan.com/blog/2009/07/09/30c8924af222763a2e9b266b783b5e3c.html" title="WordPress自定义导航与子页面 - WordPress custom navigation with sub-pages">WordPress自定义导航与子页面 - WordPress custom navigation with sub-pages</a> <a class="list-group-item" href="https://www.itdaan.com/blog/2015/04/27/d2b06887aa58ebf385ba45078675d7bb.html" title="如何在Wordpress页面中显示自定义xml文件的内容? - How can I show the content of a custom xml file in a Wordpress page?">如何在Wordpress页面中显示自定义xml文件的内容? - How can I show the content of a custom xml file in a Wordpress page?</a> <div style="padding-top:1px;padding-right:3px;text-align:center" id="float"> <style> .itdaan_shufu { width:300px;height:600px } @media (max-width: 600px) { .itdaan_shufu { display: none; } } </style> <!-- itdaan_竖幅 --> <ins class="adsbygoogle itdaan_shufu" style="display:block;width:300px;height:600px;" data-ad-client="ca-pub-4353345653789615" data-ad-slot="5247457016" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> <div class="clear"> </div> <div class="fbar" style="z-index:100"> <div class="span7" style="color:grey;font-size:12px;"> </div> <div class="pull-right"> <span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank" style="color:#f2f2f2">粤ICP备14056181号</a>  </span><span>© 2014-2020 ITdaan.com </span> </div> </div> <!-- 收藏夹代码 --> <div id="collection_model" class="modal hide fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">收藏本文</h3> </div> <div class="modal-body"> <p> 添加到收藏夹 *</p> <p id="collection_group_list"> </p> <p> <label class="radio"><input name="collection_group" type="radio" value="-1"/> <input type="text" placeholder="收藏夹名称" name="collection_group_name"></label></p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button><a class="btn btn-success" id="collection_btn_sure">确定</a> </div> </div> <script src="/js/code.js?version=20190309"></script> <script charset="gbk" src="/js/opensug.js?version=20190309"></script> <script type="text/javascript"> globle_all_pc(); </script> <script> function buffer(a, b, c) { var d; return function() { if (d) return; d = setTimeout(function() { a.call(this), d = undefined }, b) } } (function() { function e() { var d = document.body.scrollTop || document.documentElement.scrollTop; d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1" } var a = document.getElementById("float"); if (a == undefined) return ! 1; var b = 0, c, d = a; while (d) b += d.offsetTop, d = d.offsetParent; c = window.ActiveXObject && !window.XMLHttpRequest; if (!c || !0) window.onscroll = buffer(e, 50, this) })(); </script> <!-- 手机端显示 --> <span style="display:none"> <!-- 百度统计 --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?b08728447e2a1a7388d5639bd2a14595"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-143082825-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-143082825-1'); </script> </span> </body> </html>