Title: Getting started
Last modified: May 7, 2019

---

# Getting started

 *  Resolved [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/)
 * Hey
 * I added the plugin and it sort of works. but:
    – When adding shortcode and calling
   the image I want it is showed in oversize bad resolution rather than the true
   image size 400×250 – CSS flush left and top using the div container does not 
   work either
 * What am I doing wrong?
 * Next step:
    I would like to redesign my archive page entirely. Should I do this
   from admin > Pages > add new I did this using another plugin and I had no succes
   in pointing to that new archive page, so I’m a bit puzzled.
 * Now I came across this post on [template and theme](https://displayposts.com/2019/01/04/use-template-parts-to-match-your-themes-styling/)
   where you link to [partials](https://github.com/billerickson/EA-Starter/tree/master/partials)
   for the purpose.
 * Your archive.php in article and partials are not the same, and is this the file
   defing the layout of archive page?
 * In the above post you have a featured-archive.php example but no description/
   example on what it is/does. So what and how to?
 * I get the large and small part from your examples and I need that to work, but
   I can’t seem to get started here….
 * The last part that goes into code snippet or core function, is that another plugin
   I need and why?

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/getting-started-115/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/getting-started-115/page/2/?output_format=md)

 *  Plugin Author [Bill Erickson](https://wordpress.org/support/users/billerickson/)
 * (@billerickson)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11507077)
 * 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](https://wordpress.org/plugins/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](https://displayposts.com/2019/01/04/use-template-parts-to-match-your-themes-styling/)
   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](https://cl.ly/3fc97885672b)
 * Code customizations can go in your theme’s functions.php file, a custom-built
   [core functionality plugin](https://www.billerickson.net/core-functionality-plugin/),
   or the [Code Snippets](https://wordpress.org/plugins/code-snippets) plugin (lets
   you add code snippets without coding your own plugin).
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11507875)
 * I have the regenerate plugin. I ran it again today
 * Link to the page I work on that has shortcode:
    [Flight Jacket](https://ewarmy.com/flight-bomber-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;
       }
       ```
   
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11508021)
 * Also, can I display the heading as H2, H3 etc
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11508173)
 * 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](https://ewarmy.com/) 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?
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11508188)
 * Changing archive/blog layout is not an option. I’m working from [this example](https://www.wpthemedetector.com/create-archives-page/)
   right now, which wont work either.
 * But just to be clear. archive.php is NOT the layout of the Blog page?
 *  Plugin Author [Bill Erickson](https://wordpress.org/support/users/billerickson/)
 * (@billerickson)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11508998)
 * 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/](https://displayposts.com/2019/01/04/post-grid-styling/)
 *  to modify it. Here’s a tutorial: [https://displayposts.com/2019/02/26/use-headings-for-post-listing/](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](https://github.com/billerickson/EA-Starter/blob/master/partials/archive.php)).
   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](https://www.billerickson.net/go/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.
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11512717)
 * 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.
 *  Plugin Author [Bill Erickson](https://wordpress.org/support/users/billerickson/)
 * (@billerickson)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11513269)
 * 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/](https://displayposts.com/2019/01/04/post-grid-styling/)
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11514674)
 * 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.
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11514680)
 * Is it possible to place the heading above image?
 *  Plugin Author [Bill Erickson](https://wordpress.org/support/users/billerickson/)
 * (@billerickson)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11514826)
 * 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/](https://displayposts.com/2019/01/04/move-the-image-after-the-title/)
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11525602)
 * 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](https://ewarmy.com/wp-content/uploads/2019/05/Screen-Shot-2019-05-13-at-14.54.20.png)
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11525821)
 * 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…
 *  Plugin Author [Bill Erickson](https://wordpress.org/support/users/billerickson/)
 * (@billerickson)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/getting-started-115/#post-11526056)
 * 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](https://displayposts.com/2019/01/07/taxonomy-queries/)
   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”]
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [7 years ago](https://wordpress.org/support/topic/getting-started-115/#post-11556004)
 * 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 7 years ago by [hebhansen](https://wordpress.org/support/users/hebhansen/).

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/getting-started-115/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/getting-started-115/page/2/?output_format=md)

The topic ‘Getting started’ is closed to new replies.

 * ![](https://ps.w.org/display-posts-shortcode/assets/icon-256x256.jpg?rev=2940963)
 * [Display Posts - Easy lists, grids, navigation, and more](https://wordpress.org/plugins/display-posts-shortcode/)
 * [Support Threads](https://wordpress.org/support/plugin/display-posts-shortcode/)
 * [Active Topics](https://wordpress.org/support/plugin/display-posts-shortcode/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/display-posts-shortcode/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/display-posts-shortcode/reviews/)

## Tags

 * [partials](https://wordpress.org/support/topic-tag/partials/)
 * [posts](https://wordpress.org/support/topic-tag/posts/)
 * [templates](https://wordpress.org/support/topic-tag/templates/)

 * 16 replies
 * 2 participants
 * Last reply from: [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * Last activity: [7 years ago](https://wordpress.org/support/topic/getting-started-115/page/2/#post-11556180)
 * Status: resolved