Setup Wordpress blog page for university template

 For creating blog page and front page we create to new pages from dashboard Home and Blog and publish without content.

Now go to setting and click in Reading option and select Home page for static and blog page for blog.

Now create new page in theme folder front-page.php and copy all index.php code and paste in it.

Now remove all code from index.php and add header and footer using wordpress function.

Now copy page-banner section from page.php and add this between header and footer.

<div class="page-banner">
  <div class="page-banner__bg-image"
    style="background-image: url(<?php echo get_theme_file_uri('images/ocean.jpg')  ?>)">
  </div>
  <div class="page-banner__content container container--narrow">
    <h1 class="page-banner__title">Welcome to our blog !</h1>
    <div class="page-banner__intro">
      <p>Keep up with our latest news.</p>
    </div>
  </div>
</div>

and save check blog page.

after that add below code after above to display post

<div class="container container--narrow page-section">
  <?php
    while(have_posts()) {
        the_post(); ?>
  <div class="post-item">
    <h2 class="headline headline--medium headline--post-title"><a
        href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

    <div class="metabox">
      <p>Posted by <?php the_author_posts_link();  ?> On <?php the_time('F j, Y');  ?> in
        <?php echo get_the_category_list(', ');  ?></p>
    </div>

    <div class="generic-content">
      <?php the_excerpt();  ?>
      <p><a class="btn btn--blue" href="<?php the_permalink(); ?>">Continue Reading &raquo; </a></p>
    </div>

  </div>
  <?php }
  ?>
</div>

and save



Comments

Popular posts from this blog

Basics Of PHP

Creating App.js for Node Application

WordPress Full Guide For Developer