Making a custom Pagination for multi page blog post

Assuming “Early modern”, “Religion” and “Parks and gardens” are true WP pages, then wp_page_menu() is your friend.

Your page.php template would look something like the following:

// code to output page header, etc, would be above this

$args = array (
    'show_home' => false,
    // see below for info on the 'walker' arg
    'walker' => new My_Walker_Page_With_Featured_Image (),
    // any other wp_page_menu() args you want
    ) ;

// output the "top" page menu
wp_page_menu ($args) ;

// code to output page content goes here

// output the "top" page menu
wp_page_menu ($args) ;

// code to output page footer, etc, would be below this

wp_page_menu() outputs an HTML unordered list, the list items of which are links to the page in question. You can style this list any way you’d like.

The main complication, looking at your desired page design, would be getting the image to appear in the menu items. If it were me, I would probably do the following:

1. set that image as the page’s featured image
2. subclass Walker_Page and pass an instance of that subclass as the value of the walker arg to wp_page_menu()
   1. in that subclass’s end_el() method, add the page’s featured image to the list item

The following probably doesn’t do everything you’d need to do, but it should point you in the right direction:

class My_Walker_Page_With_Featured_Image
    extends Walker_Page
{
    /**
     * append the page's featured image to the list item
     */ 
    function
    end_el (&$output, $page, $depth = 0, $args = array())
    {
        $output .= get_the_post_thumbnail ($page->ID) ;
        parent::end_el ($output, $page, $depth, $args) ;
    }
}