WordPress PHP - Hyperlink on image - php

first sorry if this is a simple question, its my first time with html / word press and this is just a learning exercise
basically i have downloaded the lawyeria lite theme on word-press, and in this theme they have three icons on the homepage with text underneath them , and what i want to do is make it so a user can click on the image and gets taken to another page, however in the customization options of the theme this is not possible.
i think i have found the php related for this, below, my question is how can i modify this to achieve my aim ?
<?php
if ( get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_icon',get_template_directory_uri().'/images/features-box-icon-one.png' ) ) {
echo '<div class="features-box-icon">';
echo '<img src="'.get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_icon', get_template_directory_uri().'/images/features-box-icon-one.png' ).'" alt="'.get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_title' ).'" title="'.get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_title' ).'" ;/>';
echo '</div>';
}
if ( get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_title','Lorem' ) ) {
echo '<h4>';
echo get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_title','Lorem' );
echo '</h4>';
}
if ( get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_content','Go to Appearance - Customize, to add content.' ) ) {
echo '<p>';
echo get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_content','Go to Appearance - Customize, to add content.' );
echo '</p>';
}
?>
</div><!--/div .features-box-->
and i have narrowed it down to this line of code :
echo '<img src="'.get_theme_mod( 'lawyeria_lite_frontpage_secondlybox_icon',get_template_directory_uri().'/images/features-box-icon-two.png' ).'" alt="'.get_theme_mod( 'lawyeria_lite_frontpage_secondlybox_title','Ipsum' ).'" title="'.get_theme_mod( 'lawyeria_lite_frontpage_secondlybox_title','Ipsum' ).'" />';
i have tried adding in a href
echo '< href="page.php" 'img src="'.get_theme_mod( 'lawyeria_lite_frontpage_secondlybox_icon',get_template_directory_uri().'/images/features-box-icon-two.png' ).'" alt="'.get_theme_mod( 'lawyeria_lite_frontpage_secondlybox_title','Ipsum' ).'" title="'.get_theme_mod( 'lawyeria_lite_frontpage_secondlybox_title','Ipsum' ).'" />';
but this give a HTTP ERROR 500
many thanks

Well it looks like i was on the right track but wrong format, this is how i have achieved what i wanted
echo '<img src="'.get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_icon', get_template_directory_uri().'/images/features-box-icon-one.png' ).'" alt="'.get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_title' ).'" title="'.get_theme_mod( 'lawyeria_lite_frontpage_firstlybox_title' ).'" ;/>';

Related

How to rewrite default php code to a valid echo line output?

