Custom Post Layout 2

Recent  Post Layout One

WordPress theme/template file that displays a news post with a thumbnail, title, date, and excerpt.

PHP:

<div class="insightsHolder">
    <div class="insightsTopImg">
        <div class="lnThumb">
            <a class='oxy-aht-post-image' href='<?php the_permalink(); ?>'>
                <?php if (get_the_post_thumbnail_url()): ?>
                    <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="photo">
                <?php else: ?>
                    <img src="https://linuxbangla.com/wp-content/uploads/2024/06/img-placeholder-illustration-1.svg" alt="photo">
                <?php endif; ?>
            </a>
        </div>
    </div>
    <div class="insightsBtmText">
        <div class="insightsTittle">
            <h4 class="h4">
                <a href='<?php the_permalink(); ?>'>
                    <?php the_title(); ?>
                </a>
            </h4>
            <div class="post_excrapt">
                <?php
                    // Strip tags and get the excerpt or content
                    $string = wp_strip_all_tags(get_the_excerpt(), false);
                    if (!$string) {
                        $string = wp_strip_all_tags(get_the_content(), false);
                    }

                    // Define the desired width for the excerpt
                    $your_desired_width = 120;

                    // Truncate the string to the desired width
                    if (strlen($string) > $your_desired_width) {
                        $string = wordwrap($string, $your_desired_width);
                        $string = substr($string, 0, strpos($string, "\n"));
                        $string .= '...';
                    }

                    // Output the processed string with paragraphs
                    echo wpautop($string);
                ?>
            </div>
        </div>
    </div>
</div>

Comments on the Code:

  1. Thumbnail Image:
    • Checks if the post has a thumbnail. If yes, it displays the thumbnail; otherwise, it displays a placeholder image.
    • The thumbnail is wrapped in a link pointing to the post permalink.
  2. Post Title:
    • Displays the post title wrapped in an anchor tag linking to the post permalink.
  3. Post Excerpt:
    • Retrieves the post excerpt. If the excerpt is not available, it falls back to the post content.
    • Strips any tags from the content.
    • Truncates the string to the desired width (120 characters).
    • Ensures the string does not break in the middle of a word by using wordwrap and substr.
    • Adds an ellipsis at the end of the truncated string to indicate continuation.
    • Outputs the processed string as paragraphs.

HTML Structure:

  • .insightsHolder: Main container for the post.
  • .insightsTopImg: Container for the post thumbnail.
  • .lnThumb: Container for the image link.
  • .insightsBtmText: Container for the post title and excerpt.
  • .insightsTittle: Container for the title.
  • .post_excrapt: Container for the excerpt.

CSS:

/* Container for the insights section */
.insider_insights .oxy-posts {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    row-gap: 15px;
    overflow-x: scroll;
    height: 100%;
}

/* Increase row-gap for screens 568px and up */
@media only screen and (min-width: 568px) {
    .insider_insights .oxy-posts {
        row-gap: 30px;
    }
}

/* Remove horizontal scroll for screens 992px and up */
@media only screen and (min-width: 992px) {
    .insider_insights .oxy-posts {
        overflow-x: unset;
    }
}

/* Container for individual insights */
.riInsights {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow-x: auto;
    column-gap: 5px;
    font-family: 'Poppins';
    font-weight: 300;
}

/* Increase column-gap for screens 568px and up */
@media only screen and (min-width: 568px) {
    .riInsights {
        column-gap: 10px;
    }
}

/* Insights holder styling */
.insightsHolder {
    background-color: #f1f6fc;
    border-radius: 5px;
    padding: 9px 13px 13px;
    width: 250px;
    max-width: 100%;
    margin-right: 10px;
    transition: 0.3s ease;
}

