Call WordPress 4.1 built-in paging navigation

00:06:26, January 21, 2015 WordPress thirty-one 14.2K Reading mode

WordPress 4.1 has been released for some time, and many new functions have been added. The built-in paging navigation is very practical, and other third-party paging codes and plug-ins are no longer needed.

Calling WordPress 4.1 built-in paging navigation - picture 1

In fact, paging navigation has been built into the default theme of previous versions, but it is not integrated into the program. This time, WordPress version 4.1 is officially integrated into the program as the default function.

Paging navigation calling function:

<? php
the_posts_pagination( array (
'prev_text'=>Previous page,
'next_text'=>Next page,
'before_page_number' => '<span class = "meta-nav screen-reader-text" >The</span>',
'after_page_number' => '<span class = "meta-nav screen-reader-text" >Page</span>',
) );
?>

Note: WordPress versions before 4.1 are not supported

Add to the appropriate location of the theme index, archive and other templates, and match with the corresponding style to achieve responsive conversion, as shown in the figure:

Built in paging navigation effect picture
The upper is the normal style, and the lower is the style of the mobile device.

Expand Style Code
open shrink

/**Equal to or greater than 550px normal mode**/
@media screen and ( min-width : 550px ) {
.pagination {
float : right ;
}
.pagination a, .pagination a:visited {
float : left ;
background : #fff ;
margin : 0 5px 10px 0;
padding : 8px 11px ;
line-height : 100%;
border : 1px solid #ebebeb ;
border -radius: 2px ;
}
.pagination .current, .pagination .dots {
background : #fff ;
float : left ;
margin : 0 5px 0 0;
padding : 8px 11px ;
line-height : 100%;
border : 1px solid #ebebeb ;
border -radius: 2px ;
}
.pagination span.pages {}
.pagination span.current, .pagination a:hover {
background : #0088cc ;
color : #fff ;
border : 1px solid #0088cc ;
}
. screen -reader-text, .pages {
display : none ;
}
}
/**550px or less for mobile devices**/
@media screen and ( max-width : 550px ) {
.pagination {
background : #fff ;
border : 1px solid #ebebeb ;
border -radius: 2px ;
}
.pagination .nav-links {
min-height : 30px ;
position : relative ;
text-align : center ;
}
.pagination .current . screen -reader-text {
position : static ! important;
}
. screen -reader-text {
height : 1px ;
overflow : hidden ;
position : absolute ! important;
}
. page -numbers {
display : none ;
line-height : 25px ;
padding : 5px ;
}
.pagination . page -numbers.current {
text-transform : uppercase ;
}
.pagination .current {
display : inline - block ;
}
.pagination .prev,
.pagination .next {
background : #0088cc ;
color : #fff ;
display : inline - block ;
height : 29px ;
line-height : 29px ;
overflow : hidden ;
padding : 2px 8px ;
position : absolute ;
border : 1px solid #0088cc ;
}
.pagination .next {
border -radius: 0 2px 2px 0
}
.pagination .prev {
border -radius: 2px 0 0 2px ;
}
.pagination .prev a,
.pagination .next a{
color : #fff ;
line-height : 20px ;
padding : 0;
display : inline - block ;
}
.pagination .prev {
left : 0;
}
.pagination .prev:before {
left : - 1px ;
}
.pagination .next {
right : 0;
}
.pagination .next:before {
right : - 1px ;
}
}

If your theme is non responsive, just add the normal mode style (remove the media query judgment @ media screen And), see the specific effect Home page Bottom pagination.

Most of the articles on this site are original and used for personal learning records, which may be helpful to you, for reference only!

My Wechat

Copyright Notice

Please indicate the source and link of the original article reprinted on this site. Thank you for your cooperation!

Get this topic

five hundred and ninety-eight million eight hundred and forty-five thousand and six

Please add Q: 598845006

Multi functional theme Begin

This article is written by Robin Published on January 21, 2015 at 00:06:26
Please specify: https://zmingcx.com/wordpress-4-1-tabbed-navigation.html |Robin

WordPress
Wordpress Tutorial
WordPress Theme

five hundred and ninety-eight million eight hundred and forty-five thousand and six

Please add Q: 598845006

Multi functional theme Begin

Comments thirty-one Visitors twenty-six Author three

