<?php
/**
 * The template for displaying archive pages
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @since 1.0
 * @version 1.0
 */
get_header(); 
?>

<section class="blogBgOuter" style="background:url(<?php echo get_template_directory_uri();?>/images/blogBg.png) left top no-repeat;">
    <div class="container">
        <div class="blogHd">  
            <h1><?php 
             $pageTitle = get_post_meta( $post->ID, 'custom_page_title', true);
             if(!empty($pageTitle)){
             echo $pageTitle;
             }else{
             the_title();
             }
            ?></h1>
        </div>
    </div>
</section>

<?php
$post_per_page = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $archivelist = 
        array(
            'posts_per_page' => $post_per_page,
            'orderby'        => 'post_date',
            'order'          => 'DESC',
            'post_type'      => 'post',
            'post_status'    => 'publish',
            'paged'          => $paged    
        );
    $loop = new WP_Query( $archivelist );
?>

<section class="blogBgOuterblog">
            <div class="container">                
                    <div class="postUL">
                           <?php 
                             if ( $loop->have_posts() ) {
                                while ( $loop->have_posts() ) : $loop->the_post(); 
                                ?> 
                                    <div class="blogpost">
                                    <strong><a href="<?php the_permalink();?>"><?php the_title(); ?></a></strong>   
                                    <?php the_category(); ?>
                                    <p><?php 
                                    $content = get_the_excerpt(); 
                                    if(!empty($content)){
                                    echo mb_strimwidth($content, 0, 100, '...');
                                    }else{
                                    echo wp_trim_words(get_the_content(), 40);  
                                    }                    
                                    ?></p>
                                    <a href="<?php the_permalink();?>">Read More >></a>
                                    </div>
                                <?php                                                     
                                endwhile;
                                wp_reset_query();
                                ?>

                            <div class="olderPost">
                            <span class="pre_btn">
                                <?php previous_posts_link('&laquo; Previous Page',$loop->max_num_pages); ?>
                                    
                                </span>
                            <span class="next_btn">
                                <?php next_posts_link('Next Page &raquo;',$loop->max_num_pages); ?>
                                    
                            </span>
                            </div>
                        
                            <?php
                            }else{             
                            echo '<p>Nothing has found.</p>';            
                            }
                            wp_reset_postdata();
                            ?>  
                    </div> 
            </div>           
        </section>


<style type="text/css">
    .blogpost{margin-bottom: 20px;}
    .blogBgOuterblog{padding-top: 50px;padding-bottom:50px;}
</style>

<?php 
get_footer(); 
?>