I'm running into two problems transferring a Wordpress archive page into a page template.
<?php $args = array( 'post_type' => 'casestudies', 'posts_per_page' => 12 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="casestudy">'.get_the_post_thumbnail( $post->ID, '180,180' ).'</div>';
First I need to wrap the echo for the thumbnail with a link in order to trigger a css action:
'<a href="'.the_permalink().'" class="anchor-hover">';
When I add that a href line it only prints the link, and doesn't wrap the echo.
The a href should then print the title and excerpt over the thumbnail box:
'<span class="details"><div class="anchor-hover details-h3"><?php the_title(); ?></div>';
'<p class="desc"><?php echo get_post($post_id)->post_excerpt; ?></p></span></a>';
endwhile; ?>
<div class="clear"></div>
</div></div>
In wordpress, you have two type types of functions. One's that return the results, and one's that echo the results.
You are using the_permalink(); which is already echoing out it's result.
You need to be using get_the_permalink(); since you are trying to echo it in your template.
get_permalink worked for that a href, thank you, but how can I get php the_title() and php echo get_post($post_id)->post_excerpt to show up on the cursor hover?
This code should be working if you are in the loop
LINK
The method get in WordPress will give you the string only.
http://codex.wordpress.org/Function_Reference/get_the_excerpt
http://codex.wordpress.org/Function_Reference/get_the_title
Related
In my WordPress website, I have created a category template file (archive file) for showing all posts from a specific category. The code is working fine and I am getting the exact result what I need. However, there is some problem with my code (which I am unable to investigate).
The template file outputs 5 posts and the content of the first 2 posts is exactly what they are. However, the content of the remaining 3 posts appears in bold, which is strange.
Here is my code:
<section class="video_categories" id="content" style="float:left;">
<?php
$args = array(
'post_type' => 'post',
'category_name' => 'sponsor-spotlight',
'posts_per_page' => -1
);
$obituary_query = new WP_Query($args);
while ($obituary_query->have_posts()) : $obituary_query->the_post();
$readMore = ' Keep On Reading...';
echo '<div class="advert-div" style="padding-bottom: 15px;">'; ?>
<h2 class="ad-title"> <?php echo '<a style="color: #333333;font-weight: 600;" href="' . get_the_permalink() . '">';?> <?php the_title(); echo '</a>'; ?>
</h2>
<?php
$post = get_post( $post->ID );
$content_arr = get_extended($post->post_content);
echo apply_filters('the_content', $content_arr['main']);
echo $readMore;
echo '</div><hr>';
endwhile;
wp_reset_postdata();
?>
</section>
As per my investigation, the problem lies in the following lines of code because it results in outputing <strong> </strong> tags which enclose the content:
$content_arr = get_extended($post->post_content);
echo apply_filters('the_content', $content_arr['main']);
Because when I do:
echo apply_filters('the_content', $post->post_content);
I do not see any <strong></strong> tag on the front end that encloses the content.
Here is the strange output of the code I am using above.
Any help will highly be appreciated!
Although there was no reason for the code to output <strong></strong> tags on the front end, so I practiced #Jayr recommendations by changing the status of each post which was showing in bold. The problem was within the content of those posts. I simply recreated new posts with the same content and my problem was resolved.
Thanks to #Jayr for his quick response!
First the problem:
My code is broken if I add an if alternative statement inside another if statment in a loop:
if ( has_post_thumbnail( $post->ID ) ) : ?>
<li>
<?php $partner = the_field('industry_partner_links'); ?>
<?php
if ($partner) :
?>
<a href="<?php the_field('industry_partner_links'); ?>" target="_blank">
<?php echo get_the_post_thumbnail( $post->ID, 'full' ); ?>
</a>
<?php
else :
?>
<a href="#" target="_blank">
<?php echo get_the_post_thumbnail( $post->ID, 'full' ); ?>
</a>
<?php
endif;
?>
</li>
My goal is to create a loop in my template to display some image (they have a URL that will direct to an image) based on a custom post in a Wordpress environment BUT, if the image doesn't have the link (ACF), the url will be empty (href=#").
Essentially, I created a section with my sponsors (image wrapped in a link) and I feed those images and URLs from the backend of WordPress using ACF (advanced custom field). Spoiler, it works.
Tha basic code in php:
<?php
$args = [
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'title',
'post_type' => 'partner',
'post_status' => 'publish',
];
if ( $posts = get_posts( $args ) ) {
echo '<ul class="feed-industry-partners">';
foreach ( $posts as $post ) {
setup_postdata( $post );
if ( has_post_thumbnail( $post->ID ) ) : ?>
<li>
<a href="<?php the_field('industry_partner_links'); ?>" target="_blank">
<?php echo get_the_post_thumbnail( $post->ID, 'full' ); ?>
</a>
</li>
<?php endif;
wp_reset_postdata();
}
echo '</ul>';
}
?>
Any Idea why it is not working?
From the code you gave here I can guess that function the_field('industry_partner_links') does not return anything but it prints to output. So good news, your code is correct. The problem is with logic here. Variable $partner = the_field('industry_partner_links'); will be always falsy. But there is a workaround with output buffering (but this is ugly solution): <?php ob_start(); the_field('industry_partner_links'); $product = ob_get_flush(); ?>. More proper way is to make some switch in function the_field() which will return value instead of printing it. Or maybe make another function which will do the same job but it will return the result, hm? :)
I'm modifying a pre-built theme to display 3 'featured posts' before the main grid of all posts on the index.php home page. I thought that the best way to do this was to do another loop before the main loop that queries posts with the category 'featured'. I need it to display the title of the post as well as the post categories in front of a background image of the post thumbnail.
However, when I use the_category(); the background image is no longer clickable and it seems that the anchor tag duplicates and closes itself around every element in the loop. My code is as follows:
<?php
$query = array(
'posts_per_page' => 3,
'post_type' => 'post',
'category_name' => 'featured',
'orderby' => 'date',
'order' => 'DESC'
);
$featured_home = new WP_Query( $query );
if( $featured_home->have_posts() ) {
?>
<div class="container featured-home">
<?php while ( $featured_home->have_posts() ) : $featured_home->the_post();?>
<div class="featured-home-box">
<a href="<?php the_permalink(); ?>">
<div class="featured-home-img" <?php
if ( $thumbnail_id = get_post_thumbnail_id() ) {
if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
printf( ' style="background-image: url(%s);"', $image_src[0] );
}?>>
<div class="blog-info-content">
<span class="cat"><?php the_category(); ?></span>
<h3><?php the_title(); ?></h3>
</div>
</div>
</a>
</div>
<?php
endwhile;
?>
</div>
<?php
}
wp_reset_postdata();
?>
Everything works fine until I add the_category();.
Now when I inspect the boxes I see this:
<div class="featured-home-img" style="background-image: url(bag.jpg);">
<div class="blog-info-content">
<a href="my-favorite-bag/">
<span class="cat"></span>
</a>
<ul class="post-categories">
<li>
Culture
</li>
<li>
Featured
</li>
</ul>
<h3>My Favorite Bag</h3>
</div>
</div>
The anchor link with "my-favorite-bag" (the permalink) is duplicated over and over again. Also, the category is NOT enclosed in the span with the class of "cat", as I would expect.
Why does this only happen when I add the_category or get_the_category?
How do I show the categories for each post in this loop?
The easiest way to get the category would be by passing the get_the_category() function the current post id.
$post_id = get_the_ID(); // or use the post id if you already have it
$category_object = get_the_category($post_id);
$category_name = $category_object[0]->name;
The get_the_category() function returns an object that contains properties such as the category id, it's name, etc...
Also, note that when using multiple wordpress loops, you may have to call wp_reset_postdata() to reset to the original query.
You can read more here:
Wordpress Wp_Query
get_the_category()
You can get the category name in number of ways:
within the post loop, if your posts have only one category then use as :
$cats = get_the_category();
$cat_name = $cats[0]->name;
and if your post have more than 2 categories then you can look for get_the_category_list().
Reference Link: https://codex.wordpress.org/Function_Reference/get_the_category_list.
for getting the link for this category you can use
$category = get_the_category();
echo '<img src="'.$category[0]->cat_name.'" alt="'.$category[0]->cat_name.'" />';
While working with the category archive (this could be used before the loop to save the category name to the $cat_name variable):
$cat_name = get_category(get_query_var('cat'))->name;
Reference Link: http://codex.wordpress.org/Function_Reference/get_category
Try this one...
It automatically creates a <ul><li>category name</li></ul> structure and shows name with the permalink. This should work for all options.
<?php the_category() ?>
I am trying to get the link from the database in WordPress and user should direct to that link on a single click.
I have almost achieved everything but there is one weird problem I am facing.
In my custom php file I have this code.
<div style =" margin-bottom: 40px; "><div><li><a href="<?php echo $array_var ?>">
<?php echo get_the_post_thumbnail( $post_id, 350,'' ); ?></br><h2><?php the_title(); ?></h2></a><?php echo get_the_excerpt();?></li></div></div>
Here ahref tag is coming as "website custom page link/database-link". Whereas at other places it is coming only as link from the database (which is the correct case for me.)
I will explain it little more.
<?php $query = new WP_Query( array(
'post_type' => 'post',
'category_name' => 'Trending',
'posts_per_page' => 8
) );
$i=0;
while ($query->have_posts()) : $query->the_post();
$post_id= $query->post->ID;
$array_var=$link_array[$i];
**echo $array_var;**
?>
<ul>
<div style =" margin-bottom: 40px; "><div><li>**<a href="<?php echo $array_var ?>">**
<?php echo get_the_post_thumbnail( $post_id, 350,'' ); ?></br><h2><?php the_title(); ?></h2></a><?php echo get_the_excerpt();?></li></div></div>
<?php
$i++;
endwhile; ?>
</ul>
I have marked two places in the code in asterisk. Both have same code but behaviour is different. At first place I am getting link as, say, www.google.com and at second place I am getting it as /www.google.com.
I want it to be www.google.com only.
For reference, the corresponding page is www.coolfuzz.com, you can see that in the first row above every thumbnail is the correct link(which is not clickable btw) but thumbnail has incorrect link.
Please tell me how to correct this?
You should add the http:// to the beginning
In a Wordpress page template I have the following code in an effort to replicate a successful archive page:
<?php $args = array( 'post_type' => 'casestudies', 'posts_per_page' => 12 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="casestudy">'.get_the_post_thumbnail( $post->ID, '180,180' ).'</div>';
echo '<span class="details"><div class="anchor-hover details-h3">'.the_title().'</div>';
echo '<p class="desc">'.get_post($post_id)->post_excerpt.'</p></span>';
endwhile; ?>
<div class="clear"></div>
I need to compress that into only one echo, in order to have the css animation work. I will also need to wrap the entire display starting with "echo" with this div:
<div<?php post_class('margin') ?> id="post-<?php the_ID(); ?>">
The title and excerpt are only supposed to show when the cursor is hovering over the thumbnail, but I can't get this line of code in without an unexpected syntax error.
I am able to get this to work on the archive for this post type so there should be some way to do it.
Am I asking too much of this kind of code? Is there a reason I can get the animation working on the archive page working but not this one? Thanks
you can't double parse php...
echo '<div class="casestudy">'.get_the_post_thumbnail( $post->ID, '180,180' ).'</div>';
should be
echo '<div class="case study">'.get_the_post_thumbnail( $post->ID, '180,180' ).'</div>';
specifically:
<?php the_permalink() ?>
should be
.'the_permalink().'
It might help you to format your code a bit. It looks like there may be problems with single and double quotes, along with PHP tags inside strings. If you are creating large HTML template fragments, you may want to use something like ob_start() and ob_get_clean()
Here's just a quick example using your code:
<?php
$args = array( 'post_type' => 'casestudies', 'posts_per_page' => 12 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) {
$loop->the_post();
ob_start();
?>
<div class="casestudy">
<a href="<?php the_permalink() ?>" class="anchor- hover">
<?php
echo get_the_post_thumbnail( $post->ID, '180,180' );
?>
</a>
</div>
<span class="details">
<div class="anchor-hover details-h3">
<?php
echo the_title();
?>
</div>
<p class="desc">
<?php
echo get_post($post_id)->post_excerpt;
?>
</p>
</span>
<?php
echo ob_get_clean();
}
?>
<div class="clear"></div>
Side note: you probably shouldn't put an inline element (span) inside a block level element (div).