I am new to PHP and for the development of a Wordpress theme I need to re-write the following line of php/html code so that I can use it in my functions.php.
I found out that I would need to rewrite it as an "echo" call, but I am always getting an error because my syntax is wrong.
This is the line we're talking about:
<div <?php post_class( 'brick_item ' . $termString ) ?> onclick="location.href='<?php the_permalink(); ?>'">
I've tried several times, e.g.
echo '<div class="'. post_class("brick_item" . $termString); .'" onclick=location.href="'. the_permalink() .'">';
but I am doing something wrong in encapsulating things I guess.
EDIT:
As requested, the part of the functions.php
function get_latest_posts() {
echo '<div class="latest-posts">';
echo '<div class="brick_list">';
$args = array(
post_type => 'post',
cat => '-3,-10',
posts_per_page => 3
);
$latestposts_query = new WP_Query($args);
if ( $latestposts_query->have_posts() ) : while ( $latestposts_query->have_posts() ) : $latestposts_query->the_post();
echo '<div '. post_class( $termString ) .' onclick=location.href='. the_permalink() .'>';
endwhile; else :
get_template_part('template_parts/content','error');
endif;
wp_reset_postdata();
echo '</div>';
echo '</div>';
}
add_shortcode( 'get_latest_posts', 'get_latest_posts' );
There is a semicolon in the middle of your line
echo '<div class="'. post_class("brick_item" . $termString); .'" onclick=location.href="'. the_permalink() .'">';
should be
echo '<div class="'. post_class("brick_item" . $termString) .'" onclick=location.href="'. the_permalink() .'">';
semicolons signify end of line in php, thus your code did first execute
echo '<div class="'. post_class("brick_item" . $termString);
which is fine, but only half of what you want.
Then php tries executing
.'" onclick=location.href="'. the_permalink() .'">';
but doesn't know what to do with a dot at the start of the line. Dot means append string before to string after, but there is nothing before, so it's a compile error.
You can also just add another echo to the second line instead of the dot
echo '" onclick=location.href="'. the_permalink() .'">';
Let's see where this gets us as I've cleaned up the code a bit. The div would just be hanging out there so I put the permalink in it.
function get_latest_posts() {
echo '<div class="latest-posts">';
echo '<div class="brick_list">';
$args = array(
post_type => 'post',
cat => '-3,-10',
posts_per_page => 3
);
$latestposts_query = new WP_Query($args);
if($latestposts_query->have_posts()) {
while($latestposts_query->have_posts()) {
$thePost = $latestposts_query->the_post();
echo '<div ' . post_class($thePost) . ' onclick="location.href=\'' . the_permalink() . '\'">' . the_permalink() . '</div>';
}
} else {
get_template_part('template_parts/content','error');
}
wp_reset_postdata();
echo '</div>';
echo '</div>';
}
add_shortcode( 'get_latest_posts', 'get_latest_posts' );

Product ID should not be accessed directly

I recently updated wordpress and PHP on my testing server. I have fixed a lot of the errors but this one is stumping me. On my shop page, my thumbnails stopped appearing. My products and prices are still showing up correctly. Here is the error message
Notice: id was called incorrectly. Product properties should not be accessed directly.
Here is the PHP
<?php
$placeholder_width = $placeholder_height = 400;
$url = wp_get_attachment_image_src( get_post_thumbnail_id($product->ID), array(260,260) );
if ( has_post_thumbnail() ){?>
<?php if ( is_plugin_active( 'woocommerce-lazyload/woocommerce-lazyload.php' )) {?>
<img data-src="<?php echo get_the_post_thumbnail_url($posts->ID , ['220','220']); ?>" class="attachment-220x220 size-220x220 wp-post-image" width="300" height="300">
<?php }else{ ?>
<img src="<?php echo get_the_post_thumbnail_url($posts->ID , ['220','220']); ?>" class="attachment-220x220 size-220x220 wp-post-image">
<?php }?>
<?php
}
else {
echo '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';
}
?>
This chunk is where the problem is. I tried to remove the if statement and jsut have the image and URL grab. I tried to convert $product->ID to $product->get_id() and the latter actually takes the error message away but my thumbnails are not showing up. It must be getting postID correct because the names and prices are showing up and being categorized accordingly. Any suggestions?

PHP code within HTML style attribute (or Confused by quotes)

