php – Using Featured Image as Hero Background in Word Press


I have the Author Cats theme in Word Press ( I had hoped they would add this feature for the book pages in a future update since I bought a lifetime license for all updates but it’s been a few years and the last time I asked they said they didn’t intend to do that and I should hire a developer if I wanted to change it. Since I can’t afford that and have some coding experience, I have been trying to figure out how to fix it myself. I appreciate any help you can give me. Here’s the problem:

In the hero section of my home page, it has the option to use a background image, then there is a book cover and a description beside it. On the blog post page, which I don’t use, the hero section lets you use the featured image as the background but doesn’t have a book cover image on top of it (sample post page: On the book page, it only allows you to use a background color which will be the same on all your book pages (book page: Note not all book covers look good on the same color. I want my book page hero sections to allow me to use the featured image as the background image.

What have I tried so far? I mixed the codes for book page and some of post page together and it worked. It pulled the featured image, had a book cover, and had a description. The only problem is the book cover was off – too close to the top on my laptop and even worse on mobile view. I changed and added css (margin and padding in numerous places) to try to fix it to no avail. No matter what I did or changed, the cover stayed in the same spot. I was able to fix it well- enough for my laptop view by adding more description to the hero section, but the mobile version was still messed up, showing only about half of the book cover. I ended up changing it back to the background color. This is the php code to get the featured image as used in the post page:

// featured image
if (has_post_thumbnail()) {

$full_featimg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$featimg = $full_featimg[0];

} else {

$get_default_featimg = get_field('default_featured_image','option');
$get_featimg_size="full"; // (thumbnail, medium, large, full or custom size) 
$featimg_array = wp_get_attachment_image_src($get_default_featimg, $get_featimg_size);
$featimg = $featimg_array[0];



kim 2 months 2023-02-04T17:37:08-05:00 0 Answers 0 views 0

Leave an answer