Hero section for category

[Grandemange Jonathan]

Hello Bill,

I saw in a post it was possible to make an hero section on a category page (I saw the Kerigma topic)

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

But i can’t find the Toxonomy-image.php on the elite theme so i ask you if is possible to make it in the elite theme ?

Thank you.

Jonathan

[Bill Robbins]

Hi Jonathan,

You could likely do that with Elite. Kerygma has that function built in so that podcast series can have graphics. There is a plugin called Category Images (https://wordpress.org/plugins/categories-images/) that I base that function on. You could use it to add in hero images for post categories.

Hope that helps get you pointed in the right direction.

Take care,
Bill

[Grandemange Jonathan]

hello bill,

I installed the plugin, now i can make an image in the category post … But that didn’t appears in the category page :

http://www.femmedevaleur.com/?cat=6

The picture is loaded with success.

So i don’t know what to do =)

Thanks for your help

[Bill Robbins]

There’s a fair amount of customization that will need to be made to the hero-options.php file to make the images visible. Go to Appearance in your WordPress dashboard and click on Edit. From the files on your right, choose hero-options.php. Replace everything in the file with this:

And save your changes. I haven’t tested that code, but that’s basically what you’ll be trying to do there. Make sure the category images plugin is active or you’ll have an error on your category pages.

Hope that helps out,
Bill

[Grandemange Jonathan]

I change the Hero-options.php and no pictures, no text and no article appears !

look: http://www.femmedevaleur.com/?cat=6

Thanks

[Bill Robbins]

I made one change to the code above. Try it again.

[Grandemange Jonathan]

Thank Bill

The image work but look i got two text :

http://www.femmedevaleur.com/?cat=6

Can you help ?

Thank a lot

[Bill Robbins]

You can delete this line (line 81):

the_archive_description( '<div class="hero-caption">', '</div>' );

[Grandemange Jonathan]

Cool but the name is already here !

http://www.femmedevaleur.com/?cat=6

Thanks bill

[Bill Robbins]

The title is the line above what you just deleted. You’re welcome to delete it too.

[Grandemange Jonathan]

I work great, I got 2 questions more, Can we delete the blank between the picture and the text ? And do you know some plug in for reduce or make more beautiful the article under ?

I’m sorry for my noobisme =)

[Grandemange Jonathan]

Like a banner for the article and you can clic on it to see the full article …

[Grandemange Jonathan]

And another details can we make the black navigation menu be transparent on the image like other pictures ?

[Bill Robbins]

To change the header color and the spacing, add this to the Custom CSS box that’s in the Advanced tab of the Theme Options page:

body.category.archive #header {
	background: transparent;
}

body.category.archive #header.scroll-background {
	background-color: #1A1A1A;
}

body.category .wrap {
	margin-top: 0;
}

For the actual posts, here’s what I would do. In the theme options page, choose the content tab. In the option to display the full post or an excerpt in the blog, choose the excerpt.

Then add a featured image to every post. That image will link to the full article and keep the actual blog page streamlined. That usually works out well.

Hope that helps out 🙂

[Grandemange Jonathan]

Okay,

it’s already in excerpt but the image is huge, not like a banner do you understand because the article keep the image normal !

[Bill Robbins]

When no sidebar is used, the content area is pretty big. You could always make it smaller by adding something like this to your Custom CSS:

.content-full .wrap {
	max-width: 960px;
}

You’re welcome to make that smaller to shrink that whole area a bit. It’ll make the text a bit easier to read too by keeping the lines shorter.

[Grandemange Jonathan]

That don’t look like i want and other question is possible to create a specific picture (for an article) in the category page and a picture for the hero space in the article page ?

Because i i can’t modify the picture like i want can i make a picture specific for the category page ? And keep the original picture for the hero space in the article ?

[Bill Robbins]

I guess that’s the thing. I don’t know what you want here. Why don’t you make a mock up of what you’re looking for so I have an idea and can tell you what options you have.

[Grandemange Jonathan]

in my dreams =)

This what i would have :

Each Green square is an article with an picture, when you clic on the picture you go to the article.

Sorry I’m a noob you can look the image in attachments

Attachments:

1. 

   Capture-d’écran-2015-08-31-à-22.51.07.jpg
   

[Bill Robbins]

I think we can do that. If you’re planning on using this for everywhere in your blog (no typical blog pages), then do this:

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose index.php
3. Replace everything there with this:

4. Save your changes.

If you may sometime want a more traditional blog page too and only want to change your categories to be like this then do this:

1. Using your web host’s control panel’s file browser or a FTP program to create a new file in the theme’s folder. It’ll be at wp-content/themes/elite/
2. Call the file category.php
3. Use the code above as the content of the file and save your changes.

Now you’ll need to specify the image to use. Go to the Media section of your WordPress dashboard and upload an image or find the image you’d like to use. In the pop up that comes up in the media library when you click on an image, you’ll see the URL to that image. Copy that.

Now edit your post where you want this image to be used. Scroll down below the main content box and you’ll see one for custom fields. If you don’t see it, click the screen options tab in the top right to make sure the checkbox by custom fields is selected.

In the left hand spot of the custom fields, enter “blog-image” and in the right hand section, paste the URL to the image. Then click the add custom field button. Update/publish your post.

Have fun,
Bill

[Grandemange Jonathan]

Wow that work great !

Now the text is disappeared to the description of the category, i’ve already created category.php and add this line to make work CategoryTinymce :

<?php
if(!(is_paged())){
echo category_description();
}
?>

May be that miss to make appears the text.

Thanks a lot again Bill you’re a Super Hero =))))

[Grandemange Jonathan]

PS : the picture square is just a test =)

[Bill Robbins]

Hi Jonathan,

You’re welcome to add in the category description. I edited the Gist above to include it. Here’s the function:

<?php the_archive_description( '<div class="category-description">', '</div>' ); ?>

You may want to leave out the if ( ! is_paged() ) since that will take out the category description whenever the category has enough posts to go onto more than one page. It doesn’t remove the description from the second page, but all pages including the first.

Have a great day,
Bill

[Grandemange Jonathan]

Hey Bill,

I want the description just on the first page not on the second what i do ?

[Grandemange Jonathan]

And after some test can we make the difference topics more closer with the CSS ?

[Author]

Posts