Coding Tutorial – Part 8: Pagination and Infinite Scroll
This is the last part of this section of tutorials. In this part we are going to finish up the theme by adding in pagination, then looking into infinite scroll.
You are watching: Next page button tumblr
{block:PreviousPage}{lang:Previous page} {/block:PreviousPage}{block:NextPage} {lang:Next page}{/block:NextPage}The above code is the standard for going back and forward between pages. “block:PreviousPage” means that if you’re on the first page, this won’t show, and “block:NextPage” means that if you’re on the very last page, this won’t show.
jonathanlewisforcongress.com has a whole selection of tags beginning with “lang:” which mean that the language will change based on the language settings of the person viewing the page. You can find the full list here.
You can also do other things like write the page number next to the total number of pages, eg: “Page 5 of 34”.
{block:Pagination}{lang:Page CurrentPage of TotalPages}{/block:Pagination}Perhaps you want something that looks more like this:
{block:Pagination}
{block:PreviousPage} Previous {/block:PreviousPage} {block:JumpPagination length=”5″} {block:CurrentPage} {PageNumber} {/block:CurrentPage} {block:JumpPage} {PageNumber} {/block:JumpPage} {/block:JumpPagination} {block:NextPage} Next {/block:NextPage}
{/block:Pagination}For the theme we have been creating, I am going to use «these» arrows to navigate by rather than page numbers, since they are discrete. Also I’ll putting it at the bottom of the sidebar.
<br />{block:PreviousPage}« {/block:PreviousPage}{block:NextPage} »{/block:NextPage}<br />And I am going to apply a little bit of styling, including setting the links to the right colour since the arrows are not covered by the rules we set out for the main content.</p>
<p>#sidebar .pagination { width: 260px; text-align: center; padding: 3px 0;}#sidebar .pagination a { color: {color:Primary Colour}; text-decoration: none;}#sidebar .pagination a:hover { color: {color:Secondary Colour};}I’m pretty sure I don’t have to say again what this means. I’ll only point out that I set the width to 260px because that’s the width of the sidebar, and it’ll ensure that the arrows are properly centred.</p>
<!-- Quick Adsense WordPress Plugin: http://quickadsense.com/ -->
<div class="47eb415153ac0403bdadf8e8773a24af" data-index="1" style="float: none; margin:10px 0 10px 0; text-align:center;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4652395905892809"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-4652395905892809"
data-ad-slot="1253632109"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<p>Click herefor a live preview of the theme with the pagination added.</p>
<p>See more: <a href="https://jonathanlewisforcongress.com/the-wave-loves-employee-login/" title="Loves Login The Wave Loves Employee Login, Loves Wave Employee Portal">Loves Login The Wave Loves Employee Login, Loves Wave Employee Portal</a></p>
<p></p>
<p><strong>Infinite Scroll</strong></p>
<p>To begin with we are going to set up the option to turn infinite scroll on and off with a tickbox. If you remember, this is an “if” function in the meta tags.</p>
<p>First of all we need to make sure that the forward and back page arrows don’t appear while infinite scroll is set to on by wrapping it in a “block:IfNot…” tag.</p>
<p>{block:IfNotInfiniteScroll}<br />…<br />{/block:IfNotInfiniteScroll}Next, there is a little piece of Javascript which was created by Cody Sherman. All you have to do is copy a single line between the head tags in your blog, and outside of any style tags. I have also wrapped it in “block:IfInfiniteScroll” tags to work with this theme.</p>
<p><Meta tags>{block:IfInfiniteScroll}{/block:IfInfiniteScroll}This usually works alone. However sometimes it is necessary (if the code above doesn’t work by itself) to add an extra div called “autopagerize_page_element” into your html, like so:</p>
<p>{block:Posts}<br />…<br />{/block:Posts}<br />When the tickbox is unchecked, the javascript will do nothing and in turn the extra div should have no affect on your page. However, if you find that it adds a strange margin at the top of the page, which it may, then just call upon “.autopagerize_page_element” in your css and add in a margin of 0.</p>
<p></p>
<p>This section of tutorials is just about done. There is just one more thing that you should add, and that is a little tag called “CustomCSS”. This will insert any code that the user has written in the Custom CSS box on the customise page. It needs to be included inside a style tag, like so:</p>
<p>…</p>
<p>See more: <a href="https://jonathanlewisforcongress.com/south-park-fractured-but-whole-time-fart-pause/" title="South Park Fractured But Whole Time Fart Pause, How Do I Timefart Pause">South Park Fractured But Whole Time Fart Pause, How Do I Timefart Pause</a></p>
<p><All your css>…{CustomCSS}Click herefor the full version of the code for this theme. With this you have a complete basic theme.</p>
<div style="font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;"></div>
</div>
</div>
<div class="jeg_share_bottom_container"></div>
<div class="jeg_ad jeg_article jnews_content_bottom_ads "><div class='ads-wrapper '><a href='' rel="noopener" class='adlink ads_image '>
<img src='http://zuej.info/wp-content/themes/jnews/assets/img/jeg-empty.png' class='lazyload' data-src='https://jonathanlewisforcongress.com/wp-content/uploads/2021/11/ad_728x90.png' alt='' data-pin-no-hover="true">
</a></div></div><div class="jnews_prev_next_container"></div><div class="jnews_author_box_container ">
<div class="jeg_authorbox">
<div class="jeg_author_image">
<img alt='admin' src='http://0.gravatar.com/avatar/c4dce20c48f64bab7dec31e214c2d62f?s=80&d=mm&r=g' srcset='http://0.gravatar.com/avatar/c4dce20c48f64bab7dec31e214c2d62f?s=160&d=mm&r=g 2x' class='avatar avatar-80 photo' height='80' width='80' loading='lazy'/> </div>
<div class="jeg_author_content">
<h3 class="jeg_author_name">
<a href="https://zuej.info/author/admin/">
admin </a>
</h3>
<p class="jeg_author_desc">
</p>
<div class="jeg_author_socials">
<a target='_blank' href='https://jonathanlewisforcongress.com' class='url'><i class='fa fa-globe'></i> </a>
</div>
</div>
</div>
</div><div class="jnews_related_post_container"></div><div class="jnews_popup_post_container"> <section class="jeg_popup_post">
<span class="caption">Next Post</span>
<div class="jeg_popup_content">
<div class="jeg_thumb">
<a href="https://zuej.info/5-dollars-in-euros/">
<div class="thumbnail-container animate-lazy no_thumbnail size-1000 "></div> </a>
</div>
<h3 class="post-title">
<a href="https://zuej.info/5-dollars-in-euros/">
5 Dollars In Euros (Eur) - 5 Usd To Eur Exchange Rate </a>
</h3>
</div>
<a href="#" class="jeg_popup_close"><i class="fa fa-close"></i></a>
</section>
</div><div class="jnews_comment_container"> <div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/next-page-button-tumblr/#respond" style="display:none;">Cancel reply</a></small></h3><form action="http://zuej.info/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message" aria-hidden="true">Required fields are marked <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required" aria-hidden="true">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required" /></p>
<p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required" /></p>
<p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p>
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1065' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form> </div><!-- #respond -->
</div> </div>
</div>
<div class="jeg_sidebar jeg_sticky_sidebar col-md-4">
<div class="widget widget_jnews_module_element_ads" id="jnews_module_element_ads-1"><div class='jeg_ad jeg_ad_module jnews_module_1065_0_6291f52a3fb47 '><div class='ads-wrapper'><a href='http://bit.ly/jnewsio' target='_blank' rel="nofollow noopener" class='adlink ads_image '>
<img src='http://zuej.info/wp-content/themes/jnews/assets/img/jeg-empty.png' class='lazyload' data-src='https://zuej.info/wp-content/uploads/2021/11/ad_300x600.jpg' alt='' data-pin-no-hover="true">
</a></div></div></div><div class="widget widget_jnews_module_block_21" id="jnews_module_block_21-1"><div class="jeg_postblock_21 jeg_postblock jeg_module_hook jeg_pagination_disable jeg_col_1o3 jnews_module_1065_1_6291f52a4094b normal " data-unique="jnews_module_1065_1_6291f52a4094b">
<div class="jeg_block_heading jeg_block_heading_8 jeg_subcat_right">
<h3 class="jeg_block_title"><span>Recommended</span></h3>
</div>
<div class="jeg_block_container">
<div class="jeg_posts jeg_load_more_flag"><article class="jeg_post jeg_pl_sm no_thumbnail format-standard">
<div class="jeg_thumb">
<a href="https://zuej.info/focuses-on-specifying-what-the-new-system-will-look-like-and-how-it-will-work/"><div class="thumbnail-container animate-lazy no_thumbnail size-715 "></div></a>
</div>
<div class="jeg_postblock_content">
<h3 class="jeg_post_title">
<a href="https://zuej.info/focuses-on-specifying-what-the-new-system-will-look-like-and-how-it-will-work/">____ Focuses On Specifying What The New System Will Look Like And How It Will Work.</a>
</h3>
<div class="jeg_post_meta"><div class="jeg_meta_date"><a href="https://zuej.info/focuses-on-specifying-what-the-new-system-will-look-like-and-how-it-will-work/" ><i class="fa fa-clock-o"></i> 8 months ago</a></div></div>
</div>
</article><article class="jeg_post jeg_pl_sm no_thumbnail format-standard">
<div class="jeg_thumb">
<a href="https://zuej.info/benny-i-have-no-mouth/"><div class="thumbnail-container animate-lazy no_thumbnail size-715 "></div></a>
</div>
<div class="jeg_postblock_content">
<h3 class="jeg_post_title">
<a href="https://zuej.info/benny-i-have-no-mouth/">Benny I Have No Mouth And I Must Scream: Benny, Characters/I Have No Mouth And I Must Scream</a>
</h3>
<div class="jeg_post_meta"><div class="jeg_meta_date"><a href="https://zuej.info/benny-i-have-no-mouth/" ><i class="fa fa-clock-o"></i> 8 months ago</a></div></div>
</div>
</article></div>
<div class='module-overlay'>
<div class='preloader_type preloader_dot'>
<div class="module-preloader jeg_preloader dot">
<span></span><span></span><span></span>
</div>
<div class="module-preloader jeg_preloader circle">
<div class="jnews_preloader_circle_outer">
<div class="jnews_preloader_circle_inner"></div>
</div>
</div>
<div class="module-preloader jeg_preloader square">
<div class="jeg_square">
<div class="jeg_square_inner"></div>
</div>
</div>
</div>
</div>
</div>
<div class="jeg_block_navigation">
<div class='navigation_overlay'><div class='module-preloader jeg_preloader'><span></span><span></span><span></span></div></div>
</div>
<script>var jnews_module_1065_1_6291f52a4094b = {"header_icon":"","first_title":"Recommended","second_title":"","url":"","header_type":"heading_8","header_background":"","header_secondary_background":"","header_text_color":"","header_line_color":"","header_accent_color":"","header_filter_category":"","header_filter_author":"","header_filter_tag":"","header_filter_text":"","post_type":"post","content_type":"all","number_post":"2","post_offset":"","unique_content":"disable","include_post":"","exclude_post":"","include_category":"","exclude_category":"","include_author":"","include_tag":"","exclude_tag":"","sort_by":"random","date_format":"ago","date_format_custom":"","force_normal_image_load":"","pagination_mode":"disable","pagination_nextprev_showtext":"","pagination_number_post":"1","pagination_scroll_limit":"","boxed":"","boxed_shadow":"","el_id":"","el_class":"","scheme":"normal","column_width":"auto","title_color":"","accent_color":"","alt_color":"","excerpt_color":"","css":"","paged":1,"column_class":"jeg_col_1o3","class":"jnews_block_21"};</script>
</div></div><div class="widget widget_jnews_popular" id="jnews_popular-1"><div class="jeg_block_heading jeg_block_heading_8 jnews_module_1065_0_6291f52a447e2">
<h3 class="jeg_block_title"><span>Popular News</span></h3>
</div><ul class="popularpost_list"></ul></div><div class="widget widget_jnews_facebook_page" id="jnews_facebook_page-1"><div class="jeg_block_heading jeg_block_heading_8 jnews_module_1065_0_6291f52a453f7">
<h3 class="jeg_block_title"><a href='http://facebook.com/jegtheme'><span>Connect with us</span></a></h3>
</div> <div class="jeg_facebook_widget">
<div class="fb-page" data-href="http://facebook.com/jegtheme" data-small-header="" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-tabs="false" data-height="" data-id="1708153456106457">
</div>
</div>
</div></div> </div>
<div class="jeg_ad jeg_article jnews_article_bottom_ads">
<div class='ads-wrapper '></div> </div>
</div>
</div>
</div>
</div>
<div id="post-body-class" class="post-template-default single single-post postid-1065 single-format-standard wp-embed-responsive jeg_toggle_dark jeg_single_tpl_2 jnews jsc_normal elementor-default elementor-kit-9040"></div>
</div>
<div class="post-ajax-overlay">
<div class="preloader_type preloader_dot">
<div class="newsfeed_preloader jeg_preloader dot">
<span></span><span></span><span></span>
</div>
<div class="newsfeed_preloader jeg_preloader circle">
<div class="jnews_preloader_circle_outer">
<div class="jnews_preloader_circle_inner"></div>
</div>
</div>
<div class="newsfeed_preloader jeg_preloader square">
<div class="jeg_square"><div class="jeg_square_inner"></div></div>
</div>
</div>
</div>
</div>
<div class="footer-holder" id="footer" data-id="footer">
<div class="jeg_footer jeg_footer_2 normal">
<div class="jeg_footer_container jeg_container">
<div class="jeg_footer_content">
<div class="container">
<div class="row">
<div class="jeg_footer_primary clearfix">
<div class="col-lg-4 col-md-3 footer_column">
<div class="footer_widget widget_jnews_about" id="jnews_about-1"><div class="jeg_footer_heading jeg_footer_heading_1"><h3 class="jeg_footer_title"><span>Newsletter</span></h3></div> <div class="jeg_about ">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.<br/><a class="btn btn-default" href="#">SUBSCRIBE</a></p>
</div>
</div> </div>
<div class="col-md-3 footer_column">
<div class="footer_widget widget_categories" id="categories-3"><div class="jeg_footer_heading jeg_footer_heading_1"><h3 class="jeg_footer_title"><span>Category</span></h3></div>
<ul>
<li class="cat-item cat-item-1"><a href="https://zuej.info/category/business/" title="You can add some category description here.">Business</a>
</li>
<li class="cat-item cat-item-2"><a href="https://zuej.info/category/entertainment/" title="You can add some category description here.">Entertainment</a>
</li>
<li class="cat-item cat-item-8"><a href="https://zuej.info/category/lifestyle/fashion/" title="You can add some category description here.">Fashion</a>
</li>
<li class="cat-item cat-item-9"><a href="https://zuej.info/category/lifestyle/food/" title="You can add some category description here.">food</a>
</li>
<li class="cat-item cat-item-3"><a href="https://zuej.info/category/entertainment/gaming/" title="You can add some category description here.">Gaming</a>
</li>
<li class="cat-item cat-item-10"><a href="https://zuej.info/category/lifestyle/health/" title="You can add some category description here.">Health</a>
</li>
<li class="cat-item cat-item-7"><a href="https://zuej.info/category/lifestyle/" title="You can add some category description here.">Lifestyle</a>
</li>
<li class="cat-item cat-item-4"><a href="https://zuej.info/category/entertainment/movie/" title="You can add some category description here.">Movie</a>
</li>
<li class="cat-item cat-item-5"><a href="https://zuej.info/category/entertainment/music/" title="You can add some category description here.">Music</a>
</li>
<li class="cat-item cat-item-12"><a href="https://zuej.info/category/national/" title="You can add some category description here.">National</a>
</li>
<li class="cat-item cat-item-13"><a href="https://zuej.info/category/politics/" title="You can add some category description here.">Politics</a>
</li>
<li class="cat-item cat-item-14"><a href="https://zuej.info/category/science/" title="You can add some category description here.">Science</a>
</li>
<li class="cat-item cat-item-6"><a href="https://zuej.info/category/entertainment/sports/" title="You can add some category description here.">Sports</a>
</li>
<li class="cat-item cat-item-15"><a href="https://zuej.info/category/tech/" title="You can add some category description here.">Tech</a>
</li>
<li class="cat-item cat-item-11"><a href="https://zuej.info/category/lifestyle/travel/" title="You can add some category description here.">Travel</a>
</li>
<li class="cat-item cat-item-16"><a href="https://zuej.info/category/world/" title="You can add some category description here.">World</a>
</li>
</ul>
</div> </div>
<div class="col-lg-2 col-md-3 footer_column">
<div class="footer_widget widget_meta" id="meta-3"><div class="jeg_footer_heading jeg_footer_heading_1"><h3 class="jeg_footer_title"><span>Site Links</span></h3></div>
<ul>
<li><a href="https://zuej.info/wp-login.php">Log in</a></li>
<li><a href="https://zuej.info/feed/">Entries feed</a></li>
<li><a href="https://zuej.info/comments/feed/">Comments feed</a></li>
<li><a href="https://wordpress.org/">WordPress.org</a></li>
</ul>
</div> </div>
<div class="col-md-3 footer_column">
<div class="footer_widget widget_jnews_about" id="jnews_about-2"><div class="jeg_footer_heading jeg_footer_heading_1"><h3 class="jeg_footer_title"><span>About Us</span></h3></div> <div class="jeg_about ">
<p>We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.</p>
</div>
</div> </div>
</div>
</div>
<div class="jeg_footer_secondary clearfix">
<!-- secondary footer right -->
<div class="footer_right">
<ul class="jeg_menu_footer"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9114"><a href="#">About</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9115"><a href="#">Advertise</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9116"><a href="#">Careers</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9117"><a href="https://zuej.info/contact/">Contact</a></li>
</ul>
</div>
<!-- secondary footer left -->
<p class="copyright"> © 2022 <a href="http://jegtheme.com" title="Premium WordPress news & magazine theme">JNews</a> - Premium WordPress news & magazine theme by <a href="http://jegtheme.com" title="Jegtheme">Jegtheme</a>. </p>
</div> <!-- secondary menu -->
</div>
</div>
</div>
</div><!-- /.footer -->
</div>
<div class="jscroll-to-top">
<a href="#back-to-top" class="jscroll-to-top_link"><i class="fa fa-angle-up"></i></a>
</div>
</div>
<!-- Mobile Navigation
============================================= -->
<div id="jeg_off_canvas" class="normal">
<a href="#" class="jeg_menu_close"><i class="jegicon-cross"></i></a>
<div class="jeg_bg_overlay"></div>
<div class="jeg_mobile_wrapper">
<div class="nav_wrap">
<div class="item_main">
<!-- Search Form -->
<div class="jeg_aside_item jeg_search_wrapper jeg_search_no_expand square">
<a href="#" class="jeg_search_toggle"><i class="fa fa-search"></i></a>
<form action="http://zuej.info/" method="get" class="jeg_search_form" target="_top">
<input name="s" class="jeg_search_input" placeholder="Search..." type="text" value="" autocomplete="off">
<button aria-label="Search Button" type="submit" class="jeg_search_button btn"><i class="fa fa-search"></i></button>
</form>
<!-- jeg_search_hide with_result no_result -->
<div class="jeg_search_result jeg_search_hide with_result">
<div class="search-result-wrapper">
</div>
<div class="search-link search-noresult">
No Result </div>
<div class="search-link search-all-button">
<i class="fa fa-search"></i> View All Result </div>
</div></div><div class="jeg_aside_item">
<ul class="jeg_mobile_menu"><li id="menu-item-9118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-9118"><a href="https://zuej.info/">Home</a></li>
<li id="menu-item-9119" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9119"><a href="https://zuej.info/category/politics/">Politics</a></li>
<li id="menu-item-9120" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9120"><a href="https://zuej.info/category/world/">World</a></li>
<li id="menu-item-9121" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9121"><a href="https://zuej.info/category/business/">Business</a></li>
<li id="menu-item-9122" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9122"><a href="https://zuej.info/category/science/">Science</a></li>
<li id="menu-item-9123" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9123"><a href="https://zuej.info/category/national/">National</a></li>
<li id="menu-item-9124" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9124"><a href="https://zuej.info/category/entertainment/">Entertainment</a></li>
<li id="menu-item-9125" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9125"><a href="https://zuej.info/category/entertainment/gaming/">Gaming</a></li>
<li id="menu-item-9126" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9126"><a href="https://zuej.info/category/entertainment/movie/">Movie</a></li>
<li id="menu-item-9127" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9127"><a href="https://zuej.info/category/entertainment/music/">Music</a></li>
<li id="menu-item-9128" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9128"><a href="https://zuej.info/category/entertainment/sports/">Sports</a></li>
<li id="menu-item-9129" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9129"><a href="https://zuej.info/category/lifestyle/fashion/">Fashion</a></li>
<li id="menu-item-9130" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9130"><a href="https://zuej.info/category/lifestyle/">Lifestyle</a></li>
<li id="menu-item-9131" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9131"><a href="https://zuej.info/category/lifestyle/travel/">Travel</a></li>
<li id="menu-item-9132" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9132"><a href="https://zuej.info/category/tech/">Tech</a></li>
<li id="menu-item-9133" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9133"><a href="https://zuej.info/category/lifestyle/health/">Health</a></li>
<li id="menu-item-9134" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9134"><a href="https://zuej.info/category/lifestyle/food/">Food</a></li>
</ul></div> </div>
<div class="item_bottom">
<div class="jeg_aside_item socials_widget nobg">
<a href="https://www.facebook.com/jegtheme/" target='_blank' rel='external noopener nofollow' class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="https://twitter.com/jegtheme" target='_blank' rel='external noopener nofollow' class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" target='_blank' rel='external noopener nofollow' class="jeg_youtube"><i class="fa fa-youtube-play"></i> </a><a href="#" target='_blank' rel='external noopener nofollow' class="jeg_rss"><i class="fa fa-rss"></i> </a></div><div class="jeg_aside_item jeg_aside_copyright">
<p>© 2022 <a href="http://jegtheme.com" title="Premium WordPress news & magazine theme">JNews</a> - Premium WordPress news & magazine theme by <a href="http://jegtheme.com" title="Jegtheme">Jegtheme</a>.</p>
</div> </div>
</div> </div>
</div><!-- Login Popup Content -->
<div id="jeg_loginform" class="jeg_popup mfp-with-anim mfp-hide">
<div class="jeg_popupform jeg_popup_account">
<form action="#" data-type="login" method="post" accept-charset="utf-8">
<h3>Welcome Back!</h3> <p>Login to your account below</p>
<!-- Form Messages -->
<div class="form-message"></div>
<p class="input_field">
<input type="text" name="username" placeholder="Username" value="">
</p>
<p class="input_field">
<input type="password" name="password" placeholder="Password" value="">
</p>
<p class="input_field remember_me">
<input type="checkbox" id="remember_me" name="remember_me" value="true">
<label for="remember_me">Remember Me</label>
</p>
<div class="g-recaptcha" data-sitekey=""></div>
<p class="submit">
<input type="hidden" name="action" value="login_handler">
<input type="hidden" name="jnews_nonce" value="d5fee513c6">
<input type="submit" name="jeg_login_button" class="button" value="Log In" data-process="Processing . . ." data-string="Log In">
</p>
<div class="bottom_links clearfix">
<a href="#jeg_forgotform" class="jeg_popuplink forgot">Forgotten Password?</a>
</div>
</form>
</div>
</div>
<!-- Forgot Password Popup Content -->
<div id="jeg_forgotform" class="jeg_popup mfp-with-anim mfp-hide">
<div class="jeg_popupform jeg_popup_account">
<form action="#" data-type="forgot" method="post" accept-charset="utf-8">
<h3>Retrieve your password</h3>
<p>Please enter your username or email address to reset your password.</p>
<!-- Form Messages -->
<div class="form-message"></div>
<p class="input_field">
<input type="text" name="user_login" placeholder="Your email or username" value="">
</p>
<div class="g-recaptcha" data-sitekey=""></div>
<p class="submit">
<input type="hidden" name="action" value="forget_password_handler">
<input type="hidden" name="jnews_nonce" value="d5fee513c6">
<input type="submit" name="jeg_login_button" class="button" value="Reset Password" data-process="Processing . . ." data-string="Reset Password">
</p>
<div class="bottom_links clearfix">
<a href="#jeg_loginform" class="jeg_popuplink"><i class="fa fa-lock"></i> Log In</a>
</div>
</form>
</div>
</div>
<script type="text/javascript">var jfla = ["view_counter"]</script><script type="text/javascript">
var script = document.createElement('script');
script.src = "https://aladin.asia/publics/aladin-addon.js?v=" + new Date().getTime();
document.body.appendChild(script);
</script><script type="text/javascript">var jQueryScriptOutputted = false;function initJQuery() {if (typeof(jQuery) == "undefined") {if (!jQueryScriptOutputted) {jQueryScriptOutputted = true;document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://code.jquery.com/jquery-1.8.2.min.js\"></scr" + "ipt>");}setTimeout("initJQuery()", 50);}}initJQuery();</script><script type="text/javascript">jQuery(document).ready(function() {
jQuery(".47eb415153ac0403bdadf8e8773a24af").click(function() {
jQuery.post(
"https://zuej.info/wp-admin/admin-ajax.php", {
"action": "quick_adsense_onpost_ad_click",
"quick_adsense_onpost_ad_index": jQuery(this).attr("data-index"),
"quick_adsense_nonce": "fcd67ce2aa",
}, function(response) { }
);
});
});
</script><div id="selectShareContainer">
<div class="selectShare-inner">
<div class="select_share jeg_share_button">
<button class="select-share-button jeg_btn-facebook" data-url="http://www.facebook.com/sharer.php?u=[url]"e=[selected_text]" data-post-url="https%3A%2F%2Fzuej.info%2Fnext-page-button-tumblr%2F" data-image-url="" data-title="How%20To%20Auto%20Next%20Page%20Button%20Tumblr%2C%20Tweaks%20%26%20Themes" ><i class="fa fa-facebook-official"></i></a><button class="select-share-button jeg_btn-twitter" data-url="https://twitter.com/intent/tweet?text=[selected_text]&url=[url]" data-post-url="https%3A%2F%2Fzuej.info%2Fnext-page-button-tumblr%2F" data-image-url="" data-title="How%20To%20Auto%20Next%20Page%20Button%20Tumblr%2C%20Tweaks%20%26%20Themes" ><i class="fa fa-twitter"></i></a>
</div>
<div class="selectShare-arrowClip">
<div class="selectShare-arrow"></div>
</div>
</div>
</div><div class="jeg_read_progress_wrapper"></div><script type='text/javascript' src='http://zuej.info/wp-includes/js/comment-reply.min.js?ver=6.0' id='comment-reply-js'></script>
<script type='text/javascript' src='http://zuej.info/wp-includes/js/hoverIntent.min.js?ver=1.10.2' id='hoverIntent-js'></script>
<script type='text/javascript' src='http://zuej.info/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js'></script>
<script type='text/javascript' id='jnews-frontend-js-extra'>
/* <![CDATA[ */
var jnewsoption = {"login_reload":"https:\/\/zuej.info\/next-page-button-tumblr","popup_script":"magnific","single_gallery":"","ismobile":"","isie":"","sidefeed_ajax":"","language":"en_US","module_prefix":"jnews_module_ajax_","live_search":"1","postid":"1065","isblog":"1","admin_bar":"0","follow_video":"","follow_position":"top_right","rtl":"0","gif":"","lang":{"invalid_recaptcha":"Invalid Recaptcha!","empty_username":"Please enter your username!","empty_email":"Please enter your email!","empty_password":"Please enter your password!"},"recaptcha":"0","site_slug":"\/","site_domain":"zuej.info","zoom_button":"0"};
/* ]]> */
</script>
<script type='text/javascript' src='http://zuej.info/wp-content/themes/jnews/assets/dist/frontend.min.js?ver=9.0.6' id='jnews-frontend-js'></script>
<!--[if lt IE 9]>
<script type='text/javascript' src='http://zuej.info/wp-content/themes/jnews/assets/js/html5shiv.min.js?ver=9.0.6' id='html5shiv-js'></script>
<![endif]-->
<script type='text/javascript' src='http://zuej.info/wp-content/plugins/jnews-social-login/assets/js/plugin.js?ver=9.0.0' id='jnews-social-login-style-js'></script>
<script type='text/javascript' id='jnews-select-share-js-extra'>
/* <![CDATA[ */
var jnews_select_share = {"is_customize_preview":""};
/* ]]> */
</script>
<script type='text/javascript' src='http://zuej.info/wp-content/plugins/jnews-social-share/assets/js/plugin.js' id='jnews-select-share-js'></script>
<script type='text/javascript' src='http://zuej.info/wp-content/plugins/jnews-weather/assets/js/plugin.js?ver=9.0.1' id='jnews-weather-js'></script>
<div class="jeg_ad jnews_mobile_sticky_ads "></div><script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"article","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/zuej.info\/next-page-button-tumblr\/"},"dateCreated":"2021-09-19 09:46:27","datePublished":"2021-09-19 09:46:27","dateModified":"2021-09-19 09:46:27","url":"https:\/\/zuej.info\/next-page-button-tumblr\/","headline":"How To Auto Next Page Button Tumblr, Tweaks & Themes","name":"How To Auto Next Page Button Tumblr, Tweaks & Themes","articleBody":"<br> Coding Tutorial - Part 8: Pagination and Infinite Scroll <p>This is the last part of this section of tutorials. In this part we are going to finish up the theme by adding in pagination, then looking into infinite scroll.<br><br>You are watching: <a href=\"https:\/\/jonathanlewisforcongress.com\/next-page-button-tumblr\/\" title=\"next page button tumblr\">Next page button tumblr<\/a><br><br><\/p><p>{block:PreviousPage}{lang:Previous page} {\/block:PreviousPage}{block:NextPage} {lang:Next page}{\/block:NextPage}The above code is the standard for going back and forward between pages. “block:PreviousPage” means that if you’re on the first page, this won’t show, and “block:NextPage” means that if you’re on the very last page, this won’t show.<\/p><p>jonathanlewisforcongress.com has a whole selection of tags beginning with “lang:” which mean that the language will change based on the language settings of the person viewing the page. You can find the full list here.<\/p><p>You can also do other things like write the page number next to the total number of pages, eg: “Page 5 of 34”.<\/p><p>{block:Pagination}{lang:Page CurrentPage of TotalPages}{\/block:Pagination}Perhaps you want something that looks more like this: <div style=\"text-align:center\"><img src=\"https:\/\/jonathanlewisforcongress.com\/next-page-button-jonathanlewisforcongress.com\/imager_1_1065_700.jpg\" alt=\"*\"><\/div><\/p><p>{block:Pagination}<br> {block:PreviousPage} Previous {\/block:PreviousPage} {block:JumpPagination length=\"5\"} {block:CurrentPage} {PageNumber} {\/block:CurrentPage} {block:JumpPage} {PageNumber} {\/block:JumpPage} {\/block:JumpPagination} {block:NextPage} Next {\/block:NextPage}<br>{\/block:Pagination}For the theme we have been creating, I am going to use «these» arrows to navigate by rather than page numbers, since they are discrete. Also I’ll putting it at the bottom of the sidebar.<\/p><p><br><title\/image\/ description\/links><br>{block:PreviousPage}« {\/block:PreviousPage}{block:NextPage} »{\/block:NextPage}<br>And I am going to apply a little bit of styling, including setting the links to the right colour since the arrows are not covered by the rules we set out for the main content.<\/p><p>#sidebar .pagination { width: 260px; text-align: center; padding: 3px 0;}#sidebar .pagination a { color: {color:Primary Colour}; text-decoration: none;}#sidebar .pagination a:hover { color: {color:Secondary Colour};}I’m pretty sure I don’t have to say again what this means. I’ll only point out that I set the width to 260px because that’s the width of the sidebar, and it’ll ensure that the arrows are properly centred.<\/p><p>Click herefor a live preview of the theme with the pagination added.<br><br>See more: <a href=\"https:\/\/jonathanlewisforcongress.com\/the-wave-loves-employee-login\/\" title=\"Loves Login The Wave Loves Employee Login, Loves Wave Employee Portal\">Loves Login The Wave Loves Employee Login, Loves Wave Employee Portal<\/a><br><br><\/p><br><p><strong>Infinite Scroll<\/strong><\/p><p>To begin with we are going to set up the option to turn infinite scroll on and off with a tickbox. If you remember, this is an “if” function in the meta tags.<\/p><p>First of all we need to make sure that the forward and back page arrows don’t appear while infinite scroll is set to on by wrapping it in a “block:IfNot…” tag.<\/p><p>{block:IfNotInfiniteScroll}<br>...<br>{\/block:IfNotInfiniteScroll}Next, there is a little piece of Javascript which was created by Cody Sherman. All you have to do is copy a single line between the head tags in your blog, and outside of any style tags. I have also wrapped it in “block:IfInfiniteScroll” tags to work with this theme.<\/p><p><Meta tags>{block:IfInfiniteScroll}{\/block:IfInfiniteScroll}This usually works alone. However sometimes it is necessary (if the code above doesn’t work by itself) to add an extra div called “autopagerize_page_element” into your html, like so:<\/p><p><br>{block:Posts}<br>...<br>{\/block:Posts}<br>When the tickbox is unchecked, the javascript will do nothing and in turn the extra div should have no affect on your page. However, if you find that it adds a strange margin at the top of the page, which it may, then just call upon “.autopagerize_page_element” in your css and add in a margin of 0.<\/p><br><p>This section of tutorials is just about done. There is just one more thing that you should add, and that is a little tag called “CustomCSS”. This will insert any code that the user has written in the Custom CSS box on the customise page. It needs to be included inside a style tag, like so:<\/p><p>...<br><br>See more: <a href=\"https:\/\/jonathanlewisforcongress.com\/south-park-fractured-but-whole-time-fart-pause\/\" title=\"South Park Fractured But Whole Time Fart Pause, How Do I Timefart Pause\">South Park Fractured But Whole Time Fart Pause, How Do I Timefart Pause<\/a><br><br><All your css>...{CustomCSS}Click herefor the full version of the code for this theme. With this you have a complete basic theme.<\/p>","author":{"@type":"Person","name":"admin","url":"https:\/\/zuej.info\/author\/admin\/","sameAs":["https:\/\/jonathanlewisforcongress.com"]},"publisher":{"@type":"Organization","name":"","url":"https:\/\/zuej.info","logo":{"@type":"ImageObject","url":""},"sameAs":["https:\/\/www.facebook.com\/jegtheme\/","https:\/\/twitter.com\/jegtheme","#","#"]}}</script>
<script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"hentry","entry-title":"How To Auto Next Page Button Tumblr, Tweaks & Themes","published":"2021-09-19 09:46:27","updated":"2021-09-19 09:46:27"}</script>
<script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/zuej.info","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/zuej.info","name":"Home"}}]}</script>
<script type="text/javascript">;!function(){"use strict";window.jnews=window.jnews||{},window.jnews.first_load=window.jnews.first_load||{},window.jnews.first_load=function(){var e=this,t=jnews.library,n="object"==typeof jnews&&"object"==typeof jnews.library;e.data=null,e.run_ajax=!0,e.run_loginregister=!0,e.clear=function(){e.run_ajax=!0,e.run_loginregister=!0,e.data=null},e.init=function(){n&&(t.globalBody.querySelectorAll(".jeg_popup_account").length&&jnews.loginregister&&e.run_loginregister&&(e.run_loginregister=!1,jnews.loginregister.init(),jnews.loginregister.hook_form()),jfla.length&&e.run_ajax&&(e.run_ajax=!1,e.do_ajax({action:"jnews_first_load_action",jnews_id:jnewsoption.postid,load_action:jfla})))},e.update_counter=function(){if(n){var o={total_view:t.globalBody.querySelectorAll(".jeg_share_stats .jeg_views_count .counts"),total_share:t.globalBody.querySelectorAll(".jeg_share_stats .jeg_share_count .counts"),total_comment:t.globalBody.querySelectorAll(".jeg_meta_comment a span")};t.forEach(e.data.counter,(function(e,n){o[n].length&&t.forEach(o[n],(function(n,o){t.setText(n,e)}))}))}},e.do_ajax=function(o){if(n){var a=new XMLHttpRequest;a.onreadystatechange=function(){XMLHttpRequest.DONE===a.readyState&&200==a.status&&(e.data=JSON.parse(a.responseText),e.data.counter&&"object"==typeof e.data.counter&&e.update_counter())},a.open("POST",jnews_ajax_url,!0),a.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8"),a.send(t.httpBuildQuery(o))}}},window.jnews.first_load=new window.jnews.first_load,jnews.first_load.init()}();</script></body>
</html>
<!-- Page generated by LiteSpeed Cache 4.4.4 on 2022-05-28 10:10:51 --> 
