Custom Post Layout 3

Supporting Lorem ipsome

Access Your Laravel + Vue.js (Vite) App from Mobile on Local Network

Sub Title Lorem ipsum dorem

Introduction During web development, we often run Laravel and Vue.js locally at http://127.0.0.1:8000 or...

কর্পোরেট হাইপোক্রিসি: নৈতিকতার নাটক বনাম অপমানের রাজনীতি

Sub Title Lorem ipsum dorem

ভূমিকা: দুই মুখী কর্পোরেট সংস্কৃতি আজকের...

বিশ্বের সেরা CSS ফ্রেমওয়ার্ক এবং UI লাইব্রেরি

Sub Title Lorem ipsum dorem

ওয়েব ডেভেলপমেন্টে CSS ফ্রেমওয়ার্ক এবং UI...

PHP

<?php
// Arguments for WP_Query to fetch the latest 3 posts
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 3
);
$query = new WP_Query($args);

echo '<div class="inspWrapper">
        <div class="containerx">
          <div class="inspList main">';

// Check if there are posts
if ($query->have_posts()) {
    // Loop through the posts
    while ($query->have_posts()) {
        $query->the_post();

        // Get the necessary post data
        $title = get_the_title();
        $subtitle = get_field('sub_title');
        $excerpt = get_the_excerpt();
        $permalink = get_permalink();
        $thumbnail = get_the_post_thumbnail_url(null, 'full');

        // Use a placeholder image if no thumbnail is available
        if ($thumbnail) {
            $bg_img = $thumbnail;
        } else {
            $bg_img = 'https://linuxbangla.com/wp-content/uploads/2024/06/img-placeholder-illustration-1.svg';
        }
        ?>
        <div class="inspHolder">
            <div class="inspBanner" style="background-image: url(<?php echo esc_url($bg_img); ?>)">
                <a href="<?php echo esc_url($permalink); ?>">
                    <?php if ($title): ?>
                        <h3 class="h3"><?php echo esc_html($title); ?></h3>
                    <?php endif; ?>
                </a>
            </div>
            <div class="inspText">
                <?php if ($subtitle): ?>
                    <h2 class="h2"><a href="<?php echo esc_url($permalink); ?>"><?php echo esc_html($subtitle); ?></a></h2>
                <?php endif; ?>
                <?php 
                // Clean and truncate the excerpt or content
                $string = wp_strip_all_tags(get_the_excerpt(), false);
                if (!$string) {
                    $string = wp_strip_all_tags(get_the_content(), false);
                }
                $your_desired_width = 120;
                if (strlen($string) > $your_desired_width) {
                    $string = wordwrap($string, $your_desired_width);
                    $string = substr($string, 0, strpos($string, "\n"));
                    $string .= '...';
                }
                echo wpautop(esc_html($string));
                ?>
            </div>
        </div>
        <?php
    }
    wp_reset_postdata();
} else {
    // Message when no posts are found
    echo '<p style="padding:7px 10px; border-radius:5px; width:100%; text-align:center; background-color:#e7e7e7;">No posts found.</p>';
}

echo '</div>
    </div>
</div>';
?>

Step-by-Step Explanation

1. Setting Up WP_Query:

PHP

phpCopy code// Arguments for WP_Query to fetch the latest 3 posts
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 3
);
$query = new WP_Query($args);

This part sets up the arguments for WP_Query to fetch the latest 3 posts of the post type post.
$args is an array that contains the query parameters.
WP_Query is instantiated with these arguments, creating a new query object.

2. Opening HTML Structure:

PHP

echo '<div class="inspWrapper">
        <div class="containerx">
          <div class="inspList main">';

This block starts outputting the HTML structure for the posts.
It includes wrapper divs with classes for styling purposes.

3. Checking for Posts:

PHP

