<?php $args = array(
'posts_per_page' => '12',
'product_cat' => 'summer',
'post_type' => 'product',
'orderby' => 'title',
);
echo '<div class="col-xs-12 col-sm-4 col-md-4">';
$query = new WP_Query( $args );
if( $query->have_posts()) : while( $query->have_posts() ) : $query->the_post();
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
echo '<div class="wrap valshow" style="background: url(.echo $src[0];. ) !important;" role="banner">';
echo '<figcaption><h3><a rel="' .get_permalink(). '" href="' .get_permalink(). ' ">';
the_title();
echo '</a></h3></figcaption>';
echo '</div>';
echo '</div>';
endwhile;
endif;
wp_reset_postdata();
?>
I am trying to assemble a query for woocommerce which shows the title which this does. I need to add a button which will also link to the product.
The issue I am trying to figure out is how to get the products feature image set as a background where I have it in the code above. I found some code which works in a normal loop. I have tried to use
the_post_thumbnail('full');
where i have echo $src[0]; but all I get is an image above the div and not as a background. I feel like I'm close... Any help would be great, Thanks.
you are using echo under echo
use this :
echo '<div class="wrap valshow" style="background: url(' . $src[0]; . ') !important;" role="banner">';
Also, if you are using the_post_thumbnail('full'); , it outputs the whole image tag.
Related
I'm using this piece of code in my Wordpress template:
<?php
$args = array( 'numberposts' => '12', 'post_type' => 'training', 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ) {
echo '<div class="col-xs-12 col-md-4"><article><div class="kartel"><a href="' . get_permalink($recent["ID"]) . '">';
if ( has_post_thumbnail( $recent["ID"]) ) {
echo get_the_post_thumbnail($recent["ID"],'medium');
}
echo '</a></div><h3>' . $recent["post_title"].'</h3> ';
echo '<em>Doelgroep //</em>
<p>One-liner/super korte omschrijving</p>';
echo 'Tell me more ';
echo '</article></div>';
}
wp_reset_query();
?>
Thing is that I now want to add a custom field (let's say 'custom_field') that displays a custom excerpt underneath the thumbnail for the grid. I can get the usual fields (excerpt, title, etc.) but not the custom fields. For example the_field ('custom_field'); isn't working..
Any ideas/suggestions?
Hope to hear from you guys!
Filt
First of all change your approach to queries and Wordpress loops using the WP_Query class.
<?php
$args = array( 'numberposts' => '12', 'post_type' => 'training', 'post_status' => 'publish' );
$loop = new WP_Query($args);
if( $loop->have_posts() ) {
while( $loop->have_posts() ){
$loop->the_post(); ?>
<div class="col-xs-12 col-md-4">
<article>
<div class="kartel">
<a href="<?php the_permalink(); ?>">
<?php if( has_post_thumbnail("medium") ) {
the_post_thumbnail( "medium" );
}
?>
</a>
</div>
<a href="<?php the_permalink(); ?>">
<?php the_title("<h3>","</h3>"); ?>
</a>
<em>Doelgroep //</em>
Tell me more
</article>
</div>
<?php }
}
wp_reset_postdata();
?>
Later, in the loop of your posts, you can recall the custom field using:
the_field ('custom'); //which prints the result on screen
$var = get_field ('custom'); //or echo get_field ('custom') which returns the content in a variable.
If you want to recall a specific custom field inserted in a post or page or custom post type, you must use the following syntax:
the_field ('custom', $ post_id);
get_field ('custom', $ post_id)
That's all :)
I have a custom post type with page attributes so I can create sub pages. I'm trying to display the title of the parent page in the h1 and then have it loop through and display the content of the child pages. The code below almost does this but it's outputting the child pages also in the first bit as h1 titles so I'm getting duplicates of the child page titles. How can I exclude the child pages and prevent them from displaying in the first part of the loop?
Many thanks.
<?php
echo "<ul>";
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
echo "<li><h1>".get_the_title()."</h1>";
$args=array(
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => $post->ID,
'post_type' => get_post_type( $post->ID ),
'posts_per_page' => 10
);
$childpages = new WP_Query($args);
if($childpages->post_count > 0) { /* display the children content */
echo "<ul>";
while ($childpages->have_posts()) {
$childpages->the_post();
echo "<li><h2>".get_the_title()."</h2></li>";
echo "<li><h2>".the_content()."</h2></li>";
}
echo "</ul>";
}
wp_reset_query();
echo "</li>";
}
}
echo "</ul>";
?>
Update: Managed to get a little bit further, almost there I think. I can now see just one sub post (the latest) and the same sub post is duplicated under each parent title either though it isn't a child of the others.
Can anyone please help me nail this last bit. Thanks.
<?php $parent_pages = get_pages( array(
'parent' => 0,
'post_type'=> 'archive'
));
foreach( $parent_pages as $parent_pages)
{ ?>
<h1><?php echo $parent_pages->post_title; ?></h1>
<?php
$children = get_pages(array(
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => $post->ID,
'post_type' => get_post_type( $post->ID )
));
foreach($children as $child);
?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php } ?>
Update: Trying #robbintt suggestions, I'm now here. Not sure if I'm using the get_page_children correctly and I'm now getting "Parse error: syntax error, unexpected T_AS, expecting ';' "
<?php
$parent_pages = get_pages( array(
'parent' => 0,
'post_type'=> 'archive'
) );
for ( $parent_pages as $parent_page { ?>
<h1><?php echo $parent_page->post_title; ?></h1>
<?php
$all_pages = get_pages()
$child_pages = get_page_children($parent_pages->ID, $all_pages );
for ( $child_pages as $child_page ) { ?>
<h2><?php echo $child_page->post_title; ?></h2>
<p><?php echo $child_page->post_content; ?></p>
<?php } ?>
Update: Here's my final working code thanks to #robbintt for the help.
<?php
$parent_pages = get_pages( array( 'parent' => 0, 'post_type'=> 'archive' ) );
foreach ( $parent_pages as $parent_page ) {
echo '<h1>';
echo $parent_page->post_title;
echo '</h1>';
$all_pages = get_pages(array( 'post_type'=> 'archive' ) );
$child_pages = get_page_children($parent_page->ID, $all_pages );
foreach ( $child_pages as $child_page ) {
echo '<h2>';
echo $child_page->post_title;
echo '</h2>';
echo '<p>';
echo $child_page->post_content;
echo '</p>';
}
}
?>
You're abusing the loop a little bit here by using the standard while ( have_posts() ) {}.
Instead, lets target the parent page, and then use a for loop to get the child pages.
/* here we include only pages with no parent */
$parent_pages = get_pages( 'parent' => 0 )
foreach ( $parent_pages as $parent_page ) {
/* Proceed as you have inside the while loop, targeting $parent_page each time */
}
Here is the rest of the documentation so you can sort as you wish: http://codex.wordpress.org/Function_Reference/get_pages#Parameters
Part 2:
Here's the next requested section, how to get information for child pages:
http://codex.wordpress.org/Function_Reference/get_page_children
This function will return an array of page children. The key here is that this loop is run inside the other loop which actually gets all the parent pages.
$all_pages = get_pages( array( 'post_type'=> 'archive' ) )
$child_pages = get_page_children($parent_page->ID, $all_pages );
foreach ( $child_pages as $child_page ) {
/* proceed with any calls on child page such as ID/title, in the format $child_page->ID */
Let me know how it goes! Here's the new function we are using:
http://codex.wordpress.org/Function_Reference/get_page_children
Part Three:
Here I've cleaned up your code a bit for the child page section. There was a lot going on, so I standardized and simplified how you echo'd HTML and added a lot more lines. This made the design pattern a lot more visible to the human eye.
<?php
$parent_pages = get_pages( array( 'parent' => 0, 'post_type'=> 'archive' ) );
foreach ( $parent_pages as $parent_page ) {
echo '<h1>';
echo $parent_page->post_title;
echo '</h1>';
$all_pages = get_pages( array( 'post_type'=> 'archive' ) );
$child_pages = get_page_children($parent_page->ID, $all_pages );
foreach ( $child_pages as $child_page ) {
echo '<h2>';
echo $child_page->post_title;
echo '</h2>';
echo '<p>';
echo $child_page->post_content;
echo '</p>';
}
}
?>
Here's my original writeup of this code: http://codepad.org/pLtFCI1l
Current theme is set up to generate a thumbnail based on user input (variable height). I would like to have this thumbnail link to a full size featured image via prettyphoto. Current code calling generated thumb:
<?php
//if our user has a post thumbnail
//out featured image URL
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
?>
<?php if($src[0] != '') : //if user has featured image ?>
<img src="<?php echo ddTimthumb($src[0], $contentW, get_post_meta($post->ID, 'postThumbHeight', true)); ?>" alt="<?php the_title(); ?>" />
You can use this just modify the classes and other attributes according to your need.
<?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>';
}
?>
I am actually using this same thing in one of my project see the code link and see if that can help you :) and once again don't expect it to work by copy pasting this is just to give you an idea modify it to your needs :)
Link to pastebin for code sample (or see below)
<div class="row" id="gallery-main">
<?php $args = array(
'post_type' => 'portfolio',
'orderby' => 'menu_order',
'order' => 'ASC',
'posts_per_page' => -1,
);
query_posts($args); if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="span4 portfolio-item">
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
echo '<a class="image-link pi-img" rel="prettyPhoto" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
the_post_thumbnail('portfolio-listing');
echo '<div class="hover-style"></div></a>';
}
?>
</div>
<?php endwhile;endif; ?>
<?php wp_reset_query(); ?>
</div>
I'm using a custom post type plugin that returns an uploaded file's attachment ID instead of its url.
I've been able to get the image to display using wp_get_attachment_image_src as outlined in the codex here http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src but my problem is getting it to play nicely with the code on the template page used to call the information from the custom post type.
Stripping it down to the basics, this is what calls the custom post type info from the template page:
<?php
$slideshowplatform = get_post_meta($post->ID, 'slideshowplatform', true);
foreach($slideshowplatform as $slide) {
echo '<img src="' . $slide['slide'] . '" />';
}
?>
I'm having difficulty reconciling this with what the codex provides:
<?php
$attachment_id = 8; // attachment ID
$image_attributes = wp_get_attachment_image_src( $attachment_id ); // returns an array
?>
<img src="<?php echo $image_attributes[0]; ?>">
It seems like something like the following should work, but I'm obviously missing something with the php syntax
<?php
$slideshowplatform = get_post_meta($post->ID, 'slideshowplatform', true);
foreach($slideshowplatform as $slide) {
$image_attributes = wp_get_attachment_image_src( $slide['slide'] );
echo '<img src="<?php echo $image_attributes[0]; ?>" />';
}
?>
Any thoughts would be appreciated, thanks.
I think this is what you want
if ( $post->post_type == 'slideshowplatform' && $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) {
$thumbimg = wp_get_attachment_link( $attachment->ID, 'thumbnail-size', true );
echo $thumbimg;
//$image_attributes = wp_get_attachment_image_src( $slide['slide'] );
//echo '<img src="' . $image_attributes[0] . '" />';
}
}
}
So I have a snippet of code that grabs the categories and their coinciding posts and lists them outside of the loop (Below). I've been trying to get the post to link to #post-[ID] instead of the permalink - but I keep failing. Can anyone help?
<ul id="sidebar">
<?php
foreach( get_categories('orderby=ID&order=desc') as $cat ) :
if( !$cat->parent ) {
echo '<li class="title"><h2>' . $cat->name . '</h2>';
echo '<ul>';
process_cat_tree( $cat->term_id );
}
endforeach;
wp_reset_query(); //to reset all trouble done to the original query
//
function process_cat_tree( $cat) {
$args = array('category__in' => array( $cat ), 'numberposts' => -1);
$cat_posts = get_posts( $args );
$id = $post->ID;
global $post;
if( $cat_posts ) :
foreach( $cat_posts as $menuPost ) :
echo '<li';
if ( $menuPost->ID == $post->ID ) { echo ' class="active"'; }
echo '>';
echo '' . $menuPost->post_title . '';
echo '</li>';
endforeach;
endif;
echo '</ul></li>';
}
?>
The above code is outputting UL/LI tags like this:
CATEGORY
Post
Post
Post
CATEGORY
Post
Post
Post
CATEGORY
Post
Post
Post
Admittedly, I don't exactly understand what you mean by "linking to #post-[ID]", but going with the question title:
If you use get_permalink() when echoing the link, you will get the permalink - that's just what that function does.
Use get_the_ID() instead, if you want the post-ID returned, or the_ID() if you want it displayed (the_ID() is the same as echo get_the_ID()).
Edited from here:
If you're otherwise happy with the above code, changing
echo '' . $menuPost->post_title . '';
to
echo '' . $menuPost->post_title . '';
ought to do it.
However, I'd go about it like so:
echo '<ul>';
$cat_args = array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories = get_categories($cat_args);
foreach($categories as $category) {
echo '<li class="title"><h2>' . $category->name . '</h2><ul>';
// query posts of that category:
$query_args = array(
'cat' => $category->cat_ID,
'posts_per_page' => -1
);
$your_query = new WP_Query( $query_args );
// loop through them:
while ( $your_query->have_posts() ) : $your_query->the_post();
echo '<li><a href="#post-';
the_ID();
echo '">';
the_title();
echo '</a></li>';
endwhile;
echo '</ul></li>';
// Reset Post Data
wp_reset_postdata();
}
echo '</ul>';