I'm trying to modify my custom wp theme and add related post block. I want to add default thumbnail for posts which doesn't have it. Below code is working fine but i can't archive how to add default img.
$args = array( 'numberposts' => '4','post__not_in' => array($post->ID));
$recent_posts = wp_get_recent_posts($args);
foreach( $recent_posts as $recent ) {
if($recent['post_status']=="publish") {
if ( has_post_thumbnail($recent["ID"])) {
echo '<div><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . get_the_post_thumbnail($recent["ID"], 'thumbnail'). $recent["post_title"].'</a></div> ';
} else {
echo '<div><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . $recent["post_title"].'</a></div>';
}
}
}
In order to print the default thumbnail if the posts featured image is not found you have to print the default image that you have in your images folder.
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/default-thumb-img.png"
alt="<?php the_title(); ?>" />
<?php } ?>
What the above code does?
It checks whether the post has thumbnails, if not it assigns the default-thumb-img.png ( Change it to your image name) as per your requirement.
my solution is just hardcode absolute link to default thumbnail
$args = array( 'numberposts' => '4','post__not_in' => array($post->ID));
$recent_posts = wp_get_recent_posts($args);
foreach( $recent_posts as $recent ){
if($recent['post_status']=="publish") {
if ( has_post_thumbnail($recent["ID"])) {
echo '<div class="col-md-3 col-lg-3"><div class="recent-post-holder"><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . get_the_post_thumbnail($recent["ID"], 'thumbnail'). $recent["post_title"].'</a></div></div> ';
} else {
echo '<div class="col-md-3 col-lg-3"><div class="recent-post-holder"><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . "<img src='/*add link here*/'>". $recent["post_title"].'</a></div></div>';
}
}
}
Related
<?php
$recent_posts = wp_get_recent_posts(array('post_type'=>'projet'));
foreach( $recent_posts as $recent ){
echo '<li><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . $recent["post_title"].'</a> </li> ';
if ( has_post_thumbnail( $recent["ID"]) ) {
echo get_the_post_thumbnail($recent["ID"],'thumbnail');
}
if (has_excerpt($recent["ID"]) ){
// echo get_the_excerpt($recent["ID"],'the_excerpt');
echo '<p class="excerpt">' . get_the_excerpt($recent["ID"],'the_excerpt') . '</p>';
}
}
?>
Hi, I would like to know how to put all my foreach loop inside a div ? I want each $recent_posts to be inside a div, right now they're one after the other. (btw it's my first post here, excuse me if i'm not clear)
##EDIT##
Here's my html :
<h2>Maquette UX/UI</h2> <img width="150" height="150" src="http://localhost/wordpress/wp-content/uploads/2021/04/vignette_maquette-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image"
alt="" loading="lazy" />
<p class="excerpt">Projet 1</p>
<h2>Intégration Baniera</h2> <img width="150" height="150" src="http://localhost/wordpress/wp-content/uploads/2021/04/vignette_baniera_homepage-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image"
alt="" loading="lazy" />
<p class="excerpt">Projet 2</p>
<h2>Intégration PHP</h2> <img width="150" height="150" src="http://localhost/wordpress/wp-content/uploads/2021/04/order_homepage-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image"
alt="" loading="lazy" />
<p class="excerpt">Projet 3</p>
<p class="excerpt"></p>
</div>
And I want every "group" to be inside a div, right now they're all together
Ok it works now, I wrapped the content of foreach like so :
<?php
$recent_posts = wp_get_recent_posts(array('post_type'=>'projet'));
foreach( $recent_posts as $recent ){
echo '<div class="foreach_wrapper">';
echo '<h2><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . $recent["post_title"].'</a></h2> ';
if ( has_post_thumbnail( $recent["ID"]) ) {
echo get_the_post_thumbnail($recent["ID"],'thumbnail');
}
if (has_excerpt($recent["ID"]) ){
// echo get_the_excerpt($recent["ID"],'the_excerpt');
echo '<p class="excerpt">' . get_the_excerpt($recent["ID"],'the_excerpt') . '</p>';
}
echo '</div>';
}
?>
You can echo a div around the foreach, a little side note, you are using a <li> element but forgot the <ul> wrapper please validate your HTML with a HTML validator.
<?php
echo '<div>'; /* I added this */
$recent_posts = wp_get_recent_posts(array('post_type'=>'projet'));
foreach( $recent_posts as $recent ){
echo '<li><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' . $recent["post_title"].'</a> </li> ';
if ( has_post_thumbnail( $recent["ID"]) ) {
echo get_the_post_thumbnail($recent["ID"],'thumbnail');
}
if (has_excerpt($recent["ID"]) ){
// echo get_the_excerpt($recent["ID"],'the_excerpt');
echo '<p class="excerpt">' . get_the_excerpt($recent["ID"],'the_excerpt') . '</p>';
}
}
echo '</div>'; /* I added this */
?>
I am using AFC Pro and created an options pafe so tjhat the user can upload a new header logo whenever he wants to.
The ACF field is called "headerlogo".
What I want now is that the Logo gets replaced by my theme automatically.
My Variables are:
$headerlogo = wp_get_attachment_image_src(get_field('headerlogo', 'option'), 'full');
$default_logo = '<img src="'echo .$headerlogo[0].'" alt="SITE Logo">';
they get called in:
echo '<a href="'. esc_url( home_url( '/' ) ) .'">
' . $default_logo . '
</a>';
But the Output is:
<a href="http://www.xxx.de/">
<img src="" alt="SITELogo">
</a>
What am I doing wrong here?
Thank in advance.
This should work:
<?php
$headerlogo = get_field('headerlogo');
if( !empty($headerlogo) ):
$default_logo = '<img src="'. $headerlogo['url'] . '" alt="' . $headerlogo['alt'] . '" />';
endif;
echo '' . $default_logo . '';
?>
I have been trying to create a page on wordpress that displays all categories with images, title and links of all categories of a particular post_type.
I have added the following code to my functions.php file:
function show_categories($excl=''){
$categories = get_the_category($post->ID);
if(!empty($categories)){
$exclude=$excl;
$exclude = explode(",");
foreach ($categories as $cat) {
if(!in_array($cat->cat_ID)) {
echo '<div class="product-category">';
// echo '<p>' . $cat->category_description . '</p>';
echo '<a href="' . get_category_link( $cat->term_id ) . '" />';
echo '<img src="';
echo z_taxonomy_image_url($cat->term_id, 'products') . '" />';
echo '</a>';
echo '<h2><a href="' . get_category_link( $cat->term_id ) . '" class="cat-link"';
echo '/>' . $cat->cat_name . '</a></h2>';
echo '<a href="' . get_category_link( $cat->term_id ) . '" class="more-info" >Info</a>';
echo '</div>';
}
}
}
}
Now the problem is: It only displays the categories of the latest post. If the latest post is included to all categories, all categories will show up, if not it will only show the categories relevant to the latest post.
I call this function on the file archive-products.php like this:
<?php show_categories(); ?>
Any ideas?
This is the page: http://giannacamilotti.com/products/
I found a solution, the code below worked!
function show_categories($excl=''){
$args=array(
'post_type' => 'Products'
);
$categories = get_categories($args);
if(!empty($categories)){
$exclude=$excl;
$exclude = explode(",");
foreach ($categories as $cat) {
echo '<div class="product-category ' . $cat->cat_name . ' ">';
echo '<a href="' . get_category_link( $cat->term_id ) . '" />';
echo '<img src="';
echo z_taxonomy_image_url($cat->term_id, 'products') . '" />';
echo '</a>';
echo '<h2><a href="' . get_category_link( $cat->term_id ) . '" class="cat-link"';
echo '/>' . $cat->cat_name . '</a></h2>';
echo '<a href="' . get_category_link( $cat->term_id ) . '" class="more-info" >Info</a>';
echo '</div>';
}
}
}
Please let me know if anyone has a better and cleaner solution.
I am trying to display a custom post type in wordpress. I can display the themubnail but I would like to resize it according to the item type:
My code is as follows:
<?php
$args = array('post_type' => 'package','package-category'=>'Kenya', 'posts_per_page'=>6 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();?>
<?php
$item_type == '1/4 Grid Style';
$item_class = $package_div_size_num_class[$item_type]['class'];
$item_size = $package_div_size_num_class[$item_type];
function print_package_mythumbnail( $post_id, $item_size, $last_minute = 'normal-type', $last_text = 'Read More' ){
$thumbnail_id = get_post_thumbnail_id( $post_id );
$thumbnail = wp_get_attachment_image_src( $thumbnail_id , $item_size );
$alt_text = get_post_meta($thumbnail_id , '_wp_attachment_image_alt', true);
if( !empty($thumbnail) ){
echo '<div class="package-media-wrapper gdl-image">';
echo '<a href="' . get_permalink() . '">';
echo '<img src="' . $thumbnail[0] .'" alt="'. $alt_text .'"/>';
echo '</a>';
echo '</div>'; // package-media-wrapper
}
}
$thumbnail_id = get_post_thumbnail_id( $post_id );
$thumbnail = wp_get_attachment_image_src( $thumbnail_id , $item_size );
$alt_text = get_post_meta($thumbnail_id , '_wp_attachment_image_alt', true);
if( !empty($thumbnail) ){
echo '<div class="package-media-wrapper gdl-image">';
echo '<a href="' . get_permalink() . '">';
echo '<img src="' . $thumbnail[0] .'" alt="'. $alt_text .'"/>';
if( !empty($last_minute) && !empty($last_text) ){
echo '<div class="package-ribbon-wrapper">';
echo '<div class="package-type ' . $last_minute . '">';
echo $last_text;
echo '</div>';
echo '<div class="clear"></div>';
echo '<div class="package-type-gimmick"></div>';
echo '<div class="clear"></div>';
echo '</div>';
}
echo '</a>';
echo '</div>'; // package-media-wrapper
}
?>
Where $item_type == '1/4 Grid Style' is defined as:
$package_div_size_num_class = array(
"1/4 Grid Style" => array(
"no-sidebar"=>"400x300",
"one-sidebar"=>"400x400",
"both-sidebar"=>"400x400",
"class"=>"gdl-package-widget"
)
)
How can I resize the thumbnail according to the item type?
quick fix using css (create a div for the image and set dimensions.)
in your style.css
.package-media-wrapper{
min-width: 30%;
max-width: 30% !important;
}
.package-image{
width: 100%;
}
Your question is a bit confusing are you trying to detect how many sidebars are showing? In most templates this is set on the page template fairly late in the code? To make changes to html you could detect what template is being used by
if(is_page_template('2column')) {
$imagehtml= ............;
} else if (etc) {}
Other than that you are looking at query to get the attributes of a containing div (in your case the column size i guess?)
jQuery(document).ready(function() {
var width=jQuery('.package-media-wrapper').width();
if(width===300px) {
jQuery('.package-image').width('300px');
}
}
i am not able to display the custom fields in a wordpress home page.
This is the code (fully working except for the part that show the custom field)
<?php
$thumbnails = get_posts('numberposts=3&cat=3');
foreach ($thumbnails as $thumbnail) {
if ( has_post_thumbnail($thumbnail->ID)) {
echo '<div class="contest-home"><a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
echo get_the_post_thumbnail($thumbnail->ID, 'medium', array('class'=> "blur") );
echo '</a>';
echo '<h2><center>' . esc_attr( $thumbnail->post_title ) . '</center></h2>';
echo get_post_meta($post->ID, "RiassuntoHome", true);
echo '<p><b>Giorni restanti:</b> 30 giorni';
echo '<br><b>Premio:</b> 10.000 euro';
echo '</p><center><a class="st-btn slarge st-btn-green st-btn-slarge" href="' . get_permalink( $thumbnail->ID ) . '">Invia la Tua Idea</a></center></div>';
}
}
?>
<?php echo '<div class="clearfix"></div></div>' ?>
The object is $thumbnail, not $post:
echo get_post_meta($thumbnail->ID, "RiassuntoHome", true);