I'm creating a portfolio which needs to display and thumbnail, title and link to all other portfolio pages using a specific template.
This is what I have so far, which manages to retrieve the page title and the featured image just fine. I'm struggling to retrieve the link to that page as the_permalink() just returns the link of the page you're currently on.
<?php foreach ( $builtins as $page ) : ?>
<div class="fw-col-xs-6 fw-col-md-3 remove-column-padding ">
<div class="casestudy">
<?php if (has_post_thumbnail( $page->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'single-post-thumbnail' ); ?>
<div class="block" style="background: url('<?php echo $image[0]; ?>')">
<h3>
<a href="<?php echo apply_filters( 'the_permalink', $page->post_permalink, $page->ID ); ?>" title="<?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?>">
<?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?>
<span></span>
</a>
</h3>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
Thanks Junaid,
I figured out the answer, get_permalink($page->ID); did the trick!
Related
Here is a piece of my code.
<div class="thim-course-grid">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="lpr_course <?php echo 'course-grid-' . $columns; ?>">
**<div class="course-item" onmouseover="hide_card('<?= get_the_ID()?>');" onmouseout="show_card('<?= get_the_ID()?>');">**
<div class="course-thumbnail" id="course-thumbnail-<?= get_the_ID()?>">
<a href="<?php echo esc_url( get_the_permalink( get_the_ID() ) ); ?>">
<?php echo thim_get_feature_image( get_post_thumbnail_id( get_the_ID() ), 'full', $thumb_w, $thumb_h, get_the_title() ); ?>
</a>
<?php do_action( 'thim_inner_thumbnail_course' ); ?>
<!-- <a class="course-readmore"
href="<?php echo esc_url( get_the_permalink( get_the_ID() ) ); ?>"><?php echo esc_html__( 'Read More', 'eduma' ); ?></a> -->
</div>
<div class="thim-course-content" id="thim-course-content-<?= get_the_ID()?>">
<?php learn_press_courses_loop_item_instructor();
the_title( sprintf( '<h2 class="course-title">', esc_url( get_permalink() ) ), '</h2>' );
?>
<?php if ( class_exists( 'LP_Addon_Coming_Soon_Courses_Preload' ) && learn_press_is_coming_soon( get_the_ID() ) ): ?>
<div class="message message-warning learn-press-message coming-soon-message">
<?php esc_html_e( 'Coming soon', 'eduma' ) ?>
</div>
<?php else: ?>
<div class="course-meta">
<?php learn_press_courses_loop_item_instructor(); ?>
<?php thim_course_ratings(); ?>
<?php learn_press_courses_loop_item_students(); ?>
<?php thim_course_ratings_count(); ?>
<?php learn_press_courses_loop_item_price(); ?>
</div>
<?php learn_press_courses_loop_item_price(); ?>
<?php endif; ?>
<div class="course-readmore">
<?php esc_html_e( 'Read More', 'eduma' ); ?>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
</div>
On the 4th line, I wanted to truncate the course maps on mouse over, so that all the part of the map at the bottom of the image disappears, only to reappear when there is no more flyover. The result obtained is different from what I wanted.
I put the link to the site to see: www.formatine.com
And here is the JS part that I added as well.
function hide_card(id) {
document.getElementById('thim-course-content-'+id).style.display = 'none';
document.getElementById('course-thumbnail-'+id).innerHTML = "<?= wp_oembed_get( $media_intro ) ?>";
}
function show_card(id) {
document.getElementById('thim-course-content-'+id).style.display = 'block';
document.getElementById('course-thumbnail-'+id).style.display = 'block';
}
Do you have an idea for me please? Thank you.
Don't use "display: none" because once it has it, the element "disappears".
It is better for you, to then, if you want to include a video instead of the card, for example, do it by having both, one behind the other by default, if you "mouseover" display the code INSIDE of one, and on "mouseout", display the other.
<div class="mycard">
<div class="myinfoforthevideo"></div>
<div class="myvideo"></div>
</div>
You controll the events on mycard class, and hide myinfoforthevideo by default, on "mouseover", hide it and show then myvideo, and on "mouseout" hide myvideo and show myinfoforthevideo
You're hidding everything so now since its a width: 0/height: 0 let's say, you don't have any place to do the mouseover now.
Extra:
You can try flip cards as another option, like this:
https://codepen.io/Aoyue/pen/pLJqgE
Been looking for a solution for quite some time now, hopefully someone can help.
The problem:
I'm trying to make a custom product loop in a WP Bakery block (so far so good). The product loop will be added to the frontpage. I've managed to include a quantity field which worked well until I wanted to make it work on AJAX add to cart. Once I made it AJAX it only adds 1 product to cart (as if it doesn't read input from quantity). It seems that everything is working fine when on the product page, so maybe something has to be defined in the WP_Query?
The loop to be displayed on frontpage:
<?php
// Setup your custom query
$args = array( 'post_type' => 'product', 'orderby' => 'date' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div class="product-content-containers">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>">
<div id="mobclear" style="background-image: url(<?php echo get_the_post_thumbnail_url($loop->post->ID);?>);" class="product-right-content">
</div>
</a>
<div id="descclear" class="product-left-content">
<h3 class="h5">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>">
<?php the_title(); ?>
</a>
</h3>
<p><?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?></p>
<div>
<p><span class="woocommerce-Price-amount amount customamount"><?php echo $product->get_price(); ?> <span class="woocommerce-Price-currencySymbol"><?php echo get_woocommerce_currency_symbol(); ?></span> pr. stk.</span></p>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>"
class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button>
</form>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); // Remember to reset ?>
You had some invalid use of $loop->post->ID which within the loop when you've declared the_post() would be simply $post->ID
Also, $product->id should be $product->get_ID() if you're using the latest WC version.
This below is working in my test.
// Setup your custom query
$args = array( 'post_type' => 'product', 'orderby' => 'date' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product;
?>
<div class="product-content-containers">
<a href="<?php echo get_permalink( $post->ID ) ?>">
<div id="mobclear" style="background-image: url(<?php echo get_the_post_thumbnail_url($post->ID);?>);" class="product-right-content">
</div>
</a>
<div id="descclear" class="product-left-content">
<h3 class="h5">
<a href="<?php echo get_permalink( $post->ID ) ?>">
<?php the_title(); ?>
</a>
</h3>
<p><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></p>
<div>
<p><span class="woocommerce-Price-amount amount customamount"><?php echo $product->get_price(); ?> <span class="woocommerce-Price-currencySymbol"><?php echo get_woocommerce_currency_symbol(); ?></span> pr. stk.</span></p>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" data-quantity="1" data-product_id="<?php echo $product->get_ID(); ?>"
class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button>
</form>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); // Remember to reset ?>
<script type="text/javascript">
jQuery('input[name="quantity"]').change(function(){
var q = jQuery(this).val();
jQuery('input[name="quantity"]').parent().next().attr('data-quantity', q);
});
</script>
I fixed all woocommerce deprecated functions except one,maybe someone can help me out.I am no professional. Thank You.
The only plugin activated is woocommerce so there is no plugin conflict problem.The wordpress is up to date so is woocommerce.
I am getting this notice,and from what I see the problem comes from page.php.
Notice: post was called incorrectly. Product properties should not be accessed directly. Backtrace: require('wp-blog-header.php'), require_once('wp-includes/template-loader.php'), include('/themes/barbuto/page.php'), WC_Abstract_Legacy_Product->__get, wc_doing_it_wrong Please see Debugging in WordPress for more information. (This message was added in version 3.0.) in /home/public_html/dev/wp-includes/functions.php on line 4139
This is the code from page.php file.
get_header(); ?>
<?php if(is_front_page()){ ?>
<!-- start of banner -->
<div class="banner" style="background: url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>') no-repeat scroll center center transparent;">
</div>
<!-- end of banner -->
<div class="wrapper">
<ul class="products">
<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 1, 'meta_key' => '_featured', 'meta_value' => 'yes', );
$loop = new WP_Query( $args );
echo "<h1>"; count($loop); echo "</h1>";
$i=1;
while ( $loop->have_posts() ) : $loop->the_post(); global $product; global $woocommerce; ?>
<div class="product_featured_img <?php echo $loop->post->ID; ?> <?php if(($loop->post->ID == '405') || ($loop->post->ID == '72')){ echo 'bottol';} ?>">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php woocommerce_show_product_sale_flash( $post, $product ); ?>
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'large'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" />'; ?>
</a>
</div>
<div class="bottol_text product_featured_content">
<h3>
<a href="<?php echo get_permalink( $loop->post->ID ) ?>"
title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php the_title(); ?>
</a>
</h3>
<p>
<?php
//$text_length = count($product->post->post_content);
//if($text_length > 1000){
// echo substr($product->post->post_content,0,2000).'...';
/*} else { */
echo $product->post->post_content;
//}
?>
</p>
<?php if ( is_user_logged_in() ) { ?>
<p class="price"><?php echo $product->get_price_html(); ?></p>
<div class="add_box">
<a class="add_to_cart_button button product_type_simple" data-product_sku="<?php echo $product->get_sku(); ?>" data-product_id="<?php echo $loop->post->ID;?>" rel="nofollow" href="<?php echo $product->add_to_cart_url(); ?>" > add to cart </a>
</div>
<?php }else{echo '' . __('PLEASE LOGIN/REGISTER TO VIEW PRICES', 'theme_name') . '';}?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul><!--/.products-->
</div>
Replace this line echo $product->post->post_content; with echo $loop->post->post_content;
I have a loop that gets the title, content, and link of all pages that are a child of the current page. Everything is working except I don't know how to get the featured image url for these pages so that I can use it as a background image. You can see in the code where I have commented where I am trying to get the url of the featured image.
Here is my code:
<?php
$mypages = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'menu_order', 'sort_order' => 'asc' ) );
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content ) // Check for empty page
continue;
$content = apply_filters( 'the_content', $content );
$trimmed_content = wp_trim_words( $content, 14, "..." );
?>
<div class="service-box block-grid-item">
<div class="row">
<div class="col-xs-6 col service-image">
<!-- This is where I am trying to get the featured image url -->
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<a href="<?php echo get_page_link( $page->ID ); ?>" style="background-image: url(<?php echo '$feat_image'; ?>)"</a>
</div>
<div class="col-xs-6 col service-body">
<a href="<?php echo get_page_link( $page->ID ); ?>">
<span class="service-title"><?php echo $page->post_title; ?></span>
<span class="service-text"><?php echo $trimmed_content; ?></span>
<span class="service-link">Read more</span>
</a>
</div>
</div>
</div>
<?php }
?>
You're close, but you should be using wp_get_attachment_image_src(), and should remove the quotes from your variable when you echo the source:
$feat_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
<a href="<?php echo get_permalink( $page->ID ); ?>"
style="background-image: url(<?php echo $feat_image; ?>)">
You should also take a look at your HTML markup and make sure it's valid.
on above answer some part of code is missing. here is the complete code.
<?php $feat_image = wp_get_attachment_image_src( get_post_thumbnail_id( 5 ), 'large' );
print_r($feat_image);
?>
<a href="<?php echo get_permalink( '5' ); ?>"
style="background-image: url(<?php echo $feat_image[0]; ?>)"> </a>
Here is my code:
add_filter("the_content", "plugin_myContentFilter", "tie_excerpt_home_length");
function plugin_myContentFilter($content)
{
$content = preg_replace("/<img[^>]+\>/i", "(kép)", $content);
// Take the existing content and return a subset of it
return substr($content, 0, 300);
}
I would like to see this function work only the homepage. But unfortunatly this code is working everywhere (posts, pages), and do not let to display the whole content.
Here is the code which should be reflected in the content on the homepage:
<li <?php tie_post_class('first-news'); ?>>
<div class="inner-content">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tie' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
<?php tie_thumb( 'tie-medium' ); ?>
<span class="overlay-icon"></span>
</a>
</div><!-- post-thumbnail /-->
<?php endif; ?>
<h2 class="post-box-title"><?php the_title(); ?></h2>
<?php get_template_part( 'includes/boxes-meta' ); ?>
<div class="entry">
<?php if($_eventcat) the_content(); else tie_excerpt_home() ?>
<a class="more-link" href="<?php the_permalink() ?>"><?php _e( 'Tovább >', 'tie' ) ?></a>
</div>
</div>
</li>
Add the conditional for checking the home page. is_home() checks if it's the blog post index, is_front_page() checks if it's the frontpage (blog post or static page);
if ( is_home() || is_front_page() ) {
add_filter("the_content", "plugin_myContentFilter", "tie_excerpt_home_length");
}
function plugin_myContentFilter($content)
{
$content = preg_replace("/<img[^>]+\>/i", "(kép)", $content);
// Take the existing content and return a subset of it
return substr($content, 0, 300);
}