Getting started

Thanks for the message. That’s a lot of questions!

If you’re having issues showing the correct image size, you may need to Regenerate Thumbnails. WordPress creates the thumbnails when the image is first uploaded, so if you have changed image sizes after uploading the images you’ll be missing images at that specific size.

Can you provide a link to a page that has Display Posts and needs CSS help, and describe in more detail what you’re trying to achieve?

This plugin is not for customizing archive pages. The styling of your dynamic archive pages (blog home, category archive, tag archive, author archive…) should be handled by your WordPress theme. If you want a different style, update your theme.

The tutorial you reference on using template parts is for using your theme’s existing styles for posts in the custom post listings generated by the shortcode. It lets you make a listing of posts that matches your current blog styling. Here’s an example from a site I’m working on now: https://cl.ly/3fc97885672b

Code customizations can go in your theme’s functions.php file, a custom-built core functionality plugin, or the Code Snippets plugin (lets you add code snippets without coding your own plugin).

I have the regenerate plugin. I ran it again today

Link to the page I work on that has shortcode:
Flight Jacket

Scroll down to Inter Wars > Flight Jacket Type A-1

The image I call: rise-home-blog: 400×250 pixels (cropped to fit)

The short code I use:
[display-posts category="flight-jacket,inter-war" image_size="rise-home-blog" include_excerpt="true" excerpt_length="20" wrapper="div" wrapper_class="display-posts-listing image-top"]

Layout Text:
image-top and image-left seems to work now. I use custom css plugin. Sometimes effects of css takes aa day or two to sink in. Don’t know why. Maybe cashe.

Is it possible to keep txt within the width/height of the image for image-top/image-left respectively

Columns:
Is it possible to set a number of columns to display the called posts fx 3 and will it be responsive for small screen?

My CSS basically unedited from yours:

/* Display Posts - Left Align */
.display-posts-listing.image-left .listing-item {
	overflow: hidden; 
	margin-bottom: 32px;
	width: 100%;
}

.display-posts-listing.image-left .image {
	float: left;
	margin: 0 16px 0 0;
}

.display-posts-listing.image-left .title {
	display: block;
}

.display-posts-listing.image-left .excerpt-dash { 
	display: none; 
}

/* Display Posts - Top Align */
.display-posts-listing.image-top .listing-item {
	margin-bottom: 32px;
}

.display-posts-listing.image-top .listing-item .title {
	display: block;
}

.display-posts-listing.image-top .listing-item .excerpt-dash {
	display: none;
}

Also, can I display the heading as H2, H3 etc

Template Parts:

Your Summary and featured examples look great. The featured display is what I look for above. Txt aligning to image size, but I want it under a 400x250px image and txt aligning to adjust to the image.

Then I want them in columns across the width of the screen. Something like the Briefing Section on my front page.

– I have installed Code Snippet Plugin
– I have copied this to “functions.php” (into the plugin without breaking my site)

<?php
/**
 * Template Parts with Display Posts Shortcode
 * @author Bill Erickson
 * @see https://www.billerickson.net/template-parts-with-display-posts-shortcode
 *
 * @param string $output, current output of post
 * @param array $original_atts, original attributes passed to shortcode
 * @return string $output
 */
function be_dps_template_part( $output, $original_atts ) {
	// Return early if our "layout" attribute is not specified
	if( empty( $original_atts['layout'] ) )
		return $output;
	ob_start();
	get_template_part( 'partials/dps', $original_atts['layout'] );
	$new_output = ob_get_clean();
	if( !empty( $new_output ) )
		$output = $new_output;
	return $output;
}
add_action( 'display_posts_shortcode_output', 'be_dps_template_part', 10, 2 );

From here I’m lost …..

archive.php exist in my theme. Changing it does nothing
archive-featured.php (where should it go, what will it do, why not dps prefix?)
dps-large.php (where should it go)
small in the same place I guess

When adding Layout=”small,large,featured,summary” to the shortcode. Where is it specified which ones are available?

Will you share your code for summary and featured from your example above?

Changing archive/blog layout is not an option. I’m working from this example right now, which wont work either.

But just to be clear. archive.php is NOT the layout of the Blog page?

