Docs

[tarv8278]

I have a long post that I broke into multiple pages using <!–nextpage–>. Now at the bottom of each page it shows Page 1 2 3 4 5 6. I would like to customize the look of this namely by making it larger / bolder, but also have buttons for previous page / next page. How would I go about doing this? I am using the Icon stack.

[Thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thanks.

[tarv8278]

The post has not been published yet. Here is a snip of how it appears –

[tarv8278]

I published briefly to see how it looked and now appears to be intermixed with post navigation. See new snip.

[Nabeel A]

Hi again,

Can you please share the URL of the page so we can take a closer look? In the mean time try adding the following code in your Customizer:

.x-pagination a {
	border: 1px solid #333;
	border-radius: 0;
	box-shadow: none;
}
.x-pagination a:hover {
	color: #fff;
	background-color: #757575;
}

Hope this helps!

[tarv8278]

Hi,

That didn’t seem to do anything. Here is the link for the post I’m working on.

https://bucketlistcentral.com/ultimate-us-road-trip/

The next / last post links are run by the following code I found on the forum –

// Links for Next / Previous Post

add_action (‘the_content’, ‘add_next_post_item_link’ );

function add_next_post_item_link ( $content ) {
if ( is_singular(‘post’) ) {
$next_name = “Next Post <i class=\”x-icon-chevron-right\”></i>”;
$prev_name = “<i class=\”x-icon-chevron-left\”></i> Previous Post”;
$next_link = get_next_post() ? ‘ID ) . ‘”>’ . $prev_name . ‘‘ : ”;
$prev_link = get_previous_post() ? ‘ID ) . ‘”>’ . $next_name . ‘‘ : ”;
$posts = ‘<div class=”wp-post-navigation-next”>’.$next_link.$prev_link.'</div>’;
return $content . $posts;
} else {
return $content;
}
}

[Christopher]

Hi there,

Please update previous code to:

.page-links {
    display: block;
    text-align: center;
}
.page-links a, .page-links {
    font-size: 25px;
    font-weight: bold;
}
.wp-post-navigation-next a {
    border: 2px solid red;
    padding: 4px 10px;
    border-radius: 3px;
    background-color: #000;
    color: #fff;
}
.wp-post-navigation-next a:hover {
border-radius: 3px;
    background-color: #fff;
    color: #000;
}

Hope it helps.

[tarv8278]

This worked beautifully. Thanks!

[Joao]

Glad to hear it 🙂

Let us know if we can help with anything else

Joao

[tarv8278]

How tough would it be to get links for next / prev page?

[Joao]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

Joao

[Author]

Posts