I am creating a news centre which pulls in the newest wordpress post, of a specified category. It includes the post image and title. The div group has a hover animation, and i want that class, when clicked, to link to the post its pulling the title and image from.
Currently it only links if you click on the title itself, i want to be able to click the entire block and it link to the post. Any ideas? here is the code as it stands...
<?php query_posts('cat=1 &posts_per_page=1'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="block-1">
<div class="news-center-overlay transition">
<p>VIEW FULL STORY</p>
<div id="news-line-box">
<div id="part-1"></div><div id="part-2"><img src="<?php echo get_stylesheet_directory_uri()?>/img/star.png"/> </div><div id="part-3"></div>
</div>
<h4>COMETS BASKETBALL</h4>
</div>
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
<p class="news-center-title animation"><?php echo get_the_title( $ID ); ?></p>
</div>
<?php endwhile; endif; ?>
From my understanding, You are looking to click a Block with the link to the post that resides under the Block
If this is the case, The Block can be wrapped in a href link or the href link can be wrapped to the news-center-overlay class
<?php query_posts('cat=1 &posts_per_page=1'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="block-1">
<div class="news-center-overlay transition">
<p>VIEW FULL STORY</p>
<div id="news-line-box">
<div id="part-1"></div><div id="part-2"><img src="<?php echo get_stylesheet_directory_uri()?>/img/star.png"/> </div><div id="part-3"></div>
</div>
<h4>COMETS BASKETBALL</h4>
</div>
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
<p class="news-center-title animation"><?php echo get_the_title( $ID ); ?></p>
</div>
</a>
<?php endwhile; endif; ?>
Related
I'm working on a site built on wordpress and trying to update the company team page. The section is a horizontal container with images of each member.
However, I run into an issue where some images don't appear on a desktop viewport, i.e. the first and last images show but not the ones in the middle. The rest of the images only populate when I resize the screen width to a mobile screen size.
My php template:
<div id="team-container" class="uk-column-1-1#s uk-column-1-3#m uk-column-1-5#l">
<?php if ( have_rows( 'team_members' ) ) : ?>
<?php while ( have_rows( 'team_members' ) ) : the_row(); ?>
<a href="<?php the_sub_field('linkedin_url'); ?>">
<div class="team-members">
<?php if ( get_sub_field( 'image' ) ) { ?>
<img class="team-members-img" alt data-src="<?php the_sub_field( 'image' ); ?>" data-srcset="<?php the_sub_field( 'image' ); ?>" uk-img>
<?php } ?>
<div class="team-members-name-layer">
<h4 class="team-members-name"><strong><?php the_sub_field('name'); ?></strong><br><span class="team-members-positions"><?php the_sub_field('positions'); ?></span></h4>
</div>
</div>
</a>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
My Wordpress site displays all the posts, stacked in articles spanning the full width on the index.php using rows (Bootstrap 3).
index.php - HTML
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php displays the post in each article (which are stacked on top of each other, full width, down the page)
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<div class="row">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
I have the title and category showing up properly in each row. I would like each post's post-thumbnail (I added its use in functions.php) to be the background image of each row. Filling the whole space (background-size: cover)
Basically large, '100% width' & '300px(roughly) height' rows, each with corresponding title, category, and their post-thumbnail as a background-image.
If not done yet, enable thumbnails and define custom image sizes:
// Enable thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size',580, 480, true);
To display the thumbnails:
First, get the featured image URL for the post:
The parameter 'my-fun-size' should be the name of the size of the image you defined in your functions.php file - it can also be 'full' or 'thumbnail'
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
Then add the image as a background:
<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
And finally, apply some CSS to achieve your desired background-size:
article {
background-size: cover;
}
It sounds like you've already figured out the CSS part, so here's the PHP/HTML you're looking for:
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<?php $imgurl = wp_get_attachment_src( get_post_thumbnail_id($post->ID) ); ?>
<div class="row" style="background-image: url('<?php echo $imgurl[0]; ?>');">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
References:
http://codex.wordpress.org/Function_Reference/get_post_thumbnail_id
http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
I am trying to target individual posts so I can change the css (title tags, padding, etc) of specific posts. My Wordpress site currently generates the posts in a loop.
index.php code (brings in content.php which has 'post' code)
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php code (gets post-title, category, and sets post-thumbnail to background-image)
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID()), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
<article id="post-<?php the_ID(); ?>" style="background-image:url('<? php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
functions.php (setting image size)
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size', 'thumbnail');
The output is 'rows' 100% width with the title, category and background-image (feature-image). Stacked on top of each other. I want to be able to target the text and bg-image of different posts to make them each look different.
i think the best way to to this is by adding a custom field inside your posts, then, in your templates, you call that custom field this way:
get_post_meta($post->ID, 'name_of_your_custom_field', true);
this must be inside the loop.
got another question to ask:
I would like to display post thumbnails with the post title underneath. I have managed to work that out through asking on here, however now I would like to add a function that checks for a thumbnail and if none is available displays a dummy image.
Here is my try, which does display the thumbnail (if there) but not the dummy (if no thumbnail is attached):
<div class="gallery_container_wrapper">
<?php query_posts( $args ); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="gallery_image_container">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<div class="gallery_image_thumb">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail'); }
else {
echo
'<img src="http://www.kunstamkasten.de/wp-content/uploads/2014/08/gallery_dummy.jpg" />'
; } ?>
</div>
<div class="gallery_title">
<h2>
<?php the_title(); ?>
</h2>
</div>
</a>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
What am I doing wrong here?
This code works for me. Yours is virtually identical.
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/sunlit_path_banner.jpg" alt="Sunlit Path" />
<?php endif; ?>
Note: I also cut and pasted your code and tested on my WP install, and it worked fine.
Or... try this alternative to the if condition:
<?php if ( get_the_post_thumbnail( get_the_ID() ) ) {
the_post_thumbnail('thumbnail'); }
else {
echo
'<img src="http://www.kunstamkasten.de/wp-content/uploads/2014/08/gallery_dummy.jpg" />'
; } ?>
I am pretty new in WordPress development and I am trying to implement this custom theme that handle the so called featured posts: http://lnx.asper-eritrea.com/
As you can see in the posts area of the homepage I have the Articoli in evidenza sub area that contains my featured posts and under it the Ultimi Articoli subarea that contains the latest posts.
To implment this I use the posts tag and in the futured posts area I show the posts having the tag=featured condition.
So this is my code:
<section id="blog-posts">
<header class="header-sezione">
<h2>Articoli in evidenza</h2>
</header>
<?php query_posts('tag=featured');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="featured-posts">
<h1><?php the_title(); ?></h1>
<div class="meta">
Scritto da <span class="author"><?php the_author_link(); ?></span> // <?php the_category(', ') ?> // <?php comments_popup_link('Nessun Commento', '1 Commento ', '% Commenti'); ?>
</div>
<div class="featured-details"><?php the_excerpt()?>
<?php $featured_img = get_post_meta($post->ID, 'featured_img', $single = true); ?>
<img src="<?php echo $featured_img ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<header class="header-sezione">
<h2>Ultimi Articoli</h2>
</header>
<?php
if (have_posts()) :
// Start the Loop.
while (have_posts()) : the_post();
/*
* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
*/
get_template_part('content', get_post_format());
endwhile;
else :
// If no content, include the "No posts found" template.
get_template_part('content', 'none');
endif;
?>
</section>
As you can see first I show the posts having a tag featured by the use of query-posts() function:
<?php query_posts('tag=featured');?>
Now my problem is that if a post have the featured tag I don't want that it is shown in the latest post area (at this time it is shown). So I tried to use this code:
<header class="header-sezione">
<h2>Ultimi Articoli NOT FEATURED</h2>
</header>
<?php query_posts('tag != featured');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="featured-posts">
<h1><?php the_title(); ?></h1>
<div class="meta">
Scritto da <span class="author"><?php the_author_link(); ?></span> // <?php the_category(', ') ?> // <?php comments_popup_link('Nessun Commento', '1 Commento ', '% Commenti'); ?>
</div>
<div class="featured-details"><?php the_excerpt()?>
<?php $featured_img = get_post_meta($post->ID, 'featured_img', $single = true); ?>
<img src="<?php echo $featured_img ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
But don't work and the featured post still shown in the homepage. As you can se I tried so specify that, to be shown, a post can't have the featured tag:
<?php query_posts('tag != featured');?>
Why don't work? What am I missing? Can you help me to fix this issue?
Tnx
To return posts that do not contain a particular tag, you should use pass the ID of the term into the tag__not_in argument.
// get the term using the slug and the tag taxonomy
$term = get_term_by( 'slug', 'featured', 'post_tag' );
// pass the term_id to tag__not_in
query_posts( array( 'tag__not_in' => array ( $term->term_id ) );
is_front_page()
You should try <?php is_front_page(); ?> or vice versa.
http://codex.wordpress.org/Function_Reference/is_front_page
<?php if (is_front_page()) { ?>
<!-- Do something -->
<?php } else { ?>
<!-- Add else only if you need it! -->
<?php } ?>