I am relatively new to WordPress development, and I am attempting to build a site-specific plugin that gives me the ability to have a photo album gallery.
A Little Background
Each image will be treated as an attachment (thus getting it’s own single page). I will use the built-in featured thumbnails for album cover photo (Source: http://www.wpbeginner.com/wp-tutorials/how-to-create-a-photo-album-gallery-in-wordpress-without-a-plugin/comment-page-1/#comment-182006)
I essentially have four new files, algallery.php, style.css in my plugin folder and two template folders under templates of a child theme of Roots, archive-albums.php, and single-albums.php.
My problem so far is that when I have implemented get_template_part('templates/archive', 'albums'), I have my "grid" and CSS rendered, but WordPress isn't finding my album posts I've created, and these posts were created with a custom post type. To give you an idea of the approach:
<li class="album-grid">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('album-grid'); ?>
</a>
</li>
<?php if ( $post->post_type == 'albums' && $post->post_status == 'publish' ) {
$attachments = get_posts( array(
'post_type' => 'attachment',
'posts_per_page' => -1,
'post_parent' => $post->ID,
'exclude' => get_post_thumbnail_id()
) );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
$title = wp_get_attachment_link( $attachment->ID, 'album-grid', true );
echo '<li class="' . $class . ' album-grid">' . $title . '</li>';
}
}
}
?>
I have WP_DEBUG on as well, and I have yet to find the issue. What may be the problem?
What if you add a global $post; at the top of your code ?
Related
Pages like author page on our WordPress site are missing tag. Since the pages are being rendered by the default template index.php, I'm looking for a way to add tag in it. Below is index.php. Test code like echo $thumb . $alttext; doesn't seem to work not because the variable doesn't hold any value, but the code itself isn't working.
<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
$post_format = et_pb_post_format(); echo $post_format; ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
<?php
$thumb = '';
$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );
$height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 );
$classtext = 'et_pb_post_main_image';
$titletext = get_the_title();
$alttext = get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true );
$thumbnail = get_thumbnail( $width, $height, $classtext, $alttext, $titletext, false, 'Blogimage' );
$thumb = $thumbnail["thumb"];
echo $thumb . $alttext;
et_divi_post_format_content();
if ( ! in_array( $post_format, array( 'link', 'audio', 'quote' ) ) ) {
if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) :
printf(
'<div class="et_main_video_container">
%1$s
</div>',
et_core_esc_previously( $first_video )
);
elseif ( ! in_array( $post_format, array( 'gallery' ) ) && 'on' === et_get_option( 'divi_thumbnails_index', 'on' ) && '' !== $thumb ) : ?>
<a class="entry-featured-image-url" href="<?php the_permalink(); ?>">
<?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
</a>
<?php
elseif ( 'gallery' === $post_format ) :
et_pb_gallery_images();
endif;
} ?>
<?php if ( ! in_array( $post_format, array( 'link', 'audio', 'quote' ) ) ) : ?>
<?php if ( ! in_array( $post_format, array( 'link', 'audio' ) ) ) : ?>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php endif; ?>
<?php
et_divi_post_meta();
if ( 'on' !== et_get_option( 'divi_blog_style', 'false' ) || ( is_search() && ( 'on' === get_post_meta( get_the_ID(), '_et_pb_use_builder', true ) ) ) ) {
truncate_post( 270 );
} else {
the_content();
}
?>
<?php endif; ?>
</article>
<?php
endwhile;
if ( function_exists( 'wp_pagenavi' ) )
wp_pagenavi();
else
get_template_part( 'includes/navigation', 'index' );
else :
get_template_part( 'includes/no-results', 'index' );
endif;
?>
</div>
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php
get_footer();
I'll try to be a little more précise in my answer that the comment allow me :)
When you want to customize your template or create a custom one, in Wordpress, you have 3 prossibilities :
1 - The WRONG way
You directly edit the templates files in your theme.
Why is this wrong?
Because template, like plugins, are regularely updated, so if you directly edit your template's files, you risk to loose all your customisations when you'll update it.
To avoid this, you can create that we called a "child theme" in Wordpress.
2 - Create a Child theme
Simpliy putting, it is a nice solution to avoid the issue encountered on the point 1 ;)
A child theme inherit of the parent theme's functions and allow you to make some customizations/addition to it without the risk of loosing it (since when you update the parent theme, the child theme isn't touched).
Here is a complete tutorial of the principle:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
Note: imoo this require some level of knowledge in PHP because a wrong change can break you site.
3 - Using a theme builder
This is your case : on your site is installed the theme DIVI which allow you to customize you theme and create custom templates with no (or few at least) skills in developpment required.
This is why it is called a "theme builder".
To name a few : Divi, Elementor, ...
Again in that case you can directly use the main theme or create a child theme (which is highly recommended).
That being said (wrote), to return to your situation, you found out that the file you need to edit is the "index.php".
I doubt that because it seems to be an author page, so more likely "author.php"
Why?
Because in fact, ALL pages are processed by the "index.php" file as it is the central template file, but if a template corresponding to the content type exist in you theme it will be use instead (index.php is just a fallback in case you theme don't include a custom file for any particular case).
See this article for more information about template hierarchy: https://developer.wordpress.org/themes/basics/template-hierarchy/
BUT, since you use a theme builder, you do not need to edit thoses files.
As you are using Divi, I suggest you to watch some tutorials on how the theme builder works in practice.
In short, inside the template builder interface of Divi, you can create template(s), that you can affect to any type of content.
This video should guid you on the right direction:
https://www.elegantthemes.com/documentation/divi/the-divi-theme-builder/
Hope it helps.
I tried using suggestions from other posts but they do not work. I am looking to not show the featured product image in my product images area/image gallery because I am using the featured image in the header as a background image and its too wide to be in the gallery.
So far this is the closest thing to working but I get an error. It does however do what I need.
Any way to fix this so i do not get the error?
Here is my code:
add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 3);
function remove_featured_image($html, $attachment_id, $post_id) {
$featured_image = get_post_thumbnail_id($post_id);
if ($attachment_id != $featured_image) {
return $html;
}
return '';
}
And here is the error:
Missing argument 3 for remove_featured_image() in /home/…/plugins/my-custom-functions/inc/php/functional.php(93) : eval()'d code on line 4
Warning: Missing argument 3 for remove_featured_image() in /home…/plugins/my-custom-functions/inc/php/functional.php(93) : eval()'d code on line 4
There is only 2 arguments for woocommerce_single_product_image_thumbnail_html filter hook.
So you have to change a little bit your code to avoid the error, this way:
add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 2);
function remove_featured_image($html, $attachment_id ) {
global $post, $product;
$featured_image = get_post_thumbnail_id( $post->ID );
if ( $attachment_id == $featured_image )
$html = '';
return $html;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
References for filter hook woocommerce_single_product_image_thumbnail_html:
woocommerce templates: single-product/product-image.php
woocommerce templates: single-product/product-thumbnails.php
This is what I did, hope it's helpful.
I used the Meta Box plugin to create a custom checkbox in the product edit page (in the Wordpress backend). The checkbox is basically "Hide featured image from product gallery" and here's the code (to be placed in the functions.php file):
function hide_first_img( $meta_boxes ) {
$prefix = 'meta_box';
$meta_boxes[] = array(
'id' => 'hide_img',
'title' => esc_html__( 'Hide first image', 'custom_meta_boxes' ),
'post_types' => array('product'),
'context' => 'advanced',
'priority' => 'default',
'autosave' => 'false',
'fields' => array(
array(
'id' => $prefix . '_hide_first_image',
'name' => esc_html__( 'Hide first image in product gallery', 'custom_meta_boxes' ),
'type' => 'checkbox',
'desc' => esc_html__( 'Check to hide the first image in the gallery', 'custom_meta_boxes' ),
),
),
);
return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'hide_first_img' );
Then I used LoicTheAztec's code, which works great, to remove the image ONLY if the checkbox is checked, like this (to be placed in the functions.php file):
function remove_featured_image($html, $attachment_id ) {
if( rwmb_meta( 'meta_box_hide_first_image' )){
global $post, $product;
$featured_image = get_post_thumbnail_id( $post->ID );
if ( $attachment_id == $featured_image )
$html = '';
}
return $html;
}
add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 2);
Finally, only for FLATSOME THEME users, to also hide the first thumbnail in the gallery, I directly edited the following file in my child theme folder: \flatsome-child\woocommerce\single-product\product-gallery-thumbnails.php
Maybe there's some similar file for the default Woocomerce gallery or for other themes:
// show first thumbnail only if meta box is NOT checked
<?php if( !rwmb_meta( 'meta_box_hide_first_image' )) : ?>
<div class="col is-nav-selected first">
<a>
<?php
$image_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src( $image_id, apply_filters( 'woocommerce_gallery_thumbnail_size', 'woocommerce_'.$image_size ) );
$image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
$image = '<img src="'.$image[0].'" alt="'.$image_alt.'" width="'.$gallery_thumbnail['width'].'" height="'.$gallery_thumbnail['height'].'" class="attachment-woocommerce_thumbnail" />';
echo $image;
?>
</a>
</div>
<?php endif; ?>
I can confirm that this is working live on my site right now.
I have created a very simple plugin for my Wordpress site to display links to my most recent posts with the use of a shortcode ([recentposts]). The plugin works so far but I am struggling with finding a way to display the featured image for each post that is called in the <div> tags for each post link.
Can you please advise how I may do this. The code for my plugin is as follows:
<?php
/*
Plugin Name: Blog Display Blocks
Description: Plugin to display blog posts in block with shortcode
Author: Chris Brosnan
*/
function RecentPosts() {
$recent_posts = wp_get_recent_posts(6);
echo '<div class="blog-contain">';
foreach( $recent_posts as $recent ){
echo '<div class="third-box">' . $recent["post_title"].' </div> ';
}
};
echo '</div>';
add_shortcode('recentposts', 'RecentPosts');
register_activation_hook( __FILE__, array( 'Blogdisplay', 'plugin_activation' ) );
register_deactivation_hook( __FILE__, array( 'Blogdisplay', 'plugin_deactivation' ) );
?>
What would I need to do in order to show the featured image alongside the corresponding link for each post that is called?
Through trial and error combined with some further searching I have now found the solution to my question.
<?php
/*
Plugin Name: Blog Display Blocks
Description: Plugin to display blog posts in block with shortcode
Author: Chris Brosnan
*/
add_image_size( 'featured-thumb', 300, 200, true ); // (cropped)
function RecentPosts() {
$rPosts = new WP_Query();
$rPosts->query('showposts=6');
while ($rPosts->have_posts()) : $rPosts->the_post(); ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-thumb' ); ?>
<?php $image_url = $image[0]; ?>
<a href="<?php the_permalink(); ?>">
<div class="third-box" style="background-image: url(<?php echo $image_url; ?>);">
<p><?php the_title();?></p>
</div>
</a>
<?php endwhile;
wp_reset_query();
};
add_shortcode('recentposts', 'RecentPosts');
register_activation_hook( __FILE__, array( 'Blogdisplay', 'plugin_activation' ) );
register_deactivation_hook( __FILE__, array( 'Blogdisplay', 'plugin_deactivation' ) );
?>
Within your code by using wp_get_recent_posts() you will get the post id($recent["ID"]), then you can use any one of following,
just add this in your code where you want to show the featured image.
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $recent["ID"] ), 'single-post-thumbnail' );
or can use
echo get_the_post_thumbnail($recent["ID"], 'featured-image');
I m new to wordpress and using 4.2.2 version. I need to show mouse over background color with text on image. The given text and images are generating dynamically from the admin panel. I have given the below images for your reference, first image right now im having my site, and next image I need to do like that.
Thanks in advance!
You can use this function for wordpress
<?php wp_get_attachment_image( $attachment_id, $size, $icon, $attr ); ?>
or
<?php wp_get_attachment_metadata( $attachment_id, $unfiltered ); ?>
Here is the codex
https://codex.wordpress.org/Function_Reference/wp_get_attachment_image
https://codex.wordpress.org/Function_Reference/wp_get_attachment_metadata
With this u can get the name of the image and show like the Sagar said
You'll use this in your page, not in yout functions.php
U won't be this in the functions, you'll use this in your page, like this
<?php
$my_query = new WP_Query('post_type=eventos&category_name=galeria_evento&posts_per_page=1');
while ($my_query->have_posts()) : $my_query->the_post();
?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'attachment',
'post_parent' => $post->ID,
'numberposts' => -1,
'paged' => get_query_var('paged'),
'exclude' => get_post_thumbnail_id()
);
// making the list of the attachments
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
// getting the image and title of the attachment
echo "<div class='item-slide'><p class='title-slide'>".apply_filters( 'the_title', $attachment->post_title )."</p>".wp_get_attachment_image( $attachment->ID, 'full' )."</div>";
}
}
?>
<?php endwhile; ?>
I've added multiple featured images to my wordpress site using the multiple post thumbnail plugin. I'm trying to display them all underneath the content with their descriptions. I can do it for the main featured image no problem. I can display the rest of the featured images no problem, but whenever I try to add description by it's the page description not the image description.
This is how I added the main image and description.
<?php the_post_thumbnail( 'product-thumbnail' );
echo get_post(get_post_thumbnail_id())->post_content; ?>
The remaining images are added as such:
<?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-
image', NULL, 'product-thumbnail');
?>
And so forth (third, fourth)..
Can somebody help with how to add the descriptions for the rest?
To display your post thumbnail with its caption, simply paste the following code inside the loop:
<?php the_post_thumbnail();
echo get_post(get_post_thumbnail_id())->post_excerpt; ?>
You can also display entire image description by adding this code inside the post loop:
<?php the_post_thumbnail();
echo get_post(get_post_thumbnail_id())->post_content; ?>
the above codes for single images if you use multiple images use this code below
<?php
$the_post_images = get_children( array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type'=> 'image'
) );
foreach ($the_post_images as $the_post_image) {
// SHOW FEATURED IMAGE TITLES
echo get_the_title( $the_post_image->ID );
//SHOW IMAGE DESCRIPTION OR CAPTIONS
echo apply_filters( 'get_the_excerpt', $the_post_image->post_excerpt );
}
?>
To get image, its caption in multiple post thumbnails,
`
echo $secondimgPath = MultiPostThumbnails::get_post_thumbnail_url( get_post_type(), 'second-featured-image', NULL);
echo $secondimgIdAttachment = abcd_get_attachment_id_by_url($secondimgPath);
$size = array( 854,395, 'bfi_thumb' => true, 'quality' => 100);
echo $secondLargeImage[0] = wp_get_attachment_image( $secondimgIdAttachment,$size );
echo get_post( $secondimgIdAttachment )->post_excerpt;
endif; ?>`
In functions.php, use the following -
function abcd_get_attachment_id_by_url( $url ) {
// Split the $url into two parts with the wp-content directory as the separator
$parsed_url = explode( parse_url( WP_CONTENT_URL, PHP_URL_PATH ), $url );
// Get the host of the current site and the host of the $url, ignoring www
$this_host = str_ireplace( 'www.', '', parse_url( home_url(), PHP_URL_HOST ) );
$file_host = str_ireplace( 'www.', '', parse_url( $url, PHP_URL_HOST ) );
// Return nothing if there aren't any $url parts or if the current host and $url host do not match
if ( ! isset( $parsed_url[1] ) || empty( $parsed_url[1] ) || ( $this_host != $file_host ) ) {
return;
}
// Now we're going to quickly search the DB for any attachment GUID with a partial path match
// Example: /uploads/2013/05/test-image.jpg
global $wpdb;
$attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM {$wpdb->prefix}posts WHERE guid RLIKE %s;", $parsed_url[1] ) );
// Returns null if no attachment is found
return $attachment[0];
}