WordPress Comments Template and Media Queries CSS

Summary: Learning about the Comments template in WordPress and CSS Media Queries for responsive web design.

`comments.php`

The comments.php file in WordPress is responsible for displaying and managing the comments section on posts or pages. This template handles the presentation of comments, pingbacks/trackbacks, the comment form, and potentially other related comment features. Here’s a detailed breakdown of how the comments.php file works and its components.

The comments.php file is part of the WordPress template hierarchy and is typically included in themes to display the comments area beneath posts or pages. It interacts with WordPress core functions to load and display the comment list, form, and controls for posting new comments.

<?php
if ( post_password_required() ) {
    return; // Don't display comments if the post is password protected.
}
?>

<div id="comments" class="comments-area">

    <?php if ( have_comments() ) : ?>
        <h2 class="comments-title">
            <?php
            $comments_number = get_comments_number();
            if ( '1' === $comments_number ) {
                _e( 'One thought on &ldquo;%2$s&rdquo;', 'textdomain' );
            } else {
                printf(
                    _n( '%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comments_number, 'textdomain' ),
                    number_format_i18n( $comments_number ),
                    get_the_title()
                );
            }
            ?>
        </h2>

        <ol class="comment-list">
            <?php
                wp_list_comments( array(
                    'style'      => 'ol',
                    'short_ping' => true,
                ) );
            ?>
        </ol>

        <?php the_comments_navigation(); ?>

        <?php if ( ! comments_open() && get_comments_number() ) : ?>
            <p class="no-comments"><?php _e( 'Comments are closed.', 'textdomain' ); ?></p>
        <?php endif; ?>
    <?php endif; ?>

    <?php comment_form(); ?>

</div>

Checking Post Password Protection

The first line of the comments.php template often checks if the post is password-protected using post_password_required(). If the post is protected, comments are hidden, as users need to enter the password to view the content.
Example:
php if ( post_password_required() ) { return; }

Checking for Comments with have_comments()

The have_comments() function checks if there are any comments for the current post. If there are, the subsequent block of code will be responsible for displaying the comments list, the title, and navigation controls.

Displaying the Comment Title

The title of the comment section is generated dynamically using get_comments_number() and get_the_title() to reflect how many comments there are for the post.

Listing Comments with wp_list_comments()

The wp_list_comments() function is used to output the list of comments. We can pass arguments to customize how the comments are displayed, including setting the style unordered list, ordered list, controlling avatar sizes, and defining custom callback functions to output comments in a specific format.

Navigation Between Comment Pages

If there are multiple pages of comments, the_comments_navigation() or the_comments_pagination() functions are used to provide pagination or navigation links.

Displaying the Comment Form

The comment_form() function outputs the comment form that allows users to submit new comments. It can be customized with various arguments to control the appearance and behavior of the form.

Media Queries CSS

Media queries are a feature of CSS that allow content to adapt to different screen sizes, resolutions, and other characteristics. They are commonly used in responsive web design to ensure that websites function well across a variety of devices such as phones, tablets, and desktop monitors.

@media (media-type) and (media-feature: value) {
  /* CSS rules go here */
}

@media: This keyword initiates a media query.
(media-type): Optional. It specifies the type of device we are targeting (e.g., screen, print, all). If omitted, it applies to all devices.
(media-feature: value): The conditions that need to be met for the styles within the media query to be applied. Common media features include width, height, resolution, orientation, etc.

Width and Height

min-width: Applied when the viewport width is greater than or equal to the specified value.
max-width: Applied when the viewport width is less than or equal to the specified value.
min-height and max-height: Work similarly for the height of the viewport.

   @media (min-width: 768px) {
     body {
       background-color: lightblue;
     }
   }

Orientation

orientation: portrait: When the height of the viewport is greater than the width.
orientation: landscape: When the width of the viewport is greater than the height.

   @media (orientation: landscape) {
     body {
       background-color: lightgreen;
     }
   }

Resolution

min-resolution and max-resolution: Target devices based on screen resolution. Resolution can be expressed in DPI (dots per inch) or DPCM (dots per centimeter).

   @media (min-resolution: 300dpi) {
     img {
       max-width: 100%;
     }
   }

Aspect-Ratio

min-aspect-ratio and max-aspect-ratio: Targets devices based on their width-to-height ratio.

   @media (min-aspect-ratio: 16/9) {
     video {
       width: 100%;
     }
   }

Pixel Density

min-device-pixel-ratio: Often used to target retina displays or high-DPI screens. A pixel ratio of 2 would mean that a device has twice as many pixels per inch as a standard display.

 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     img {
       border: 2px solid blue;
     }
   }

Media Query Breakpoints

Breakpoints are specific viewport widths at which a website’s layout will change based on the media queries. Common breakpoints for responsive design are:

Small devices (phones, 0px – 600px): Typically used for mobile design.
Medium devices (tablets, 600px – 1024px): Adapt for larger touch screens.
Large devices (desktops, 1024px – 1440px): General design for laptops and smaller desktops.
Extra large devices (large desktops, 1440px and up): For high-resolution, wide-screen displays.

/* Mobile devices */
@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
  .container {
    width: 80%;
  }
}

/* Desktops */
@media (min-width: 1025px) {
  .container {
    width: 60%;
  }
}

Combining Multiple Conditions

We can combine multiple conditions using logical operators:

and: Both conditions must be true.
not: The query applies only if the condition is false.
, (comma): Acts like an “or”. If either condition is true, the styles will apply.

@media screen and (min-width: 600px) and (orientation: landscape) {
  body {
    background-color: yellow;
  }
}

@media screen and (min-width: 1024px), print {
  body {
    font-size: 18px;
  }
}

Mobile-First Approach

A popular technique in modern responsive design is the mobile-first approach, where we write styles for smaller screens first and then use media queries to adjust the design for larger screens. This approach uses min-width media queries to progressively enhance the design as the viewport gets larger.

/* Mobile-first default styles */
body {
  font-size: 14px;
}

/* Larger screens */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}