Want to change color of post<h1> title if it has no featured image set for that post

Question

So on my wordpress blog and most other wordpress blogs, you can set a featured image. If you don't set a featured image I have it default to a background image that says "new update" however the default background image i have set is much less eye grabbing than the custom ones made for the post.

To solve the issue of posts with custom featured images getting more attention that those that have the default image - I would like to make it so all blog post titles with posts that do not have a featured image to change their color code.

For example something like..

My pseudo code: - I'm don't know jquery/javascript very well but I could probably figure out the basic javascript to make it work.

IF 
('post > featured-image') = 'NONE'; 

THEN ('.post-list h1.entry-title a') = 'RED';

ELSE ('.post-list h1.entry-title a') = 'DEFAULT';

But that being said how would i even reference the POST not having a FEATURED IMAGE in wordpress via jquery or some function? I am open to any solutions!

Thanks so much for any help!

Answer 1

on your single.php file, or the page you use to display the single blog post you need to to an if statement check if the post have a thumbnail then if it does printout the style, or else let the default style will take place

<?php

if ( has_post_thumbnail() ) {
    the_post_thumbnail();

   echo "<style type=\"text/css\">";

    echo ".post-list h1.entry-title a{

            color: red !important ; /*any color of your choice*/;
        }
</style>";

}
else {

    // Default style will take place
}
?>

Make sure that you add thumbnail support on your functions.php file.

To add thumbnail support on your functions.php just add add_theme_support( 'post-thumbnails' );

Answer 2

From the code you supplied your theme is already checking for the presence of a thumbnail on your posts using the wordpress function has_post_thumbnail . We can leverage this existing if:else statement to change a string value that we will apply to our h1 tags. You can find the string value under the variable $header_class_name .

1. First we default the value to "has-thumbnail" ( Line 18 )
2. Then we override the default to "no-thumbnail" in the event that the post has no thumbnail ( Line 33 )
3. Lastly, we apply the class to the h1 tag ( Line 72 )

PHP CODE

<?php
/**
 * The template part for displaying content.
 *
 * @package azera-shop
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( apply_filters( 'azera_shop_content_post_class_filter','border-bottom-hover' ) ); ?> itemtype="http://schema.org/BlogPosting" itemtype="http://schema.org/BlogPosting">

    <header class="entry-header">

            <div class="post-img-wrap">
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >

                    <?php
                    // default the $header_class_name to 'has-thumbnail'
                    $header_class_name = 'has-thumbnail';
                    if ( has_post_thumbnail() ) {
                    ?>
                    <?php
                    $image_id = get_post_thumbnail_id();
                    $image_url_big = wp_get_attachment_image_src( $image_id,'azera-shop-post-thumbnail-big', true );
                    $image_url_mobile = wp_get_attachment_image_src( $image_id,'azera-shop-post-thumbnail-mobile', true );
                    ?>
                    <picture itemscope itemprop="image">
                    <source media="(max-width: 600px)" srcset="<?php echo esc_url( $image_url_mobile[0] ); ?>">
                    <img src="<?php echo esc_url( $image_url_big[0] ); ?>" alt="<?php the_title_attribute(); ?>">
                    </picture>
                    <?php
                    } else {
                    // override the default $header_class_name in the case that there is no thumbnail
                    $header_class_name = 'no-thumbnail';
                    ?>
                    <picture itemscope itemprop="image">
                    <source media="(max-width: 600px)" srcset="<?php echo azera_shop_get_file( '/images/no-thumbnail-mobile.jpg' );?> ">
                    <img src="<?php echo azera_shop_get_file( '/images/no-thumbnail.jpg' ); ?>" alt="<?php the_title_attribute(); ?>">
                    </picture>
                    <?php } ?>

                </a>
                <?php azera_shop_post_date_index_box_trigger(); ?>
            </div>

            <div class="entry-meta list-post-entry-meta">
                <?php azera_shop_content_entry_meta_top_trigger(); ?>
                <span itemscope itemprop="author" itemtype="http://schema.org/Person" class="entry-author post-author">
                    <span  itemprop="name" class="entry-author author vcard">
                    <i class="fa fa-user" aria-hidden="true"></i><a itemprop="url" class="url fn n" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author"><?php the_author(); ?> </a>
                    </span>
                </span>
                <span class="posted-in entry-terms-categories">
                    <i class="fa fa-folder-open-o" aria-hidden="true"></i><?php _e( 'Posted in','azera-shop' ); ?> 
                    <?php
                        /* translators: used between list items, there is a space after the comma */
                        $categories_list = get_the_category_list( esc_html__( ', ', 'azera-shop' ) );
                        $pos = strpos( $categories_list, ',' );
                    if ( $pos ) {
                        echo substr( $categories_list, 0, $pos );
                    } else {
                        echo $categories_list;
                    }
                    ?>
                </span>
                <a href="<?php comments_link(); ?>" class="post-comments">
                    <i class="fa fa-comment-o" aria-hidden="true"></i><?php comments_number( esc_html__( 'No comments','azera-shop' ), esc_html__( 'One comment','azera-shop' ), esc_html__( '% comments','azera-shop' ) ); ?>
                </a>
            </div><!-- .entry-meta -->

        <?php 
            // add the $header_class_name value to the h1 (PS consider using a similarly styled h2)
            the_title( sprintf( '<h1 class="entry-title '.$header_class_name.'" itemprop="headline"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?>
        <?php echo apply_filters( 'azera_shop_header_underline','<div class="colored-line-left"></div><div class="clearfix"></div>' ); ?>

    </header><!-- .entry-header -->
    <div itemprop="description" class="entry-content entry-summary">
        <?php
            $ismore = strpos( $post->post_content, '<!--more-->' );
        if ( $ismore ) : the_content( sprintf( esc_html__( 'Read more %s &#8230;','azera-shop' ), '<span class="screen-reader-text">' . esc_html__( 'about ', 'azera-shop' ) . esc_html( get_the_title() ) . '</span>' ) );
            else : the_excerpt();
            endif;
        ?>

        <?php
            wp_link_pages( array(
                'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'azera-shop' ),
                'after'  => '</div>',
            ) );
        ?>
    </div><!-- .entry-content -->

</article><!-- #post-## -->

CSS

article header h1.no-thumbnail{
    color:red;
}

You can then apply CSS by referencing either class name

Answer 3

Replace this line

<header class="entry-header">

with

<header class="entry-header <?= has_post_thumbnail() ? 'my-hasfeatured-img' : '' ?>">

and then add CSS rule in style.css like:

.my-hasfeatured-img h1{
    //your code
}

Hope this helps!