WordPress #2: Create a sub-page

This note is useful if we want to add a sub-page: website.com/blog.

Code

  • Add blog.php file in the theme,
  • blog.php:
<?php get_header(); ?>

<?php /* Template Name: blog */ ?>

<body>
	<div class="container col-12">
		<?php
			$args=array(
			    'post_type' => 'post',
			    'post_status' => 'publish',
			    'posts_per_page' => 3
			    //can add more var here, for example: 
			    //'orderby'=> 'ID'
			    //'order' => 'DESC'
			);

			 $my_query = null;
			 $my_query = new WP_Query($args);

			 if( $my_query->have_posts() ) {
			    $i = 0;
			    while ($my_query->have_posts()) : $my_query->the_post();

			  // 3 columns
			  // output in an open <div>
			  if($i % 3 == 0) { ?> 
			  	<div class="row p-3">
			  <?php } ?>

			<div class="col-sm-4" >
				<div class="card-cont p-3">
					<!-- TO CALL THE FEATURED IMAGE -->
					<?php the_post_thumbnail('thumbnail');?>

					<!-- TO CALL THE TITLE -->
					<p class="text-uppercase pt-3"> <a href="<?php echo esc_url( get_permalink());?>"><?php the_title(); ?></a></p>

					<!-- TO CALL THE DATE POSTED -->
					<span>Posted on <?php the_time('l jS F, Y') ?></span><br />
					<p><?php the_excerpt(); ?></p>
				</div>
			</div>  

			<!--// increment the loop BEFORE we test the variable-->
			<?php $i++; 
			      if($i != 0 && $i % 3 == 0) { 
                        ?>
			</div>
			<!--/.row-->
			<div class="clearfix"></div>

			<?php } ?>

			<?php  
			      endwhile;
			   }
			   wp_reset_query();
			?>
	</div>
        <!--/.container-->  	
</body>

<?php wp_footer(); ?>

On WordPress

  • Login to website.com/wp-admin
  • Go to Page >> Add New
  • Name the new sub-page, for example: ‘Blog’
  • On the right side, expand on Page Attributes, choose Template: Home.
  • Expand on Permalink, on Slug, add the URL, for example “/blog”
  • Add blog.php file in the theme,

Now it looks like this,

Now the menu appears, if you’d like to remove the bullet points, add this CSS:

ul {
	list-style: none;
}

With the power of HTML, CSS, and Stackoverflow, redesign/ relocate the menu.

References:

https://www.cssigniter.com/how-to-add-a-new-navigation-menu-to-your-wordpress-site/

https://pressidium.com/blog/create-a-custom-navigation-menu-in-wordpress-without-using-plugins/

https://css-tricks.com/css-link-hover-effects/


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *