Help with categories showing on pages in a very specific way.

  • Unknown's avatar
    breadbakingandmore · Member ·

    Hi there, I’m relatively new to WordPress and am a complete novice when it comes to custom CSS. I’m trying to display my posts for a particular category on a page. A wonderful ‘Happiness engineer’ called Tiffany helped me to set this up as my theme does not support it as standard, but I like my theme and don’t particularly want to change it if I can avoid it.

    Tiffany sent me some CSS which enabled me to add the posts I wanted for a category on each of my recipe pages – [display-posts image_size="thumbnail" category="advanced" posts_per_page="20" wrapper="div" orderby="most recent"]. You can see an example of what I’ve done here: https://breadbakingandmore.com/recipes-from-bread-baking-and-more/bread-making-recipes/

    But I’d really like to display them as a grid, rather than a list. I’d also like the title of the post and it’s date to be displayed underneath rather than at the side and for them to display alphabetically rather than most recent first. With the grid I’d like there to be four columns showing a maximum of 8 posts for that category with a see more underneath.

    If possible, I’d like to add all of my recipe categories to one page so it would show Bread then pickles and preserves (similar to what I’ve got set up on my main recipe page now.

    You can see what I’m really trying to achieve here: http://thewholecook.com/recipes-2/, or even this one here: https://starringpamela.com/category/home/baking/

    A wordpress engineer tells me this is all possible, but I might need some help – hence me asking you guys.

    I do hope you can help.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there add this to your custom CSS for your bread page and see what you think. I’ve limited this to screens 600px and wider, so it will go back to the original design at 599px and narrower. 

    @media screen and (min-width: 600px) {
.page-id-243 .display-posts-listing {
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-ms-box-orient: horizontal;
	box-orient: horizontal;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.page-id-243 .display-posts-listing .listing-item {
  width: 30%;
  box-sizing: border-box;
  margin-bottom: 40px;
  text-align: center
}
.page-id-243 .display-posts-listing .listing-item .title {
  display: block;
}
.page-id-243 .display-posts-listing .listing-item img {
  width: 100% !important;
}
.page-id-243 .display-posts-listing .listing-item a.alignleft {
  float: none;
  border: none;
  margin-right: 0;
}
.page-id-243 .display-posts-listing .listing-item a {
  text-align: center;
}
}
  • Unknown's avatar
    thesacredpath · Member ·

    You can add additional shortcodes below what you have, but if there are a lot, and a lot of recipes, it could cause your page to load slowly, and also cause people to do a lot of scrolling up and down to find the section they wanted. I would suggest separate pages with entries in the menu so that they could quickly zero in on what they were looking for.

    Also, you will notice with the above code that your images have gotten fuzzy. Go into that page and for the image size in the shortcode, change it to “medium”.

  • Unknown's avatar
    breadbakingandmore · Member ·

    Thanks so much, I’m very grateful for your help. I’ll give it all a go and let you know how I get on.

  • Unknown's avatar
    thesacredpath · Member ·

    Great, and do let me know if you have any problems or questions.

  • The topic ‘Help with categories showing on pages in a very specific way.’ is closed to new replies.