I'd like to create a wordpress blog about sports, so I created a CPT in the functions.php, and used wp_query to display it on my frontpage. So I created 3 fake articles with random titles, texts and images.
What I'd like to do is something like this
I created a custom CSS, and here's my front-page.php and css file
.item-article-front {
background-color: black;
padding-bottom: 10px;
}
Above is the css, below is the php
<?php
echo '<div class="row" >';
$args = array( 'post_type' => 'sport', 'posts_per_page' => 3 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php echo '<div class="entry-content col-md-4 item-article-front">'; ?>
<?php the_post_thumbnail('medium'); ?>
<?php the_title(); ?>
<p><?php the_excerpt(); ?></p>
<?php
echo '</div>';
endwhile;
echo '</div>';
?>
As you can see I tried to background-color the .item-article-front, but even though the class is actually attributed to the proper div, it won't display as I want. It's probably something stupid, but I can't find what that is. Any idea ?
Thanks !
Related
I'm trying to output all posts under custom post type "philosophy" on a page in a list. Alternating between categories "img-left" and "img-right".
I can get the posts to display ALL "philosophy" posts however i want to lay out the posts in two layouts depending on their custom category.
If the category is "img-right" i want the post to be shown with the text on the left and image on the right and vice-versa for "img-left".
I have tried the below code which doesn't work at all.
<?php
$args = array( 'post_type' => 'philosophy', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
if( in_category( 'img-right' ) ):
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="col-md-12"><h2>';
the_title();
echo '</h2></div><div class="row content"><div class="col-md-6"';
the_content();
echo '</div><div class="col-md-5 offset-1 float-right">';
the_post_thumbnail('array(100,100)');
echo '</div></div>';
endwhile;
endif;
?>
by removing the "if" and "endif" i have the code that lists all the posts in one layout. What I need is conditionals that can output both "img-right" and "img-left" layouts based on the post's category. The only layout shown in my example above is "img-right".
Any help would be greatly appreciated. This PHP is making my head spin!
So...with all the help from the guys answering i figured it out using the CSS approach touched on by #Mohsin.
Here is my code:
<div id="content" class="col-12" role="main">
<?php get_template_part('loops/page-content'); ?>
</div>
<div class="row">
<?php
$args = array( 'post_type' => 'philosophy', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="row content"><div class="col-md-12"><h2>';
the_title();
echo '</div><div class="col-md-6">';
the_content();
echo '</div><div class="col-md-6">';
the_post_thumbnail();
echo '</div></div>';
endwhile;
?>
I then applied this:
.row.content:nth-child(even) {
flex-direction: row-reverse;
}
and we're golden.
Thank you to everyone who helped.
If I understand correctly:
<?php $args = array( 'post_type' => 'philosophy', 'posts_per_page' => 10 ); ?>
<?php $loop = new WP_Query( $args ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-md-12"><h2>
<?php the_title(); ?>
</h2></div>
<div class="row content">
<?php if( in_category( 'img-left' ) ): ?>
<div class="col-md-5 offset-1 float-left">
<?php the_post_thumbnail('array(100,100)'); ?>
</div>
<?php endif; ?>
<div class="col-md-6">
<?php the_content(); ?>
</div>
<?php if( in_category( 'img-right' ) ): ?>
<div class="col-md-5 offset-1 float-right">
<?php the_post_thumbnail('array(100,100)'); ?>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
The above code will output all of the posts, with a thumbnail to the left if it is category img-left and thumbnail to the right if in img-right (and outputting both if it is categorized as both, and neither if it is neither category. You may want different behavior, but it should be simple to adjust the conditionals).
If your template becomes anymore complicated, I would recommend moving sections out to template-parts/using functions like get_sidebar().
The code that I'm working on resides in a Twenty Seventeen's child theme, on content-front-page.php. I'm trying to get the most recent posts's featured image in each category (I have three categories) to display in a certain way. Shown below:
Originally, in each colored block. I had this in a php block: <?php
$recentport = new WP_Query(array('category_name' => 'ports-and-terminals', 'numberposts'=> 1, 'posts_per_page'=> 1));
while($recentport->have_posts()): $recentport->the_post();
$urlp = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
?>
<div style="height: 250px; position: relative">
<div style="height:inherit; background: url('<?php echo $urlp;?>'); background-size:cover; "> <!--i-->
<div id="img-overlay" style="height: inherit; background: linear-gradient(#0000ff, #000066); opacity: .7;">
</div>
<span class="feat-title-link">
<a href="<?php the_permalink(); ?>">
<?php the_title_limit(75, '...'); ?>
</a>
</span>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
The featured images populated with the above code. If I add a new post in wordpress and set it to a category with the code above, the new post appears underneath or above the set category, like:
That is not what I want. I want to keep the layout in the 1st picture. So...I changed the code in one color block to this to test: <?php
$args = array('category_name' => 'ebusiness', 'numberposts'=>'1');
$recentcust = wp_get_recent_posts($args);
foreach( $recentcust as $post ){
$linkid = get_permalink($post["ID"]);
$thumb_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
$thumb_url = $thumb_url[0];
echo '' .$post["post_title"].'';
echo (!empty($thumb_url)) ? $thumb_url : 'No thumb!';
}
wp_reset_query();
//$recentebiz = new WP_Query(array('category_name' => 'ebusiness', 'post_per_page'=>1));
//while($recentebiz->have_posts()): $recentebiz->the_post();
//$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
?>
<div id="recentebiz-tile" style="background: url('<?php echo $thumb_url;?>');">
</div>
The above code does not populate the featured image of the recent post in each category. Hence, my problem. Here's my logic:
$args = array();: $args variable holds the parameters for the next line.
$recentcust = wp_get_recent_posts($args): $recentcust variable holds the results of *wp_get_recent_posts* query with my set of parameters.
foreach( $recentcust as $post ){} loops through the results and separates them into $post.
Inside the foreach(){} loop: $linkid = get_permalink($post["ID"]): $linkid is the link with the $post's ID.
Inside the foreach(){} loop: $thumb_url = wp_get_attachment_image_src(
get_post_thumbnail_id($post->ID), 'thumbnail' ): gets the featured image that is associated with the $post's ID?
Inside the foreach(){} loop: $thumb_url = $thumb_url[0]: gets the 1st picture (with the array position at 0)?
Outside of the foreach(){} loop: echo $thumb_url[0] to display featured image.
But it's not displaying it. I want the featured image to display in each code block. I know I'm going about this the hard way, but I want to know how the code and Wordpress works. Am I missing something? Thanks in advance.
Resources I've used are to come up with this code:
Wordpress.org Codex: wp_get_recent_post
Wordpress.org Codex: wp_get_attachment_image_src
StackOverflow Question + Answers
And some others...
I've figured it out...somehow. For future reference, I got the code snippet from here. Then changed it to this:
<?php
$args = array('category_name' => 'ebusiness', 'numberposts'=>'1');
$posts = get_posts( $args );
foreach($posts as $post) {
$thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array('220','220'), true );
$thumbnail_url = $thumbnail_url[0];
echo ( !empty($thumbnail_url) ) ? $thumbnail_url : 'No thumb!';
}
wp_reset_query();
?>
Then I used another foreach loop to bring back the permalink and the post title with the same args parameters in a different query.
I just wanted get help in understanding the functions involved bringing back pictures. I know there's a better way of doing this. Just need help figuring that out now.
In this code of yours
$recentport = new WP_Query(array('category_name' => 'ports-and-terminals', 'numberposts'=> 1, 'posts_per_page'=> 1));
while($recentport->have_posts()): $recentport->the_post();
$urlp = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
?>
<div style="height: 250px; position: relative">
<div style="height:inherit; background: url('<?php echo $urlp;?>'); background-size:cover; "> <!--i-->
<div id="img-overlay" style="height: inherit; background: linear-gradient(#0000ff, #000066); opacity: .7;">
</div>
<span class="feat-title-link">
<a href="<?php the_permalink(); ?>">
<?php the_title_limit(75, '...'); ?>
</a>
</span>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
As what can I see, you are getting ports-and-terminals latest post then display it within HTML, and the while loop continues doing so.
What I think you should do is closing While loop after getting the recent post immediately.
You can do it all at once like so...
<?php
$args = array('category_name' => 'ebusiness', 'numberposts'=>'1');
$posts = get_posts( $args );
foreach($posts as $post) {
$thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array('220','220'), true );
?>
<div style="height: 250px; position: relative">
<div style="height:inherit; background: url('<?php echo $thumbnail_url[0];?>'); background-size:cover; "> <!--i-->
<div id="img-overlay" style="height: inherit; background: linear-gradient(#0000ff, #000066); opacity: .7;">
</div>
<span class="feat-title-link">
<a href="<?php get_permalink($post->ID); ?>">
<?php echo wp_trim_words( $post->post_title, 5, '...' );?>
</a>
</span>
</div>
</div>
<?php
}
?>
Apologies in advance for a question, which to an expert, I've no doubt is relatively obvious. I've looked at WordPress Codex for the appropriate information (the_post_thumbnail, the_excerpt, etc) but am not well versed enough in .php yet to implement it properly. Still learning!
I am trying to display, within the of a standard (WP) page, the child-pages, including their Title, Thumbnail and Excerpt. I can get everything to work bar the THUMBNAIL and EXCERPT with the following:
<div class="child-pages">
<?php
$pageChild = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'menu_order', 'sort_order' => 'ASC' ) );
foreach( $pageChild as $page ) {
?>
<!-- loop: child page -->
<div class="child">
<header class="entry-header">
<?php echo '<h3>'.$page->post_title.'</h3>'; ?>
</header><!-- .entry-header -->
<img src="<?php echo the_post_thumbnail_url( $page->ID ); ?>">
<?php echo $page->the_excerpt; ?>
</div>
<?php } ?>
</div>
So far, I can see the links/titles of the correct child-pages, and in the correct order, but not the Thumbnail or Excerpt. Obviously, I am not calling the Thumbnail or the Excerpt properly. Could someone please correct me?
I have also tried these lines, as supported by the twenty-sixteen theme:
<?php twentysixteen_post_thumbnail(); ?>
<?php the_excerpt(); ?>
Any help would be much appreciated!
The thumbnail doesn't show because the function the_post_thumbnail_url(); shows the thumbnail of the current post, the parameter is to specify the size of the image, not the post.
$post->the_excerpt is not necessarily filled. If you look at the add/edit post screen you'll notice two textfields, one for editing the content of the post and one for the excerpt. The excerpt is optional, so the function the_excerpt() shows the content of that field, but when it is empty it will show the first X characters of $post->the_content.
Regarding your second attempt: the functions the_excerpt(), get_permalink() and twentysixteen_post_thumbnail() don't work because you don't set up the post properly.
The easiest way would be to add setup_postdata() to your code:
$pageChild = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'menu_order', 'sort_order' => 'ASC' ) );
foreach( $pageChild as $page ) {
setup_postdata( $page );
// now you can use all the fancy functions like `the_excerpt()`
// add your output here
}
Or you can do it the recommended way, using a WP_Query object:
<?php
$args = array(
'post_parent' => $post->ID,
'orderby' => 'menu_order',
'order' => 'ASC'
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; ?>
<!-- end of the loop -->
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
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).
I have found this code for showing thumbnails as recent posts in a widget. It appears in a grid format which I like very much. I would like to add the title of the post below each thumbnail images. I can manage to get the title show by using the_title(); but then it does not stay as a grid but turns into a list. I would appreciate any help. Thanks
The css used is:
.attachment-thumbnail {
height:150px;
width:150px;
padding:5px;
background:#fff;
margin:5px 5px 0 0;
}
Code:
<?php
$my_query = new WP_Query('showposts=12&amp;amp;orderby=rand');
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
?>
<?php
$attachments = get_posts( array(
'post_type' => 'attachment',
'number_posts' => 1,
'post_status' => null,
'post_parent' => $my_query->post->ID,
) );
if ($attachments) {
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php
$thumbnail_id = $attachments[0]->ID;
echo wp_get_attachment_image( $thumbnail_id );
}
endwhile;
}
wp_reset_query();
?>
It'd be helpful to know the CSS attributes that are being assigned to the title text when it's introduced to the page you're creating as that's likely what's turning your grid into a list. I would think the best way forward here is to wrap the thumbnail/title pairs in a div and to make those divs have the attribute "display: inline" so that the divs appear side by side rather than on top of each other.