Hero photo on Search Results page

[Michael Cloud]

Thanks again so much for your previous help.

How do I get the hero photo to show up on the Search Results page (http://www.texaswarrantroundup.com/?s=77905&submit=Search) like it does on this page: http://www.texaswarrantroundup.com/?page_id=5

Also, is there a place in the Editor to adjust the size (pixels) of the viewable area of the hero area on the home page? I know there is the ‘Normal, Full, Small Height’ settings in the Theme Options.

[Bill Robbins]

Hi Michael,

Hope you had a nice weekend. There isn’t a built in option to add a hero section to the search results page, but you could hard code it if you wanted to. Here’s what to do there:

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose hero-options.php
3. Scroll down to the bottom of the page and you’ll see this:

   
   <?php } ?>
   

4. Right above that add this:

   
   (Visit our support site to view and copy code).

5. Where it says “Hero Title, enter the title for your hero. Do the same for the hero caption and button. Change the http://yourlink.com to the URL you’d like to link your button to.
6. For the hero image, you’ll want to upload that in the WordPress media section. Just go to the library and drop your new image into it. Once it finishes uploading, WordPress will give you the URL to the image. Copy that. Then replace the http://yoursite.com/image.jpg in the snippet above with the image’s URL. That will set your image into the hero.
7. The hero height here is set to be the middle sized one. If you’d like to change that, find this spot:

   
   normal-height
   

   and change it to either small-height or full-height. For the text alignment, you can change the center-text to either left-text or right-text to move it around.

8. Save your changes.

It is possible to change the size of the height presets. Do you want to change it on one page only, or on all pages? Let me know and which preset you’d like to change and I’ll show you how.

Take care,
Bill

[Michael Cloud]

Thanks a bunch!! I was thinking to make the home page hero a touch shorter but I think I like it like it is.

I would like to make the rest of the pages (including the shop, care, account, etc.) to have the small hero. Is that possible?

[Bill Robbins]

Are you looking to have the same hero on all of these pages?

[Michael Cloud]

yes. The same small hero throughout the site with the exception of the home page (which I’d like to keep as is).

[Bill Robbins]

Since that’s the case, let’s change the snippet above so that it will occur everywhere. Change this line:

<?php } if ( is_search() ) { ?>

to

<?php } else { ?>

and save your changes. That should cause the hero to show up everywhere while still letting you have a different one on the home page.

Let me know if you run into trouble there,
Bill

[Michael Cloud]

Making progress. The hero is throughout the site but inconsistent:

Home = hero
participants (blog) = small hero
individual post = small hero
search results = small hero

cart = large hero
checkout = large hero
my account = large hero
shop = small hero but hero overlaps page content (page content begins at top of page under hero image)
standard page = large hero

[Bill Robbins]

Could you copy out the code from your hero-options.php file and paste it at http://gist.github.com and then add the link to it to this page? That way I can see what’s up there.

Also make sure that no pages, except for the home page have a featured image set. Those will override this fallback.

[Michael Cloud]

Ahhhh….. Removing the featured image fixed everything except for the issue on the Store page of the hero overlapping the page content.

Here’s the link:

https://gist.github.com/anonymous/55627843780c58206dad

[Bill Robbins]

Perfect. WooCommerce doesn’t actually use a theme’s templates when it creates a page and so in this case it’s missing some of the HTML that the other pages use. Add this to your Custom CSS:

.post-type-archive-product #hero-section,
.single-product #hero-section {
	margin-bottom: 70px;
}

and hopefully that will line up the shop page and the individual products too. Let me know if that doesn’t do the trick.

Take care,
Bill

[Michael Cloud]

works perfectly. Much thanks!

[Bill Robbins]

Happy to help out Michael 🙂

[Author]

Posts