I have created custom fields through the ACF Options page where a user will input their social media profile links. If there is no link, it will not display that icon on the front end. I've done this through creating a group titled 'Social Media' with the various platforms as fields within that group.
I'm pulling my hair out trying to pull those sub-field values into the theme footer. It simply doesn't display anything but when I display a value that isn't nested within a group it shows up.
Footer.php ↴
<?php
if( have_rows('social_media') ):
while( have_rows('social_media') ) : the_row();
?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endwhile; endif; ?>
ACF Group ↴
ACF Options Page ↴
TIA for any help. Much appreciated.
I assume the fields are on an ACF options page so you have to pass the string options in the have_rows function
have_rows('social_media', 'options')
Check this link for more info https://www.advancedcustomfields.com/resources/options-page/
the code wil look like:
<?php
if( have_rows('social_media', 'option') ):
while( have_rows('social_media', 'option') ) : the_row();
?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endwhile; endif; ?>
Note that the sub fields don't need a options string
A clean way to hide the Li when the field is empty:
<?php while ( have_rows('social_media', 'option') ) : the_row(); ?>
<?php if (get_sub_field('instagram')): ?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endif; ?>
<?php endwhile; ?>
If you have created this field in options page then you have to pass option parameter with the field. Check this link https://www.advancedcustomfields.com/resources/options-page/
Like this
<?php the_field('your-field-name', 'option'); ?>
So try with below code.
<?php
if( have_rows('social_media', 'option') ):
while( have_rows('social_media', 'option') ) : the_row();
?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endwhile; endif; ?>
When you echo fields from ACF Options Page, just pass 'option' parameter like the_field('acf_field_name', 'option' )
In your case code should be:
<?php
if( have_rows('social_media', 'option') ):
while( have_rows('social_media', 'option') ) : the_row();
?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endwhile; endif; ?>
Related
I have some code here that outputs the following:
Essentially I want to use same page anchor tags so a user can click on the small logo and be taken to the larger logo and info.
As it's a Wordpress site, I have used the ACF repeater field to achieve this. This repeater field enables the user in the back end to add more clients, for each client they can add an image a company name and the paragraph text.
Then I have just repeated the repeater field above and shown only the images but made them much smaller.
As you will see in the code below, I have assigned around each smaller photo and then this: <a name="anchor1"></a> just above every larger photo..
But I need a way of the numbers counting up so when they come out they aren't all anchor1 they become anchor2, anchor3 and so on.
Any ideas?
<div class="container client-page-logos-small" >
<div class="row">
<h3>Click company to see more</h3>
<?php if( have_rows('client_page_logos', 123456) ): ?>
<ul class="client-page-logos-small">
<?php while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
?>
<a href="#anchor1">
<li class="client-page-logos-small">
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
</li>
</a>
<?php endwhile; ?>
</ul>
<div style="clear: both;"></div>
<?php endif; ?>
<hr>
</div>
</div>
<div class="container client-page-logos" >
<div class="row">
<?php if( have_rows('client_page_logos', 123456) ): ?>
<ul class="client-page-logos">
<?php while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
$name = get_sub_field('client_name');
$text = get_sub_field('client_text');
?>
<li class="client-page-logos">
<a name="anchor1"></a>
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
<h3><?php echo $name; ?></h3>
<p><?php echo $text; ?></p>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
</div>
You need to add counter like below:-
<?php
$i = 1;
while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
?>
<a href="#anchor<?php echo $i;?>">
<li class="client-page-logos-small">
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
</li>
</a>
<?php $i++;endwhile; ?>
And
<?php
$j = 1;
while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
$name = get_sub_field('client_name');
$text = get_sub_field('client_text');
?>
<li class="client-page-logos">
<a name="anchor<?php echo $j;?>"></a>
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
<h3><?php echo $name; ?></h3>
<p><?php echo $text; ?></p>
</li>
<?php $j++ ;endwhile; ?>
I am working with ACF Flexible content. I am trying to load an image in my flexible content. But Image doesn't show, just an broken icon. Why ? My sub field is named "photo"
<h4 class="titrage2"><?php the_field('titre_1'); ?></h4>
<?php
if( have_rows('ateliers') ): ?>
<?php while ( have_rows('ateliers') ) : the_row(); ?>
<?php if( get_row_layout() == 'atelieratelier' ):?>
<div id="article-atelier">
<h4 class="titrage"><?php the_sub_field('atelier_01');?></h4>
<div class="article-details"><?php the_sub_field('txtimg');?></div>
<div>
<img src="<?php the_sub_field('photo'); ?>" />
</div>
</div>
<?php endif;?>
<?php endwhile;?>
<?php else :?>
<?php endif;?>
Here is the solution
<?php
$image = get_sub_field('photo');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
I'll try to word this the best I can:
My blog homepage has 4 feeds of "Latest from: (a category)" fed by 4 different categories, each showing 2 posts. I discovered the do_not_duplicate method and used that to prevent any of them from showing up twice (since the authors use multiple categories on each post to populate our blog). This works great, but here is my next issue:
If a post has multiple categories that populate the home page, it will post in just one category and not duplicate (as wanted), but the other category it is in now only shows just 1 post, where I'd like it to show 2. Since the 2nd 'missing' post is the duplicate, not be shown, I'm wondering how I can show the next (3rd) post in that category, if the duplicate is being hidden.
Here is my current code:
<!-- BEGIN WP PHP BLOG INSERT-->
<?php query_posts('category_name=campuses&showposts=2'); //Get 2 most recent posts from category with slug campuses ?>
<h2 class="cat"><?php if (have_posts()) single_cat_title("Latest from: ", true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); $do_not_duplicate[] = $post->ID; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php query_posts('category_name=programs&showposts=2'); //Get 2 most recent posts from category with slug programs?>
<?php if (have_posts()) single_cat_title('<h2 class="cat">Latest from: ', true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); if ( in_array( $post->ID, $do_not_duplicate ) ) continue; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php query_posts('category_name=online&showposts=2'); //Get 2 most recent posts from category with slug online?>
<?php if (have_posts()) single_cat_title('<h2 class="cat">Latest from: ', true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); if ( in_array( $post->ID, $do_not_duplicate ) ) continue; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php query_posts('category_name=service-applied-learning&showposts=2'); //Get 2 most recent posts from category with slug service-applied-learning ?>
<h2 class="cat"><?php if (have_posts()) single_cat_title("Latest from: ", true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); if ( in_array( $post->ID, $do_not_duplicate ) ) continue; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php if( function_exists( 'wp_pagenavi ' ) ) {
wp_pagenavi();
} else {
next_posts_link('Older Posts');
previous_posts_link(' | Newer Posts');
} ?>
</div>
</div>
<div class="sidebar-wrapper">
<?php get_sidebar(); ?>
</div>
<!--END WP PHP BLOG INSERT-->
Not sure if this will help but it looks as though you need to reset your query_posts(); to give it another clean run
After each <?php endwhile;?> you would add
<?php wp_reset_query(); ?>
https://codex.wordpress.org/Function_Reference/wp_reset_query
Quote:
wp_reset_query() restores the $wp_query and global post data to the original main query. This function should be called after query_posts(), if you must use that function. As noted in the examples below, it's heavily encouraged to use the pre_get_posts filter to alter query parameters before the query is made.
Calling wp_reset_query is not necessary after using WP_Query or get_posts as these don't modify the main query object. Instead use wp_reset_postdata.
I try to insert the value of a custom field in a background-image property ( therefore not in img src="..."').
In my category.php; I can display the custom field linked to each post; but when I put the variable in my style ( inline css ), wordpress always displays the same image.
The code :
<?php
// The Loop
while ( have_posts() ) : the_post(); ?>
<div class="interview">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php $photo_interview = get_field('photo_apercu', $post->ID); ?>
<?php echo $photo_interview; ?>
<?php the_title(); ?>
<style type="text/css">
.photo_interview {
background-image: url(<?php echo $photo_interview; ?>);
}
</style>
<div class="photo_interview"></div>
</a>
</div>
<?php endwhile;
else: ?>
<?php endif; ?>
Any idea ? My page here : http://www.overso.me/category/interview/
Your code should be this:
<?php
// The Loop
while ( have_posts() ) : the_post(); ?>
<div class="interview">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php $photo_interview = get_field('photo_apercu', $post->ID); ?>
<?php echo $photo_interview; ?>
<?php the_title(); ?>
<!-- You don't need style tags if you only want to set the background image -->
<div style="background-image: url(<?php echo $photo_interview; ?>)"></div>
</a>
</div>
<?php endwhile;
else: ?>
<?php endif; ?>
For what I can see you haven't set the global $post, so get_field do not know which is needed to display. in this case it will be better to use the_ID() to get the current post ID inside the while loop.
Cheers
In a custom Wordpress blog site designed by our marketing agency, I need to have the home page slider images open their URL links in a new window:
Here's the link variable code from slider.php:
<?php foreach ( $sliders as $slider ) : ?>
<li>
<?php if ( ! empty($slider['slider_url']) ) : ?><a href="<?php echo $slider['slider_url']; ?>"><?php endif; ?>
<img src="<?php echo $slider['slider_image']['url']; ?>" />
<?php if ( ! empty($slider['slider_url']) ) : ?></a><?php endif; ?>
</li>
<?php endforeach;?>
If your link is opening in the same window properly then you need to add target="blank". Make the following changes and enjoy.
replace this <a href="<?php echo $slider['slider_url']; ?>"> with <a href="<?php echo $slider['slider_url']; ?>" target="_blank">
Why are you double checking if not empty slider_url ?
Also, you should put the 'li' tag inside the if statement, because if the data are empty you don't want an empty 'li' tag to exist inside the slider.
Anyway, this should do what you asked for
<?php foreach ( $sliders as $slider ) : ?>
<?php if ( ! empty($slider['slider_url']) ): ?>
<li>
<a href="<?php echo $slider['slider_url']; ?>" target="_blank">
<img src="<?php echo $slider['slider_image']['url']; ?>" />
</a>
</li>
<?php endif; ?>
<?php endforeach;?>