I'm trying to load 4 random thumbnails at the end of each post on Wordpress and each thumbnail should link to its respective post. I can't figure out how to do it properly, since I have very little knowledge of PHP. I have found this code snippet in the theme that get the thumbnail and the title:
<div class="col-sm-4 col-md-4 col-lg-4 tiles" id="post-<?php the_ID(); ?>" <?php post_class( 'post' ); ?> itemscope="" itemtype="http://schema.org/BlogPosting">
<?php
if ( has_post_thumbnail() ) {
echo '<div class="post-thumbnail">';
echo '<a href="' . esc_url( get_permalink() ) . '">';
echo get_the_post_thumbnail( $post->ID, 'shop_isle_blog_image_size' );
echo '</a>';
echo '</div>';
}
?>
<div class="tile_title">
<a class="post-title"><?php the_title(); ?></a>
</div>
</div>
Furthermore, the thumbnails should come from the same category as the current post. E.g. if someone is reading a blogpost from the "Travel" category the 4 thumbnails should only come from this category, and the same goes for the rest of the categories. Is it possible to do this?
This is called "related posts" feature. There are many plugins for this, for example YARPP is one such plugin.
If you want to avoid plugin, you can get theme that has this functionallity in the template itself. My blog for example uses Ribbon theme and contains this code.
Related
I am pretty new at this and tried to search a lot about this, breaking my site down numerous times because of wrong PHP code, so here is the deal.
I have a Wordpress page with portfolio posts. In those posts the only image displayed is the featured image. Due to that my prettyPhoto plugin won't show the lightbox when I click on that featured photo.
First I had this code ...
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
... which showed the featured image but didn't show the lightbox so it was not clickable. Then I played around and created this:
<?php if ( has_post_thumbnail()) : ?>
<a class="lightbox_single_portfolio" title="<?php echo esc_attr($title); ?>"
href="<?php echo esc_url($image_src); ?>" data-
rel="prettyPhoto[single_pretty_photo]">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
So the featured image got clickable, the lightbox started opening but there is an error that states "Image cannot be loaded. Make sure the path is correct and image exists". Due to that I said to myself that the problem could be that lightbox isn't loading the right image source.
I tried playing a bit more and tried to do this ...
<?php
if ( has_post_thumbnail()) {
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
echo '<a class="lightbox_single_portfolio" href="'.esc_url($image_src).'" data-rel="prettyPhoto[single_pretty_photo]">';
the_post_thumbnail('thumbnail');
echo '</a>';
endif;?>
... aaaand it breaks my site.
What could be the problem?
You are not closing the If statement,
change endif; to }
Well, I'm gonna post an answer as I found out something on the internet and it made my code work. Although the above answer (change endif; to }) did make my code work, it still showed the same error that the path couldn't be found.
I played around again a little bit, and this did the trick:
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
echo '<a rel="prettyPhoto" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
the_post_thumbnail();
echo '</a>';
}
?>
So the PHP calls a $large_image_url instead of the post thumbnail url.
This did the trick, and it works! It shows my featured image in a lightbox :)
I am completely not sure if I am just being blind but not 100% used to wordpress as yet and would love some assistance with this.
I have my blog posts page showing all the blog posts it also has the categories in the sidebar but when a category is selected it changes the URI with the /categories/events but does not limit the posts content to what should be in the category?
<?php get_header(); ?>
<div class="container posts">
<div class="row">
<div class="col-xs-8 col-md-8">
<?php
$args = array (
'post-type' => 'post'
);
$post_query = new WP_Query($args);
if ($post_query->have_posts())
while ($post_query->have_posts()) {
$post_query->the_post();
?>
<div class="post">
<?php
the_post_thumbnail( 'large' );
echo '<a href="' . get_permalink() . '">';
the_title('<h2>', '</h2>');
echo '</a>';
the_excerpt();
echo do_shortcode( "[icon name='fa-calendar-o']" ) . " ";
the_date("d F");
?>
</div>
<?php
}
?>
</div>
<div class="col-xs-4 col-md-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
Any ideas? This is a full custom WP Theme from start to finish so I may be missing something very simple and if someone knows what that is I would greatly appreciate it.
Before loading your index.php page, WordPress will have set up a WP_Query object for you according to the page URL/parameters. So on the main blog posts page, it will be a query that finds all posts; on the Foo category page it'll be a query that finds all posts in category Foo.
In your existing code, you're ignoring that pre-set-up query object and creating a new one, $post_query, that always just grabs all posts. That's why the results aren't changing when viewing a Category.
You should dump your specially-created $post_query object and use the basic WordPress "The Loop" code instead:
if (have_posts())
while (have_posts()) {
the_post();
...
This will use the WP_Query object that's been set up for you by WordPress. Typically you don't create your own WP_Query object unless you're doing something a little out of the ordinary.
I am currently working on a shop page which works with Wordpress + Woocommerce Plugin. I edited the woocommerce Files so that I have custom products, menus and so on.
I managed to get current images from my products, but now I want them to appear on click (the little image Icon, on the Screenshot)
But instead of showing the current product image it shows the first image of each category
.
Here is my current code that loads the wrong product thumbnail:
<div class="modal-content">
<a itemprop="image" href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" class="zoom" rel="thumbnails" title="<?php echo get_the_title( get_post_thumbnail_id() ); ?>">
<?php echo get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ) ?>
</a></div>
It is located in woocommerce/content-product.php.
Thank you in advance
Nico
So this is the solution, I had to create dynamic IDs. As I wrote it was always the same image, the reason of this was that there was only one ID and not multiple/dynamic.
This was the code I had to add to the id:
<div id="modal-<?php echo $product->id ?>" class="modal">
And here is the other one:
<a data-target="modal-<?php echo $product->id; ?>" class="modal-trigger"><i class="material-icons red-text right">photo</i></a>
I use Twenty Twelve Wordpress theme and after a lot of tests and searches, I can't display the full blog post title on my home page...
I changed content.php file and code this :
<h1 class="entry-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
But it display me the excerpt...
Any ideas ?
please paste your code in for loop :
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<h1 class="entry-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<?php endwhile;
else :
echo wpautop( 'Sorry, no posts were found' );
endif;
?>
It has been a while since i have used WordPress but as far as i remember there are to setting stetting for the website and settings for the theme .
in the theme setting there should be a show and hide site title just check that .
that should help .
No code needed .
why don't you just use Posts in Page plugin this allow you to add the post with full title to and page on your website including your home page
Can someone help me change this theme to pull the images in the sidebar from the custom field "sidebar" of each post, instead of the featured image, like it is now. The frame and link can stay the same, I just need the image to come from the custom field instead of the featured image.
<div id="content" class="city_page">
<div id="inner_sidebar">
<?php
$mypages = get_pages( array( 'child_of' => 9, 'sort_column' => 'post_title', 'sort_order' => 'asc' ) );
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content ) // Check for empty page
continue;
$content = apply_filters( 'the_content', $content );
?>
<div class="item city">
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?>
<img class="frame" src="<?php bloginfo('url'); ?>/images/city_image_frame_thumb.png" alt="" />
<a class="title" href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a>
</div>
<?php
}
?>
</div>
As long as your are placing an image URL in the "sidebar" custom field you can replace the entire img src with the following.
<?php echo get_post_meta($post->ID, 'sidebar', true) ?>
You can learn more about the get_post_meta for thumbnail urls here: http://codex.wordpress.org/Function_Reference/get_post_meta#Retrieve_a_Custom_Field_Thumbnail_Url
Hope that helps!
Personally, I am a huge fan of the Advanced Custom Fields plugin. It is one of the first plugins I install in a new WordPress installation. It is really flexible and has a simple API for getting and setting custom fields.
Check it out!