I want to implement an ajax post filter based on category and found this which works: https://rudrastyh.com/wordpress/ajax-post-filters.html
The only thing is that I would like the post output from function.php to be different. Originally it is just:
echo '<h2>' . $query->post->post_title . '</h2>';
but I want to use my own post loop configuration:
<div <?php post_class( 'front-post-small col-front' ); ?> id="post-<?php the_ID(); ?>">
<a href="<?php echo esc_url( the_permalink() ); ?>">
<div class="front-post-img">
<?php the_post_thumbnail( array(756,512) ); ?>
<div class="post-caption">
<h3 class="text-uppercase front-post-title"><?php the_title(); ?></h3>
</div>
</div>
</a>
</div>
I have tried passing it with echo, but it either doesn't work at all or the classes and links are printed instead of producing links and css.
Solved:
echo '<div class="front-post-small col-front">';
echo '<a href="' . get_permalink() . '">';
echo '<div class="front-post-img">';
echo '<img' . the_post_thumbnail( array(756,512) ) . '>';
echo '<h3 class="text-uppercase front-post-title post-caption">' . $query->post->post_title . '</h3>';
echo '</div>';
echo '</a>';
echo '</div>';
Related
I'm trying to display the title, image, exterp and category of the latest post on top of a blog page so it stands out. I alredy have css styles in place to make it look right I just need to show the right elements in the right blocks. The image will be the background of the second column.
I came up with this code but it gives me critical WP errors. Could you point me in the right direction / help me correct my mistake please.
Here is the code:
function test() {
$args = array(
'posts_per_page' => 1,
'nopaging' => true
);
// set up new query
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) : $the_query->the_post();
echo '<a href="' . get_permalink() . '">';
echo '<h5 class="uppercase regular">' . get_cat_name() . '</h5></a>';
echo '</div>';
echo '<div class="is-divider divider clearfix"></div>';
echo '<div class="text">';
echo '<h2 class="m-font-size">' . get_the_title() . '</h2><p class="light">' . get_the_excerpt() . '</p>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="col medium-6 large-6">';
echo '<div class="col-inner">';
echo '<div class="banner has-hover bnr-bl">';
echo '<div class="banner-inner fill">';
echo '<div class="banner-bg fill">';
echo '<div class="bg fill bg-fill bg-loaded" style="background-image: url("' . get_the_post_thumbnail_url() . '");">';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
endwhile;
// reset post data
wp_reset_postdata();
}
add_shortcode( 'test', 'test' );
It slides in like this:
<div class="col medium-6 large-6">
<div class="col-inner">
<div class="banner has-hover">
<div class="banner-inner fill">
<div class="banner-bg fill">
<div class="bg fill bg-fill bg-loaded"></div>
</div>
<div class="banner-layers container">
<div class="fill banner-link"></div>
<div class="text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text">
<div class="text ">
<div class="text-inner text-center">
<div class="text">
[test]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Shortcode callback must return not echo
https://developer.wordpress.org/reference/functions/add_shortcode/
Note that the function called by the shortcode should never produce an output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode.
So instead of echo you need to collect your post into some variable and return it
function test() {
$html = '';
$args = array(
'posts_per_page' => 1,
'nopaging' => true
);
// set up new query
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) : $the_query->the_post();
$html .= '<a href="' . get_permalink() . '">';
$html .= '<h5 class="uppercase regular">' . get_cat_name() . '</h5></a>';
// ....and so on
$html .= '</div>';
endwhile;
// reset post data
wp_reset_postdata();
return $html;
}
add_shortcode( 'test', 'test' );
I'm trying to rearrange the layout of my 'recent posts' in Wordpress. I would like the post's thumbnail image to appear below the 'post header' and 'excerpt'. I don't know PHP and wherever I move the code it doesn't seem to work.
If anyone could please advise me on what code to move and where would be a great help!
<?php }
}
else {
if ( has_post_thumbnail() ) { echo '' . get_the_post_thumbnail($post->ID, 'portfolio-thumb', array('title' => '')) . ''; }
}
?>
<div class="post-header">
<h1 class="title"><?php the_title(); ?></h1>
<span class="meta-author"><?php the_author_posts_link(); ?> </span> <span class="meta-category"> | <?php the_category(', '); ?> </span> <span class="meta-comment-count"> | <a href="<?php comments_link(); ?>">
<?php comments_number( __('No Comments',NECTAR_THEME_NAME), __('One Comment',NECTAR_THEME_NAME), '% '. __('Comments',NECTAR_THEME_NAME) ); ?></a> </span>
</div><!--/post-header-->
<?php
$excerpt_length = (!empty($options['blog_excerpt_length'])) ? intval($options['blog_excerpt_length']) : 30;
echo '<div class="excerpt">' . nectar_excerpt($excerpt_length) . '</div>';
} // default style
You can save the string in a variable. Then echo the variable where you want the image to appear:
First define the variable outside of your if/else scope (in the top of the file).
$thumbnail = '';
Then in the else scope, fill the variable with the HTML.
else {
if ( has_post_thumbnail() ) {
$thumbnail =
'<a href="' . get_permalink() . '">' .
get_the_post_thumbnail(
$post->ID,
'portfolio-thumb',
array('title' => '')
) .
'</a>';
}
}
Now echo it where you want it to appear (below excerpt).
echo $thumbnail;
I want to make a shortcode out of this php code that displays recent blog posts with css grid. I'm displaying the image and other meta-data about each blog.
<div class="wrapper">
<?php $q = new WP_Query( 'posts_per_page=3' ); ?>
<div class="recent-blogs">
<?php while ( $q->have_posts() ) : $q->the_post(); ?>
<div class="blog-item">
<h3 class="title"><?php the_title(); ?></h3>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>
<img class="image" src="<?php echo $url ?>" />
<div class="avatar"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
<div class="author"><?php the_author_posts_link(); ?></div>
<div class="time"><?php the_time('m.d.y'); ?></div>
<div class="category"><?php the_category(); ?></div>
<div class="comments"><?php comments_number(); ?></div>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
Basically the template is now being displayed in page.php after all the content and i want to have more control with my page builder so i can place it where i want.
My php skills are bad and i tried concatenating the html into a single string but i always screw up because of the loop and all these php variables. Also tried using ob_start(), ob_get_clean() and ob_get_contents() but for some reason i end up with an infinite loop.
function recent_blogs_grid() {}
add_shortcode('recent_blogs_grid', 'recent_blogs_grid');
I solved it in the end and i didn't have to do this the hard and stupid way like its done with the first code here bellow.
function recent_blogs_grid() {
$q = new WP_Query( 'posts_per_page=3' );
echo '<div class="recent-blogs-wrapper">';
echo '<div class="recent-blogs-gallery">';
while ( $q->have_posts() ) : $q->the_post();
echo '<div class="recent-blogs-item">';
echo '<h3 class="blog-title-meta"><a href="';
echo the_permalink();
echo '">';
echo the_title();
echo '</a></h3>';
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
echo '<a href="';
echo the_permalink();
echo '"><img class="blog-image-meta" src="';
echo $url;
echo '" /></a>';
echo '<div class="blog-metadata-wrapper">';
echo '<div class="blog-avatar-meta">';
echo get_avatar( get_the_author_meta('ID'), 40);
echo '</div>';
echo '<span class="blog-author-meta">';
echo the_author_posts_link();
echo '</span>';
echo '<span class="blog-datetime-meta"><i class="fa fa-clock-o"></i>';
echo the_time('m.d.y');
echo '</span>';
echo '<span class="blog-category-meta"><i class="fa fa-tags"></i>';
echo the_category();
echo '</span>';
echo '<span class="blog-comments-meta"><i class="fa fa-commenting"></i>';
echo comments_number();
echo '</span>';
echo '</div>';
echo the_excerpt();
echo '<a class="blog-read-more" href="';
echo the_permalink();
echo '">Read More</a>';
echo '</div>';
endwhile;
echo '</div>';
echo '</div>';
wp_reset_query();
}
I just pasted the original code in another file and imported it inside my function where i am creating the shortcode. Since i can't edit the original question i asked, this is the original html stuff in its own file "recent-blogs-grid-shortcode.php".
<div class="recent-blogs-wrapper">
<?php $q = new WP_Query( 'posts_per_page=3' ); ?>
<div class="recent-blogs-gallery">
<?php while ( $q->have_posts() ) : $q->the_post(); ?>
<div class="recent-blogs-item">
<h3 class="blog-title-meta">
<?php the_title(); ?>
</h3>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>
<a href="<?php the_permalink(); ?>">
<img class="blog-image-meta" src="<?php echo $url ?>" />
</a>
<div class="blog-metadata-wrapper">
<div class="blog-avatar-meta"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
<span class="blog-author-meta"><?php the_author_posts_link(); ?></span>
<span class="blog-datetime-meta"><i class="fa fa-clock-o"></i><?php the_time('m.d.y'); ?></span>
<span class="blog-category-meta"><i class="fa fa-tags"></i><?php the_category(); ?></span>
<span class="blog-comments-meta"><i class="fa fa-commenting"></i><?php comments_number(); ?></span>
</div>
<?php the_excerpt(); ?>
<a class="blog-read-more" href="<?php the_permalink(); ?>">Read More</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
And i just used require pretty much to import it inside my function
function recent_blogs_grid() {
require_once('recent-blogs-grid-shortcode.php');
}
add_shortcode('recent_blogs_grid', 'recent_blogs_grid');
I am trying to simply output all posts but everything is working fine but I want to add the classes in the tag but the classes gets written in plain text not into the tag.
my code:
<?php
if (have_posts()) :
// Start the Loop.
while (have_posts()) : the_post();
echo '<article id="post-' . get_the_ID() . '" ' . post_class() . '>';
twentyfourteen_post_thumbnail();
the_title('<h1 class="entry-title">', '</h1>');
echo '<div class="entry-summary">';
the_excerpt();
echo '</div>';
echo '</article>';
endwhile;
endif;
?>
I think it has something to do with the chaining but I tried everything... :(
Replace
echo '<article id="post-' . get_the_ID() . '" ' . post_class() . '>';
with
echo '<article id="post-' . get_the_ID() . '" ';
post_class();
echo '>';
I've currently set Wordpress to only show the latest 5 posts in the blog page.
It works correctly and the post excerpts are being shown as desired.
Only problem is, the 6th post is not shown at all and pagination is not added.
I need a 'Previous/Next' system to show the other pages but couldn't find how to implement it anywhere.
Current theme code:
<?php
if (is_page()) {
the_content();
}
if (is_front_page()) {
the_content();
}
if ((is_single())) {
echo '<h2 class="entry-title"><a href="'; echo the_permalink(); echo'" title="'; the_title(); echo '">'; the_title();
echo '</a>';
echo '</h2>';
echo '<h6>'; the_excerpt(); '</h6>';
}
if ((is_home())) {
echo '<h2 class="entry-title"><a href="'; echo the_permalink(); echo'" title="'; the_title(); echo '">'; the_title();
echo '</a>';
echo '</h2>';
echo '<h6>'; the_excerpt(); '</h6>';
echo '<h4>';
echo '<a href="'; echo the_permalink(); echo '">';
echo '<img src="'; bloginfo( 'template_directory' ); echo '/images/read_more.gif" alt="Read more..." border="0" />';
echo '</a>';
echo '</h4>';
echo '<hr />';
}
?>
<?php ?>
</div>
<div class="body-bottom"></div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php get_footer(); ?>
This plugin is also useful for paging.
http://www.devdevote.com/cms/wordpress-plugins/wp-paging
you can also use wordpress default paging code:
For Pagination u can use plugin NAME WP-PageNavi plugin.
Plugin Url :- http://wordpress.org/extend/plugins/wp-pagenavi/