The reason images are displaying so large is you have the following included in the CSS on the page: img.attachment-rise-home-blog { width: 100%; }

That’s making your 400px wide image expand to the full length of the screen.

To keep the image at 400px and the text within the width of the image, add:

.display-posts-listing .listing-item { max-width: 400px; }

Here’s the CSS for responsive columns: https://displayposts.com/2019/01/04/post-grid-styling/

To change the post title to a heading element, you will need to use the output filter to modify it. Here’s a tutorial: https://displayposts.com/2019/02/26/use-headings-for-post-listing/

I do not recommend trying to edit your theme to use the template parts example unless you are an experienced WordPress developer. It ‘s not simple copy/paste – it requires careful coding and deep integration into your theme.

You have copied the be_dps_template_part() function into your theme. The next step is to define template partials for rendering the posts. If you wanted to create a “summary” layout, you could create a file in /wp-content/themes/[your-theme]/partials/dps-summary.php and place the code for rendering the post there (example). You could then use this layout with the shortcode: [display-posts layout="summary"].

Whatever you type in the layout parameter (ex: “something”), Display Posts will look for a dps-prefixed version in your theme’s partials directory (ex: /partials/dps-something.php).

If you want to pursue this method, I recommend hiring a WordPress developer to help you (see Codeable). The template partials are not designed for the average user. They are designed for theme developers to integrate their post summary features and styling directly in Display Posts.

Thx Bill

As it turns out, the Grid style sorted out the image size issue. I have two hits on my shortcode. They display above eachother. Why do they not float left and fill up rows first? Can I do that?

Headings for post listing is now working. Code added to snippets and I changed H3 to H4. That fits the bill better.

You added a class of “grid” but didn’t add any grid styling. You need the CSS shown here: https://displayposts.com/2019/01/04/post-grid-styling/

The CSS is already added: As you know WP complains about Grid Gap (Yellow error)

I also have an error (red) at
grid-template-columns: repeat( 2, 1fr );

and also the other

“Expected RBRACE”

I will look into other layouts tomorrow. Thx so much so far. It’s most appreciated.

Is it possible to place the heading above image?

It may be a caching issue. When I view the source of your page I cannot find any CSS starting with .display-posts-listing.grid .

The error checker in WordPress isn’t aware of modern CSS (grid), so it will notify you of errors that aren’t actually errors.

You can re-arrange the elements in the output (like moving the title above image) using the output filter. Here’s a tutorial: https://displayposts.com/2019/01/04/move-the-image-after-the-title/

Thx Bill

In my CSS I have 3 errors using your code.

The Grid is Yellow and I ignore it.

Here is a screendump of what I see:
CSS Error

Is it somehow possible in the shortcode to call posts that are in 2 or more categories?

[display-posts category="fishing,hiking"]

Exclude the ones in only fishing
…… Hiking

Include the posts in both Fishing and Hiking…

As mentioned above, those aren’t CSS errors, it’s an issue with WordPress’ css validator not being aware of modern CSS properties. There’s nothing wrong with the CSS.

You should use a taxonomy query for more advanced queries involving categories. To get posts in both fishing and hiking, use:

[display-posts taxonomy=”category” tax_term=”fishing, hiking” tax_operator=”AND”]

Hey Bill

I’m back at the Partials.

A general comment to my site. I have long suspected ghost bugs on my site, but I had no idea where to look. The other day I turned off the jetpack wp.com connection and turned it back on again. It was like flushing the toilet and a lot of missing stuff appeared.

I have experienced several times that some CSS is not picked up, or at least with significant delay.

My grid was not displaying as grid on iOS for weeks. But now I think it is sorted !?

You mention above that my grid is not CSS styled, however, I did add the CSS. Can you see if .display-posts-listing.grid is now working?

Partials:
I added a folder called “partials”. Inside is:
– dps-large.php
– dps-small.php

Your code is copy pasted.

in my shortcode I changed Layout=”heading-block” to Layout=”small” and the post does not render. I can’t view the page in frontend, and I can’t edit from backend.

As it turns out it will not accept layout small. Only heading-block

• This reply was modified 5 years, 6 months ago by hebhansen.