Jonnie Grieve Digital Media: Blog

Blog: Developing my new blog in WordPress #6 (More Posts)

Introduction

I’ve made a lot of progress with my new blog at this stage.

• I’ve written multiple custom queries on the homepage so that users can see the 6 most recently published blogs (i.e. the Slick Slider carousel) and some more information about the single most recent blog entry.
• I implemented the vast majority of the single.php template.  (post comments and styling remain)
• I built most of the important components that make for a WordPress website (Menu areas, widget areas, enqueuing website assets etc…)
• I’ve finished writing the blog filtering system using the page.php template.  If no input checkboxes are selected, every blog entry is displayed. If one checkbox or more is selected, every entry is hidden except for those assigned to that input checkbox.

In this part, I’ll turn my attention now to developing search, archive, and category templates.

Implementing Search Functionality

One of the portions of the homepage is one called “Find More…” which is a centralised search input field with a button. The search input has a transition effect applied to it that increases in size when the mouse cursor or touch input is triggered. If I type in some text in the search bar and click go, all I get is the 404.php template, even though the search.php template exists.

Obviously, we still need to work on the form to perform searches using WordPress’ server-side capabilities. And there are at least a couple of ways to do this.

<!-- 1.  HMTL Form -->
<input type="text" id="search_input" placeholder="Search goes here..."/>

<br /><br />
<input type="submit" id="search_btn" value="GO" />

<!-- 2. Search via a widget with Dynamic Sidebar -->
<?php dynamic_sidebar( "jgdm_search_widget" ); ?>

<!---3. Using a WordPress Function -->
<?php get_search_form(); ?>

The first method we’ll look at is to Search Widget using dynamic_sidebar(). WordPress performs searches using something called a Query String. And this is what the Widget does. It provides an input field and a button, like the one I set up already in the HTML Form, and saves a query string, adding it to the browser URL. Like this…

http://url.com/?s=blog

When we see something like this attached to the end of the URL, in the browser, we know the search has successfully been performed in WordPress. The search.php template, if it’s part of your theme directory will come into play.

One thing I did notice when I was developing the Search template was that if I test the dynamic sidebar method from the string “search.php” seems to be attached at the front of the query string with of course causes WordPress to return the 404 Template. A very simple fix for this.

If I test the new get_search_form(); method on its own, it returns the query string correctly – straight onto the search.php template.

I removed the string from the form action attribute and it worked perfectly.

<form role "search" action="">

</form>

Just touching on the other search technique, get_search_form(); – this will wrap the form elements in a form container with both an id and a class of “searchform”.

<form role "search" action="" id="searchform" class="searchform">

</form>

I’ll be using the widget area solution going forward.

Search results with search.php

To see any search data at all, we need to grab post and page data from the database in the usual way with WP Query.

Because we’re using custom posts, and for the purposes of brevity in returned results, we should use a custom field.

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

rather than  the_field() for the WordPress core.

Next, WordPress provides a way to display the string that was searched for on the results page

<h2>Search Term: "<?php echo get_search_query(); ?>"</h2>

taking care of the styling with the classes provided by WordPress Search widgets.

// Search Form - (Via Widget Area )
.wp-block-search__inside-wrapper {

    .wp-block-search__input {

    }

    wp-block-search__button {

    }
}

In order to retain the styling from the standard HTML form, copy the styling from the #find_more_form element that is the stack HTML form. In the container element is now the Search Wrapper Block.

.wp-block-search__inside-wrapper {
    margin-top: 5px;
    max-width: 150px;
    width: auto;
    /* max-width: 20%; */
    text-align: center;
    display: block;
    margin: 0 auto;
}

Doing more with search.php

To return a count of the number of posts returned we can use the global $wp_query variable which stores the value as an integer (a whole number).

<?php
    global $wp_query;
    $total_results = $wp_query->found_posts;

Return the results using The Loop.

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

    <div class="search_item">

    <h3>
         <a href="<?php the_permalink(); ?>">
             <?php the_title(); ?>
        </a>
    </h3>

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

</div>

With the loop established, we can start adding pagination links in the relevant places.

<!-- pagination method -->
<?php the_posts_pagination(); ?>

To test this, I used the query string “and“, which at the time of writing returned 12 results. This allowed for 2 pages of pagination, based on a setting of  7 blogs showing at once. When pagination is generated, it returns the following HTML (the container element class is .nav-links).

<div class="nav-links">

    <span>
    <a href=""></a>
    <a href=""></a>

</div>

In pagination, the current page number is surrounded by a span element. The other elements are hyperlinks with a class of .page-number.

<div class="nav-links">

<span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="/2021/04/page/2/?post_type=blog_posts">2</a>
<a class="next page-numbers" href="/2021/04/page/2/?post_type=blog_posts">Next</a>

</div>

Archive pages

Archive pages in a list organised by month and year

Change the title of the blog template; a level 2 heading.

<h2>Blog Archives</h2>

Add the usual WP Queries to the template.

<?php new WP_Query( $args );  ?>

The Loop is defined in the usual way.

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

When this is done you only have to provide the_permalink(); to link to a blog post.

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

Add the author metrics to each post listing in the same way as you would to the single post template.

<span class="post_data">

<div class="post-data-author">Author: <span><?php echo get_the_author(); ?> 
</span></div>
<div class="post-data-postedon">Posted On: <span><?php the_time( "Y m D" ); ?> 
</span></div>
<div class="post-data-comments">Comments: <span><?php echo get_comments_number() ?>
</span></div>

</span>

List Blog Post Archives

The best way to get the blog post archives for a custom post type is to use the wp_get_archives() method.  It takes an array of arguments just like it would if it were awp_query( In the example below I have told it to organise the archive itself into monthly links and the number of posts in that listing.

<ul class="blog_post_archive">

<li><?php

    echo wp_get_archives(

      array (

          'type' => 'monthly',
          'post_type'=>'blog_posts',
          'show_post_count' => -1 ) );

  ?></li>
</ul>

Category Templates

The Category Templates work in a similar way to archive templates.  You have a catch-all category.php template and one template file for each existing category.

For me, examples might include

• category-web_design
• category-news
• category-learning

You can create a new WP Query for each, making sure to specify the category name property. And return all the records it can find using.

$args = array(

    'post_type' => 'blog_posts',
    'category_name' => 'jgdm_features',
    'posts_per_page' => -1
);

// WP Query
$jgdm_feature = new WP_Query( $args );

Getting a list of assigned categories to a blog post. We can’t simply use the_category() because that is linked to standard categories. We have to do something slightly different. But it’ll list in a linear fashion in the same way, using a foreach loop. In this code, we check if any categories are available. If there are categories, we iterate through each one and display the category name and link using get_the_category();.

<!-- getting the assigned categories from blog posts type -->
<?php $categories = get_the_category();

if ($categories) {
    // Loop through each category
    foreach ($categories as $category) {
        // Display the category name and link
        echo '<a href="' . esc_url(get_category_link($category->term_id)) 
        . '">' . esc_html($category->name) . ' - ' . '</a>';
    }
} ?>

Technically even this method lists WordPress Post Core Categories but the listings they themselves link to are linked to the CPT.

Conclusion

The archive and the category pages are complete.  And we’ve completed similar pages for a search page too.

Comments list still to be done in terms of styling.  And the author pages.  Once this is done, really all that remains is fine-tuning stuff.  Making sure page variables, browser sharing, and Page times behind-the-scenes stuff is in order.  As of this date, I’m aiming to publish the website in its new form, next week.