Jonnie Grieve Digital Media: Blog

Blog: Starting a new design for my blog – Part 2 (More Posts)

At the end of part one, I’d put together a new theme with all of its theme files; the starting point for making any new WordPress project.  I made it possible to log into the admin area with the required WordPress functions and created an organised system of parts for index.php to separate out the common parts of the template into a Header and Footer.

As it stands the project is an assemblage of PHP templates and assets that display static markup only.

Now it’s time to get some dynamic content from the admin area using The loop. The WordPress Loop gets all the content from WordPress posts, or pages depending on the page template used and displays all its contents. The way WordPress knows which content to display is through the WordPress Template Hierarchy.

Let’s get the content for WordPress Posts by putting the loop in the element with the class of .primary by using repeated blog entries in index.php.

I like to write the Loop by having 3 sets of PHP blocks where I write a loop nested inside a condition.

if ( there are posts ) : while ( there are posts ) : ( do something );

What this does is tells PHP to check if there are WordPress posts, and if there are WordPress posts, gather instances of those posts, and put them on the page.  If there are no posts or pages, use the other else block to display markup based on that state.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class = "entry">

  <h3><?php the_title(); ?></h3>
  <p><?php the_content(); ?></p>

</div>

<?php endwhile; else: ?>
  <p>No content</p>
<?php endif; ?>

This code only knows about the Posts and Page core types. But what if instead we want to use the Loop to iterate through Custom Post Types (CPT)?

<?php
       
  $args = array( 'post_type' => 'blog_posts' );
       
  // wp query
  $main_blog = new WP_Query( $args )

?>

This snippet of PHP stores an array of arguments stored in a PHP variable.

We can modify the loop to use that variable so that we have access to the array values.  This tells PHP that we are using the posts from the CPT because it can see we’re asking for the “blog_posts” post type.

<?php if ( $main_blog->have_posts() )

How do we then get the right content if we’re using a separate query? We can try using the $main_blog variable again and add it to template method that gets post content.

<p> <?php echo $main_blog->the_content(); ?></p>

But that has no effect.

When I exported the database over from the server I also copied the CPT. And it’s there that the contents of the blog are stored, rather than the WordPress Core text editor.

So in order to access those contents we need to use the slug identifier for the custom field.

<p> <?php echo the_field( "article_blurb" ) . "..."; ?> </p>

So we need to add “article_blurb” as the string argument to “get_field()”.

<div class = "entry">

  <h3> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h3>
  <p> <?php echo the_field( "article_blurb" ) . "..."; ?> </p>

</div>

I now have everything I need to know to be sure the loop is correctly using the Custom Post Type. But it’s not very interactive yet.  There’s another template we need to use called single.php which is the page we use to see the entire instance of a single blog entry.

To create single.php I copied the code over from index.php into a new file and saved it from that file.

It’s also important to make sure you’ve selected the “post name” permalink setting via the admin area or the template for single.php will not work.

At first, single.php presented me with a list of the posts, not the whole of the selected post.

I fixed this by removing any reference to the WP query variable in the loop and using the method. In fact. since want the whole contents of only one post, we don’t need the loop at all. WordPress already knows the content it’s looking for. I also gave the article element a class of its own called single.

<article class="single">
<?php
?>

<h2> <p>Single.php</p> </h2>

<a href="<?php bloginfo("home"); ?>">Home</a>

  <h3> <?php the_title(); ?> </h3>
  <p> <?php the_field( "article_content" ); ?> </p> 

</article>

So I’m ready to start looking again at styling what I’ve built so far.

// config.scss
$background-main: black;
$background-secondary: black;
$background-pagination: yellow;
$background-blog-entry: yellow;

$color-main: lightblue;
$color-secondary: white;
$color-nav: gold;

section {
    display: grid;
    grid-template-columns: 65% 1fr;
}

I also set .primary to contain 85% of its available space

.primary {
  width: 85%;
}

Let’s focus on the contents of the .primary class.

It contains pagination links that go above and below the blog list. Let’s use CSS to make these elements stand out. First gave it a yellow background, made it center aligned and gave it margins for separation

.pagination {

    margin: 9px 0;
    background: $background-pagination;
    border: solid green 1px;
    color: $color-main;
    width: 100%;
    text-align: center;
    font-size: 17pt}

In side the pagination element we next have to style the hyperlinks, This requires an inline-block display type and an anchor selector.  I used the colour red for non visited element.  I also have a class for the first child anchor that uses .current as a class attribute. The purpose of the .current to one of the links is to mimic the style of a pagination link for the posts page the user is on.

.pagination {
  . . .
  a {

    color: red;
    font-size: 12px;
    display: inline-block;
    margin-left: 5px;
    text-decoration: none;
    &.current-page {

      color: black;
      font-weight: bold;
    }
}

Each blog entry is self-contained in an element with the class of .entry.  I’m using a display block, to stack each blog entry on top of each other and a Sass variable to make sure I’m using the same background colour as the pagination links.

.entry {
    display: block;
    margin: 8px 0;
    padding: 10px 0;
    background: $background-blog-entry;
    transition: background .3s;

    min-height: 50px;
    &:hover {

        background: lighten( $background-blog-entry, 17% );
        // background: white;

    }
}

Using the lighten() method and CSS transitioning allows the user to easily identify which blog entry they will be clicking onto.

So where are we now as I finish this part?  We now have a list of all the Blog post custom post types in index.php, with some basic styling for each. And each now correctly links to the corresponding individual post page, using single.php.

In the next part, I want to finish styling single.php, investigate styling for code snippets, and how to work with WordPress’ pagination methods.