Link to home
Create AccountLog in
Avatar of Alicia St Rose
Alicia St RoseFlag for United States of America

asked on

Need Custom field data to show up on home and single post pages

Hi,
I'm using a plugin called Advanced Custom Fields. I can get the meta data showing up on all the pages but no luck on the blog home and blog single pages. I've got a static front page and a page called "blog" which displays my blog's home.

I've done some research and it appears that custom fields don't easily show up on blog pages with out some editing of the
get_meta_field()

Open in new window

 Since I'm using the plugin, I'm using the code specific to the plugin. I hope I'm explaining myself clearly.
I'm using a template part to call this section into the singular.php template. Here's what I have in my template part so that I can display the custom fields:

<div id="page-header">
 <div id="page-header-inner">
	<div id="page-header-quote">
		<p class="page-header-text"><?php the_field('header_quote'); ?></p>
		<?php $attachment_id = get_field('header_photo');
			$size = "full"; // (thumbnail, medium, large, full or custom size) ?>
		<p class="page-header-image"><?php echo wp_get_attachment_image( $attachment_id, $size ); ?></p>
	</div>
 </div>
</div>

Open in new window

What do I need to do to have the meta data show up on the blog home and blog single pages. Can I use a conditional?

Thanks!
Avatar of Julian Matz
Julian Matz
Flag of Ireland image

Hi laughhearty,

Try adding a conditional statement to check if we're on the front page:

<?php
if ( is_frontpage() )
{
    $id = get_option( 'page_on_front' ); // or set the front page ID manually
    $header_quote = get_field( 'header_quote', $id );
    $header_photo = get_field( 'header_photo', $id );
}
esle
{
    $header_quote = get_field( 'header_quote' );
    $header_photo = get_field( 'header_photo' );
}
?>
	<div id="page-header-quote">
		<p class="page-header-text"><?php echo $header_quote; ?></p>
		<?php $attachment_id = $header_photo;
			$size = "full"; // (thumbnail, medium, large, full or custom size) ?>
		<p class="page-header-image"><?php echo wp_get_attachment_image( $attachment_id, $size ); ?></p>
	</div>

Open in new window


Let me know how that works.

Regarding the blog pages, does this work on the blog index page or on the individual blog post pages?
If you are wanting to show the fields on the front, add the acf_form_head(); and acf_form( );  to you template page or blog page. i believe, single.php. see it in the example below:

<?php

 ///Add here above get_header
acf_form_head();
 
get_header(); ?>
 
	<div id="primary">
		<div id="content" role="main">
 
			<?php the_post(); ?>
 
			<?php 
                        // add here
                        acf_form( );
                         ?>
 
		</div><!-- #content -->
	</div><!-- #primary -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Open in new window

So you would add the above code to the page you want to show.

you can say:

<?php
if ( is_frontpage() )
{
 ///Add here above get_header
acf_form_head();
 }
get_header();

 ?>

Add do the same for the acf_form();
Avatar of Alicia St Rose

ASKER

Hi Julianmatz,
I tried your code and I'm still not seeing the quote and the image. BTW, it's is_front_page with the additional underscore...
Anywho...
Here's a link:

http://sandbox.intrepidrealist.com/lamaraheartwell

If you click through the pages of the site, you'll see a quote and image on top of every page. I created custom fields using the plugin and I see the fields when I add new Custom post types, pages and posts. But the data is only showing up for pages in the template. I don't see anything on blog index, which is my page called "blog". I'm probably going to hardcode the quote and image for single blog posts.
Hi all4artz,
I'm going to give you code a whirl!
I'm confused, all4artz,
I'm not trying to create a front end form.
I've already got my custom fields set up. The only problem, is that the data in the custom fields doesn't show up for the blog page.

If what you've suggested will solve that issue, then I'll try it. I did a littel research and it doesn't appear to be addressing my issue. I may be wrong, since I'm fairly new to Advanced Custom Fields plugin.

See below is the quote and image when I view the edit screen for the blog page. But I'm not getting the quote, nor the image to show up. http://sandbox.intrepidrealist.com/lamaraheartwell/blog/

User generated image
Oh ok.
So is your metafields define already in the dashboard blog page?

