There is an archive page and a singe page for Custom Post Type. On a single page, I display an image using ACF. How can I display it on the archive page?
// single post img
<div class = "speaker_img" >
<img src = "<?php the_field('speaker_img'); ?>" >
</div>
//archive page
<?php
$args = array(
'post_type' => 'speakers',);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) {
$loop->the_post(); ?>
<li><a href="#">
<div class="speaker-img">
<img src="/wp-content/uploads/2022/08/speaker-1.png"> </div>
<div class="speaker-name">
<p>
<?php the_title(); ?>
</p>
</div>
<div class="speaker-city">
<p>
Fribourg
</p>
</div>
</a></li>
<?php } ?>
Related
I have a custom post type. There are single and archive pages. The archive page displays cards with the team. Each card has a city. How can I, when creating a single team member, specify his city and display it on the archive page. This information is not on the single page, only archived.
<?php
$args = array(
'post_type' => 'speakers',
);
$loop = new WP_Query( $args );
while ($loop->have_posts()) :
$loop->the_post(); ?>
<li>
<?php if ( is_object_in_term( $loop->post->ID, 'countries', 'germany' ) ) {
echo '<div class="speaker-flag"><img src="/wp-content/uploads/2022/08/flag-for-germany.svg"></div>';
} else if ( is_object_in_term( $loop->post->ID, 'countries', 'switzerland' ) ) {
echo '<div class="speaker-flag"><img src="/wp-content/uploads/2022/08/flag-for-switzerland.svg"></div>';
} ?>
<a href="<?php echo esc_attr(the_permalink())?>">
<div class="speaker-img">
<?php $img_url = get_the_post_thumbnail_url( $loop->post->ID ); ?>
<img src="<?php echo $img_url ?>">
</div>
<div class="speaker-name">
<p>
<?php the_title(); ?>
</p>
</div>
<div class="speaker-city">
<p>
Fribourg
</p>
</div>
</a>
</li>
<?php endwhile;
wp_reset_query(); ?>
//single
<div class="speaker_info">
<div class="speaker_text">
<h4>
<?php the_title(); ?>
</h4>
<?php the_content(); ?>
</div>
<div class="speaker_img">
<img src="<?php the_field('speaker_img'); ?>">
</div>
</div>
I have built a slider using html and css. I want to integrate it into wordpress. My slider works fine. I have added the css and JS code in custom css and JS snippet plugin. While I am placing below php code inside my theme's function.php file. Now the first image gets displayed but others are not. Also slider is kind of messed up.
I hardcoded the html in functions.php file and the slider works fine. Can someone please check my php code below to see what am i doing wrong? (css and JS are working fine. im unable to integrate html in wordpress properly).
Also Im displaying the slider on page by putting below code inside a shortcode which is working.
I am using Custom Post Type UI plugin to get images. I have created 2 posts with featured images. Now im trying to get those two featured images into my slider.
<?php //functions.php file
function mySlider(){
$args = array(
'post_type' => array('mx-slides'),
'post_status' => array('publish'),
'posts_per_page' => array('-1'),
'order' => array('DESC'),
);
$query = new WP_Query( $args );
if($query-> have_posts()){
?>
<!-- Container for the image gallery -->
<div class="container">
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<?php while ( $query->have_posts() ) {
$query->the_post();
$img = the_post_thumbnail();
?>
<?php For($i=0;$i<=2;$i++) {
?>
<img src="<?php $img; ?>" style="width:100%;">
<?php } ?>
<?php } ?>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row">
<?php while ( $query->have_posts() ) {
$query->the_post();
$img = the_post_thumbnail();
?>
<?php // foreach ($img as $imgx)
For($i=0;$i<=5;$i++)
{
?>
<div class="column">
<img class="demo cursor" src="<?php echo $img; ?>" style="width:100%" onclick="currentSlide(1)" alt="No Image">
</div>
<?php } ?>
<?php } ?>
</div>
</div>
<?php
}
wp_reset_postdata();
}
add_shortcode('mx-slider', 'mySlider');
?>
?>
Please check with my fixed $arg. the format of posts_per_page is integer.
<?php //functions.php file
function mySlider() {
$args = array(
'post_type' => 'mx-slides',
'post_status' => 'publish',
'posts_per_page' => -1,
'order' => 'DESC',
);
$query = new WP_Query($args);
if ($query->have_posts()) {
?>
<!-- Container for the image gallery -->
<div class="container">
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<?php while ($query->have_posts()) {
$query->the_post();
$img = get_the_post_thumbnail_url();
?>
<?php for ($i = 0; $i <= 2; $i++) {
?>
<img src="<?php echo $img; ?>" style="width:100%;">
<?php } ?>
<?php } ?>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row">
<?php while ($query->have_posts()) {
$query->the_post();
$img = get_the_post_thumbnail_url();
?>
<?php // foreach ($img as $imgx)
for ($i = 0; $i <= 5; $i++) {
?>
<div class="column">
<img class="demo cursor" src="<?php echo $img; ?>" style="width:100%" onclick="currentSlide(1)" alt="No Image">
</div>
<?php } ?>
<?php } ?>
</div>
</div>
<?php
}
wp_reset_postdata();
}
add_shortcode('mx-slider', 'mySlider');
I implemented my Custom Post Type and I need to paginate all posts on more pages. I installed wp-pagenavi, but when I try to select for example page 2, URL changed, but content will stay on page one and nothing changed.
Custom Post Type is created in Administration mode, not through => register_post_type()
Did I implement something wrong in code?
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array('post_type' => 'inzeraty',
'order' => 'ASC',
'posts_per_page' => 2,
'paged' => $paged);
$wp_query = new WP_Query( $args );
while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="col-12">
<div class="cpt-news-block mb-3">
<div class="row">
<div class="col-12 col-sm-6 col-lg-12 col-xl-6">
<a class="zoom-picture-hover" href="<?php the_permalink()?>">
<div class="cpt-news-block-image picture">
<?php $images = acf_photo_gallery('fotka', $post->ID);
$image = $images[0];
$id = $image['id']; // The attachment id of the media
$title = $image['title']; //The title
$caption= $image['caption']; //The caption
$full_image_url= $image['full_image_url']; //Full size image url
//$full_image_url = acf_photo_gallery_resize_image($full_image_url, 762, 580); //Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
<img src="<?php echo $full_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
<?php if( !empty($url) ){ ?></a><?php } ?>
</div>
</a>
</div>
<div class="col-12 col-sm-6 col-lg-12 col-xl-6">
<h2 style="font-size: 20px;">
<a href="<?php the_permalink()?>">
<?php the_title()?>
</a>
</h2>
<p class="mb-3"><?php the_field('popis_inzeratu')?></p>
<a href="<?php the_permalink()?>" class="cpt-news-block-link link-read-more"> <?php
include get_stylesheet_directory() . '/assets/img/svg/icon_arrow.svg';
?>
<?php echo "More";?>
</a>
</div>
</div>
</div>
</div>
<?php endwhile;?>
<?php wp_pagenavi( array( 'query' => $wp_query ) ); ?>
URL for my page: http://tvorba-stranok.eu/ads/
Thanks for any advice...
install the plugin Custom Post Type UI to easily add custom post
types. You have to change a setting of this plugin to make it work.
When you set Rewrite to false (for your custom post type) it will
work.Flush the permalink settings.
Try following code. I have check using a minimum information.
<?php
// Must have wp_pagenavi plugin installed. Custom Post Type names can not clash with page names or 404's will occur on /page/#/ (Utilize Custom Rewrite Slug in CPT)
// The press release loop
$the_inzeraty = new WP_Query(array('post_type' => 'inzeraty','posts_per_page' => 10,'paged'=> get_query_var('paged') ));
// The Loop
while ($the_inzeraty->have_posts()) : $the_inzeraty->the_post();
?>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<p><a href="<?php echo the_permalink(); ?>" >Read More</a></p>
<?php endwhile; ?>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(array('query'=> $the_inzeraty));} ?>
<?php wp_reset_postdata();?>
I recently developed a Wordpress theme, this theme has little bit complex custom post type.
Below is my custom post query code. I would like kind of a else content whenever the request doesn't return any post. Its currently just blank.
I am not a PHP developer though, would someone give me a hand adding such a alternative content ?
Thank you.
<div class="front_page_deal_holder">
<?php
// get the currently queried taxonomy term, for use later in the template file
$term = get_queried_object();
//second query - posts
// Define the query
$args = array(
'post_type' => 'products',
'product_cat' => $term->slug
);
$query = new WP_Query( $args );
if ($query->have_posts()) {
// output the term name in a heading tag
echo'<h1>All Products about '. $term->name . '</h1>';
echo'<div class="row">';
// Start the Loop
while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-lg-3">
<a style="display:block;text-decoration:none" href="<?php the_permalink(); ?>">
<div class="single_front_sec">
<?php $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'post-image'); ?>
<img class="post_thumb_cus" src="<?php echo $featured_img_url ?>" alt="Product Image">
<h2 class="featured_product_heading">
<?php the_title(); ?>
</h2>
<span class="offer_note"><p><?php echo get_post_meta($post->ID, 'Offer Note', true); ?></p></span>
<div class="vew_d_button_holder">
<a class="view_d_button" href="<?php the_permalink(); ?>">View Details</a>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
<!-- row -->
<div class="my_Custom_pagination">
<?php wp_pagenavi( array( 'query' => $query ) ); ?>
</div>
<?php } // end of check for query having posts
// use reset postdata to restore orginal query
wp_reset_postdata();
?>
<?php include_once('top-categories.php'); ?>
<!--==== Top catogory section ====-->
<!-- front deal closed -->
</div>
elseif(!$query->have_posts()){//HTML here}
or
else{ //HTML here}
right after the end of check for your query , if you want to follow an OOP rule to make your code cleaner , move everything into a function inside function.php file and call the function there instead
<div class="front_page_deal_holder">
<?php
// get the currently queried taxonomy term, for use later in the template file
$term = get_queried_object();
$args = array(
'post_type' => 'products',
'product_cat' => $term->slug
);
$query = new WP_Query( $args );
if ($query->have_posts()) {
echo'<h1>All Products about '. $term->name . '</h1>';
echo'<div class="row">';
while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-lg-3">
<a style="display:block;text-decoration:none" href="<?php the_permalink(); ?>">
<div class="single_front_sec">
<?php $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'post-image'); ?>
<img class="post_thumb_cus" src="<?php echo $featured_img_url ?>" alt="Product Image">
<h2 class="featured_product_heading">
<?php the_title(); ?>
</h2>
<span class="offer_note"><p><?php echo get_post_meta($post->ID, 'Offer Note', true); ?></p></span>
<div class="vew_d_button_holder">
<a class="view_d_button" href="<?php the_permalink(); ?>">View Details</a>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
<div class="my_Custom_pagination">
<?php wp_pagenavi( array( 'query' => $query ) ); ?>
</div>
<?php }else{
// Add your code here for else part
}
wp_reset_postdata();
?>
<?php include_once('top-categories.php'); ?>
</div>
Here's the page template code I'm working with, defined into sections...
<?php
//* Template Name: Partnerships Archive
?>
<!-- Header =========================================== -->
<?php get_header(); ?>
<!-- Homepage Header Video =========================================== -->
<div class="subpage-video-sca">
<!-- VIDEO -->
<div class="subpage-desktop-vid-sca">
<video title="<?php the_field('seo_video_title'); ?>" autoplay loop muted playsinline>
<source src="<?php the_field('vimeo_link'); ?>" type="video/mp4">
</video>
</div>
<!-- GRAD-OVERLAY -->
<div class="subpage-overlay-image-sca">
</div>
<!-- OVERLAID TEXT -->
<div class="subpage-text-over-video-sca">
<div>
<h1><?php the_field('sub_page_title'); ?></h1>
<p><?php the_field('paragraph'); ?></p>
</div>
</div>
</div>
<!-- Breadcrumbs =========================================== -->
<?php echo do_shortcode("[breadcrumbs]"); ?>
<!-- Main Content =========================================== -->
<div class="wrap">
<?php
$args = array(
'post_type' => 'partnerships',
'orderby' => 'title',
'order' => 'ASC'
);
$the_query = new WP_Query( $args );
?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<a class="one-third partnership-block" href="<?php the_permalink(); ?>">
<img src="<?php the_field('logo'); ?>" alt="<?php the_title();?> graphic">
</a>
<?php $products_count = $the_query->current_post + 1; ?>
<?php if ( $products_count % 4 == 0): ?>
</div><div class="row">
<?php endif; ?>
<?php endwhile; endif; ?>
</div>
<!-- Testimonials =========================================== -->
<div class="wrap">
<div class="page-section-headers pt-testimonials-container txt-right">
<h1>WHAT <span class="red">OUR PARTNERS</span><br>HAVE TO SAY</h1>
</div>
<?php if( have_rows('testimonial') ): ?>
<div class="testimonial-slider-container slick-slider">
<?php while( have_rows('testimonial') ): the_row();
// vars
$text = get_sub_field('testimonial_text');
$client = get_sub_field('client_name');
$company = get_sub_field('client_company');
?>
<div class="testimonial-slider-single">
<p><?php echo $text; ?></p>
<h2><?php echo $client; ?></h2>
<h3><?php echo $company; ?><h3>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
The code in the main content area is pulling through custom post types I have.
The code in the Testimonials area is pulling through data from an ACF Repeater field for this page specifically.
They both work independently but when I have them both on the page at the same time, the testimonials doesn't pull through.
That said, Ive just noticed that when I put the testimonials first and the main content after, they both work!!
Can anyone help? Is there something I haven't closed properly in the Main content or something? I don't get it...
It's wordpress, using Genesis Framework, latest versions of both. The page is here: http://staging.seedcreativeacademy.co.uk/partnerships/
add wp_reset_postdata(),after while :
<div class="wrap">
<?php
$args = array(
'post_type' => 'partnerships',
'orderby' => 'title',
'order' => 'ASC'
);
$the_query = new WP_Query( $args );
?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<a class="one-third partnership-block" href="<?php the_permalink(); ?>">
<img src="<?php the_field('logo'); ?>" alt="<?php the_title();?> graphic">
</a>
<?php $products_count = $the_query->current_post + 1; ?>
<?php if ( $products_count % 4 == 0): ?>
</div><div class="row">
<?php endif; ?>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>