/* Add shadow on hover */
.insightsHolder:hover {
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

/* Remove margin-right for larger screens */
@media only screen and (min-width: 992px) {
    .insightsHolder {
        margin-right: 0px;
    }
}

/* Top image link styling */
.insightsTopImg a {
    width: 100%;
    height: 100%;
    display: inline-block;
}

/* Thumbnail styling */
.insightsTopImg .lnThumb {
    aspect-ratio: 16 / 11;
    width: 100%;
    height: 180px;
}

/* Increase thumbnail height for screens 568px and up */
@media only screen and (min-width: 568px) {
    .insightsTopImg .lnThumb {
        height: 240px;
    }
}

/* Thumbnail image styling */
.insightsTopImg .lnThumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Text content styling */
.insightsTopImg .textContent {
    background-color: #0462a9;
    padding: 20px 20px 1px;
    font-size: 16px;
    color: #f5f7f8;
    border-radius: 0px 0px 10px 10px;
}

/* Bottom text content styling */
.insightsBtmText {
    padding: 21px 0px 3px 10px;
}

/* Title styling */
.insightsTittle h4, .h4 {
    font-size: 16px;
    font-weight: 400;
    color: #021941;
    text-align: left;
    margin: 0px;
    padding: 0px;
    font-family: 'Poppins';
    transition: 0.3s ease;
}

/* Title link styling */
.insightsTittle h4, .h4 a {
    color: #021941;
    transition: 0.3s ease;
}

/* Title link hover effect */
.insightsTittle h4, .h4 a:hover {
    color: #0b93e1;
}

/* Post excerpt styling */
.post_excrapt p {
    margin-top: 10px;
    font-weight: 300;
    font-family: 'Poppins';
    font-size: 16px;
    line-height: 1.2;
    text-align: left;
}

/* Responsive styling for insights holder and excerpt */
@media only screen and (min-width: 576px) {
    .insightsHolder {
        width: 300px;
        max-width: 100%;
    }
    .post_excrapt p {
        margin-top: 33px;
        font-size: 18px;
    }
}

/* Responsive styling for title and insights holder for larger screens */
@media only screen and (min-width: 768px) {
    .insightsTittle h4, .h4 {
        font-size: 18px;
        font-family: 'Poppins';
    }
    .insightsHolder {
        width: 49%;
        min-width: unset;
    }
    .recentPublic {
        display: contents;
    }
}

/* Additional responsive adjustments for larger screens */
@media only screen and (min-width: 992px) {
    .insightsTittle h4, .h4 {
        width: 80%;
    }
    .riInsights {
        width: 66%;
        flex-wrap: wrap;
        column-gap: 0;
    }
    .recentPublic {
        width: 32%;
        display: block;
    }
    .recentPublic {
        display: flex;
        flex-direction: column;
        row-gap: 15px;
    }
}

/* Further responsive adjustments for very large screens */
@media only screen and (min-width: 1400px) {
    .insightsTopImg .textContent {
        padding: 46px 24px 1px 120px;
    }
    .insightsTittle h4, .h4 {
        font-size: 20px;
    }
    .insightsBtmText {
        padding: 25px 0px 3px 10px;
    }
    .recentPublic {
        row-gap: 30px;
    }
}

Comments on the CSS:

  1. General Layout and Styling:
    • .insider_insights .oxy-posts: Styles the container holding the posts with flexbox, allowing horizontal scrolling.
    • .riInsights: Styles individual insights with flexbox, ensuring they are displayed in a flexible row with spacing.
  2. Insights Holder:
    • .insightsHolder: Styles each individual insight container, applying background color, border-radius, padding, width, and a hover effect for shadow.
    • .insightsTopImg a: Ensures the post image link takes up full width and height.
  3. Thumbnail Styling:
    • .insightsTopImg .lnThumb & .insightsTopImg .lnThumb img: Styles for the thumbnail container and image to ensure they fit well and maintain a good aspect ratio.
  4. Text Content:
    • .insightsTopImg .textContent: Styles for the text content within the image section.
    • .insightsBtmText: Styles for the bottom text content section.
    • .insightsTittle h4, .h4: Styles for the post title and link, including hover effects.
  5. Post Excerpt:
    • .post_excrapt p: Styles for the post excerpt paragraph, including font settings and margins.
  6. Responsive Design:
    • Media queries for adjusting layout and styles on screens 576px, 768px, 992px, and 1400px wide and up, ensuring the design adapts to different screen sizes effectively.

Recent Post Layout Two

<div class="rpHolder">
    <?php
    // Get the custom fields for author name and journal name
    $authorname = get_field('author_name');
    $journal = get_field('journal_name');
    ?>
    
    <p>
        <?php echo $authorname; ?>
        <a href="#">
            <?php
            // Get the post excerpt, or if not available, the post content
            $string = wp_strip_all_tags(get_the_excerpt(), false);
            if (!$string) {
                $string = wp_strip_all_tags(get_the_content(), false);
            }

            // Define the desired width for the excerpt
            $your_desired_width = 139;

            // Truncate the string to the desired width
            if (strlen($string) > $your_desired_width) {
                $string = wordwrap($string, $your_desired_width);
                $string = substr($string, 0, strpos($string, "\n"));
                $string .= '...';
            }

            // Output the processed string
            echo $string;
            ?>
        </a>
        <?php echo $journal; ?>
    </p>
</div>

Comments on the Code:

  1. Custom Fields:
    • $authorname and $journal are fetched using get_field(), assuming these fields exist in the post's custom fields.
  2. Excerpt Processing:
    • Retrieves the post excerpt and falls back to the post content if the excerpt is not available.
    • Strips any HTML tags from the content.
    • Truncates the string to the desired width (139 characters) without breaking words and adds an ellipsis at the end.
  3. HTML Structure:
    • The author's name and the journal name are displayed within a paragraph (<p>).
    • The post excerpt/content is wrapped in an anchor tag (<a>), which is placed between the author's name and the journal name.

CSS

/* Sidebar - Recent Publications */
.recentPublic {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.rpHolder {
    font-size: 16px;
    color: #021941;
    background-color: #f1f6fc;
    border-radius: 7px;
    padding: 15px 15px 10px 27px;
    line-height: 1.3;
    position: relative;
    margin-bottom: 30px;
}

/* Remove margin-bottom for the last item */
.rpHolder:last-child {
    margin-bottom: 0;
}

/* Decorative vertical line */
.rpHolder::after {
    position: absolute;
    content: '';
    width: 5px;
    height: 75%;
    border-radius: 30px;
    background-color: #0b93e2;
    top: 50%;
    transform: translateY(-50%);
    left: 11px;
}

.rpHolder p {
    margin: 13px 0;
    font-weight: 400;
}

.rpHolder a {
    color: #0b93e2;
    text-decoration: underline;
    text-decoration-color: #7ec4ee;
    background-size: auto 175%;
    background-image: linear-gradient(#f1f6fc 57%, #37C5F0 50%);
    transition: background 0.3s ease-in-out;
}

/* Hover effect for links */
.rpHolder a:hover {
    color: #282828;
    background-position-y: 102%;
}

/* Responsive adjustments */
@media only screen and (min-width: 768px) {
    .rpHolder {
        padding: 15px 25px;
    }
}

@media only screen and (min-width: 992px) {
    .rpHolder {
        width: 100%;
        padding: 10px 21px 18px 27px;
    }
}

Comments on the CSS:

  1. General Styling:
    • .recentPublic: Flex container for holding recent publications with a column layout and 15px row gap.
    • .rpHolder: Styles each individual publication item, including font size, colors, padding, and margin. Positioned relative for the decorative ::after pseudo-element.
  2. Decorative Line:
    • .rpHolder::after: Adds a vertical blue line to the left of each publication item, centered vertically.
  3. Text and Link Styling:
    • .rpHolder p: Sets margin and font weight for paragraphs.
    • .rpHolder a: Styles the links with color, underline effect, and a background gradient. Adds a hover effect to change the link color and background position.
  4. Responsive Design:
    • Media queries adjust the padding for larger screens to ensure proper spacing and alignment.
©2025 Linux Bangla | Developed & Maintaind by Linux Bangla.