How to put "HERO SECTION" on the top of blog region?

[Liu Xiao-Ling]

Dear Bill,

I found that only page can have “HERO SECTION”, could you kindly advise how to make the “hero section” be shown on the top of blog area?
Or, how to put article lists on the page which have hero section?

Thank you very much!
Lolita

[Bill Robbins]

Good Morning Lolita,

Excellent question there. On your posts page (your blog), WordPress ignores just about everything other than the page’s title. That’s unfortunate as it makes adding in a hero section not quite as simple. Here’s how you can get around that limitation and add a hero to your blog page:

1. In your WordPress dashboard click on Media and then Add New.
2. Upload the image that you’d like to use for your blog hero section. Once the upload is complete, click the edit link. On the right hand side of the screen that opens up you’ll see a field for the file URL. You’ll need that in just a moment.
3. Next go to the Appearance section in your WordPress dashboard and choose Edit.
4. From the list of files on your right, choose hero-options.php
5. Find this line:

   
   <?php if ( is_archive() || is_home() ) { ?>
   

   and replace that with this:

   
   (Be sure to copy that code directly from the support site and not the notification email.)

6. In line 7, replace the http://yoursite.com/image.jpg with the URL to your blog’s hero image that got earlier.
7. In line 14, change Hero Title to what you’d like to have your hero title be. You can delete the text if you’d rather not have a title.
8. In line 18, you can change the Hero Caption to the text for your caption.
9. In line 23, change the http://yourlink.com to where you’d like to have the button direct people and the Button Text to anything you’d like to have your button say.

   If you’d rather, you can simply delete any of those you’re not going to use.

10. Save your changes.

That should add in a hero section above your blog. If you have any questions, just let me know.

Thanks,
Bill

[Liu Xiao-Ling]

Dear Bill,

Good day! Thank you for your prompt reply.
I found the line” <?php if ( is_archive() || is_home() ) { ?>” wihch you mentioned and want me to revise the content, is not exist in the theme ” Kerygma “, but in the theme “ELITE”. Please find enclosed photos for your reference.

Could you kindly check again and give me more instruction?

Regards with many thanks!
Lolita

Attachments:

1. 

   hero-elite.jpg
   

2. 

   hero-K.jpg
   

[Bill Robbins]

Lolita,

Yikes! I am so sorry about that. I must have had Elite on my mind yesterday morning. For Kerygma, you’ll still need to upload the file for your header as described above and go to the edit section. In the hero-options.php file, scroll to the very bottom and replace this line:

<?php } ?>

with this:

(Again copy the code directly from the support site).

You can swap out the text as before to fit your needs. Then save your changes.

If you have questions or trouble, let me know.

Have a great weekend,
Bill

[Liu Xiao-Ling]

Dear Bill,

Thank you for your help, after tried, but it seems not work…:(
I guess that I might not explain my request clearly…

I created “menu”on the home page by “article category”.
And I hope that I can set up “hero section” at every category page which have different image file.

It’s possible to achieve?

Thanks a lot!
Lolita

[Bill Robbins]

Lolita,

Sorry about that. Typically in WordPress when you speak of the blog, it’s in reference to the “posts” page that’s set in the reading settings, right below the home page. That page shows posts from all categories. The code above is for that page and not for a post category archive.

WordPress doesn’t actually have support for “featured images” for post categories built in. Fortunately, the theme already has something already built in to show images for series which work basically like categories do. With a bit of editing, we should be able to add that to post categories too.

1. Back in the theme editor, edit the taxonomy-images.php file and replace everything in the file with this:

   
   (Again copy that code directly from the support site and not the notification email.)

2. Save your changes.
3. Edit the hero-options.php file again. This time, we’ll replace the entire file with this:

   That has the code for our category images, plus the blog page code should you end up wanting a unified blog in the future.

4. Save your changes.

Now when you edit a post category, you should see a field where you can upload an image that will be used as the hero image. The title of the hero section will be the name of the category. The description of the category will be the caption.

Hope that helps out. Have a great week,
Bill

[Liu Xiao-Ling]

Dear Bill,

Thank you very much! It works perfect now.

I really appreciate your great help, you’re amazing!

Regards with thanks,
Lolita

[Bill Robbins]

Fantastic! I’m glad it’s alway squared away for you now.

Have a great week,
Bill

[Author]

Posts