I am completely confused about the way I should use PHP code in this line:
<div class="post-img" style="backgroung-image:url(' <?php echo $thumbnail[0] ?> ')"></div>
It seems to me that it is read as a text in my example.
I also have tried another approach which also didn't work for the same reason, I believe...
<?php echo '<div class="post-img" style="backgroung-image:url(' . $thumbnail[0] . ')"></div>' ?>
$thumbnail variable contains a link to the main image of a Wordpress post:
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ) );
Please, give me an advice, how can I apply a dynamic link to a Wordpress post image?
If your div has no content then you have to add height in CSS like this:
<div class="post-img" style="background:url('<?php echo $thumbnail[0]; ?>')no-repeat; height:200px;">
Try this
<div class="post-img" style="backgroung-
image:url('<?php
wp_get_attachment_image_src(
get_post_thumbnail_id($post_id )[0] ); ?>')">
</div>
Some WordPress function directly display the string. No need to echo them.
generall, the results will be like this,
array{
[0] => url,
[1] => width</em>
[2] => height</em>
[4] => is_intermediate
}
you can do something like this
<?php echo '<div class="post-img" style="backgroung-image:url(' . $thumbnail[0] . ') . $thumbnail[2] ."></div>' ?>
ADyson and Nobita gave me the solution in comments to my question, which is:
echo '<div class="post-img" style="background-image:url(\'' . $thumbnail[0] . '\')"></div>';

Conditional featured image with youtube thumbnail in Wordpress

Basically what I am trying to do here is: Display the youtube thumbnail. If no youtube thumbnail -> Display the Featured image for the post. If no featured image -> Display the fallback image.
However it seems I am doing something wrong because the webpage displays blank.
<?php
// Check if the post has a Youtube thumbnail (using custom field video_url)
if get_post_meta($post->ID,'video_url',true)
echo '<img src="http://img.youtube.com/vi/' . get_post_meta($post->ID,'video_url',true) . '/0.jpg"/>';
// Check if the post has a Post Thumbnail assigned to it
else ( has_post_thumbnail() ) {
echo '<a href="' . get_permalink($post->ID) . '" >';
the_post_thumbnail('frontpage-thumb');
echo '</a>';
// If the post does not have a featured image then display the fallback image
} else {
echo '<a href="' . get_permalink($post->ID) . '" ><img src="'. get_stylesheet_directory_uri() . '/img/fallback-featured-image-index.jpg" /></a>';}
?>
The general code for displaying the youtube thumbnail with custom fields is <img src="http://img.youtube.com/vi/<?php echo get_post_meta($post->ID,'video_url',true);?>/0.jpg"/> I just can't get it to work with the conditional statements...
In your first if condition, you have wrong syntax and the PHP must be closed
if (get_post_meta($post->ID,'video_url',true)) //
Correct code
<?php
if (get_post_meta($post->ID,'video_url',true)) ?>
echo '<img src="http://img.youtube.com/vi/<?php echo get_post_meta($post->ID,'video_url',true);?>/0.jpg"/>';
// Check if the post has a Post Thumbnail assigned to it
else ( has_post_thumbnail() ) {
echo '<a href="' . get_permalink($post->ID) . '" >';
the_post_thumbnail('frontpage-thumb');
echo '</a>';
// If the post does not have a featured image then display the fallback image
} else {
echo '<a href="' . get_permalink($post->ID) . '" ><img src="'. get_stylesheet_directory_uri() . '/img/fallback-featured-image-index.jpg" /></a>';}
?>

my php echo statement for an <a href="#"> is making the url visible

I am going by this tutorial (https://redvinestudio.com/how-to-build-isotope-portfolio-in-your-wordpress-theme/), and when I am working on the part where the portfolio items are displayed as links, the url that the link leads to is being displayed above the item. Below is the prescribed code:
echo '<div class="all portfolio-item '. $tax .'">';
echo '<a href="'. the_permalink() .'" title="'. the_title_attribute() .'">';
echo '<div class="thumbnail">'. the_post_thumbnail('thumbnail') .'</div>';
echo '<h2>'. the_title() .'</h2>';
echo '</a>';
/*echo '<div>'. the_excerpt() .'</div>';*/
echo '</div>';
You can't use the_permalink() within an echo, because it echoes data itself. Instead, you need to use get_permalink(). You also need to modify the_title_attribute() to avoid a duplicated echo there:
echo '<a href="'. get_permalink() .'" title="'. the_title_attribute( 'echo=0' ) .'">';
EDIT: You need to comb through your code to remove all instances of code that is echoing content within an echo. This includes the_title(), the_post_thumbnail(), etc.
the_permalink() will always echo the URL of the object, which means you're telling it to echo twice. Change it to get_permalink() and it should work.

Categories