I have a page which echos about 10 items. I would like them all to have a different background image on hover.
I'm guessing I would need to have my loop in my <head> tag so that I can apply a background image.
Here is my loop:
<?php
// get background images for the services page
$post = get_field('related_services');
if( $posts ): ?>
<style>
<?php foreach( $posts as $post): ?>
<?php setup_postdata($post); ?>
.sector-box[style]::after {
background-image: url("<?php echo get_template_directory_uri(); ?>/images/creative-bg-hover.jpg");
color:#<?php the_field( 'colour' ); ?>;
}
<?php endforeach; ?>
</style>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
I can't get it to echo a style for each..
Would I also need to apply an ID to each box? So that it knows which box to apply the background image to?
here is my html:
<?php
$posts = get_field('related_services');
if( $posts ): ?>
<div class="container">
<?php foreach( $posts as $post): ?>
<?php setup_postdata($post); ?>
<div class="sector-box reveal" style="background-color:<?php the_field( 'colour' ); ?>;">
<div class="sector-title">
<?php the_title( '' ); ?>
</div>
</div>
<!--Close Single Service box-->
<?php endforeach; ?>
</div>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<!--Close Service Sector Boxes-->
Use the following:
<?php echo get_permalink($post->ID); ?>
<?php echo get_the_title( $post->ID ); ?>
<?php echo get_field('colour', $post->ID ); ?>
and remove function
<?php setup_postdata($post); ?>
<?php wp_reset_postdata(); ?>
Related
I'm having a problem with a relationship loop with Advanced Custom Fields in Wordpress.
The first post is shown perfect, but it should execute one more post, but it doesn't.
Can anyone see what's wrong with my code?
<?php $posts = get_field('produkter'); if( $posts ): ?>
<?php foreach( $posts as $post): ?>
<?php setup_postdata($post); ?>
<div class="produkt">
<?php the_title(); ?>
<?php the_content(); ?>
<?php $posts = get_field('fil'); if( $posts ): ?>
<div id="filer">
<div id="topsection" class="laddahem"><div class="topborder"></div>
<h2>Ladda hem</h2>
</div><!-- #top -->
<div class="filhuvud">
<div class="filtyp">Filtyp</div>
<div class="fildatum">Datum</div>
<div class="filstorlek">Filstorlek</div>
</div><!-- .filhuvud -->
<div class="filholder">
<?php foreach( $posts as $post): ?>
<?php setup_postdata($post); ?>
<?php $attachment_id = get_field('filen');
$url = wp_get_attachment_url( $attachment_id );
$title = get_the_title( $attachment_id );
// hämta filstorleken
$filesize = filesize( get_attached_file( $attachment_id ) );
$filesize = size_format($filesize, 1);
$filetype = strtolower(pathinfo($url, PATHINFO_EXTENSION)); ?>
<div class="fil <?php echo $filetype; ?>">
<div class="filtyp"><a target="_blank" href="<?php echo $url; ?>" ><?php the_title(); ?></a></div>
<div class="fildatum"><?php the_time('Y-m-d'); ?></div>
<div class="filstorlek"><?php echo $filesize; ?></div>
</div><!-- .fil -->
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div><!-- .filholder -->
</div><!-- #filer -->
<?php endif; ?>
</div><!-- .produkt -->
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
Your issue is that you're overwriting the $posts variable within the loop, after you've defined it outside of the loop.
The solution is to rename your second $posts variable to something else, so that your overarching loops look like this:
<?php $posts = get_field('produkter'); ?>
<?php if( $posts ): ?>
<?php foreach( $posts as $post): ?>
<?php $files = get_field('fil'); //RENAMED THIS VARIABLE?>
<?php if( $files ): ?>
<?php foreach( $files as $file): ?>
<?php //Main body of markup and other fun stuff ?>
<?php endforeach; //end $files foreach ?>
<?php endif; //end $files if ?>
<?php endforeach; //end $posts foreach ?>
<?php endif; //end $posts if ?>
The solution was to change the other foreach loop to this:
<?php $files = get_field('fil'); if( $files ): ?>
<?php foreach( $files as $post): ?>
<?php setup_postdata($post); ?>
That made it work exactly how I wanted it.
How should look my code in order to display a preview of a categories with main main page?
Now its is
<?php $posts = get_posts ("category=2&orderby=date&numberposts=3"); ?>
<?php if ($posts) : ?>
<?php foreach ($posts as $post) : setup_postdata ($post); ?>
<div>
<?php the_title(); ?>
</div>
<?php endforeach; ?>
<?php endif; ?>
and below this
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<div class="pageContainer"><?php the_content(); ?></div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?><div>Sorry, posts are not found.</div>
<?php endif; ?>
This leads to ignore second part...
Sorry for my english.
<?php
// Category posts
$posts = get_posts("category=2&orderby=date&numberposts=3");
if ($posts){
foreach ($posts as $article){
echo '<div><a href="'.get_permalink($article->ID) ?>" rel="bookmark">'.
$article->post_title.'</a></div>';
}
}
// Current page content
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<div class="pageContainer">
<?php the_content(); ?>
</div>
<?php endwhile;
else:
echo '<div>Sorry, posts are not found.</div>';
endif;
?>
I'm still pretty new to PHP, and I'm having trouble getting this to work. What I want to do, is make the slide linked (if link is available). Otherwise, print the post thumbnail without the
Here's my code so far:
<?php // START SLIDER ?>
<div class="slider">
<ul class="rslides">
<?php $args = array( 'posts_per_page' => 0, 'post_type' => 'slide'); $alert = new WP_Query( $args ); ?>
<?php if( $alert->have_posts() ) { while( $alert->have_posts() ) { $alert->the_post(); ?>
<li><?php the_post_thumbnail('full'); ?><div class="caption"><p class="captiontitle"><?php the_title(); ?></p><p class="caption"><?php the_content(); ?></p></div></li>
<?php } } ?>
</ul>
</div>
<?php wp_reset_query(); ?>
<?php // END SLIDER ?>
I've done this before using the WP Custom fields, but I'm not sure how to apply it to my custom post type (called slider). Here's what I did for my Custom Field script:
<?php $slider_url = get_post_meta($post->ID, 'Slider_URL', true);
if ($slider_url) { ?>
LINKED SLIDE HERE
<?php } else { ?>
UNLINKED SLIDE HERE
<?php } ?>
<?php endwhile; ?>
<?php endif; // have_posts() ?>
Here's what I tried (when combining the two), but there's an error somewhere:
<?php // START SLIDER ?>
<div class="slider">
<ul class="rslides">
<?php $args = array( 'posts_per_page' => 0, 'post_type' => 'slide'); $alert = new WP_Query( $args ); ?>
<?php if( $alert->have_posts() ) { while( $alert->have_posts() ) { $alert->the_post(); ?>
<?php $slide_url = get_post_meta($post->ID, 'Slide_URL', true);
if ($slide_url) { ?>
<li><?php the_post_thumbnail('full'); ?><div class="caption"><p class="captiontitle"><?php the_title(); ?></p><p class="caption"><?php the_content(); ?></p></div></li>
<?php } else { ?>
<li><?php the_post_thumbnail('full'); ?><div class="caption"><p class="captiontitle"><?php the_title(); ?></p><p class="caption"><?php the_content(); ?></p></div></li>
<?php } } ?>
<?php endwhile; ?>
<?php endif; // have_posts() ?>
</ul>
</div>
<?php wp_reset_query(); ?>
<?php // END SLIDER ?>
If I'm correct in thinking, you just want to check if the link is there, before outputting, otherwise, just show the image. Try the following:
<?php // START SLIDER ?>
<div class="slider">
<ul class="rslides">
<?php $args = array( 'posts_per_page' => 0, 'post_type' => 'slide'); $alert = new WP_Query( $args ); ?>
<?php if( $alert->have_posts() ) { while( $alert->have_posts() ) { $alert->the_post(); ?>
<!-- Get a link -->
<?php $theLink = get_post_meta($post->ID, "_location", true); ?>
<li>
<!-- Check for a link -->
<?php if($theLink != ''): ?>
<a href="<?php echo $theLink; ?>" title="More Info">
<?php endif; ?>
<?php the_post_thumbnail('full'); ?>
<div class="caption">
<p class="captiontitle">
<?php the_title(); ?>
</p>
<p class="caption">
<?php the_content(); ?>
</p>
</div>
<!-- Close the link -->
<?php if($theLink != ''): ?>
</a>
<?php endif; ?>
</li>
<?php } } ?>
</ul>
</div>
<?php wp_reset_query(); ?>
<?php // END SLIDER ?>
I have a page that displays certain posts from a certain category, in this case category 33 (Tutorials) and it currently outputs the title, post excerpt and permalink to the posts in this category:
<?php $top_query = new WP_Query('cat=33'); ?>
<?php while($top_query->have_posts()) : $top_query->the_post(); ?>
How Can I specify that the posts returned should only be ones that have comments enabled?. I have tried wrapping it in:
<?php if(comments_open()) : ?>
Hover that needs to be used within the loop :(
Thanks in advance
try this one
<?php if( have_posts() ): ?>
<?php while( have_posts() ): the_post();?>
<?php if(comments_open()){ ?>
<div class="news-row">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<div class="newsimagebox">
<?php //$feat_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),'thumbnail');
$images = the_post_thumbnail();?>
<?php echo $images;?>
</div>
<?php endif; ?>
<div class="news-content">
<h5><?php the_title(); ?></h5>
<p><?php the_excerpt();?></p>
<div class="readmore">Read More</div>
</div>
</div>
<?php } ?>
<?php endwhile;?>
<?php endif; //wp_reset_query(); ?>
Thanks
i'm making a multilanguage website which uses the advanced custom fields relationship plugin. I'm reading out employers and if i read em out in the site's native language i have zero problems, however when i try to read them out in another language i get back a empty array.
Do any of you guys know what i can do?
<?php
$field = get_post_meta( get_the_id() );
$posts = get_field('field_81');
echo '<!--';
echo 'test ';
var_dump( $field );
var_dump( $posts );
echo '-->';
?>
<?php
if (ICL_LANGUAGE_CODE == 'en'):
?>
<?php
$fields = $field['medewerkers'];
?>
<?php
$posts = $fields;
?>
<?php
endif;
?>
<?php
if ($posts):
?>
<?php
if (ICL_LANGUAGE_CODE == 'nl'):
?>
<h3 class="titelmedewerkers">Medewerkers</h3>
<?php
elseif (ICL_LANGUAGE_CODE == 'en'):
?>
<h3 class="titelmedewerkers">Employees</h3>
<?php
elseif (ICL_LANGUAGE_CODE == 'fr'):
?>
<h3 class="titelmedewerkers">Employes</h3>
<?php
else:
?>
<h3 class="titelmedewerkers">Medewerkers</h3>
<?php
endif;
?>
<ul class="medewerkers">
<?php
foreach ($posts as $post): // variable must be called $post (IMPORTANT)
?>
<?php
setup_postdata($post);
?>
<li class="shadow">
<strong><?php
the_title();
?></strong><br />
<?php
if (get_field('foto')):
?>
<?php
$attachment_id = get_field('foto');
$size = "medium";
$image = wp_get_attachment_image_src($attachment_id, $size);
?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" /><br />
<?php
endif;
?>
<?php
if (get_field('afdeling')):
?>
<?php
the_field('afdeling');
?><br />
<?php
endif;
?>
<?php
if (get_field('titel')):
?>
<?php
the_field('titel');
?><br />
<?php
endif;
?>
<?php
if (get_field('tel')):
?>
<?php the_field('tel'); ?><br />
<?php
endif;
?>
</li>
<?php
endforeach;
?>
<?php
wp_reset_postdata();
?>
</ul>
<?php
endif;
?>
<?php
wp_reset_postdata();
?>
this part:
<?php
if (ICL_LANGUAGE_CODE == 'en'):
?>
<?php
$fields = $field['medewerkers'];
?>
<?php
$posts = $fields;
?>
<?php
endif;
?>
creates $post only when en, not surprising that you don't have it in other languages