Note: This was originally titled Thirty Day Challenge – Day 1.

I write a lot on my other blog, that one is not intended for general audiences since it focuses on religion, society and politics. It’s also a WordPress site – unlike this blog where I chose Salient as the theme and framework, I wrote custom code for the theme on the other site. That one allows me to write a summary for the front page and RSS news feed that is different than the main text of the article. It also archives the latest three articles for the three categories on the front page as well.

The blog is called What Matters to Me. Click on the name to visit the website and compare the code to what you see. I used the theme editor to customize the code. Here is the code for my front page:

/**
* Template Name: Home Page
*
* @package customTheme
* @since Custom Theme 1.0
*/
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
<?php if ( is_singular() && get_option( ‘thread_comments’ ) ) wp_enqueue_script( ‘comment-reply’ ); ?>
<?php wp_head(); ?>
<title>What Matters to Me – An Individual’s View</title>
<style type=”text/css”>
body {
background-color: #eeeeee;
}

.thefocus {
background-color: #eeeeee;
}

.thetop {
/* border-bottom: solid 1px #606C88; */
width: 95%;
}

.thetop p a {
font-style: italic;
font-weight: bolder;
}

.bgry {
background-color: #e0e0e0;
}

.blgry {
background-color: #eeeeee;
}

.gry {
border: solid 2px #606C88;
border-radius: 0px;
background-color: #e0e0e0;
}

.gry a {
color: #000000;
}

.gry .navbar-nav li a:hover {
background-color: #eeeeee;
color: #000000 !important;
}

</style>
</head>
<body <?php body_class(); ?>>
<div id=”header”>
<div class=”headache”>
<div class=”container text-center”>
<h1 class=”j”><?php bloginfo(‘name’); ?></h1>
<h2 class=”j”><?php bloginfo(‘description’); ?></h2>
</div>
</div>

<nav class=”navbar gry”>
<div class=”container blk”>
<div class=”navbar-header navbar-right”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<form role=”search” method=”get” id=”searchform” class=”searchform” action=”https://whatmatterstome.us/”>
<div class=”searchdiv”>
<label class=”screen-reader-text” for=”s”>Search for:</label>
<input type=”text” value=”” name=”s” id=”s” />
<input type=”submit” id=”searchsubmit” value=”Search” />
</div>
</form>
<!– <a class=”navbar-brand” href=”<?php echo esc_url( home_url(‘/’)); ?>”><?php bloginfo(‘name’); ?></a> –>
</div>
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav text-center”>
<?php
wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘menu_class’ => ‘about_pages’,
‘container’ => false,
‘items_wrap’ => ‘%3$s’
));
?>
<!– <?php
wp_nav_menu( array(
‘theme_location’ => ‘secondary’,
‘menu_class’ => ‘waves’,
‘container’ => false,
‘items_wrap’ => ‘%3$s’
));
?> –>
</ul>
</div>
</div><!– .container –>
</nav>
</div><!– header –>
<div class=”container thefocus”>
<div class=”row”>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>
<h3>Latest Wave Theory Post:</h3>
<?php $my_query = new WP_Query(‘category_name=Wave Theory&posts_per_page=1’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>
<h3>Latest Bible Faith Post:</h3>
<?php $my_query = new WP_Query(‘category_name=Bible Faith&posts_per_page=1’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>
<h3>Latest Commentary Post:</h3>
<?php $my_query = new WP_Query(‘category_name=Commentary&posts_per_page=1’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
</div>
<!– <div class=”row bgry”>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>
<h3>Latest Music Post:</h3>
<?php $my_query = new WP_Query(‘category_name=Music&posts_per_page=1’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>
<h3>Latest Photography Post:</h3>
<?php $my_query = new WP_Query(‘category_name=My Photography&posts_per_page=1’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>
<h3>Latest Other Post:</h3>
<?php $my_query = new WP_Query(‘category_name=Other&posts_per_page=1’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
</div> –>
<div class=”row bgry”>
<h3>Wave Theory Posts:</h3>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>

<?php $my_query = new WP_Query(‘category_name=Wave Theory&posts_per_page=1&offset=1’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>

<?php $my_query = new WP_Query(‘category_name=Wave Theory&posts_per_page=1&offset=2’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>

<?php $my_query = new WP_Query(‘category_name=Wave Theory&posts_per_page=1&offset=3’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
</div>
<div class=”row”>
<h3>Bible Faith Posts:</h3>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>

<?php $my_query = new WP_Query(‘category_name=Bible Faith&posts_per_page=1&offset=1’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>

<?php $my_query = new WP_Query(‘category_name=Bible Faith&posts_per_page=1&offset=2’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>

<?php $my_query = new WP_Query(‘category_name=Bible Faith&posts_per_page=1&offset=3’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
</div>
<div class=”row bgry”>
<h3>Commentary Posts:</h3>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>

<?php $my_query = new WP_Query(‘category_name=Commentary&posts_per_page=1&offset=1’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>

<?php $my_query = new WP_Query(‘category_name=Commentary&posts_per_page=1&offset=2’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
<div class=”col-md-4 col-lg-4″>
<div class=”thetop”>

<?php $my_query = new WP_Query(‘category_name=Commentary&posts_per_page=1&offset=3’);
while($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<?php the_title( sprintf(‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink())), ‘</a></h2>’); ?>
<?php the_date(); ?>
<p><?php echo rwmb_meta( ‘summary’ ); ?></p>
<?php endwhile; ?>
</div>
</div>
</div>
<div class=”row bgry”>
<?php if( is_active_sidebar( ‘sidebar-2’ )) : ?>
<aside id=”secondary” class=”sidebar widget-area” role=”complementary”>
<?php dynamic_sidebar( ‘sidebar-2’ ); ?>
</aside>
<?php endif; ?>
</div>
</div>

<?php get_footer(); ?>

This post will just focus on the front page. The key here is formatting the post headlines and summaries to show up automatically. Every post in a category is ordered, the latest one on top. The PHP code to query the latest articles for each category are colored green. Notice for the query, posts_per_page=1. That tells the code to place one post, and that post will automatically be the latest.

The code colored blue is to post the second, third and fourth headlines and summaries. Notice for these queries I’ve added an offset. So posts_per_page=1&offset=1 will post a single entry – the second latest article because the offset is one. The offset of 2 displays the third latest and so on. Knowing this gives you full control of how you want your articles laid out.

The code in orange just specifies what you want to display from the article. For these I just display the Title, Date and Summary.

By the way, if you are not familiar with Bootstrap, check it out. It is a great tool that is included with WordPress. There are easy ways to assure that your website’s pages will format correctly on your tablets and smartphones, Bootstrap makes it even easier. It combines JavaScript and CSS3 to place tags in your code based on how wide the screen and how many columns you want it to have. This simple div tag <div class=”col-md-4 col-lg-4″> assures me that everything will look great from any device. The CSS and JavaScript is already in the WordPress code.