How to add Pagination Style Generatepress Theme Without Plugin

Are you looking to add a custom pagination style to your website built on the Generatepress theme without using a plugin? Look no further! In this tutorial, we will guide you through the step-by-step process of implementing a custom pagination style in your Generatepress theme.

Pagination plays a crucial role in enhancing user experience and improving site navigation. With our easy-to-follow instructions, you’ll be able to create a unique pagination style that perfectly aligns with your website’s design aesthetic and functionality.

Read More: Complete CSS to GeneratePress Marketer Theme Customization

No coding skills are required for this customization. We will provide you with the necessary code snippets, which you can easily integrate into your Generatepress theme files. You’ll learn how to modify the pagination structure, customize the look and feel, and ensure smooth functionality across different platforms and browsers.

By adding a custom pagination style, you can make your website more visually appealing and user-friendly. Your visitors will appreciate the intuitive navigation and seamless browsing experience, leading to better engagement and increased conversions.

So, why rely on plugins when you can achieve the desired pagination style within the Generatepress theme itself? Join us in this tutorial and unlock the potential of custom pagination without any hassles.

add Custom Pagination CSS Code Generatepress

1. Log in to your WordPress dashboard.
2. Navigate to “Appearance” and click on “Customize.”
3. In the Customizer, look for the “Additional CSS” or “Custom CSS” option.
4. Click on it, and a code editor will appear where you can add your custom CSS code.
5. Write or paste your CSS code into the editor.
6. After adding your code, click on the “Publish” or “Save & Publish” button to apply the changes.

Pagination Style Generatepress Theme CSS Code

Generatepress Theme Pagination Style 1

/* Paging navigation style */
.paging-navigation .nav-links > * {
        padding: 7px 15px;
	margin-right: 0px;
	border-radius: 0px;
	display: inline-block;
	border: 1px solid #34393f;
	background: #ffffff;
}

.paging-navigation .nav-links a:hover {
        background-color: #34393f;
	border-color: #34393f;
        color: #ffffff;
}

.paging-navigation .nav-links .current {
	background-color: #34393f;
	border-color: #34393f;
        color: #ffffff;
}

.paging-navigation .nav-links .current {
        font-weight: 700;
}

.nav-links > * {
         border-width: 2px;
         border-style: solid;
         border-color: #34393f;
	 text-decoration: none;
	 color: #34393f;
}

Generatepress Theme Pagination Style 2

/* Paging navigation style */
.paging-navigation {
	display: flex;
}
.paging-navigation .nav-next, .paging-navigation .nav-previous {
	display: block;
}
.paging-navigation .nav-previous {
	margin-right: 5px;	
}
.paging-navigation .nav-next {
	order: 1000;
	margin-left: 5px;
}
.page-numbers.prev,
.page-numbers.next {
	display: none;
}
.page-numbers,
.paging-navigation span {
	padding: 5px 10px;
	box-sizing: border-box;
	border-radius: 5px;
	border: 1px solid;
	text-align: center;
}

Generatepress Theme Pagination Style 3

Paging navigation style */
.paging-navigation .nav-links>* {
    padding: 10px 16px;
    background-color: lightgrey;
    color: black;
    border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
    background: blue;
    color: #ffffff;
}

Generatepress Theme Pagination Style 4

/* Paging navigation style */
.paging-navigation .nav-links>* {
    padding: 10px 16px;
    background-color: #ffe9e9;
    color: black;
    border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
    background: #1762d1;
    color: #ffffff;
}
a.next.page-numbers > span {
    display: none;
}

Generatepress Theme Pagination Style 5

/* Paging navigation style */
.paging-navigation .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Add padding to prev and next links */
.paging-navigation .nav-links .prev,
.paging-navigation .nav-links .next {
    padding: 0 15px;
}

/* Style nav links */
.paging-navigation .nav-links a.page-numbers,
.paging-navigation .nav-links .current {
    line-height: 36px;
    min-width: 36px;
    margin: 0 4px;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    color: #000;
    border: 1px solid #ccc;
}

/* Style Current link */
.paging-navigation .nav-links .current {
    background-color: #00f;
    color: #fff;
}

/* Style Nav link hover */
.paging-navigation .nav-links a.page-numbers:hover {
    border-color: #00f;
}

Generatepress Theme Pagination Style 6

/* Paging navigation style */
#nav-below .nav-links > *:not(.dots) {
    display: inline-flex;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    line-height: 40px;
    min-width: 40px;
    border-radius: 6px;
    background-color: #f00;
    color: #000;
}
#nav-below .nav-links > *:not(.dots):hover,
#nav-below .nav-links .current {
    background-color: #00f;
    color: #fff;
}

GenerateBlocks Pagination Style CSS Code

/*Button Style*/
.uws-button,
a.button,
.pagination-bt,
.wp-block-search__button,
input[type="submit"] {
    font-size: 14px;
    padding: 10px 25px;
    transition: 0.5s;
    background-size: 200% auto;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    background-image: linear-gradient(to right, #1fd1bf 0, #07b0a2 51%, #1fd1bf 100%);
    border-radius: 50px;
}

.uws-button:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

a.button:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

input[type="submit"]:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.pagination-bt:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.wp-block-search__button:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}