Blog: Developing my new blog in WordPress #4 (More Posts)
I feel like I’m a significant way through the work I’m doing now. I’m using a few instances of a WP Query for different purposes, including an image carousel slider as a main feature of the homepage to preview the last 6 blogs posted, which is a significant part of how this website will work.
The next significant part is to build the blog filtering system. This is something that’d work in the page.php only. That’s okay for this design because there won’t be a set of multiple website pages for this blog, only one, meaning there will only be one use case for page.php.
Setting the scene
Let’s lay out the HTML code I’ll be updating. The section below is the container element for the checkboxes
<section class="filter_categories_container">
<h3>Filter Categories</h3>
<div class="filter_categories">
. . .
</div>
</section>Inside the .filter_categories element is a set of div elements, each containing a checkbox and label element.
<div>
<input type="checkbox"
class="checkbox_items input_chkbx checked"
onchange="filterElements()"
id="category_one"
value="jgdm_features"></div>
<label for="category_one">JGDM Features</label>
</div>The purpose of these checkboxes is to filter blog items, that is remove all elements except for the ones assigned to the checkbox that has been ticked. This is done by setting the display property to none. When not checked, they should remain set to a display of inline-block.
Below, is the content of the .blog_list element. It is a set of 7 div elements with a shared class value of blog_item. And these are container elements that are each inline-block elements. They have one other class which is the same class value as a WordPress category slug.
<h3>Select a Blog to Read main_bloglist.php</h3>
<div class="1 blog-item jgdm_features"> . . . </div>
<div class="2 blog-item hundred_days_code jgdm_features web_design"> . . . </div>
<div class="3 blog-item web_design"> . . . </div>
. . .Then there’s the .blog-infoclass. Here’s where the basic information about the individual blog is placed; including a featured blog image and text-based blog metrics. The text elements will appear when the user hovers over the blog item.
<div class="blog-info">
<a href="#"> </a>
</div>Below each image goes .blog-item-metrics metrics class.
<span class="blog-item-metrics">
<table>
<tr>
<td>Metric</td>
<td>Value</td>
</tr>
<tr>
<td>Metric</td>
<td>Value</td>
</tr>
</table>
</span>These “Metrics” should include the author’s name and the date and time the post was made.
The third and final one is the number of posted comments associated with the post which is a whole number.
<span class="blog-item-metrics"> </span>Let’s start the process of working on a WordPress category list by first defining a new WP Query.
<?php
$blogs = array(
"post_type" => "blog_posts",
"posts_per_page" => -1
);
$query = new WP_Query( $blogs );
?>The maximum number of posts that appear in any listing of posts is defined in the “Reading” Settings page in the admin area as well as the “posts_per_page” parameter of a WP Query. However, any time you want to return all items in a query you can use the -1 value as shown above.
Hooking up the authorship information
Now that I’m returning all the results we need I start editing the markup to display the information.
Firstly, using the echo the_author_posts_link(); method actually outputs a hyperlink with the text of the WordPress username that authored the blog post
<?php echo the_author_posts_link(); ?>Secondly, the posted date and time can be displayed using a Time() method with a set of customisable formatting strings.
<?php echo the_time('Y m D'); ?>Finally. num comments to return an integer value of the number of comments that have been posted to a blog post.
echo get_comments_number();Here’s the final result, using all of the above techniques.
<table>
<tr>
<td>Author: </td>
<td><?php echo the_author_posts_link(); ?> </td>
</tr>
<tr>
<td>Posted On:</td>
<td><?php echo the_time('Y m D'); ?></td>
</tr>
<tr>
<td>Comments: </td>
<td><?php echo get_comments_number(); ?></td>
</tr>
</table>As a quick fix for the styling of any hyperlinks, make sure some colors are set for links and the mouse hover state along with a smooth transition.
a {
color: $col-tertiary;
transition: color .3s;
&:hover {
color: $col-quatenary;
}
}Before I move on, let’s not forget about hooking up the rest of the blog information. Since we know the WP Query slug we can retrieve the information
<a href="<?php the_permalink(); ?>">
<img src="<?php echo the_field( "article_featured_image" ); ?>" />
<article>
<h3><?php the_field( "article_title" ); the_title(); ?> </h3>
<p><?php the_field( "article_blurb" ) ?></p>
</article>Linking the categories – has_category()
Once I’ve converted the 7 blog items to a set of code that is part of a WP Query, I need a way to be able to check if a post has a particular WordPress category and to use that check to output a CSS class value – the mechanism by which the filter system works.
I went away and had a think about how I might do this and the possibility of using a function like has_category entered my mind. Surely there’s a way to check for the value of such a function and, use a structured if statement to see if this supposed has_category() contains the right value. And sure enough, there was just that function.
Below, we simply pass a string as the value to has_category(). This string is a slug identifier of the “News” category. And if that identifier is found, we then echo out the same string.
if ( has_category( "news" ) ) {
echo "news";
}Now that I’ve verified that this will work for me, I can expand it to check all 7 existing categories every time WordPress finds an item to display.
By echoing the class value inside the blog-item class, we can use PHP to add these strings into the class attribute value as additional classes whenever the category slugs are found; the exact effect I need.
<!-- Category Variables: -->
<?php
$category_1 = "jgdm_features";
$category_2 = "hundred_days_code";
$category_3 = "web_design";
$category_4 = "news";
$category_5 = "learning_journal";
$category_6 = "news_and_comment";
$category_7 = "uncategorised";
?><div class="blog-item <?php if ( has_category( $category_1 ) ) { echo $category_1; }
else if ( has_category( $category_2 ) ) { echo $category_2; }
else if ( has_category( $category_3 ) ) { echo $category_3; }
else if ( has_category( $category_4 ) ) { echo $category_4; }
else if ( has_category( $category_5 ) ) { echo $category_5; }
else if ( has_category( $category_6 ) ) { echo $category_6; }
else if ( has_category( 0 ) ) { echo $category_7; } ?>">Single.php – Generating dynamic category lists
In WordPress, there exists a number of methods that generate category lists. Some generate a catch-all list of every category in the WordPress installation, and some only list the category assigned to a Page or Post.
In single.php I’ve added the method to generate a whole list of all the categories.
<article class="category_list_container">
<h2>Category List</h2>
<div class="category_list">
. . .
</div>
</article><div class="category_list">
<ul>
<li><a href="archive.php"> Category </a>
. . .
</ul>
</div>To be replaced with…
<!-- Category list -->
<div class="category_list">
<?php wp_list_categories(); ?>
</div>This is the HTML it returns
<li class="categories">Categories
<ul>
<li class="cat-item cat-item-1">
<a href=""></a>
</li>
<li>The HTML structure is clean but not so straightforward. The container element is actually one list item with a .categories class. If you need to style the unordered list that is inside it, take note of the shared .cat-item class and the individually numbered class-item-n classes.
<li class="cat-item cat-item-6><a href=""></li>How can we make that work with the CSS? Well, the selectors speak for themselves. However if for any reason you don’t want the “Categories” text to appear in the output like it does by default, set the visibility property to hidden rather than switching the display properties.
li.categories {
border: solid red 1px;
/* display: none; */
visibility: hidden;
color: white;
list-style: none;
ul {
display: block;
visibility: visible;
}
}
Conclusion
Having a blog filtering system that returns only the content you want to see is a big part of my latest design and I’m pleased I’ve been able to accomplish it. I’ve also added a dynamic list of existing WordPress categories to the single.php template so this will update as and when any changes to category names are made in the admin area. I’d like to do the same for the live filtering system in page.php later on but that’s for another time.
I’ll turn my focus next to sorting out the text and other formatting for Posts and Pages that use the WordPress Loop.