How to make all the featured image clickable automatically? As it's Wordpress theme, I can only edit php or add css.
Simply add this code to your theme’s functions.php file.
This code simply adds a link around the code generated to display featured images or post thumbnails on your website.
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
$html = '' . $html . '';
return $html;
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
This code will also add a link around featured images on single post pages. If you don’t want to link featured images on single post to the same post, then use this code.
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
If (! is_singular()) {
$html = '' . $html . '';
return $html;
} else {
return $html;
}
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
Normally the functionality of a featured image has no link attached to it. Different themes use the functionality of featured image differently. The new Twenty Nineteen theme, for example, uses it as the background for the page header, behind the post title.
So it will be better to make a child theme of your parent theme and edit the php file to set a link. Without editing the code you cannot set the link of the featured image.
Insert image > Click on the desired cell you want to insert it > Down on the right: “Linked to” > Personalized URL.
Related
I'm having trouble changing the posts display in my WordPress website. So far, the posts can display a title and text content, and I would like to display tags, categories and an image. I added the following code in functions.php and it actually displays the p tags, but around the content, and not in it. Also, it is displayed on all pages of my website, while I just want to add these HTML tags inside the posts.
So,
How can I put the tags inside the_content() and only display the custom HTML in posts?
I hope my question is clear, I starting learning PHP a few days ago, sorry!
Thank you so much in advance for you help!
The code :
// Creating a custom function that appends HTML to the content
function bts_add_html_to_content( $content ) {
$html_segment = '<p>Text to be added.</p>';
$content = $html_segment . $content . $html_segment;
return $content;
}
add_filter( 'the_content', 'bts_add_html_to_content', 99);
Not totally sure what you want for the "in it" part but I can help with conditionally applying your code to posts only... See below:
// Creating a custom function that appends HTML to the content
function bts_add_html_to_content( $content ) {
// if not a post then return the $content as is
if ('post' !== get_post_type()) {
return $content;
}
// must be a post if we get here so lets do something with it
$html_segment = '<p>Text to be added.</p>';
$content = $html_segment . $content . $html_segment;
return $content;
}
add_filter( 'the_content', 'bts_add_html_to_content', 99);
Hoping someone out there who is familiar with Genesis hooks can give me a quick solution. I am not very familiar with PHP
In the child theme's functions file I have this:
/** Add the featured image section */
add_action( 'genesis_after_header', 'full_featured_image' );
function full_featured_image() {
if ( is_front_page() ) {
echo '<div id="full-image"><img src="'. get_stylesheet_directory_uri() . '/images/home-header.jpg" /></div>';
}
}
I just want to change the front page image from the static one (images/home-header.jpg) to the featured image for the home page. What should I change in here?
Thanks in advance.
Kitka
I am using WordPress 4.9.6.
I have set the shop page to be the home-page.
How do I add a page banner to the shop page. I would like to add it just above the breadcrumb trail.
I have tried adding this to the following page archive-product.php
if (is_shop()) {
$args = array('taxonomy' => 'product_cat');
$product_categories = get_categories( $args );
$term_id = $product_categories[0]->term_id;
$content = get_term_meta($term_id, 'cat_meta');
if(isset($content[0]['cat_header'])){
echo do_shortcode($content[0]['cat_header']);
}
}
Unfortunately, not able to add any image to the page.
You can achieve using 2 methods.
1) Add your static image directly at the beginning of archive-product.php
echo "<img src='{YOUR_IMAGE_PATH}'>";
2) Add filter in your theme's functions.php file.
add_action ('woocommerce_archive_description' , 'shop_banner',99);
function shop_banner() {
echo '<img src="{YOUR_IMAGE_PATH}" >';
}
I'm not so sure if I understand exactly what you want. But this is what I understand so far.
If you want to display an Static image banner above the breadcrumbs in your Shop Page.
You could use the woocommerce_before_main_content action.
function BannerShop(){
if(is_shop()){
echo '<img src="https://localhost/demosite/wp-content/uploads/2015/06/512x356.png" >';
}
}
add_action( 'woocommerce_before_main_content', 'BannerShop', 10 );
Here i show the before and after. BTW I don't know what theme are you using so it may be displayed different.
Before
https://i.stack.imgur.com/Mv2YK.jpg
After https://i.stack.imgur.com/nTfCa.jpg
Is there any quick way to hide Wordpress Woocommerce products from the Shop page, if they do not have a thumbnail picture placed?
I use importer which imports thousands of products to the shop. Although I must insert picture and description for the product before I want to sell the item.
You can change placeholder image by using your theme's functions.php :
add_action( 'init', 'custom_fix_thumbnail' );
function custom_fix_thumbnail() {
add_filter('woocommerce_placeholder_img_src', 'custom_woocommerce_placeholder_img_src');
function custom_woocommerce_placeholder_img_src( $src ) {
$upload_dir = wp_upload_dir();
$uploads = untrailingslashit( $upload_dir['baseurl'] );
$src = $uploads . '/2017/05/new-image.jpg'; //Setting path for your new image in upload folder
return $src;
}
}
This way default placeholder image will be replaced by your own image. If you want no image then you can either set a blank/white image or any kind of image as you want.
UPDATE
See if this helps, Type following in head section of your header.php
<?php if($_product->getImage() && $_product->getImage() != 'no_selection'){
?>
<style>
/* Css to hide Featured image Div */
</style>
<?php
}?>
The title in my WordPress is of two words (say "The Company" for example). Right now the default color is Blue. But I want the "The" portion in the above example to be Grey. I used the font tag and set it as <font color="grey">The</font> Company in the site title Input box. In the preview page it is showing correctly, but when I visit my page , it is showing as
<font color="grey">The</font> Company
including the tags. How to modify? I'm using mindfulness theme in WordPress
(similar kind of) if someone throws a light on option two of this page.
A briefly describing image:
How to target specific words in the blog title of the Twenty Twelve theme?
You can try the following, it works for the Twenty Twelve theme:
/**
* Wrap the first word of the blog title with the <span>...</span> tag.
* Assumes the Twenty Twelve theme.
*
* #see http://stackoverflow.com/a/25096093/2078474
*/
add_filter( 'body_class',
function( $class )
{
add_filter( 'bloginfo', 'so_25094932_modify_first_word', 10, 2 );
return $class;
}
);
function so_25094932_modify_first_word( $output, $show )
{
static $counter = 0;
// Target the "name" part:
if( 'name' === $show )
{
// Target the second instance:
if( 2 === ++$counter )
{
remove_filter( current_filter(), __FUNCTION__ );
// Modify the first word of the blog title:
$title = explode( ' ', $output );
if( count( $title ) > 0 )
{
$title[0] = sprintf( '<span>%s</span>', $title[0] );
}
$output = join( ' ', $title );
}
}
return $output;
}
where we use the bloginfo filter to target only the second instance of the blog name, counted from the <body> tag.
Then we can target the span tag with CSS:
h1.site-title span{
color: red;
}
Example:
Here's a screenshot:
It should be possible to adjust our code snippet to other themes as well.
I hope this helps.
To do so you have to change the style.css that controls your design | theme.
Edit CSS from wordpress:
Login to WordPress, not sure which version you're running, but you should have a section called Themes or Design. From there choose Theme Editor. There will be a list of all the files you can edit, the CSS stylesheet should be named style.css.
You will have to have write access in order to edit it from within WP admin.
Otherwise you will have to find the file via FTP on your website, download it to your computer, edit it, and then upload it back to your site.
Edit CSS the way you want it:
<span id="the">The</span>
<span id="company">Company</span>
<style>
#the{color: #0033CC;} //refers to blue.
#company{color:#CCCCCC;} //refers to grey.
</style>
There is also a fiddle for you to test it:
JSFIDDLE Demo
GoodLuck!