When paginating a Page with the tag, how can the 2nd and subsequent page styles be customised?

by

I want to apply different styles for a second page in single.php or posts. How can I do this?

I have the following code in single.php to split the page in two parts:

<!--nextpage-->

If there is a different method to add another “tab” to post or the like, I am grateful for any help… I just want to add a “custom page” to my post – like a gallery for a post – so the URL could be like this:

http://localhost/mysite/1024/postname/gallery/
http://localhost/mysite/1024/postname/custom-page/

Code in single.php:

    <?php get_header();?>
 <main>
<?php get_sidebar() ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div id="post">

            <div class="top-single-movie">

            <div class="info">  
            <h3 class="title" id="post-<?php the_ID(); ?>">
            <a href="https://wordpress.stackexchange.com/questions/233357/<?php the_permalink() ?>" rel="bookmark">
            <?php the_title(); ?></a>
            <?php if( get_field('date') ): ?>
             ( <?php the_field('date'); ?> )
            <?php endif; ?> 
            </h3>
            </div>


            <?php if(has_post_thumbnail()) :
            the_post_thumbnail('medium');
            else : 
            echo '<img src="'.get_bloginfo('template_directory').'/img/default.png">';
            endif;
            ?>

            </div><!-- End. top-single-movie -->


            <?php the_content(); ?>

            <?php 
    wp_link_pages( array(
        'before' => '<div class="page-link"><span>' . __( 'Pages:', 'tl_back' ) . '</span>',
        'after' => '</div>'
    ) ); 
?>

            <?php include (TEMPLATEPATH . '/php/single/tv-single-rand.php'); ?>


            </div><!-- End. content-single-movie -->


            <p class="tags"><?php the_tags(); ?> </p> 



            <!--?php comments_template(); // Get comments.php template ?-->


            <?php endwhile; else: ?>
            <p> <?php _e('Sorry, no posts matched your criteria.'); ?> </p>
            <?php endif; ?>
            <!-- END Loop -->


            <ul class="navigationarrows"> 
            <li class="previous">
            <?php previous_post_link('&laquo; %link'); ?>
            <?php if(!get_adjacent_post(false, '', true)) 
            { echo '<span>&laquo;Previous</span>'; } ?>
            </li>
            <li class="next">
            <?php next_post_link('%link &raquo;'); ?>
            <?php if(!get_adjacent_post(false, '', false)) { echo '<span>Next post:</span>'; } ?> 
            </li>
            </ul><!-- end . navigationarrows --> 

    </div>

 </main>
<?php get_footer();?>

3 Answers
3

WordPress already adds classes to the body for you to handle this, as long as your theme correctly uses the body_class template tag.

On the 2nd page of Page, your body will have these additional classes: paged, paged-2 & page-paged-2, so you can see that you can make changes to styles to suit:

body.page {
    background: black;
    color: white;
}

body.paged {
    background: green;
    color: red;
}

Core achieves this with this logic:

global $wp_query;

$page = $wp_query->get( 'page' );

    if ( ! $page || $page < 2 )
        $page = $wp_query->get( 'paged' );

    if ( $page && $page > 1 && ! is_404() ) {
        $classes[] = 'paged-' . $page;

        if ( is_single() )
            $classes[] = 'single-paged-' . $page;
        elseif ( is_page() )
            $classes[] = 'page-paged-' . $page;
        elseif ( is_category() )
            $classes[] = 'category-paged-' . $page;
        elseif ( is_tag() )
            $classes[] = 'tag-paged-' . $page;
        elseif ( is_date() )
            $classes[] = 'date-paged-' . $page;
        elseif ( is_author() )
            $classes[] = 'author-paged-' . $page;
        elseif ( is_search() )
            $classes[] = 'search-paged-' . $page;
        elseif ( is_post_type_archive() )
            $classes[] = 'post-type-paged-' . $page;
}

You could adapt this logic within your templates if you wanted to use different HTML on the first & subsequent pages.

Leave a Comment