[Resolved] Custom field not working for category archive pages

[William]

Hi there,

I want to add custom fields to category pages using the Generate Press snippet.

https://bookanalysis.com/albert-camus/ <– this is the example category page I’m using

I made this snippet to work on just category pages:

<table style=”width: 100%;” border=”0″>
<tbody>
<tr>
<td style=”width: 50%;”>

<h1 style=”font-size:42px; font-weight:bold;”>{{post_title}}</h1>

{{custom_field.category_summary}}

</td>
<td style=”width: 50%;”>

{{custom_field.category_image}}

</table>

I added some text to the custom field and an image in the category for above, but it’s not showing up? Is there any reason why this is happening?

Kind regards,

Will

[David]

Hi there,

how are you adding the Custom Fields to the Category ?

[William]

I’m using the Custom Fields plugin, and having two custom fields appear for all taxonomy: category_summary (text) and category_image (image)

[William]

and then I am applying that to an element in GeneratePress

[David]

Is that the Advanced Custom Fields plugin ?
https://wordpress.org/plugins/advanced-custom-fields/

[William]

Yes that’s the one

[David]

It requires a few extra steps to output ACF to a taxonomy term:

https://www.advancedcustomfields.com/resources/adding-fields-taxonomy-term/

And as you’re using a Header Element you will need to register a couple of shortcodes to get thos fields. For example add this PHP Snippet to your site:

add_shortcode( 'category_summary', function() {
	
    $term = get_queried_object();
    
    $category_summary = get_field( 'category_summary', $term );

    return $category_summary;
	
} );

Then you can display the summary with this shortcode: [category_summary]

If you’re using an image field for your category_image then this snippet:

add_shortcode( 'category_image', function() {
	
    $term = get_queried_object();
    
    $category_image = get_field( 'category_image', $term );
    $category_image_html = '<img src="' . $category_image['url'] . '">';

    return $category_image_html;
	
} );

will register this shortcode: [category_image] which will return the image HTML.

[William]

Thanks very much for that – I appreciate it.

Does the shortcode you suggested work for Generate Press elements? I find that including [category_summary] or {{custom_field.category_summary}} does not work for Generate Press elements.

[David]

The template tag {{custom_field.category_summary}} won’t work on an archive page. But if you added the two snippets then that [category_summary] shortcode should.

Try adding it a Hook Element to see if it displays correctly.

[William]

Hi there,

I’ve added both shortcodes to a Hook Element, and the image is showing but not the summary?

Also, is there a way to resize the image as it’s quite large here?

https://bookanalysis.com/albert-camus/

Many thanks,

[David]

I made an edit to the first shortcode here:
https://generatepress.com/forums/topic/custom-field-not-working-for-category-archive-pages/#post-1345726

Try that to fix the Summary problem.

For the image shorcode edit this line to include a width attribute:

$category_image_html = '<img src="' . $category_image['url'] . '" width="200">';

[William]

Hi there,
Thanks for that, perfect – works a treat.

Only thing is the image resizing – it does not really work effectively, can there be a height restriction so it works for mobile/tablet/desktop all the same and still achieves a similar ratio in terms of its look?

[William]

Is there also a way to have the text in the Hook element to float to the top instead of in the middle?

Example here https://bookanalysis.com/albert-camus/

[David]

You can add a class to your image like so:

$category_image_html = '<img class="ba-archive-image" src="' . $category_image['url'] . '" width="200">';

Then you can style it how you want with CSS for example:

.ba-archive-image {
    width: 50%;
}

To adjust the vertical positioning you should remove the table HTML and use the Markup and CSS provided here:

https://generatepress.com/forums/topic/how-do-i-create-a-hero-section-for-the-following-scenario/#post-1329768

[William]

Hi there,
I’ve added this Hook Element but unsure what CSS to add specifically?

<h1 style=”font-size:42px; font-weight:bold;”>{{post_title}}</h1>

[category_summary]

[category_image]

Ultimately, I want ‘category_title’ div id to float left, and at top, and the ‘category_image’ float right, with a restriction on the height/width of image.

[Author]

Posts