// Check if there are posts
if ($query->have_posts()) {

This conditional checks if there are posts available in the query.
have_posts() returns true if there are posts.

4. Loop Through Posts:

PHP

    // Loop through the posts
    while ($query->have_posts()) {
        $query->the_post();

This while loop iterates through the posts.
the_post() sets up the post data for each post.

5. Fetching Post Data:

PHP

    // Get the necessary post data
    $title = get_the_title();
    $subtitle = get_field('sub_title');
    $excerpt = get_the_excerpt();
    $permalink = get_permalink();
    $thumbnail = get_the_post_thumbnail_url(null, 'full');

This section fetches various pieces of data for each post:

get_the_title() retrieves the post title.
get_field('sub_title') retrieves a custom field named sub_title (requires Advanced Custom Fields plugin).
get_the_excerpt() retrieves the post excerpt.
get_permalink() gets the URL of the post.
get_the_post_thumbnail_url() gets the URL of the post's featured image.

6. Placeholder Image:

PHP

    // Use a placeholder image if no thumbnail is available
    if ($thumbnail) {
        $bg_img = $thumbnail;
    } else {
        $bg_img = 'https://linuxbangla.com/wp-content/uploads/2024/06/img-placeholder-illustration-1.svg';
    }

This block checks if the post has a featured image.
If not, it uses a placeholder image URL.

7. Outputting Post HTML:

PHP

    ?>
    <div class="inspHolder">
        <div class="inspBanner" style="background-image: url(<?php echo esc_url($bg_img); ?>)">
            <a href="<?php echo esc_url($permalink); ?>">
                <?php if ($title): ?>
                    <h3 class="h3"><?php echo esc_html($title); ?></h3>
                <?php endif; ?>
            </a>
        </div>
        <div class="inspText">
            <?php if ($subtitle): ?>
                <h2 class="h2"><a href="<?php echo esc_url($permalink); ?>"><?php echo esc_html($subtitle); ?></a></h2>
            <?php endif; ?>
            <?php 
            // Clean and truncate the excerpt or content
            $string = wp_strip_all_tags(get_the_excerpt(), false);
            if (!$string) {
                $string = wp_strip_all_tags(get_the_content(), false);
            }
            $your_desired_width = 120;
            if (strlen($string) > $your_desired_width) {
                $string = wordwrap($string, $your_desired_width);
                $string = substr($string, 0, strpos($string, "\n"));
                $string .= '...';
            }
            echo wpautop(esc_html($string));
            ?>
        </div>
    </div>
    <?php

This part outputs the HTML for each post.
Post Banner:
- Contains the featured image as a background.
- Links to the post permalink.
- Displays the post title inside an h3 element if it exists.
Post Text:
- Displays the subtitle inside an h2 element if it exists.
- Cleans and truncates the post excerpt or content to a specified width.
- Outputs the cleaned and truncated string as a paragraph.

8. Reset Post Data:

PHP

    wp_reset_postdata();
}

9. No Posts Found:

PHP

} else {
    // Message when no posts are found
    echo '<p style="padding:7px 10px; border-radius:5px; width:100%; text-align:center; background-color:#e7e7e7;">No posts found.</p>';
}

If no posts are found, this block outputs a message indicating that.

9. Closing HTML Structure:

PHP

echo '</div>
    </div>
</div>';
?>

Closes the HTML tags that were opened at the beginning.

CSS

/* Media query for screens with a max-width of 991px */
@media only screen and (max-width: 991px) {
  .inspWrapper {
    overflow-x: auto;
  }
  .inspList.main {
    display: flex;
    gap: 12px;
  }
  .inspList.main .inspHolder {
    min-width: 285px;
  }
  /* Media query for screens with a min-width of 576px */
  @media only screen and (min-width: 576px) {
    .inspList.main .inspHolder {
      min-width: 320px;
    }
  }
}

/* Style for inspHolder elements */
.inspHolder {
  background-color: #fff;
  overflow: hidden;
  border-radius: 10px; /* Shorthand for setting all border radius properties */
}

/* Style for inspBanner elements */
.inspBanner {
  width: 100%;
  aspect-ratio: 10/6;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Style for links inside inspBanner */
.inspBanner a {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: 20px;
  padding-right: 50px;
  text-decoration: none;
  background-color: #0b136a69;
}

/* Hover effect for links inside inspBanner */
.inspBanner a:hover {
  color: #0b93e1;
  transition: 0.3s ease;
}

/* Style for h3 elements inside links in inspBanner */
.inspBanner a h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

/* Style for inspText elements */
.inspText {
  min-height: 240px;
  padding: 20px 12px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Style for h2 elements inside inspText */
.inspText h2 {
  font-size: 16px;
  color: #323236;
  font-weight: 400;
}

/* Style for links inside h2 in inspText */
.inspText h2 a {
  color: inherit;
  transition: 0.3s;
  text-decoration: none;
}

/* Hover effect for links inside h2 in inspText */
.inspText h2 a:hover {
  color: #0b93e1;
}

/* Style for p elements inside inspText */
.inspText p {
  color: #031941;
  font-size: 15px;
  font-weight: 300;
}

/* Media query for screens with a min-width of 576px */
@media only screen and (min-width: 576px) {
  .inspBanner a h3 {
    font-size: 18px;
  }