[Resolved] Style custom metadata

[Kia]

Hi,

I have a custom field called sponsor_meta which I am displaying on a single post page using the following element:

Hook: after_entry_title
Display Rules: All Singular
Code: See snippet below

<p id="partnerMeta">
	<?php the_field('sponsor_meta'); ?>
</p>

This displays just below the date in a single post (see the “In partnership with Original Cottages” text here). I am then styling this using CSS and it displays on the single blog post as it should do.

On my main blog page, however, the styling isn’t applying. It seems that the partnerMeta id isn’t applying and I don’t know why. This causes the text to look different.

Do you know how I can target this text in the main blog page please?

Any help would be much appreciated!

Thank you,

Kia

[Tom]

Hi there,

If your Display Rules are set to “All Singular”, it shouldn’t show up on the blog page at all. What if you add another Display Rule for your archives?

Let me know 🙂

[Kia]

Hi Tom,

Thank you for your reply.

I can’t see how to target it in the archive page. As far as I can see, it doesn’t have a class or id applied to it; it just shows up as text. The other metadata is wrapped in a “byline” class, an “author” class, an “author-name” class and so on, but the partnership text doesn’t have a selector.

Are you able to look at the source and tell me how I should be targeting that text please?

Thank you!

Kia

[David]

Hi there,

as Tom suggested what happens if you edit your Hook Element and on the Display Rules add: All Archives as well as All Singular

[Kia]

Hi David,

Ah, I misunderstood. I thought he meant add a display rule in the css to style it.

I’ve added a Display Rule in ‘Edit Element’ so that it now has Location: All Singular and also All Archives.

I’m still getting the same result in the frontend though: they’re both styled differently.

Any ideas?

Thank you,

Kia

[David]

Hmmm thats odd – Can you try replacing the All Singular with All Posts.
If that doesn’t work can you disable the Hook Element ( Quick Edit it from the Elements List and Save as Draft ) so we can check if something else is displaying the meta in the archives.

[Kia]

Hi David,

The first suggestion didn’t work (still styled differently) so I tried the second and you’re right: something else is displaying the meta in the archives.

Do I need to edit a theme file to get to it?

Thank you,

Kia

[David]

Do you have any other Hook Elements or Custom Functions relating to the ACF Field?

[Kia]

No, this is the only Hook Element that uses that custom field.

I’m trying to recall if we did anything hacky to make that custom field show up in the archive page. If there was a custom function written to add it in, would that be in functions.php? Either way, wouldn’t it have been overwritten when we changed themes from Sela to GeneratePress? We didn’t use a child theme before, so none of our old functions would have been preserved I don’t think?

[David]

Yeah custom functions should be in a child theme functions.php ( unless you’re using the Code Snippets plugin ), so any edits to an old theme would not apply here.

Do you have any other hooks relating to ANY custom fields?

[Kia]

We’re not using the Code Snippets plugin.

We have three other hooks, but none of them use any custom fields.

disable_footer: uses ‘Disable Elements’ > ‘Footer’ to disable the default footer
footer_content: adds our footer content but none of this is a custom field (below for reference)
social_icons: adds our social icons in the header but none of this is a custom field (below for reference)

————————————–

footer_content hook

<div id="footerElement">
	
	<a href="https://www.lonelyplanet.com/articles/love-at-first-hike-how-adventure-travel-can-bring-you-closer" target="_blank" rel="noopener" rel="noreferrer" aria-label="Link to Lonely Planet"><img src="/wp-content/uploads/2019/12/footer_lp2.png" alt="Lonely Planet logo"></a>&nbsp;

	<a href="https://www.nationalgeographic.co.uk/travel/2015/02/best-travel-blogs-janfeb-2015" target="_blank" rel="noopener" rel="noreferrer" aria-label="Link to National Geographic"><img src="/wp-content/uploads/2019/12/footer_ng.png" alt="National Geographic logo"></a>&nbsp;

	<a href="https://www.roughguides.com/author/kia-abdullah/" target="_blank" rel="noopener" rel="noreferrer" aria-label="Link to Rough Guides"><img src="/wp-content/uploads/2019/12/footer_rg.png" alt="Rough Guides logo"></a>&nbsp;

	<a href="https://www.businessinsider.com/things-you-should-never-say-to-an-expat-2015-5" target="_blank" rel="noopener" rel="noreferrer" aria-label="Link to Business Insider"><img src="/wp-content/uploads/2019/12/footer_bi.png" alt="Business Insider logo"></a>&nbsp;

	<a href="https://matadornetwork.com/author/atlasandboots/" target="_blank" rel="noopener" rel="noreferrer" aria-label="Link to Matador Network"><img src="/wp-content/uploads/2019/12/footer_mt.png" alt="Matador Network logo"></a><br><br>

<a href="/terms">Terms</a> |
<a href="/privacy">Privacy</a> |
<a href="/mediapack.pdf" target="_blank">Advertise</a> |
<a href="/contact">Contact</a><br>
	© 2020 Atlas & Boots Ltd, Registered Number 10149280<br>
<br><br>
	
<div id="amzn-assoc-ad-2397183f-70ec-4535-bc6a-cbcf7599c993"></div>
<script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=2397183f-70ec-4535-bc6a-cbcf7599c993"></script>
<!--<script src="//www.anrdoezrs.net/am/7874086/include/allCj/impressions/page/am.js">
	</script>-->
	
</div>

————————————–

social_icons hook

<!--[widget id="lsi_widget-2"]-->
<div class="socialIcons">
									
<a href="http://www.instagram.com/atlasandboots/"  aria-label="Link to Instagram" target="_blank" rel="noopener" rel="noreferrer" >
	<img src="/wp-content/uploads/2019/12/icon-instagram.png" alt="Instagram logo">
</a>

<a href="https://twitter.com/atlasandboots/"  aria-label="Link to Twitter" target="_blank" rel="noopener" rel="noreferrer" >
	<img src="/wp-content/uploads/2019/12/icon-twitter.png" alt="Twitter logo">
</a>

<a href="https://www.facebook.com/atlasandboots/"  aria-label="Link to Facebook" target="_blank" rel="noopener" rel="noreferrer" >
	<img src="/wp-content/uploads/2019/12/icon-facebook.png" alt="Facebook logo">
</a>

<a href="https://www.youtube.com/atlasandboots/"  aria-label="Link to YouTube" target="_blank" rel="noopener" rel="noreferrer" >
	<img src="/wp-content/uploads/2019/12/icon-youtube.png" alt="YouTube logo">
</a>

<a href="https://www.atlasandboots.com/feed/"  aria-label="Link to RSS feed" target="_blank" rel="noopener" rel="noreferrer" >
		<img src="/wp-content/uploads/2019/12/icon-rss.png" alt="RSS logo">
</a>
 </div>

[David]

Can you share a screenshot of the ACF setup for that custom field

[Kia]

Yes, you can find it on Google Drive here. (Let me know if you have a preferred way of sharing images.)

[David]

Ok ( sorry for all the questions ) – can you clear and disable any cache plugins just to make sure we’re not seeing something that we shouldn’t be.

Then its a case of disabling plugins to see if one of them is creating a conflict.

[Kia]

Hi David,

Thank you for staying on this.

Flushing the cache (on the server as well as WP-Rocket) didn’t work.

I then deactivated all plugins (pic) except ACF as that screwed up the whole site. The partnership metadata was still showing up (pic).

Finally, I changed the theme and that did get rid of it (pic).

So I think it is theme related?

Any other ideas?

Thank you,

Kia

[Author]

Posts