Home / , / WPResidence Blog List Template Guide

WPResidence Blog List Template Guide

54 views

Comprehensive Guide to WPResidence Blog List Template

Introduction

This guide provides an in-depth explanation of the blog_list.php template file in the WPResidence theme. We’ll explore its structure, functionality, and how to extend or customize various components.

Template Location and Purpose

The blog_list.php file is located in the page-templates\blog_list.php Its primary purpose is to display a list of blog posts in a customizable layout. This template is used when a page is assigned the “Blog list page” template in the WordPress admin.

Template Structure and Functionality

1. Header and Initial Setup

The template starts by including the header and setting up necessary variables:


<?php
get_header();
$wpestate_options = get_query_var('wpestate_options', array());
$blog_unit = wpestate_blog_unit_selector();
$blog_unit_class_request = wpestate_blog_unit_column_selector($wpestate_options);
$blog_unit_class = $blog_unit_class_request['col_class'];
?>

The wpestate_blog_unit_selector() function, found in libs/blog_post/blog_post_functions.php, determines which blog unit template to use. You can customize this selection by using the wpestate_blog_unit_type filter in your child theme’s functions.php:


add_filter('wpestate_blog_unit_type', 'custom_blog_unit_type');
function custom_blog_unit_type($type) {
return 'blog_unit2.php'; // Change to your desired blog unit template
}

The wpestate_blog_unit_column_selector() function, also in libs/blog_post/blog_post_functions.php, determines the column class for blog units. To modify this, you’d need to override the function in your child theme.

2. Main Content Structure

The template creates a container for the blog list and includes breadcrumbs:


<div class="row wpresidence_page_content_wrapper">
<?php get_template_part('templates/breadcrumbs'); ?>
<div class="<?php echo esc_attr(isset($wpestate_options['content_class']) ? $wpestate_options['content_class'] : ''); ?>">
<?php get_template_part('templates/ajax_container'); ?>

The breadcrumbs.php file (in the templates folder) generates the breadcrumb navigation, while ajax_container.php sets up a container for potential AJAX-loaded content.

3. Page Content

If the page has content, it’s displayed before the blog list:


<?php while (have_posts()) : the_post(); ?>
<?php if (esc_html(get_post_meta($post->ID, 'page_show_title', true)) == 'yes') { ?>
<h1 class="entry-title title_prop"><?php the_title(); ?></h1>
<?php } ?>
<div class="single-content"><?php the_content(); ?></div>
<?php endwhile; ?>

To add custom content before the blog list, you can use the wpestate_before_blog_list action hook:


add_action('wpestate_before_blog_list', 'custom_before_blog_list');
function custom_before_blog_list() {
echo '<div class="custom-blog-intro">Welcome to our blog!</div>';
}

4. Blog Posts Query and Display

The template queries and displays blog posts:


<div class="blog_list_wrapper container">
<div class="row">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 0;
$args = array(
'post_type' => 'post',
'paged' => $paged,
'status' => 'published'
);
$blog_selection = new WP_Query($args);
while ($blog_selection->have_posts()): $blog_selection->the_post();
include(locate_template($blog_unit));
endwhile;
wp_reset_query();
?>
</div>
</div>

To modify the query, use the pre_get_posts action in your child theme’s functions.php:


add_action('pre_get_posts', 'custom_blog_query');
function custom_blog_query($query) {
if (!is_admin() && $query->is_main_query() && is_page_template('blog_list.php')) {
$query->set('posts_per_page', 5);
$query->set('orderby', 'title');
$query->set('order', 'ASC');
}
}

5. Pagination

Pagination is handled by the wpestate_pagination() function, found in libs/pagination.php:


<?php wpestate_pagination($blog_selection->max_num_pages, 2); ?>

6. Sidebar and Footer

The template includes a sidebar and the footer:


<?php include get_theme_file_path('sidebar.php'); ?>
</div>
<?php get_footer(); ?>

CSS Customization

The main CSS classes for the blog list template can be found in these SCSS files within the scss\pages\_blog.scss or scss\blog_card\_blog_card_v1.scss folders of the WPResidence theme:

  • _blog_card.scss: Styles for the basic blog card layout
  • _blog_card_v2.scss: Styles for version 2 of the blog card
  • _blog_card_v3.scss: Styles for version 3 of the blog card
  • _blog_card_v4.scss: Styles for version 4 of the blog card
  • _blog_card_related.scss: Styles for related blog posts

To customize these styles, add your CSS to your child theme’s style.css file. For example:


.blog_list_wrapper {
margin-top: 30px;
}
.blog_unit {
border: 1px solid #eee;
padding: 15px;
}
.pagination {
margin-top: 20px;
}