user6738171 user6738171 - 2 months ago 7
CSS Question

How to customize post excerpt css

I want to customize my post excerpt font and size through CSS. How would I do this? I don't think I can add a class, so I'm stumped on how to do this.

///////////////////////////////////

Here is my front-page.php



<?php
/*
* Template Name: learningwordpress
*/

get_header();
get_template_part ('inc/carousel');
$i = 0;
$args = array(
'posts_per_page' => 14,
'paged' => 1
);

$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {

if( $i %2 == 1 ) {
$the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>

<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php

}
else {
$the_query->the_post(); ?>
<article class="post col-md-12">
<?php the_post_thumbnail('large-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php
}
?>
<?php
$i++;
}
}
else {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();




Answer

You can add a class customfont on the p tags around the excerpt, like this:

<?php
/*
 * Template Name: learningwordpress
 */

get_header();
 get_template_part ('inc/carousel');
$i = 0;
$args = array(
    'posts_per_page' => 14,
    'paged' => 1
);

$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {

        if( $i %2 == 1 ) {
                   $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>      
            <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
 <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>

 <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>      
            <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
 <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
            <?php

        }
        else {
         $the_query->the_post(); ?>
            <article class="post col-md-12">
                <?php the_post_thumbnail('large-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
            <?php
        }
        ?>
        <?php
        $i++;
    }
}
else {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();

... and add this CSS:

.customfont {font-size: 200%; font-family: "Comic Sans MS", cursive, sans-serif;}
Comments