Great Counselor Network three
00:28:38, January 21, 2015 Kunming, Yunnan Province one F
reply
Support Brother Bird! The theme is good, and we are paying close attention to it!
Abbott two
07:37:54, January 21, 2015 Liuzhou, Guangxi two F
reply
Brother Bird, it seems that the bottom of the home page is different from the navigation renderings
Xiaoer Abutilon two
09:45:00, January 21, 2015 Tianjin three F
reply
Like new topic
Hezi Nethouse two
11:26:59, January 21, 2015 Haixi Prefecture, Qinghai Province four F
reply
Support Brother Bird! Continuous attention!
Kill the stars three
13:09:10, January 21, 2015 Hangzhou, Zhejiang Province five F
reply
I think it's very good
Misong zero
15:14:07, January 21, 2015 Zhanjiang City, Guangdong Province six F
reply
Brother Bird, can you add the first and last page on this basis, or have an address, enter the number of pages, directly enter or click GO to jump the number of pages
Flowers bloom and fall one
16:31:21, January 21, 2015 Wuhan, Hubei Province seven F
reply
Support brother bird, the new theme is very modern style, simple atmosphere!
Financing channel one
January 21, 2015 17:24:45 Shenzhen, Guangdong Province eight F
reply
This function is a bit cool.
Selected Prose five
20:29:06, January 21, 2015 Nanjing, Jiangsu Province nine F
reply
Nice new version support!
aunsen five
21:19:01, January 21, 2015 Xi'an, Shaanxi Province ten F
reply
Is this also used for article pagination
- Robin
  21:47:30, January 21, 2015 China B one
  reply
  @ aunsen This can only be used on the article list page
  The article paging function has always been available
Tile mover zero
10:58:17, January 22, 2015 Nantong City, Jiangsu Province eleven F
reply
In this case, the paging plug-in can not be used anymore.
Ask Lawyer zero
January 25, 2015 19:28:35 Shanghai twelve F
reply
pretty good
Allied source three
13:59:09, January 31, 2015 Wuhu City, Anhui Province thirteen F
reply
I also found the new functions in 4.1
Selected Prose five
18:19:15, February 3, 2015 Nanjing, Jiangsu Province fourteen F
reply
Beautiful way
Eight claw print four
19:09:32, February 8, 2015 Mianyang City, Sichuan Province fifteen F
reply
test
tonjay one
22:46:49, February 25, 2015 Zhengzhou City, Henan Province sixteen F
reply
Brother Bird, how to remove the code generated in paging navigation:
Posts navigation
- Robin
  13:01:33, February 26, 2015 China B one
  reply
  @ tonjay Use display: none; hide
  - Nine zero
    09:40:53, February 5, 2016 Beijing B two
    reply
    @ Robin Is it good for optimization to hide it like this? I don't understand. It is said that the h1 label is not good
sinsky one
19:43:24, March 4, 2015 Fengtai District seventeen F
reply
Why don't they display? They don't display after every attempt. The version is 4.1.1. In addition, you can't see the navigation on your home page.
alalala zero
21:43:17, March 26, 2015 Yangzhou City, Jiangsu Province eighteen F
reply
Is there a right added to line 97 and line 100 of the code. The "Next" button is not to the right during adaptation, but to the right after deleting a right
- Robin
  22:54:54, March 26, 2015 China B one
  reply
  @ alalala ok， Corrected
BOKE123 five
17:38:10, April 20, 2015 Nanning, Guangxi nineteen F
reply
This pagination page number is very powerful, not bad
one hundred and eleven zero
10:33:31, July 27, 2015 Chengdu, Sichuan twenty F
reply
I want to say that your website scroll bar scrolling on the touch pad on the MAC system is anti human.
ebichu zero
20:37:05, June 2, 2016 Hangzhou, Zhejiang Province twenty-one F
reply
But the paging in the post type custom type archive page is invalid,
ha-ha zero
16:37:58, November 30, 2016 Dalian, Liaoning Province twenty-two F
reply
Ah ha ha ha ha ha ha ha ha ha
Win7en Paradise seven
January 10, 2017 19:13:47 Tai'an City, Shandong Province twenty-three F
reply
I think this is pretty good. I strongly recommend it. It's really easy to use. It's very easy to use.
The greatest truths are the simplest two
19:35:07, January 12, 2017 Xuhui District, Shanghai twenty-four F
reply
I used to use your blog theme, wokla.iok.la
Baizhi.. zero
10:09:03, June 5, 2017 Hangzhou, Zhejiang Province twenty-five F
reply
It doesn't work, nothing is displayed