Home / , / WPResidence Blog Unit Templates

WPResidence Blog Unit Templates

67 views

In the WPResidence theme, blog posts are displayed using various “blog unit” templates. These templates control the appearance and structure of individual blog post entries in different contexts, such as archive pages, search results, and custom blog list pages. This guide will explore four main blog unit templates:

  • blog_unit.php
  • blog_unit2.php
  • blog_unit3.php
  • blog_unit4.php

Each of these templates is located in the templates/blog_card_templates/ directory of the WPResidence theme.

1. blog_unit.php

This is the default blog unit template. It displays blog posts in a standard card format.

File Structure and Functionality


<?php
$postID = get_the_ID();
$thumb_id = get_post_thumbnail_id($postID);
$preview = wp_get_attachment_image_src(get_post_thumbnail_id(), 'agent_picture_thumb');
$link = esc_url( get_permalink() );
?>
<div class="listing_wrapper">
<div class="blog_unit property_listing_blog col-md-12" data-link="<?php echo esc_attr($link);?>">
<!-- Thumbnail -->
<!-- Title -->
<!-- Excerpt -->
<!-- Meta Information -->
</div>
</div>

Key Components

  1. Thumbnail: The featured image of the post.
  2. Title: The post title, truncated if necessary.
  3. Excerpt: A short summary of the post content.
  4. Meta Information: Includes categories, date, and comment count.

CSS Classes and Locations

The main CSS classes used in this template are defined in the following SCSS files:

  • scss\blog_card/_blog_card.scss: Contains styles for .blog_unit, .blog_unit_image, and .blog_unit_content.
  • scss\blog_card\_blog_card_v1.scss: Additional styles specific to the first version of blog cards.

Customization Example

To modify the blog unit layout or content, you can create a child theme and override the template file. Here’s an example of how to add a custom field to the meta information:

  1. Create a ‘templates’ folder in your child theme.
  2. Copy ‘blog_unit.php’ from the parent theme’s ‘templates/blog_card_templates/’ to your child theme’s ‘templates/’ folder.
  3. Edit the copied file. Add your custom field in the meta information section:


<div class="blog_unit_meta widemeta">
<!-- Existing meta information -->
<?php
$custom_field = get_post_meta(get_the_ID(), 'custom_field_name', true);
if ($custom_field) {
echo '<span class="custom-meta">' . esc_html($custom_field) . '</span>';
}
?>
</div>

2. blog_unit2.php

This template provides an alternative layout for blog posts, often used in grid-style layouts.

File Structure and Functionality


<?php
$preview = array();
$preview[0] = '';
$words = 55;
$link = esc_url(get_permalink());
$title = get_the_title();
$postID = get_the_ID();
?>
<div class="<?php echo esc_attr($blog_unit_class); ?> listing_wrapper blog2v">
<div class="blog_unit property_listing_blog" data-link="<?php echo esc_attr($link); ?>">
<!-- Thumbnail -->
<!-- Title -->
<!-- Date -->
<!-- Excerpt -->
<!-- Read More Link -->
</div>
</div>

Key Components

  1. Thumbnail: Uses lazy loading for better performance.
  2. Title: Limited to 44 characters with ellipsis if longer.
  3. Date: Publication date of the post.
  4. Excerpt: Varies in length based on the presence of a thumbnail.
  5. Read More Link: Encourages users to view the full post.

CSS Classes and Locations

The main CSS classes for this template are defined in:

  • scss/blog_card/_blog_card_v2.scss: Contains styles for .blog2v, .property_listing_blog, and related elements.

Customization Example

To modify the title length, you can edit the template file in your child theme:


<h4>
<a href="<?php the_permalink(); ?>" class="blog_unit_title"><?php
$title = get_the_title();
echo esc_html(mb_substr($title, 0, 60)); // Changed from 44 to 60 characters
if (mb_strlen($title) > 60) {
echo '...';
}
?></a>
</h4>

3. blog_unit3.php

This template creates a full-width image background with text overlay, offering a more visually striking design.

File Structure and Functionality


<?php
$preview = array();
$preview[0] = '';
$words = 55;
$link = esc_url(get_permalink());
$title = get_the_title();
$postID = get_the_ID();
$thumb_prop = get_the_post_thumbnail_url($postID, 'property_listings');
?>
<div class="<?php echo esc_attr($blog_unit_class); ?> listing_wrapper blog3v">
<div class="property_listing_blog" data-link="<?php echo esc_attr($link); ?>">
<!-- Background Image -->
<div class="blog_unit_content_v3">
<!-- Date -->
<!-- Title -->
<!-- Read More Link -->
</div>
</div>
</div>

Key Components

  1. Background Image: Full-width featured image with gradient overlay.
  2. Date: Publication date of the post.
  3. Title: Limited to 44 characters with ellipsis if longer.
  4. Read More Link: Styled to stand out against the background image.

CSS Classes and Locations

The main CSS classes for this template are defined in:

  • scss/blog_card/_blog_card_v3.scss: Contains styles for .blog3v, .property_listing_blog, and related elements.

Customization Example

To add a custom overlay color, you can add this to your child theme’s style.css:


.blog3v .property_listing_blog::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5); /* Adjust color and opacity as needed */
z-index: 1;
}
.blog3v .blog_unit_content_v3 {
z-index: 2;
position: relative;
}

4. blog_unit4.php

This template provides a clean, minimalist design focusing on the content.

File Structure and Functionality


<?php
$preview = array();
$preview[0] = '';
$words = 55;
$link = esc_url(get_permalink());
$title = get_the_title();
$postID = get_the_ID();
?>
<div class="<?php echo esc_attr($blog_unit_class); ?> listing_wrapper blog4v">
<div class="property_listing_blog" data-link="<?php echo esc_attr($link); ?>">
<!-- Thumbnail -->
<!-- Title -->
<!-- Excerpt -->
<!-- Publication Date -->
</div>
</div>

Key Components

  1. Thumbnail: Featured image with lazy loading.
  2. Title: Limited to 44 characters with ellipsis if longer.
  3. Excerpt: Short summary of the post content.
  4. Publication Date: Date when the post was published.

CSS Classes and Locations

The main CSS classes for this template are defined in:

  • scss/blog_card/_blog_card_v4.scss: Contains styles for .blog4v, .property_listing_blog, and related elements.

Customization Example

To modify the excerpt display, you can edit the template file in your child theme:


<div class="listing_details the_grid_view">
<?php
// Display a custom excerpt length
echo wp_trim_words(get_the_excerpt(), 20, '...'); // Change 20 to your desired word count
?>
</div>

Extending Functionality Across All Blog Units

To add new features or modify existing ones across all blog unit templates, you’ll need to edit each template file individually in your child theme. Here’s an example of how you might add a custom field to all blog units:

  1. Copy all four blog unit templates to your child theme’s ‘templates/’ folder.
  2. Edit each file and add your custom field where appropriate. For example:


<?php
$custom_field = get_post_meta(get_the_ID(), 'custom_field_name', true);
if ($custom_field) {
echo '<div class="custom-field">' . esc_html($custom_field) . '</div>';
}
?>

Add this code snippet to each blog unit template where you want the custom field to appear.

Conclusion

The blog unit templates in WPResidence provide flexible ways to display blog posts across your website. By understanding the structure and functionality of each template, you can effectively customize the appearance and behavior of your blog listings to suit your specific needs.

Remember to always use a child theme when making customizations to ensure your changes are not lost during theme updates. For more advanced customizations, consider creating your own custom blog unit template and integrating it into the theme by modifying the appropriate template files.