If so then you have do a

echo get_meta_field('field-name');

if not, Please give me alittle more info to help you.
Where is your define meta fields located? for page/post?
I didn't know your home page was the blog index. In that case, try is_home() instead of is_front_page().

Also try this, to make sure the condition is even working:

<?php
if ( is_home() )
{
    echo "<p>HOME PAGE</p>";
    $id = get_option( 'page_on_front' ); // or set the front page ID manually
    $header_quote = get_field( 'header_quote', $id );
    $header_photo = get_field( 'header_photo', $id );
}
?>

Open in new window

Sorry, no, is_front_page() should work if you're using a static page. But as I understand it, you also need to get the page ID. You could test using:

var_dump( $id );

Open in new window


Alternatively, maybe have a look here:
http://www.elliotcondon.com/using-the-advanced-custom-fields-plugin-to-create-a-custom-home-page-in-wordpress/
Hi Julianmatz,
Maybe I'm not being clear.
Okay:
I have already set up a static home page for my theme. I created a file called front-page.php. Creating this file automatically calls it for the front page of the theme. I just have to create the page in the dashboard and turn it on in settings>reading.

In Wordpress "home" refers to the blog listings page. So if I were to use is_home() then I'm targeting that page, no matter what I've decided to call it and set it in settings>reading. If I were to use is_front_page() then I'm targeting the static page I've selected in the settings>reading.

So the above is what I've done. This is working: Static homepage and blog showing up under "blog".

The issue I need to solve is here:
Now, I've used the ACF plugin and I have two fields for pages and posts:

1. Header Quote
2. Header Photo

Please don't read too much into the word "header" this is just so my client knows we are talking about the top of the page under the navigation.

When I add data in these fields for pages, I get a quote and an image. When I add data to the  custom fields on "Blog" page , which is set to show posts, I don't get any data.

Here some visual illustration:

This is the dashboard editor for the About Page custom fields data:
User generated imageHere is the data on the front end:
User generated imageHere is the dashboard editor for the Blog Page custom fields data:
User generated imageHere is the front end Blog page without any data showing up:
User generated image
Ok I think I finally understand what you are trying to do.
You are trying to get the meta data to show on the blog loop page.

This can only be done by pulling an ID from a post/page in order to show it on that page.

Or you might have a page named "Blog" and you have assigned that page to be a blog loop page in settings>reading.... However Wordpress not longer uses the custom page data because you set it as a blog page.

This is the way you want to do it.
Turn off the blog page in settings>reading.
Next make a page template and pull in you field meta in it.
Next, within the same page template, add the follow Blog loop script below.

<?php $loop = new WP_Query( array(  'posts_per_page' => 100,'cat' => 1 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="post">
<?php the_post_thumbnail(); ?>
<div class="postInfo">
<h3 class="lgr"><?php the_title() ?></h3>
<a href="<?php the_permalink() ?>">Read More</a>
</div>
</div>
<?php endwhile; ?>

Open in new window


Optionally you can remove: 'cat' => 1 If you do not want to specify a category.
ASKER CERTIFIED SOLUTION
Avatar of Julian Matz
Julian Matz
Flag of Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Thank you julianmatz!!
This worked. Here's what I did:

I like to use front-page.php and home.php for my blog and homepage, keeps folks from mucking around and turning off the template by accident. Each of these called a template part called singular-page-header.php witht the custom fields. I created a new one called singular-page-header-blog.php and adjusted my code accordingly:

<div id="page-header">
 <div id="page-header-inner">
	<div id="page-header-quote">
		<p class="page-header-text">
		<?php $header_quote = get_field( 'header_quote', 6 ); ?>
		<?php echo $header_quote ?></p>
		<?php $attachment_id = get_field('header_photo', 6 );
			$size = "full"; // (thumbnail, medium, large, full or custom size) ?>
		<p class="page-header-image"><?php echo wp_get_attachment_image( $attachment_id, $size ); ?></p>
	</div>
 </div>
</div>

Open in new window


Then so that same image and quote could show up on single posts I created a single-post.php and called the same template part!
Works like a charm!

I just learned something valuable!
Thank you so much!!
I'm glad you were able to get this sorted, and glad I could help :)