[Resolved] Add Banner to Archive Image

[Author]

Posts

[suzyo]

I'd like to add a banner to an archive image, preferably using a custom field.

Can this be done?

Thanks.

hidden link

[Christopher Amirian]

Hi there,

What you want is something that Toolset does not support. Toolset has custom fields assigned to each custom post type. That custom field has values for each single post and not a global option for the archive.

Instead of a custom field, you can use an image with a block in a block editor for the Archive. Toolset post archive can be built with normal WordPress native block editor, soi on that page you can use whatever block you can find to create a banner and it will work in the archive page.

https://toolset.com/course-lesson/creating-a-custom-archive-page/\

Thanks

[suzyo]

Hey Christopher. I don't use blocks.

[Christopher Amirian]

Hi there,

The same principle goes for the Classic WordPress Archive. You will need to add HTML code before the Loop starts.

But please consider that Toolset has only access to the_content() section of the Theme which you use. So if you add HTML at the top of the loop and you still see it is not high enough on the page, then you need to add your code on the Theme that you use.

You will create a child theme and use the archive file that the theme has.

In the PHP file you will need to restrict the banner for the post type which you use it for.

Here is a sample code that you can use:

<?php
// Check if the current archive is for the "custompost" post type
if (is_post_type_archive('custompost')) {
    // Display the banner
    ?>
    <div class="archive-banner">
        <!-- Add your banner HTML code here -->
        <h2>Post Archive Banner</h2>
        <p>This is the banner for the "post" post type archive.</p>
    </div>
    <?php
}
?>

Place this code snippet in the appropriate place within your archive.php file or whatever file your theme has for the archive, depending on where you want the banner to be displayed on the page. Replace the content inside the <div class="archive-banner"> with your actual banner HTML code. The banner will now show only on the "custompost" post type archive pages and not on other archive pages.

So in the code replace "custompost" with the slug of the post type you use.

Thanks.

[suzyo]

Thanks, Christopher, that's great.

I'd also like to use it on a View (pic attached). Same thing? Thanks.

[Christopher Amirian]

Hi there,

It depends on where you use the view. If it is on a specific page, and you want to have access to the top section which is outside of the view's reach and is something that you need to add to your theme, then you can add a page template to your theme.

The page template then can be selected on the page that you used the view in.

Inside the page template you can add the code you want. You can check the Genesis theme page template structure to copy it on your file in your child theme.

For example you can add a file called page-banner.php and add the code below:

<?php
/**
 * Template Name: Page with Banner
 * Description: A custom page template with a banner for the Genesis child theme.
 */

// Add the banner
add_action( 'genesis_before_content', 'your_theme_add_banner' );
function your_theme_add_banner() {
    ?>
    <div class="archive-banner">
        <h2>Post Archive Banner</h2>
        <p>This is the banner for the "post" post type archive.</p>
    </div>
    <?php
}

// Build the page
genesis();

Please consider that the code above is just a sample to help you get started and you need to change it to accommodate your use-case.

For more information:

https://developer.wordpress.org/themes/template-files-section/page-template-files/

hidden link

Thanks.