Home / , / Understanding the Structure of single.php in WpResidence Theme

Understanding the Structure of single.php in WpResidence Theme

429 views

Understanding and Extending single.php in WpResidence Theme

The single.php file in WpResidence theme displays individual blog posts. Let’s break down its structure and see how you can extend its functionality.

1. Header and Content Wrapper

The file starts like this:


<?php
get_header();
$wpestate_options = wpestate_page_details($post->ID);
?>
<?php
$blog_unit_type = wpresidence_get_option('wp_estate_blog_unit_type', '');
$blog_unit = wpresidence_get_option('wp_estate_blog_unit', '');
?>
<div class="row">
<?php include(locate_template('templates/breadcrumbs.php')); ?>
<div class="<?php echo esc_attr($wpestate_options['content_class']);?>">

You can extend this section by:

  • Adding custom meta tags in the header for SEO purposes
  • Including additional options from the theme settings
  • Modifying the breadcrumbs template for custom navigation

The wpestate_page_details() and wpresidence_get_option() functions are located in the theme’s functions.php file.

2. Main Content Loop

The main content is displayed in a WordPress loop:


<?php while (have_posts()) : the_post(); ?>
<div class="single-content single-blog">
<h1 class="entry-title single-title" itemprop="headline"><?php the_title(); ?></h1>
<div class="meta-info">
<?php include(locate_template('templates/post_meta.php')); ?>
</div>
<?php
include(locate_template('templates/postslider.php'));
the_content();
?>
<?php include(locate_template('templates/blog_post_social_share.php')); ?>
</div>
<?php endwhile; ?>

To extend this section:

  • Modify post_meta.php to add or remove meta information
  • Customize postslider.php for different image display options
  • Add custom fields to display additional post information
  • Modify blog_post_social_share.php to add more sharing options

The CSS classes like “single-content”, “entry-title”, and “meta-info” are defined in the _single_page.scss file in the theme’s css folder.

3. Post Navigation and Tags

This section includes navigation links and tags:


<div class="wpestate_after_content">
<?php wp_link_pages(); ?>
<div class="navigation-single">
<?php previous_post_link(); ?>
<?php next_post_link(); ?>
</div>
<div class="single-post-tag-list">
<?php the_tags('', ',', ''); ?>
</div>
</div>

You can extend this by:

  • Customizing the navigation links with thumbnails or excerpts
  • Adding a custom taxonomy display alongside tags
  • Including a “related posts” section based on tags or categories

The “navigation-single” and “single-post-tag-list” classes are styled in the _single_page.scss file.

4. Related Posts and Comments

The file ends with related posts and comments:


<?php include(locate_template('templates/related_posts.php')); ?>
<?php comments_template('', true); ?>

To extend this section:

  • Modify related_posts.php to change how related posts are selected and displayed
  • Customize the comments template for a unique design
  • Add a custom form for user feedback or newsletter signup

The related posts styling is found in the _blog_card_related.scss file.

5. Sidebar and Footer

The file closes by including the sidebar and footer:


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

You can extend this by:

  • Creating a custom sidebar for single posts
  • Adding widgets specific to the current post category
  • Including author information or a bio section before the footer

Extending Functionality

To add new features to single.php:

  1. Use WordPress hooks:

    add_action('wpestate_before_post_content', 'my_custom_function');
    function my_custom_function() {
    // Your custom code here
    }
  2. Create a child theme and override single.php:

    // In your child theme's single.php
    get_header();
    // Your custom code
    get_template_part('templates/single-content');
    // More custom code
    get_footer();
  3. Use template parts for modularity:

    <?php get_template_part('templates/single', 'author-bio'); ?>

    Create a file named single-author-bio.php in the templates folder of your child theme.

Remember, when adding new functions, place them in your child theme’s functions.php file. For styling changes, add your custom CSS to the child theme’s style.css file.

CSS Class Locations

The CSS classes used in single.php and its related templates can be found in several SCSS files within the WpResidence theme. Here’s a breakdown of where to find the main classes:

  1. _single_page.scss: Located in the theme’s css folder (usually wp-content/themes/wpresidence/css/). This file contains styles for:
    • .single-content
    • .single-blog
    • .entry-title
    • .meta-info
    • .prop_social_single
    • .wpestate_after_content
    • .navigation-single
    • .single-post-tag-list
  2. _blog_card_related.scss: Also in the css folder. This file includes styles for:
    • .related_posts
    • .related-unit
    • .related_blog_unit_image
  3. _comments.scss: In the same css folder. This file contains styles for the comments section:
    • #comments
    • .commentlist
    • .comment
  4. _wpresidence_carousels.scss: Also in the css folder. This file includes styles for:
    • .post-carusel
    • .wpresidence-carousel-control

To modify these styles, it’s recommended to create a child theme and add your custom CSS to the child theme’s style.css file. This way, your changes won’t be overwritten when the theme is updated. For example:


/* In your child theme's style.css */
.single-content {
padding: 20px;
background-color: #f9f9f9;
}
.entry-title {
font-size: 28px;
color: #333;
}

Remember to inspect the elements using your browser’s developer tools to find the exact class names and their current styles. This will help you target your CSS modifications more effectively.

Included Template Files

The single.php file in WpResidence theme includes several important template files that handle specific functionality. Let’s examine each of these in more detail:

1. post_meta.php

Location: wp-content/themes/wpresidence/templates/blog_post/post_meta.php

This file is responsible for displaying the meta information of the post, including:

  • Author name
  • Publication date
  • Post categories
  • Comment count

You can customize this file to add or remove meta information. For example, to add the post’s view count:


<div class="meta-element">
<i class="far fa-eye meta_icon"></i>
<?php echo get_post_view_count($post->ID); ?> views
</div>

2. postslider.php

Location: wp-content/themes/wpresidence/templates/blog_post/postslider.php

This file handles the display of post images in a slider format. It includes:

  • Image carousel functionality
  • Video embed support
  • Responsive image display

To modify the slider behavior, you can adjust the carousel settings. For instance, to change the number of slides shown:


<div id="wpresidence-blog-post-carousel-bootstrap" class="carousel slide post-carusel" data-bs-ride="carousel" data-bs-interval="3000">
...
</div>

3. blog_post_social_share.php

Location: wp-content/themes/wpresidence/templates/blog_post/blog_post_social_share.php

This file generates the social sharing buttons for the blog post. It typically includes:

  • Facebook share button
  • Twitter share button
  • Pinterest share button (if a featured image exists)
  • WhatsApp share button
  • Email sharing option

You can extend this file to add more social sharing options. For example, to add a LinkedIn share button:


<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode(get_permalink()); ?>"
target="_blank"
class="share_linkedin"
title="<?php esc_attr_e('Share on LinkedIn', 'wpresidence'); ?>">
<i class="fab fa-linkedin"></i>
</a>

4. related_posts.php

Location: wp-content/themes/wpresidence/templates/blog_post/related_posts.php

This file is responsible for displaying related posts. It typically:

  • Queries posts with similar tags
  • Displays a grid of related post thumbnails and titles
  • Limits the number of related posts shown

To modify how related posts are selected, you can adjust the query arguments. For example, to select related posts by category instead of tags:


$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args = array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 3
);
$related_query = new WP_Query($args);
// Rest of the code remains the same
}

By understanding and customizing these included files, you can significantly alter the appearance and functionality of single blog posts in the WpResidence theme.

[Rest of the content remains the same]