I have a problem with woocommerce. I'm using the woocommerce_before_main_content hook to add a .jumbotron page cover. I was able to display the content like page title and categories that needs to appear on the background image, but the image that is displayed is the worng one, I don't know why but wordpress will show the first product image thumbnail and the image I've selected as featured inside the shop page of woocommerce is different. Is there a solution?
I'm using this code:
function btheme_woocommerce_before_main_content()
{
if( has_post_thumbnail() ):
?>
<div class="jumbotron jumbotron-fluid shop-page-cover" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');">
<!-- <div class="parallax" data-parallax-image></div> -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h1 class=""><?php woocommerce_page_title(); ?></h1>
<?php $categories = get_terms( array('taxonomy' => 'product_cat') ); ?>
<?php foreach( $categories as $category ): ?>
<h4 class="category-name d-inline"><?php echo $category->name; ?></h4>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<div class="container-fluid content-wrapper" id="uptheme-woocommece-wrapper">
<?php
}
add_action( 'woocommerce_before_main_content', 'btheme_woocommerce_before_main_content', 10 );
first you need to get post thumbnail by id
<?php
$shop_page_id = wc_get_page_id('shop');
function btheme_woocommerce_before_main_content()
{
if( has_post_thumbnail($shop_page_id) ):
?>
<div class="jumbotron jumbotron-fluid shop-page-cover" style="background-image:url('<?php echo get_the_post_thumbnail_url($shop_page_id,'full'); ?>');">
<!-- <div class="parallax" data-parallax-image></div> -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h1 class=""><?php woocommerce_page_title(); ?></h1>
<?php $categories = get_terms( array('taxonomy' => 'product_cat') ); ?>
<?php foreach( $categories as $category ): ?>
<h4 class="category-name d-inline"><?php echo $category->name; ?></h4>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<div class="container-fluid content-wrapper" id="uptheme-woocommece-wrapper">
<?php
}
add_action( 'woocommerce_before_main_content', 'btheme_woocommerce_before_main_content', 99 );
Related
I'm trying to add a custom field to my Wordpress page but it's not working. When I set its value nothing happens on the HTML.
I read the Wordpress documentation and I tried to follow the steps there but something went wrong.
Everything else it's working, like the_title(), the_post_thumbnail()...it's just this custom field that I it's not Working :(
https://wordpress.org/support/article/custom-fields/
https://codex.wordpress.org/Function_Reference/register_post_type
Custom Field:
Functions.php
$supports = array (
'title',
'editor',
'thumbnail',
'custom-fields'
);
HTML
<?php
$args = array ('post_type' => 'produtos');
$loop = new WP_Query( $args );
if ($loop->have_posts() ) {
while ($loop->have_posts() ) {
$loop->the_post();
?>
<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-md-3 col-12">
<div class="produtos-head">
<div class="img-fluid produtos-img">
<?php the_post_thumbnail(); ?>
</div>
</div>
<div class="produtos-titulo d-flex align-items-center justify-content-center">
<?php the_title(); ?>
</div>
<div class="preco-original"> Price:R$
<?php $original_price = get_post_meta($post->ID, 'original_price', true);
if($original_price){ ?>
<p>
<? echo $original_price; ?>
</p>
<?php
}else{
}
?>
</div>
<div class="preco-promocional"> <span> Sale: </span>
<span class="preco-promocional-number"> $ </span>
</div>
<button class="btn-vendedor"> Contact </button>
</div>
<?php
}
}
?>
</div>
</div>
use get_the_ID() instead of $post->ID and need to change <? echo $original_price; ?> to <?php echo $original_price; ?>
The PHP code seems to be blocking or interfering with my advanced custom fields as it doesn't display unless I remove the PHP code then it does. I can't figure out where the issue is.
Any help is much appreciated.
PHP
<?php if(strpos($_SERVER['REQUEST_URI'], 'gaeilge') !== false) {
$newsCat = 'cat=5,7&showposts=3';
} else {
$newsCat = 'cat=6,8&showposts=3';
}; ?>
Advanced Custom Fields
<div class="carousel-item active">
<div class="row py-5">
<?php if( have_rows('block') ): ?>
<?php while( have_rows('block') ): the_row();
// vars
$content = get_sub_field('content');
?>
<div class="col-lg-4 col-md-4">
<?php if(strpos($_SERVER['REQUEST_URI'], 'gaeilge') !== false) { ?> <!--Check if url contains the word "items" -->
<h2 class="fw-b c-blue mt-0">Ár bhFís</h2>
<?php } else { ?>
<h2 class="fw-b c-blue mt-0">Our Vision</h2>
<?php } ?>
</div>
<div class="col-lg-8 col-md-8">
<p class="c-blue mb-0"><?php echo $content; ?></p>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
Fixed it by just changing how News articles where added.
<div class="row pt-4 pb-3">
<?php
// args
$args = array(
'posts_per_page' => -1,
'post_type' => 'post'
);
// query
$the_query = new WP_Query( $args );
?>
<?php if( $the_query->have_posts() ): ?>
<?php while( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class="col-lg-4 col-md-4 col-sm-6 mb-5">
<div class="w-100 mb-2 px-2">
<img class="w-100" src="<?php $featimage = the_post_thumbnail_url('news-image'); ?>" alt="">
<p class="text-muted mt-4 mb-2"><?php echo get_the_date('dS M, Y'); ?></p>
<h3 class="c-blue"><?php the_title(); ?></h3>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); // Restore global post data stomped by the_post(). ?>
</div>
to learn wordpress development, I'm building a wordpress theme from scratch .
Now i want to add pagination on my category page but the problem is:
when i click on older-post-link the url change from "http://localhost/wordpress4/category/bloc1/" to "http://localhost/wordpress4/category/bloc1/page/2/" but it take me to a blank page instead of showing the other posts.
this is the code on the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
if(have_posts()) : while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-6 text-left">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-6 text-right">
<?php previous_posts_link('Newer post >>'); ?>
</div>
<?php
endif;
?>
</div>
</div>
<?php get_footer(); ?>
I noticed that if i add the code below to my index.php the pagination work also on the category page.
but the second category page("http://localhost/wordpress4/category/bloc1/page/2/") will take the markup of index.php so the posts will not be in a grid format like the first category page.
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
also on the category page the older post-link show up between rows instead of showing at the bottom of the pages.
finally this is the code on my index.php
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<?php
if(have_posts()):
while(have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<h3><?php the_title(); ?></h3>
<small><?php the_category(); ?></small>
</a>
<p><?php the_content(); ?></p>
<hr/>
<?php endwhile;
endif;
?>
</div>
<div class="col-xs-12 col-sm-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Thank You.
Use this code, may be it will solve your problem
<?php
// the query to set the posts per page to 3
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 3, 'paged' => $paged );
query_posts($args); ?>
<!-- the loop -->
<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
<!-- rest of the loop -->
<!-- the title, the content etc.. -->
<?php endwhile; ?>
<!-- pagination -->
<div class="row">
<div class="col-xs-12>"
<div class="col-xs-6 text-left"><?php next_posts_link(); ?></div>
<div class="col-xs-6 text-right"><?php previous_posts_link(); ?></div>
</div>
</div>
<?php else : ?>
<!-- No posts found -->
<?php endif; wp_reset_postdata(); ?>
for more details, check this link https://codex.wordpress.org/Pagination
After a lot of searching i was able to find a solution .
The problem was that the The "Blog pages show at most" in the wordpress reading settings was interfering with the "posts_per_page=4" that i declared through the query_posts().
The solution :
I deleted the "query_posts()" because it is best to use the WP_Query() or the pre_get_posts filter.
for me even with using wp_query i couldnt get the pagination to work so i tried using the pre_get_posts filter and it worked .
so in the category.php i deleted the query_posts and used just the normal loop.
this is my new code in the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
if(have_posts()) :
while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-12 text-left ">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-12 text-right ">
<?php previous_posts_link('Newer post >>'); ?>
</div>
</div>
<?php
endif;
?>
</div>
<?php get_footer(); ?>
Then I added the pre_get_posts action on my function.php
this is the code:
add_action( 'pre_get_posts', function ( $q )
{
if ( !is_admin() // Very important, otherwise back end queries will be affected as well
&& $q->is_main_query() // Very important, we just need to modify the main query
&& $q->is_category() // Only target category pages
) {
$q->set( 'posts_per_page', 2 );
}
});
I hope my answer will help someone who have the same problem i had even if my answer is not so well explained.
for more info search for something like this:
using pagination with the wp_query
using pre_get_posts to set pagination for a custom page.
It will be so nice if a developer could explain my solution in more details and give us more information about using pre_get_posts to set pagination for a custom page.
in my category.php template i want to show the latest entries only if are of the same category, and when i execute the custom query shows every entries.
This is my code, how could i fix the error?
Code:
<?php
/**
* The template for displaying all single posts.
*
* #package Mundo Geek
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main-single" class="site-main" role="main">
<div id="row">
<?php
$ultimas = new WP_Query();
$ultimas -> query('showposts=3');
while($ultimas -> have_posts()) : $ultimas ->the_post();
?>
<div class="category_page_last col-xs-12 col-sm-4">
<a href="<?php the_permalink(); ?>">
<div class="thumb">
<?php
if(has_post_thumbnail()){
//echo '<img src="'.$url.'"/>';x
$backgroundImageUrl = "('".wp_get_attachment_url( get_post_thumbnail_id($post->ID) )."')";
echo '<div class="category_page_img-background" style="background-image: url'.$backgroundImageUrl.'"></div>';}
else{
$default_thumb = "('".get_bloginfo( 'stylesheet_directory' )."/images/default-thumbnail.jpg')";
echo '<div class="category_page_img-background" style="background-image: url'.$default_thumb.'"></div>';
}
?>
<div class="encimaimagen"></div>
</div>
<div class="meta"><h1><?php the_title(); ?></h1></div>
</a>
</div>
<?php endwhile; ?>
</div>
<div class="row">
<div class="col-sm-8">
<section id="category_page">
<?php
$ultimas = new WP_Query();
$ultimas -> query('showposts=40');
while($ultimas -> have_posts()) : $ultimas ->the_post();
?>
<article class="col-xs-12 archivo row">
<a href="<?php the_permalink(); ?>">
<h1><?php the_title(); ?></h1>
</a>
<div class="hidden-xs col-sm-4 col-md-3"><?php the_post_thumbnail( 'thumbnail' ); ?></div>
<div class="col-sm-8 col-md-9"><?php the_excerpt(); wp_reset_postdata();?></div>
</article>
<?php endwhile; ?>
</section>
</div>
<div class="col-sm-4 hidden-xs"><?php get_sidebar(); ?></div>
<div class="index_archivo col-xs-12">
<a href="<?php $url = home_url( $path = 'index.php/archivo', $scheme = relative ); echo $url;?>">
<h2>Ver todas las entradas</h2>
</a>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_footer(); ?>
Thank you guys!
To display latest posts from a certain category, your code needs to look something like this:
<ul>
<?php
global $post;
$myposts = get_posts('numberposts=5&offset=1&category=3');
foreach($myposts as $post) :
setup_postdata($post);
?>
<li><?php the_title(); ?> </li>
<?php endforeach; ?>
</ul>
Source: https://wordpress.org/support/topic/recent-posts-from-specific-category
I have a custom post type set up called TESTIMONIALS and two CPT categories set up which are CLIENT TESTIMONALS & CLINIC TESTIMONIALS
I am trying to display only the posts from the CLIENT TESTIMONALS CPT category.
What would I need to add to the below to achieve this?
<div role="tabpanel" class="tab-pane fade" id="profile">
<?php query_posts('post_type=testimonials'); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php endwhile; // end of the loop. ?>
</div>
You can use something like this.
<?php
$type = 'testimonials';
$args=array(
'post_type' => $type,
'category'=>'CPT',
'post_status' => 'publish'
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php
endwhile;
}
?>